/* NEXUS theme layer — #050402 base with a glowing particle arch, fine diagonal grid and a warm top glow;
   Newsreader serif headings, JetBrains Mono uppercase labels, L-shaped corner brackets on frames.
   Orange (#FF6400 / #FFA500) is replaced by gold, and every frame is heavy frosted glass so the
   particle field glows through. Loaded after app.css; restyles only — features and Arabic/RTL unchanged. */

@font-face { font-family: "Newsreader"; src: url("/static/fonts/newsreader-latin-var.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
/* Arabic: IBM Plex Sans Arabic (UI/body) + Noto Kufi Arabic (headings) — loaded only when Arabic glyphs appear */
@font-face { font-family: "Aii Arabic"; src: url("/static/fonts/plex-arabic-300.woff2") format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Aii Arabic"; src: url("/static/fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Aii Arabic"; src: url("/static/fonts/plex-arabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Aii Arabic"; src: url("/static/fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Aii Arabic"; src: url("/static/fonts/plex-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Aii Arabic Display"; src: url("/static/fonts/noto-kufi-arabic-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/jetbrains-mono-latin-var.woff2") format("woff2"); font-weight: 100 600; font-display: swap; }

:root {
  --bg: #050402;
  --bg-2: #090703;
  /* glass tints */
  --glass: rgba(255, 228, 160, 0.045);
  --glass-2: rgba(255, 228, 160, 0.07);
  --glass-3: rgba(255, 228, 160, 0.11);
  --glass-edge: rgba(255, 228, 160, 0.14);
  --glass-hi: rgba(255, 228, 160, 0.22);
  --blur: blur(26px) saturate(170%);
  --panel: var(--glass);
  --panel-2: var(--glass-2);
  --panel-3: var(--glass-3);
  --line: rgba(255, 228, 160, 0.09);
  --line-2: rgba(255, 228, 160, 0.15);
  /* orange → gold */
  --gold: #d4af37;          /* was #FF6400 */
  --gold-2: #f0c75e;        /* was #FFA500 */
  --gold-3: #8a6d1d;
  --gold-deep: #2b2208;     /* was #331B0E */
  --gold-deep-2: #3f3210;   /* was #4D2915 */
  --gold-tint: #120f05;     /* was #120B07 */
  --gold-soft: rgba(212, 175, 55, 0.10);
  --text: #ffffff;
  --muted: #cdb88a;
  --faint: #a08a58;
  --ink-on-gold: #0b0900;
  --radius: 16px;
  --radius-s: 10px;
  --shadow: 0 22px 60px -18px rgba(0, 0, 0, 0.75);
  --serif: "Newsreader", "Aii Arabic Display", Georgia, "Times New Roman", serif;
  --ar: "Aii Arabic", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
  --ar-display: "Aii Arabic Display", "Aii Arabic", "Segoe UI", sans-serif;
  --sans: "Inter", "Aii Arabic", "Segoe UI", system-ui, -apple-system, "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --font: var(--sans);
}

html, body { background: var(--bg); }
body { color: var(--muted); background-image: none; }
::selection { background: rgba(212, 175, 55, 0.3); color: #fff; }
a { color: var(--gold-2); }
strong, b { color: #fff; font-weight: 500; }
.gold { color: var(--gold-2); }

/* ── background: particle arch canvas + diagonal grid + warm glow ── */
#ambient-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; width: 100vw; height: 100vh; }
.orbital-bg { display: none; }
body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .16;
  background-image: linear-gradient(135deg, rgba(255,228,160,.08) 1px, transparent 1px); background-size: 20px 20px; }
body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(212,175,55,.17), transparent 34rem),
              radial-gradient(circle at 85% 28%, rgba(240,199,94,.06), transparent 28rem),
              linear-gradient(180deg, rgba(3,3,3,0) 0%, rgba(3,3,3,.45) 85%); }
#root, .toast-wrap { position: relative; z-index: 2; }
.toast-wrap { position: fixed; z-index: 90; }

/* ── typography ── */
h1, h2, h3, .agents-title h1, .side-h h2, .panel-h h2, .panel-h h3, .drawer h2, .gate-title {
  font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.agents-title h1 { font-size: 34px; line-height: 1; }
.agents-title h1 em, .gate-title em { font-style: italic; color: var(--gold-2); }
.side-h h2 { font-size: 20px; }
.panel-h h2, .panel-h h3 { font-size: 18px; }
.drawer h2 { font-size: 28px; }
.agents-title .sub, .panel-h .meta, table.t th, .stat .l, .tab, .chip .t, .settings-nav .btn, .pipe-step, .footer, .clock .tz,
.demo-banner, .conn-pill, .gate-kicker {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 500; }
.agents-title .sub { color: var(--gold-2); }
.brand-title { font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.brand-title .aii { color: var(--gold-2); }
.brand-title .slash { color: var(--faint); }
.li .t, .mb-addr { color: #fff; font-weight: 500; }
.stat .v { font-family: var(--serif); color: #fff; font-weight: 500; font-size: 36px; letter-spacing: -0.02em; }
.side-sub, .mb-role, .legend .desc, .li .m, .dl dt, label.field { color: var(--faint); }

/* Arabic: serif/mono have no Arabic glyphs — use the Arabic-capable UI font, no caps or tracking */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .agents-title .sub, [dir="rtl"] .panel-h .meta, [dir="rtl"] table.t th,
[dir="rtl"] .stat .l, [dir="rtl"] .tab, [dir="rtl"] .chip .t, [dir="rtl"] .settings-nav .btn, [dir="rtl"] .pipe-step, [dir="rtl"] .footer,
[dir="rtl"] .demo-banner, [dir="rtl"] .conn-pill, [dir="rtl"] .gate-kicker, [dir="rtl"] .btn, [dir="rtl"] .mobile-nav button {
  font-family: var(--ar); text-transform: none; letter-spacing: 0; }
[dir="rtl"] .agents-title .sub, [dir="rtl"] .panel-h .meta, [dir="rtl"] table.t th, [dir="rtl"] .stat .l, [dir="rtl"] .tab,
[dir="rtl"] .chip .t, [dir="rtl"] .pipe-step, [dir="rtl"] .footer, [dir="rtl"] .demo-banner { font-size: 12.5px; }
[dir="rtl"] .agents-title h1 em { font-style: normal; }

/* ── GLASS: every frame is heavy frosted glass with a bright top edge ── */
.panel, .summary-card, .mb-card, .chip, .stat, .trend-card, .src-row, .table-wrap, .login, .menu, .drawer, .toast, .topbar, .sidebar, .footer, .mobile-nav {
  background: linear-gradient(160deg, rgba(255,228,160,.085) 0%, rgba(255,228,160,.035) 38%, rgba(255,228,160,.02) 100%);
  border: 1px solid var(--glass-edge);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 rgba(255,228,160,.16), inset 0 0 0 1px rgba(255,228,160,.02), 0 22px 60px -18px rgba(0,0,0,.75);
}
.panel, .summary-card, .trend-card, .table-wrap, .login { border-radius: var(--radius); }
.mb-card, .chip, .stat, .src-row { border-radius: 12px; }
.panel { position: relative; }
.table-wrap { box-shadow: inset 0 1px 0 rgba(255,228,160,.1); background: rgba(255,228,160,.025); }
/* chrome glass: lighter, no outer shadow */
.topbar { border-width: 0 0 1px; border-radius: 0; box-shadow: inset 0 -1px 0 rgba(255,228,160,.04); background: rgba(10, 8, 3, .42); }
.sidebar { border-radius: 0; box-shadow: none; background: rgba(255,228,160,.025); border-width: 0; }
.sidebar.left { border-inline-end: 1px solid var(--line); }
.sidebar.right { border-inline-start: 1px solid var(--line); }
.footer { border-width: 1px 0 0; border-radius: 0; box-shadow: none; background: rgba(10, 8, 3, .5); color: var(--faint); }
.menu { border-radius: 14px; background: rgba(10, 8, 3, .72); }
.drawer { border-radius: 20px 0 0 20px; background: rgba(10, 8, 3, .62); border-width: 0 0 0 1px; }
[dir="rtl"] .drawer { border-radius: 0 20px 20px 0; border-width: 0 1px 0 0; }
.drawer-backdrop { background: rgba(0,0,0,.35); backdrop-filter: blur(4px); }
.toast { border-radius: 12px; border-color: rgba(212,175,55,.4); background: rgba(10, 8, 3, .7); }
/* glass sheen highlight sweeping the top-left of big frames */
.panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,228,160,.07) 0%, rgba(255,228,160,0) 32%); }
.stat, .chip, .trend-card { position: relative; overflow: hidden; transition: transform .3s, border-color .3s, background .3s; }
.stat:hover, .chip:hover, .trend-card:hover { transform: translateY(-3px); border-color: rgba(212,175,55,.42);
  background: linear-gradient(160deg, rgba(212,175,55,.12), rgba(255,228,160,.03) 50%); }
.mb-card:hover { border-color: rgba(255,228,160,.24); }
.mb-card[aria-checked="true"] { border-color: rgba(212,175,55,.55);
  background: linear-gradient(160deg, rgba(212,175,55,.16), rgba(212,175,55,.04) 60%); box-shadow: inset 0 1px 0 rgba(255,228,160,.18), 0 10px 30px -10px rgba(212,175,55,.3); }

/* L-shaped gold corner brackets on frames (template signature) */
.panel::before { content: ""; position: absolute; inset: 9px; pointer-events: none; border-radius: 4px;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / 18px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top left / 1px 18px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 18px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 1px 18px no-repeat;
  opacity: .55; }
.panel > * { position: relative; z-index: 1; }

/* ── controls (rounded-lg like the template) ── */
.btn { border-radius: 9px; background: rgba(255,228,160,.04); border: 1px solid rgba(255,228,160,.12); color: #fff; font-weight: 500;
  backdrop-filter: blur(10px); transition: transform .3s, background .3s, border-color .3s, color .3s; }
.btn:hover { background: rgba(255,228,160,.08); border-color: rgba(255,228,160,.22); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--gold); color: var(--ink-on-gold); border-color: rgba(212,175,55,.6); position: relative; overflow: hidden;
  box-shadow: 0 10px 28px -10px rgba(212,175,55,.6), inset 0 1px 0 rgba(255,228,160,.35); }
.btn.primary::after { content: ""; position: absolute; inset: 0; background: rgba(255,228,160,.2); transform: translateY(100%); transition: transform .3s; }
.btn.primary:hover { background: var(--gold-2); color: var(--ink-on-gold); filter: none; }
.btn.primary:hover::after { transform: translateY(0); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.danger { border-color: rgba(239,95,85,.45); color: #ffb3ad; }
.icon-btn { border-radius: 9px; background: rgba(255,228,160,.04); border: 1px solid rgba(255,228,160,.12); color: #f3e8cc; }
.icon-btn:hover { border-color: rgba(212,175,55,.45); background: rgba(212,175,55,.1); }
.icon-btn .dot { background: var(--gold); color: var(--ink-on-gold); }
.input, select.input, textarea.input { background: rgba(255,228,160,.04); border: 1px solid rgba(255,228,160,.12); border-radius: 9px; color: #fff;
  backdrop-filter: blur(12px); }
.input:focus { border-color: rgba(212,175,55,.6); box-shadow: 0 0 0 3px rgba(212,175,55,.15); }
.input::placeholder { color: #a08a58; }
.lang-btn { border-radius: 9px; background: var(--gold-deep); border: 1px solid #5c4a17; color: #fff; }
.lang-btn:hover { background: var(--gold-deep-2); border-color: rgba(212,175,55,.7); }
.lang-btn svg { color: var(--gold-2); }
.conn-pill { border-radius: 999px; border: 1px solid rgba(212,175,55,.25); background: rgba(212,175,55,.1); color: #fdf3d4; }
.conn-pill.live { color: #3fd27a; border-color: rgba(63,210,122,.45); background: rgba(63,210,122,.08); }
.badge { border-radius: 999px; background: rgba(255,228,160,.05); backdrop-filter: blur(8px); }
.badge.b-demo { color: var(--ink-on-gold); background: repeating-linear-gradient(135deg, var(--gold) 0 6px, var(--gold-2) 6px 12px); border-color: var(--gold); }
.num { border-radius: 6px; background: var(--gold); color: #fff; border: 0; font-family: var(--mono); font-weight: 600; color: var(--ink-on-gold); }
.unread { background: var(--gold); color: var(--ink-on-gold); }
.switch { background: rgba(255,228,160,.1); border-color: rgba(255,228,160,.18); }
.switch[aria-checked="true"]:not(.agent-switch) { background: var(--gold); border-color: var(--gold); }
.radio { border-color: rgba(255,228,160,.3); }
[aria-checked="true"] .radio { border-color: var(--gold-2); }
[aria-checked="true"] .radio::after { background: var(--gold-2); }
.demo-banner { background: rgba(212,175,55,.08); color: #fdf3d4; border-bottom: 1px solid rgba(212,175,55,.2); backdrop-filter: blur(10px); }
.resizer:hover::after, .resizer:focus-visible::after, .resizer.dragging::after { background: rgba(212,175,55,.55); }

/* ── tabs: mono labels; active = gold-tinted glass pill (template nav) ── */
.tabs { border-bottom: 0; gap: 4px; padding: 6px; border-radius: 12px; background: rgba(10, 8, 3, .4); border: 1px solid rgba(255,228,160,.1);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 rgba(255,228,160,.08); }
.tab { border-radius: 8px; padding: 7px 12px; color: #cdb88a; border: 1px solid transparent; transition: background .3s, color .3s; }
.tab:hover { background: rgba(255,228,160,.05); color: #fff; }
.tab[aria-selected="true"] { color: #fdf3d4; background: rgba(212,175,55,.12); border-color: rgba(212,175,55,.25); box-shadow: none; }
.settings-nav .btn[aria-current="page"] { color: #fdf3d4; background: rgba(212,175,55,.12); border-color: rgba(212,175,55,.3); }

/* ── icon tiles ── */
.panel-h .ico, .side-h .ico, .chip .ico, .agents-title .gold, .src .ico, .pipe-step .ico, .note svg { color: var(--gold-2); }
.agents-title .gold { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 12px; background: var(--gold-tint);
  border: 1px solid rgba(212,175,55,.25); box-shadow: inset 0 1px 0 rgba(255,228,160,.08); }

/* ── tables & lists ── */
table.t th { background: rgba(10, 8, 3, .6); backdrop-filter: blur(14px); color: #a08a58; border-bottom: 1px solid var(--line); }
table.t td { border-bottom: 1px solid var(--line); color: #f0e4c4; }
table.t tbody tr.clickable:hover, table.t tbody tr.selected { background: rgba(212,175,55,.07); }
.li { border-radius: 10px; border-bottom: 1px solid var(--line); }
.li:hover { background: rgba(212,175,55,.07); }
.section { border-top: 1px solid var(--line); }

/* ── meters & charts ── */
.prio-bar .track, .meter, .qtrack, .mover .track { background: rgba(255,228,160,.1); }
.meter > i, .qfill, .mover .fill { background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.bar { background: linear-gradient(180deg, rgba(212,175,55,.6), rgba(138,109,29,.25)); border-radius: 3px 3px 1px 1px; }
.bar-col.now .bar { background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 0 18px rgba(212,175,55,.5); }
.bar-v { font-family: var(--mono); }
.pipe-arrow { color: rgba(255,228,160,.25); }
.bodytext, .log { background: rgba(255,228,160,.035); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(12px); }
.map { border-radius: 14px; border: 1px solid var(--glass-edge); }
.leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.62) contrast(1.15) sepia(.3) hue-rotate(-5deg); }
.pin { background: var(--gold); box-shadow: 0 0 0 4px rgba(212,175,55,.25), 0 0 14px rgba(212,175,55,.6); border-color: #050402; }
.skyline { color: rgba(212,175,55,.45); }
.skyline .kw b { color: var(--gold-2); }

/* ── CTA: gold button with the rising sheen (Sign in, Verify, Connect sources) ── */
.cta-shell { display: block; padding: 0; background: none; animation: none; overflow: visible; }
.cta-shell::before { display: none; }
.cta-shell > .btn { width: 100%; justify-content: center; padding: 12px 20px; font-size: 14px; }
.cta-shell > .btn svg { transition: transform .3s; }
[dir="ltr"] .cta-shell > .btn:hover svg { transform: translateX(3px); }

/* ── gate ── */
.login.gate { width: min(460px, 100%); padding: 40px 34px 30px; gap: 16px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,228,160,.09), rgba(255,228,160,.025) 45%, rgba(255,228,160,.015)); position: relative; }
.login.gate::before { content: ""; position: absolute; inset: 12px; pointer-events: none;
  background:
    linear-gradient(rgba(212,175,55,.6), rgba(212,175,55,.6)) top left / 24px 1px no-repeat,
    linear-gradient(rgba(212,175,55,.6), rgba(212,175,55,.6)) top left / 1px 24px no-repeat,
    linear-gradient(rgba(212,175,55,.6), rgba(212,175,55,.6)) top right / 24px 1px no-repeat,
    linear-gradient(rgba(212,175,55,.6), rgba(212,175,55,.6)) top right / 1px 24px no-repeat,
    linear-gradient(rgba(212,175,55,.6), rgba(212,175,55,.6)) bottom left / 24px 1px no-repeat,
    linear-gradient(rgba(212,175,55,.6), rgba(212,175,55,.6)) bottom left / 1px 24px no-repeat,
    linear-gradient(rgba(212,175,55,.6), rgba(212,175,55,.6)) bottom right / 24px 1px no-repeat,
    linear-gradient(rgba(212,175,55,.6), rgba(212,175,55,.6)) bottom right / 1px 24px no-repeat; }
.gate-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; color: #fdf3d4;
  border: 1px solid rgba(212,175,55,.22); background: rgba(212,175,55,.1); }
.gate-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); }
.gate-kicker i:last-child { display: none; }
.gate-logo { width: 116px; filter: drop-shadow(0 12px 30px rgba(212,175,55,.3)); }
.gate-title { font-size: 46px !important; line-height: .98; margin: 2px 0 0 !important; background: none; -webkit-background-clip: initial; background-clip: initial;
  color: #fff !important; text-transform: none; letter-spacing: -0.025em !important; font-weight: 500 !important; }
.gate-title em { display: inline; }
.gate-rule { display: none; }
.login.gate input[type=password], .login.gate .code-input { border-radius: 9px; }

@media (max-width: 760px) {
  .agents-title h1 { font-size: 24px; }
  .agents-title .gold { width: 44px; height: 44px; }
  .gate-title { font-size: 36px !important; }
  .mobile-nav { border-width: 1px 0 0; border-radius: 0; background: rgba(10, 8, 3, .6); }
  .mobile-nav button:hover, .mobile-nav button[aria-current="true"] { color: var(--gold-2); }
  .tabs { padding: 4px; }
}
@media (prefers-reduced-motion: reduce) { .stat:hover, .chip:hover, .trend-card:hover, .btn:hover { transform: none; } }

/* sidebars that slide over content (tablet/phone) need denser glass to stay readable */
@media (max-width: 1100px) { .sidebar.right { background: rgba(10, 8, 3, .82); } }
@media (max-width: 760px) { .sidebar.left { background: rgba(10, 8, 3, .85); } }

/* extra glass: light catches the top / leading edges like real glass panes */
.panel, .summary-card, .mb-card, .chip, .stat, .trend-card, .src-row, .login {
  border-top-color: rgba(255,228,160,.30); border-inline-start-color: rgba(255,228,160,.20); }
.agents-title .sub { display: block; margin-top: 8px; }

/* ═══ GLOSS: polished-glass reflections on every frame ═══ */
.panel, .summary-card, .mb-card, .chip, .stat, .trend-card, .src-row, .login, .menu, .drawer, .table-wrap {
  background:
    /* mirror reflection on the upper half, hard horizon like real gloss */
    linear-gradient(180deg, rgba(255,228,160,.16) 0%, rgba(255,228,160,.07) 34%, rgba(255,228,160,.025) 50%, rgba(255,228,160,0) 51%, rgba(255,228,160,.035) 100%),
    /* soft diagonal glass body */
    linear-gradient(160deg, rgba(255,228,160,.07) 0%, rgba(255,228,160,.025) 45%, rgba(212,175,55,.035) 100%);
  border-color: rgba(255,228,160,.16);
  border-top-color: rgba(255,228,160,.42);
  border-inline-start-color: rgba(255,228,160,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,228,160,.55),          /* bright specular rim */
    inset 0 -1px 0 rgba(255,228,160,.07),
    inset 0 0 24px rgba(255,228,160,.035),        /* inner glow */
    0 1px 0 rgba(255,228,160,.04),
    0 24px 60px -18px rgba(0,0,0,.8);
  backdrop-filter: blur(30px) saturate(190%) brightness(1.06); -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.06);
}
.table-wrap { box-shadow: inset 0 1px 0 rgba(255,228,160,.35), inset 0 0 18px rgba(255,228,160,.025); }
.menu, .drawer { background:
    linear-gradient(180deg, rgba(255,228,160,.12) 0%, rgba(255,228,160,.04) 30%, rgba(255,228,160,0) 31%),
    rgba(10, 8, 3, .68); }
.mb-card[aria-checked="true"] { background:
    linear-gradient(180deg, rgba(255,240,200,.20) 0%, rgba(255,240,200,.08) 34%, rgba(212,175,55,.04) 50%, rgba(212,175,55,0) 51%),
    linear-gradient(160deg, rgba(212,175,55,.20), rgba(212,175,55,.05) 60%);
  border-top-color: rgba(255,226,150,.7); }
.stat:hover, .chip:hover, .trend-card:hover { background:
    linear-gradient(180deg, rgba(255,240,200,.18) 0%, rgba(255,240,200,.07) 34%, rgba(212,175,55,.03) 50%, rgba(212,175,55,0) 51%),
    linear-gradient(160deg, rgba(212,175,55,.16), rgba(255,228,160,.03) 55%);
  border-top-color: rgba(255,226,150,.65); }
/* static glare spot in the top-left corner of the big frames */
.panel::after { background:
    radial-gradient(120% 60% at 0% 0%, rgba(255,228,160,.12), rgba(255,228,160,0) 55%),
    linear-gradient(115deg, rgba(255,228,160,.06) 0%, rgba(255,228,160,0) 30%); }
/* a glossy shine sweeps across the small cards now and then */
.stat::before, .chip::before, .trend-card::before, .mb-card::before {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%; pointer-events: none; z-index: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255,228,160,.0) 20%, rgba(255,228,160,.22) 50%, rgba(255,228,160,0) 80%, transparent 100%);
  transform: translateX(-160%) skewX(-18deg); animation: gloss-sweep 7s ease-in-out infinite; }
.mb-card { position: relative; overflow: hidden; }
.stat:nth-child(2)::before, .chip:nth-child(2)::before { animation-delay: .9s; }
.stat:nth-child(3)::before, .chip:nth-child(3)::before { animation-delay: 1.8s; }
.stat:nth-child(4)::before, .chip:nth-child(4)::before { animation-delay: 2.7s; }
.stat:nth-child(5)::before { animation-delay: 3.6s; } .stat:nth-child(6)::before { animation-delay: 4.5s; }
.mb-card:nth-child(2)::before { animation-delay: 1.2s; } .mb-card:nth-child(3)::before { animation-delay: 2.4s; }
.mb-card:nth-child(4)::before { animation-delay: 3.6s; } .mb-card:nth-child(5)::before { animation-delay: 4.8s; }
.stat > *, .chip > *, .trend-card > *, .mb-card > * { position: relative; z-index: 1; }
.mb-card .mb-tools { position: absolute; z-index: 2; }
@keyframes gloss-sweep { 0%, 62% { transform: translateX(-160%) skewX(-18deg); } 82%, 100% { transform: translateX(420%) skewX(-18deg); } }

/* glossy controls */
.btn, .icon-btn, .input, select.input, .tabs, .lang-btn, .conn-pill {
  box-shadow: inset 0 1px 0 rgba(255,228,160,.28), inset 0 -1px 0 rgba(0,0,0,.25); }
.btn, .icon-btn { background: linear-gradient(180deg, rgba(255,228,160,.12) 0%, rgba(255,228,160,.05) 50%, rgba(255,228,160,.02) 51%, rgba(255,228,160,.05) 100%); }
.btn.primary { background: linear-gradient(180deg, #fbe7a1 0%, #f0c75e 22%, #d4af37 52%, #b8922a 53%, #d4af37 100%); border-color: #e9c867;
  box-shadow: inset 0 1px 0 rgba(255,228,160,.75), inset 0 -2px 6px rgba(80,55,0,.35), 0 10px 28px -8px rgba(212,175,55,.65); text-shadow: 0 1px 0 rgba(255,240,190,.5); }
.btn.primary:hover { background: linear-gradient(180deg, #fff1bd 0%, #f6d677 22%, #e0bb45 52%, #c49d31 53%, #e0bb45 100%); }
.tab[aria-selected="true"] { background: linear-gradient(180deg, rgba(255,226,150,.30) 0%, rgba(212,175,55,.16) 50%, rgba(212,175,55,.08) 51%, rgba(212,175,55,.14) 100%);
  border-color: rgba(212,175,55,.45); box-shadow: inset 0 1px 0 rgba(255,240,200,.5); }
.num, .unread, .icon-btn .dot { background: linear-gradient(180deg, #fbe7a1 0%, #e6c35a 45%, #c9a432 55%, #d4af37 100%); box-shadow: inset 0 1px 0 rgba(255,228,160,.7); }
.lang-btn { background: linear-gradient(180deg, #4a3c14 0%, #2b2208 50%, #221a05 51%, #2b2208 100%); }
.switch[aria-checked="true"]:not(.agent-switch) { background: linear-gradient(180deg, #fbe7a1, #d4af37 55%, #b8922a); box-shadow: inset 0 1px 0 rgba(255,228,160,.6); }
.badge { box-shadow: inset 0 1px 0 rgba(255,228,160,.18); }
.agents-title .gold { background: linear-gradient(180deg, rgba(255,226,150,.22) 0%, rgba(212,175,55,.10) 50%, rgba(18,15,5,.9) 51%); box-shadow: inset 0 1px 0 rgba(255,240,200,.55); }
@media (prefers-reduced-motion: reduce) { .stat::before, .chip::before, .trend-card::before, .mb-card::before { animation: none; display: none; } }

/* keep small text and status badges crisp on top of the gloss */
.badge:not(.b-demo) { background: rgba(0,0,0,.55); }
.li .m, .side-sub, .mb-role, .legend .desc, .dl dt, label.field { color: #c4ae7c; }

/* ═══ Arabic typography (professional) ═══ */
[dir="rtl"] body { font-family: "Inter", var(--ar); font-weight: 400; line-height: 1.65; font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .agents-title h1, [dir="rtl"] .side-h h2, [dir="rtl"] .panel-h h2,
[dir="rtl"] .panel-h h3, [dir="rtl"] .drawer h2, [dir="rtl"] .gate-title, [dir="rtl"] .brand-title {
  font-family: "Newsreader", var(--ar-display); letter-spacing: 0 !important; line-height: 1.4; font-style: normal; }
[dir="rtl"] .agents-title h1 { font-size: 30px; font-weight: 700; }
[dir="rtl"] .agents-title h1 em { font-weight: 700; }
[dir="rtl"] .side-h h2 { font-size: 18px; font-weight: 600; }
[dir="rtl"] .panel-h h2, [dir="rtl"] .panel-h h3 { font-size: 16.5px; font-weight: 600; }
[dir="rtl"] .drawer h2 { font-size: 24px; font-weight: 600; }
[dir="rtl"] .brand-title { font-weight: 600; font-size: 20px; }
[dir="rtl"] .gate-title { font-weight: 700 !important; font-size: 40px !important; }
/* labels: Plex at a confident medium weight instead of tiny caps */
[dir="rtl"] .agents-title .sub { font-family: var(--ar); font-size: 13px; font-weight: 500; color: var(--gold-2); }
[dir="rtl"] .tab { font-family: var(--ar); font-size: 13.5px; font-weight: 500; padding: 6px 13px; }
[dir="rtl"] .tab[aria-selected="true"] { font-weight: 600; }
[dir="rtl"] table.t th { font-family: var(--ar); font-size: 12.5px; font-weight: 600; color: #cdb88a; }
[dir="rtl"] table.t td { font-size: 13.5px; line-height: 1.6; }
[dir="rtl"] .stat .l { font-family: var(--ar); font-size: 13px; font-weight: 500; line-height: 1.45; color: #d8c69a; }
[dir="rtl"] .stat .v { font-family: "Newsreader", var(--ar-display); }
[dir="rtl"] .chip .t { font-family: var(--ar); font-size: 13px; font-weight: 600; }
[dir="rtl"] .btn { font-family: var(--ar); font-size: 13px; font-weight: 500; }
[dir="rtl"] .btn.primary, [dir="rtl"] .cta-shell > .btn { font-weight: 600; font-size: 14px; }
[dir="rtl"] .badge:not(.b-demo) { font-family: var(--ar); font-size: 12px; font-weight: 500; letter-spacing: 0; padding: 2px 9px; }
[dir="rtl"] .badge.b-demo { font-family: var(--ar); font-size: 12px; font-weight: 700; }
[dir="rtl"] .li .t { font-size: 15px; font-weight: 600; line-height: 1.55; }
[dir="rtl"] .li .m, [dir="rtl"] .side-sub, [dir="rtl"] .mb-role, [dir="rtl"] .legend .desc, [dir="rtl"] .dl dt, [dir="rtl"] label.field { font-size: 12.5px; }
[dir="rtl"] .mb-role { font-weight: 500; }
[dir="rtl"] .panel-h .meta, [dir="rtl"] .pipe-step, [dir="rtl"] .footer, [dir="rtl"] .demo-banner, [dir="rtl"] .conn-pill, [dir="rtl"] .gate-kicker { font-family: var(--ar); font-weight: 500; }
[dir="rtl"] .gate-kicker { font-size: 13px; }
[dir="rtl"] .note, [dir="rtl"] .small, [dir="rtl"] p { line-height: 1.7; }
[dir="rtl"] .input, [dir="rtl"] select.input, [dir="rtl"] textarea.input { font-family: "Inter", var(--ar); }
[dir="rtl"] .mobile-nav button { font-family: var(--ar); font-size: 11.5px; font-weight: 500; }
/* the "العربية" label on the language button (shown in English mode too) */
.lang-btn span[data-no-tr] { font-family: var(--ar); font-weight: 600; }

/* data tables: dark smoked glass (no mirror band behind rows) so figures stay high-contrast */
.table-wrap { background: rgba(10, 8, 3, .62); border-top-color: rgba(255,228,160,.32);
  box-shadow: inset 0 1px 0 rgba(255,228,160,.4), 0 12px 30px -16px rgba(0,0,0,.7); }
table.t th { background: rgba(10, 8, 3, .92); }
/* Arabic gate title: upright gold words on their own line (no faux-italic Arabic) */
[dir="rtl"] .gate-title em { font-style: normal; display: block; margin-top: 4px; }
[dir="rtl"] em { font-style: normal; }

/* phones: headline must never be wider than the screen (Arabic Kufi is wider than the Latin serif) */
@media (max-width: 760px) {
  .agents-title { min-width: 0; max-width: 100%; }
  .agents-title > div { min-width: 0; }
  .agents-title h1 { white-space: normal; overflow-wrap: anywhere; }
  [dir="rtl"] .agents-title h1 { font-size: 22px; line-height: 1.35; }
  [dir="rtl"] .gate-title { font-size: 32px !important; }
}

/* ═══ READABILITY: glossy outside, solid dark behind text ═══ */
/* panels keep their gloss but sit on a dark smoked base, so the bright particle arch can't wash out text */
.panel, .summary-card, .trend-card, .src-row {
  background:
    linear-gradient(180deg, rgba(255,228,160,.10) 0%, rgba(255,228,160,.04) 30%, rgba(255,228,160,0) 31%),
    linear-gradient(160deg, rgba(255,228,160,.05) 0%, rgba(212,175,55,.03) 100%),
    rgba(10, 8, 3, 0.72);
  backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%);
}
.panel::after { background: radial-gradient(90% 45% at 0% 0%, rgba(255,228,160,.07), rgba(255,228,160,0) 60%); }
/* data tables: solid dark, no see-through at all */
.table-wrap { background: rgba(10, 8, 3, 0.96) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
table.t th { background: #0d0a03 !important; color: #cdb88a; }
table.t td { color: #f5ebd2; }
table.t td .muted, table.t td .xs, table.t td .small { color: #dccba0; }
table.t td strong { color: #fff; }
table.t tbody tr:hover { background: rgba(212,175,55,.06); }
/* lists, drawers and stat tiles: brighter secondary text */
.li .m, .muted { color: #d8c69a; }
.xs.muted, .small.muted, .note { color: #d4c294; }
.stat .l { color: #e2d2a8; }
.drawer { background: linear-gradient(180deg, rgba(255,228,160,.08) 0%, rgba(255,228,160,0) 22%), rgba(10, 8, 3, .94); }
.menu { background: linear-gradient(180deg, rgba(255,228,160,.09) 0%, rgba(255,228,160,0) 26%), rgba(10, 8, 3, .95); }

/* ═══ BRAND: gold & black only — no neutral greys ═══ */
:root { --muted: #cdb88a; --faint: #a08a58; --text: #fff8e6; --line: rgba(212,175,55,.16); --line-2: rgba(212,175,55,.28); }
body { color: var(--muted); }
h1, h2, h3, .li .t, .mb-addr, .stat .v, table.t td strong { color: #fff8e6; }
.input::placeholder { color: #8f7b4c; }
/* "Off" / not-connected statuses in muted bronze instead of grey */
.act-off { color: #b59d63; border-color: rgba(181,157,99,.45); background: rgba(181,157,99,.10); }
.s-not_connected, .s-paused, .s-stopped, .s-unverified, .s-cancelled, .s-no_access, .s-pending { color: #b59d63; border-color: rgba(181,157,99,.4); }
.switch, .switch.agent-switch[aria-checked="false"] { background: #1c1606; border-color: rgba(212,175,55,.35); }
.switch .knob { background: #f3e2a8; }
.mb-tools, .mini { background: #120e04; border-color: rgba(212,175,55,.3); }
.prio-bar .track, .meter, .qtrack, .mover .track { background: rgba(212,175,55,.16); }
.leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.6) contrast(1.15) sepia(.75) hue-rotate(-8deg) saturate(1.4); }
.footer, .tab, .clock .tz, .panel-h .meta, table.t th { color: #bda673; }
.tab:hover { color: #fff8e6; }
body::before { background-image: linear-gradient(135deg, rgba(212,175,55,.10) 1px, transparent 1px); }

/* informational badges (e.g. "Reported by source") in champagne gold instead of blue */
:root { --info: #e6c35a; --normal: #e8d49a; }
.s-published_by_source, .s-published_on_company_site { color: #e6c35a; border-color: rgba(230,195,90,.45); }