@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=DM+Mono:wght@400;500&display=swap');

/* ════════════════════════════════════════════════════════════════════════
   RIZQ THEME — gold / glass design system
   Theme model: LIGHT is the default (bare body). DARK is opt-in via
   body.dark-theme. body.light-theme is an explicit alias for the default.
   Tokens are authoritative (from the claude.ai Design System project).
   Glass surface skin works in BOTH themes (saturate() amplifies the
   photographic backgrounds through frosted panels).
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Primitive colors ──────────────────────────────────────── */
  --color-white:   #FFFFFF;
  --color-black:   #000000;
  --color-gold:    #FAC775;
  --color-gold-deep: #C9A227;   /* seal/decor stroke */
  --color-gold-ink:  #7A5A0F;   /* gold text on light bg */
  --color-green:   #5DCAA5;
  --color-red:     #FF5757;
  --color-orange:  #FF914D;
  --color-warm-bg: #F8F7F4;

  /* Tints for badge backgrounds + hover states */
  --color-green-tint:  #D6F5EC;
  --color-red-tint:    #FFE3E3;
  --color-orange-tint: #FFEADA;
  --color-gold-tint:   #FDF3DE;

  /* ── Semantic colors — LIGHT defaults ──────────────────────── */
  --bg-base:      #FFFFFF;
  --bg-raised:    #FFFFFF;
  --bg-secondary: #F8F7F4;
  --bg-surface:   #F5F5F5;
  --bg-overlay:   #EBEBEB;

  --text-primary:   #000000;
  --text-body:      #000000;
  --text-secondary: #333333;
  --text-muted:     #777777;
  --text-subtle:    #777777;
  --text-ghost:     #BBBBBB;

  --accent-primary:    #FAC775;            /* GOLD — primary brand accent */
  --accent-tint:       var(--color-gold-tint);
  --accent-master:     #FAC775;
  --accent-ink:        var(--color-gold-ink);
  --accent-ai:         #6355C7;            /* purple — AI / chat */
  --accent-warning:    #FF914D;
  --positive:          #5DCAA5;
  --positive-tint:     var(--color-green-tint);
  --negative:          #FF5757;
  --negative-tint:     var(--color-red-tint);
  --negative-hard:     #FF5757;
  --negative-moderate: #FF914D;
  --negative-moderate-tint: var(--color-orange-tint);
  --seal-grey:         #8A8C92;  /* unrated seal gem (Insufficient Data) */

  /* Back-compat aliases (older inline styles reference these) */
  --accent-primary-light: var(--color-gold-tint);

  --border-faint:   rgba(0, 0, 0, 0.04);
  --border-subtle:  rgba(0, 0, 0, 0.07);
  --border-default: rgba(0, 0, 0, 0.12);
  --border-strong:  rgba(0, 0, 0, 0.20);

  /* ── Spacing ───────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  14px;
  --space-7:  16px;
  --space-8:  1.25rem;   /* 20px */
  --space-9:  1.5rem;    /* 24px */
  --space-10: 2rem;      /* 32px */
  --space-xs: var(--space-1);
  --space-sm: var(--space-3);
  --space-md: var(--space-7);
  --space-lg: var(--space-9);
  --space-xl: var(--space-10);

  /* ── Border radius ─────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Typography ────────────────────────────────────────────── */
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
  --font-ui:   var(--font-sans);
  --font-data: var(--font-mono);

  --text-2xs:  9px;
  --text-xs:   10px;
  --text-sm:   11px;
  --text-base: 12px;
  --text-md:   13px;
  --text-lg:   14px;
  --text-xl:   15px;
  --text-2xl:  16px;
  --text-3xl:  18px;
  --text-4xl:  20px;
  --text-5xl:  22px;
  --text-6xl:  24px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-modal: 0 16px 60px rgba(0,0,0,0.45);
  --shadow-panel: 0 8px 40px rgba(0,0,0,0.35);
  --shadow-float: 0 16px 60px rgba(0,0,0,0.50);

  /* ── Transitions ───────────────────────────────────────────── */
  --transition-fast: all 0.15s ease;
  --transition-base: all 0.2s;

  /* ── Glass effect primitives ───────────────────────────────── */
  --glass-blur: 28px;
  --glass-saturate: 180%;

  /* ── App backgrounds (override these to swap in custom photos) ─ */
  --app-bg-light: url('/assets/bg-light.png');
  --app-bg-dark:  url('/assets/bg-dark.png');

  /* ── Seal glass star (theme-swapped) ───────────────────────── */
  --seal-star: url('/assets/seal-star-light.png');
  /* ── Brand logo mark (theme-swapped) ───────────────────────── */
  --logo-mark: url('/assets/logo-mark-light.png');
}

/* ── Dark theme (opt-in) ─────────────────────────────────────── */
body.dark-theme {
  --bg-base:      #000000;
  --bg-raised:    #111111;
  --bg-secondary: #111111;
  --bg-surface:   #1A1A1A;
  --bg-overlay:   #222222;

  --text-primary:   #FFFFFF;
  --text-body:      #FFFFFF;
  --text-secondary: #CCCCCC;
  --text-muted:     #AAAAAA;
  --text-subtle:    #AAAAAA;
  --text-ghost:     #555555;

  --accent-ink: var(--color-gold);

  --border-faint:   rgba(255, 255, 255, 0.04);
  --border-subtle:  rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.22);

  /* Status tints kept a whisper on the dark backdrop — green/amber/red pop
     harder on navy, so 0.15 read too strong as a fill. The border + dot/icon
     carry the colour instead. Gold stays stronger: it marks active/selected
     states (feedback link, premium chip), not a passive status. */
  --color-green-tint:  rgba(93, 202, 165, 0.07);
  --color-red-tint:    rgba(255, 87, 87, 0.07);
  --color-orange-tint: rgba(255, 145, 77, 0.07);
  --color-gold-tint:   rgba(250, 199, 117, 0.15);
  /* The semantic aliases must be re-pointed HERE too: a var()-of-a-var declared
     in :root resolves in the :root context, so overriding only --color-*-tint
     above would NOT reach --positive-tint (it stayed the light value). Re-alias
     them inside the dark block so every consumer picks up the whisper tint. */
  --positive-tint:          var(--color-green-tint);
  --negative-tint:          var(--color-red-tint);
  --negative-moderate-tint: var(--color-orange-tint);

  --seal-star: url('/assets/seal-star-dark.png');
  --logo-mark: url('/assets/logo-mark-dark.png');
}

/* ════════════════════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  background: #f3efe7;
  min-height: 100vh;
}
body.dark-theme { background: #05070f; }
/* Layer 0 — the photo, softly blurred so the glass reads as frosting over a
   dreamy backdrop. Inset negative to hide the blur's transparent edge. */
body::after {
  content: ''; position: fixed; inset: -28px; z-index: -2; pointer-events: none;
  background: var(--app-bg-light) center / cover no-repeat;
  filter: blur(6px) saturate(108%);
}
body.dark-theme::after {
  background: var(--app-bg-dark) center / cover no-repeat;
  filter: blur(6px) saturate(108%);
}
/* Layer 1 — readability scrim, above the photo, below content. */
body.dark-theme::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,8,20,.45) 0%, rgba(4,8,20,.62) 60%, rgba(4,8,20,.74) 100%);
}
body:not(.dark-theme)::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(250,249,246,.40) 0%, rgba(250,249,246,.26) 40%, rgba(250,249,246,.46) 100%);
}

::selection { background: rgba(250,199,117,0.28); color: var(--text-primary); }

/* Shared noise grain used by glass panels */
/* (inlined per-rule below via ::after) */

/* ════════════════════════════════════════════════════════════════
   PAGE SHELL
   ════════════════════════════════════════════════════════════════ */
.page          { padding: 32px var(--space-md) var(--space-lg); max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
.page-header   { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-sm); margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; position: relative; z-index: 2; }
.page-title    { font-size: var(--text-5xl); font-weight: 800; color: var(--text-primary); letter-spacing: -0.03em; margin: 0; line-height: 1.05; }
.page-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-xs); line-height: 1.5; }
.section-title { font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; font-weight: 700; margin-bottom: var(--space-sm); }

/* ════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700;
  border: none; cursor: pointer; text-decoration: none;
  transition: var(--transition-fast); white-space: nowrap;
}
.btn-primary   { background: var(--accent-primary); color: var(--color-black); box-shadow: var(--shadow-sm); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost     { background: transparent; color: var(--text-muted); border: 1px solid var(--border-subtle); }
.btn-ghost:hover { color: var(--text-primary); border-color: var(--border-default); }
.btn-small     { padding: 5px 12px; font-size: var(--text-xs); }

/* Secondary — frosted */
.btn-secondary {
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(255,255,255,.80);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #1a1a1a;
}
.btn-secondary:hover { background: rgba(255,255,255,.82); }
body.dark-theme .btn-secondary {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.20);
  color: rgba(255,255,255,.90);
}
body.dark-theme .btn-secondary:hover { background: rgba(255,255,255,.14); }

/* Gold-tint button (Transaktion / Zakat berechnen / etc.) */
.btn-gold {
  background: rgba(201,168,76,.18);
  border: 1px solid rgba(201,168,76,.45);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 14px rgba(201,168,76,.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.btn-gold:hover { background: rgba(201,168,76,.26); border-color: rgba(201,168,76,.65); }

/* ════════════════════════════════════════════════════════════════
   GLASS CARDS  (panel level)
   ════════════════════════════════════════════════════════════════ */
.card, .summary-card, .filters {
  position: relative; overflow: hidden; z-index: 2;
  border-radius: var(--radius-lg);
  background: rgba(254,252,248,.67);
  backdrop-filter: blur(40px) saturate(165%);
  -webkit-backdrop-filter: blur(40px) saturate(165%);
  border: 1px solid rgba(255,253,250,.85);
  box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 0 0 1px rgba(40,30,10,.05), 0 12px 36px rgba(20,15,5,.16), 0 3px 10px rgba(20,15,5,.08);
  padding: var(--space-md);
}
.card::before, .summary-card::before, .filters::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, transparent 100%);
}
.card::after, .summary-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px; opacity: .035;
}
.card > *, .summary-card > * { position: relative; z-index: 1; }

body.dark-theme .card, body.dark-theme .summary-card, body.dark-theme .filters {
  background: rgba(8,18,38,.60);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.28), 0 24px 60px rgba(0,0,0,.40), 0 6px 20px rgba(0,0,0,.22);
}
body.dark-theme .card::before, body.dark-theme .summary-card::before, body.dark-theme .filters::before {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 40%, rgba(255,255,255,.55) 60%, transparent 100%);
}
body.dark-theme .card::after, body.dark-theme .summary-card::after { opacity: .04; }

/* Zakat — gold-tint glass variant */
.card-zakat {
  background: rgba(201,168,76,.10) !important;
  border: 1px solid rgba(201,168,76,.30) !important;
  box-shadow: inset 0 1px 1px rgba(255,215,100,.20), 0 6px 24px rgba(0,0,0,.08) !important;
}
body.dark-theme .card-zakat {
  border-color: rgba(201,168,76,.32) !important;
  box-shadow: inset 0 1px 1px rgba(255,215,100,.15), 0 24px 60px rgba(0,0,0,.40), 0 6px 20px rgba(0,0,0,.22) !important;
}

@supports not (backdrop-filter: blur(1px)) {
  .card, .summary-card, .filters { background: rgba(255,255,255,.96); }
  body.dark-theme .card, body.dark-theme .summary-card, body.dark-theme .filters { background: rgba(10,18,34,.92); }
}

/* ════════════════════════════════════════════════════════════════
   SUMMARY (KPI) CARDS
   ════════════════════════════════════════════════════════════════ */
.summary-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-sm); margin-bottom: var(--space-lg); position: relative; z-index: 2; }
.summary-card  { display: flex; flex-direction: column; gap: var(--space-xs); }
.summary-card:first-child { border-top: 3px solid var(--accent-primary); }
.summary-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); font-weight: 700; }
.summary-value { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500; color: var(--text-primary); line-height: 1; }
.summary-sub   { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════
   DATA TABLES
   ════════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th {
  font-size: var(--text-xs); letter-spacing: 0.09em; color: var(--text-muted);
  text-transform: uppercase; text-align: right; padding: 0 var(--space-sm) var(--space-sm);
  font-weight: 700; border-bottom: 1px solid var(--border-default); white-space: nowrap;
}
.data-table th:first-child { text-align: left; padding-left: 8px; }
.data-table th.center { text-align: center; }
.data-table td {
  padding: var(--space-sm); border-top: 1px solid var(--border-subtle);
  color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-sm);
  text-align: right; vertical-align: middle;
}
.data-table td:first-child { text-align: left; font-family: var(--font-sans); padding-left: 8px; }
.data-table td.center { text-align: center; }
.data-table tr.data-row { cursor: pointer; transition: background 0.1s; }
.data-table tr.data-row:hover td { background: rgba(255,255,255,.35); }
body.dark-theme .data-table thead tr th { background: rgba(8,18,38,.50); }
body.dark-theme .data-table td { background: rgba(8,18,38,.30); border-top: 1px solid rgba(255,255,255,.06); }
body.dark-theme .data-table tr.data-row:hover td { background: rgba(255,255,255,.08); }

.ticker-cell   { display: flex; flex-direction: column; gap: 2px; }
.ticker-symbol { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
.ticker-name   { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-sans); }
.currency-tag  { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); background: var(--bg-surface); padding: 1px 5px; border-radius: var(--radius-sm); }
.positive-cell { color: var(--positive); }
.negative-cell { color: var(--negative); }
.muted-cell    { color: var(--text-muted); }
.weight-bar-wrap { display: flex; align-items: center; gap: var(--space-xs); justify-content: flex-end; }
.weight-bar-bg   { width: 48px; height: 3px; background: var(--border-default); border-radius: 2px; overflow: hidden; }
.weight-bar-fill { height: 100%; background: var(--accent-primary); border-radius: 2px; }

/* Light-mode legibility on the bright photo bg */
body:not(.dark-theme) .data-table td { color: #1a1a1a; }
body:not(.dark-theme) .data-table th { color: #444; }
body:not(.dark-theme) .ticker-symbol { color: #111; font-weight: 700; }
body:not(.dark-theme) .ticker-name   { color: #555; }
body:not(.dark-theme) .positive-cell { color: #1A7A5E; font-weight: 600; }
body:not(.dark-theme) .negative-cell { color: #B02020; font-weight: 600; }

/* ════════════════════════════════════════════════════════════════
   BADGES — sharia + verdict
   ════════════════════════════════════════════════════════════════ */
.sharia-badge         { display: inline-block; font-size: var(--text-xs); font-family: var(--font-mono); padding: 3px 8px; border-radius: var(--radius-sm); letter-spacing: 0.04em; font-weight: 600; white-space: nowrap; }
.sharia-compliant     { color: var(--positive); background: var(--positive-tint); }
.sharia-non-compliant { color: var(--negative); background: var(--negative-tint); }
.sharia-insufficient  { color: var(--text-muted); background: var(--bg-surface); }
.sharia-not-rated     { color: var(--text-muted); background: var(--bg-surface); border: 1px solid var(--border-subtle); }
/* These two are borderless (the opaque light tint carries them). On dark the
   tint is now a whisper (0.07), so add a faint coloured border to keep them
   readable as badges. */
body.dark-theme .sharia-compliant     { border: 0.5px solid color-mix(in srgb, var(--positive) 30%, transparent); }
body.dark-theme .sharia-non-compliant { border: 0.5px solid color-mix(in srgb, var(--negative) 30%, transparent); }

.badge                 { display: inline-block; font-size: var(--text-xs); font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); border: 1px solid transparent; letter-spacing: 0.03em; white-space: nowrap; }
.verdict-compliant     { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 40%, transparent); background: var(--positive-tint); }
.verdict-non-compliant { color: var(--negative); border-color: color-mix(in srgb, var(--negative) 40%, transparent); background: var(--negative-tint); }
.verdict-none          { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 40%, transparent); background: var(--positive-tint); }
.verdict-minor         { color: var(--accent-primary); border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent); background: var(--accent-tint); }
.verdict-significant   { color: var(--negative-moderate); border-color: color-mix(in srgb, var(--negative-moderate) 40%, transparent); background: var(--negative-moderate-tint); }
.verdict-doubtful      { color: var(--negative-moderate); border-color: color-mix(in srgb, var(--negative-moderate) 40%, transparent); background: var(--negative-moderate-tint); }
.verdict-severe        { color: var(--negative); border-color: color-mix(in srgb, var(--negative) 40%, transparent); background: var(--negative-tint); }
.verdict-insufficient  { color: var(--text-muted); border-color: var(--border-subtle); background: var(--bg-surface); }
/* verdict-minor is a STATUS badge that happens to use the gold tint; on dark it
   read too strong. Soften only this badge (not the gold token, which marks
   active nav/tabs and must stay visible). Border + gold text carry it. */
body.dark-theme .verdict-minor { background: rgba(250, 199, 117, 0.07); border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent); }

/* Light-mode badge contrast boost */
body:not(.dark-theme) .verdict-compliant,
body:not(.dark-theme) .verdict-none      { color: #1A7A5E; background: #C8F0E4; border-color: rgba(26,122,94,.30); }
body:not(.dark-theme) .verdict-non-compliant,
body:not(.dark-theme) .verdict-severe    { color: #B02020; background: #FFD4D4; border-color: rgba(176,32,32,.30); }
body:not(.dark-theme) .verdict-minor     { color: #8A5C00; background: #FFE8B0; border-color: rgba(138,92,0,.30); }
body:not(.dark-theme) .verdict-significant,
body:not(.dark-theme) .verdict-doubtful  { color: #A04A00; background: #FFD9BC; border-color: rgba(160,74,0,.30); }
body:not(.dark-theme) .verdict-insufficient { color: #555; background: #EBEBEB; border-color: rgba(0,0,0,.15); }
body:not(.dark-theme) .sharia-compliant  { color: #1A7A5E; background: #C8F0E4; }
body:not(.dark-theme) .sharia-non-compliant { color: #B02020; background: #FFD4D4; }
body:not(.dark-theme) .sharia-insufficient { color: #555; background: #EBEBEB; }

/* ── Pillar dots ─────────────────────────────────────────────── */
.pdots { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; vertical-align: middle; }
.pdot  { width: 7px; height: 7px; border-radius: var(--radius-full); display: inline-block; }
.pdot--green  { background: var(--positive); }
.pdot--orange { background: var(--negative-moderate); }
.pdot--red    { background: var(--negative); }
.pdot--none   { background: var(--border-default); }
.score-mini-conflict { display: inline-block; margin-left: 4px; font-size: var(--text-xs); font-weight: 700; color: var(--negative-moderate); vertical-align: middle; }

/* ── Full pillar badges (intelligence) ───────────────────────── */
.epill-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md); }
.epill     { display: flex; align-items: center; gap: 10px; padding: 10px var(--space-md); border-radius: var(--radius-md); border: 1px solid; flex: 1 1 180px; min-width: 160px; }
.epill-dot  { width: 10px; height: 10px; border-radius: var(--radius-full); flex-shrink: 0; }
.epill-text { display: flex; flex-direction: column; gap: 2px; }
.epill-name  { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
.epill-state { font-size: var(--text-xs); font-weight: 700; }
.epill--green  { border-color: color-mix(in srgb, var(--positive) 35%, transparent); background: var(--positive-tint); }
.epill--green .epill-dot   { background: var(--positive); }
.epill--green .epill-state { color: var(--positive); }
.epill--orange { border-color: color-mix(in srgb, var(--negative-moderate) 35%, transparent); background: var(--negative-moderate-tint); }
.epill--orange .epill-dot  { background: var(--negative-moderate); }
.epill--orange .epill-state{ color: var(--negative-moderate); }
.epill--red    { border-color: color-mix(in srgb, var(--negative) 35%, transparent); background: var(--negative-tint); }
.epill--red .epill-dot     { background: var(--negative); }
.epill--red .epill-state   { color: var(--negative); }

/* ── Flag rows + findings (intelligence) ─────────────────────── */
.flag-item    { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-base); margin-bottom: var(--space-sm); }
.flag-emoji   { font-size: 20px; flex-shrink: 0; }
.flag-region  { font-weight: 700; color: var(--text-primary); font-size: var(--text-base); }
.flag-sources { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.findings-list { list-style: none; padding: 0; margin: 0; }
.findings-list li { padding: 7px 0; color: var(--text-primary); font-size: var(--text-sm); border-bottom: 1px solid var(--border-subtle); line-height: 1.5; }
.findings-list li::before { content: "— "; color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════════
   FILTERS (screening)
   ════════════════════════════════════════════════════════════════ */
.filters        { margin-bottom: var(--space-md); }
.filter-grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm); }
.filter-label   { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700; margin-bottom: var(--space-xs); }
.filter-select, .filter-input {
  width: 100%; padding: 8px 12px; border-radius: var(--radius-md);
  font-size: var(--text-sm); font-family: var(--font-sans); transition: var(--transition-fast);
  background: rgba(255,255,255,.60); border: 1px solid rgba(255,255,255,.80);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #1a1a1a;
}
.filter-select:focus, .filter-input:focus { outline: none; background: rgba(255,255,255,.82); border-color: rgba(201,168,76,.65); box-shadow: 0 0 0 3px rgba(201,168,76,.14); }
body.dark-theme .filter-select, body.dark-theme .filter-input { background: rgba(255,255,255,.06); border: .5px solid rgba(255,255,255,.14); color: rgba(255,255,255,.90); }
body.dark-theme .filter-select:focus, body.dark-theme .filter-input:focus { background: rgba(255,255,255,.10); border-color: rgba(201,168,76,.55); box-shadow: 0 0 0 3px rgba(201,168,76,.12); }
.filter-actions { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════
   TICKER AUTOCOMPLETE (intelligence / watchlist / positions / screening)
   ════════════════════════════════════════════════════════════════ */
.search-wrap { position: relative; }
.autocomplete-drop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-raised); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  z-index: 50; overflow: hidden; display: none;
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
}
body.dark-theme .autocomplete-drop { background: rgba(14,24,44,.92); }
.autocomplete-drop.open { display: block; }
.autocomplete-item { padding: 10px 16px; cursor: pointer; font-size: var(--text-base); color: var(--text-body); display: flex; align-items: center; gap: 10px; transition: background 0.1s; }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--accent-tint); }
.autocomplete-ticker { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 600; color: var(--accent-ink); min-width: 60px; }
.autocomplete-name { color: var(--text-muted); font-size: var(--text-sm); }
.autocomplete-exchange { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); margin-left: auto; }

/* ════════════════════════════════════════════════════════════════
   SIDEBAR (desktop nav) — glass
   ════════════════════════════════════════════════════════════════ */
.app-layout { display: flex; min-height: 100vh; position: relative; z-index: 2; }
.sidebar {
  width: 220px; flex-shrink: 0; display: flex; flex-direction: column;
  padding: 20px 12px; gap: 4px; position: sticky; top: 0; height: 100vh; z-index: 50;
  backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%);
  background: rgba(255,255,255,.55); border-right: 1px solid rgba(255,255,255,.80);
  box-shadow: 2px 0 32px rgba(0,0,0,.08);
}
body.dark-theme .sidebar { background: rgba(4,10,24,.68); border-right: 1px solid rgba(255,255,255,.10); box-shadow: 4px 0 40px rgba(0,0,0,.45); }

.sidebar-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 20px; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.08); margin-bottom: 8px; }
body.dark-theme .sidebar-brand { border-bottom-color: rgba(255,255,255,.08); }
.sidebar-logo { width: 32px; height: 32px; object-fit: contain; background: var(--logo-mark) center / contain no-repeat; }
.sidebar-wordmark { font-family: var(--font-ui); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; color: var(--accent-ink); }

.nav-section-label { font-size: 10px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; padding: 12px 8px 4px; opacity: .62; font-family: var(--font-ui); color: var(--text-primary); }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; text-decoration: none; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; transition: background .12s, color .12s; cursor: pointer; border: none; background: none; width: 100%; text-align: left; color: rgba(0,0,0,.50); }
body.dark-theme .nav-item { color: rgba(255,255,255,.55); }
.nav-item:hover { background: rgba(255,255,255,.55); color: rgba(0,0,0,.85); }
body.dark-theme .nav-item:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.90); }
.nav-item.active { background: rgba(201,168,76,.22); border: 1px solid rgba(201,168,76,.35); color: var(--accent-ink); }
body.dark-theme .nav-item.active { background: rgba(201,168,76,.18); color: var(--color-gold); }
.nav-item svg { flex-shrink: 0; opacity: .70; }
.nav-item.active svg { opacity: 1; }

.sidebar-spacer { flex: 1; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; margin-top: 8px; border-top: 1px solid rgba(0,0,0,.08); padding-top: 16px; }
body.dark-theme .sidebar-user { border-top-color: rgba(255,255,255,.08); }
.sidebar-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--color-gold), var(--color-orange)); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; font-family: var(--font-ui); }
.sidebar-user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sidebar-user-name { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(0,0,0,.80); }
body.dark-theme .sidebar-user-name { color: rgba(255,255,255,.88); }
.sidebar-user-role { font-family: var(--font-ui); font-size: 11px; opacity: .45; color: var(--text-primary); }

.main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-content .page { padding: 24px 32px; max-width: none; margin: 0; }

/* ════════════════════════════════════════════════════════════════
   THEME TOGGLE
   ════════════════════════════════════════════════════════════════ */
.theme-toggle { position: fixed; top: 14px; right: 14px; display: flex; gap: 4px; border-radius: var(--radius-full); padding: 4px; z-index: 1000; backdrop-filter: blur(12px); background: rgba(255,255,255,.90); border: 1px solid rgba(0,0,0,.10); box-shadow: 0 2px 12px rgba(0,0,0,.10); }
body.dark-theme .theme-toggle { background: rgba(6,14,28,.72); border-color: rgba(255,255,255,.20); box-shadow: 0 2px 16px rgba(0,0,0,.50); }
.theme-toggle button { border: none; background: transparent; color: var(--text-muted); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; padding: 5px 14px; border-radius: var(--radius-full); cursor: pointer; transition: var(--transition-fast); }
.theme-toggle button.active { background: var(--accent-primary); color: #000; }
body.dark-theme .theme-toggle button { color: rgba(255,255,255,.55); }

/* ════════════════════════════════════════════════════════════════
   RIZQ SEAL — glass Rub el Hizb star (PNG layer 1) + 4 scored gems
   Markup is rendered by rizq-seal.js. Sizes via --seal-size on .rizq-seal.
   Gem state classes: --green / --amber / --red / --hollow (Insufficient Data).
   ════════════════════════════════════════════════════════════════ */
.rizq-seal {
  --seal-size: 240px;
  position: relative; width: var(--seal-size); height: var(--seal-size);
  flex-shrink: 0; display: inline-block;
  font-size: calc(var(--seal-size) * 0.042);
}
/* Star is layer 1 on a pseudo-element so its opacity is dialled independently
   of the gems painted on top (toned down 10% — the raw PNG reads too warm). */
.rizq-seal::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--seal-star) center / contain no-repeat;
  opacity: .90;
}
.rizq-gem {
  position: absolute; width: 30%; height: 30%; z-index: 1;
  border-radius: 16%;
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%) rotate(45deg);
  backdrop-filter: blur(11px) saturate(220%); -webkit-backdrop-filter: blur(11px) saturate(220%);
  box-shadow: inset -1px -1px 0 rgba(255,255,255,0.30), inset 1px 1px 0 rgba(255,255,255,0.28), 0 2px 8px rgba(20,15,5,.16);
}
.rizq-gem--scharia  { left: 50%; top: 28%; }
.rizq-gem--umwelt   { left: 28%; top: 50%; }
.rizq-gem--arbeit   { left: 72%; top: 50%; }
.rizq-gem--konflikt { left: 50%; top: 72%; }

/* Gem label — counter-rotate so it stays upright over the 45°-rotated gem */
.rizq-gem-label {
  transform: rotate(-45deg);
  font-family: var(--font-sans); font-weight: 700; font-size: 1em;
  letter-spacing: .01em; white-space: nowrap; line-height: 1;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.40); pointer-events: none;
}

.rizq-gem.is-green  { background: color-mix(in srgb, var(--positive) 82%, transparent);          border: 1px solid var(--positive); }
.rizq-gem.is-amber  { background: color-mix(in srgb, var(--negative-moderate) 82%, transparent); border: 1px solid var(--negative-moderate); }
.rizq-gem.is-red    { background: color-mix(in srgb, var(--negative) 82%, transparent);          border: 1px solid var(--negative); }
/* Unrated pillar → grey gem with the SAME frosted-glass treatment as the coloured
   gems (82% mix + the base inset highlight + blur). A defined grey token keeps it
   neutral so the gold star behind doesn't tint it yellow. */
.rizq-gem.is-hollow { background: color-mix(in srgb, var(--seal-grey) 82%, transparent); border: 1px solid var(--seal-grey); }
/* Fully un-evaluated seal (no gem scored) → also grey out the star so the whole
   thing reads neutral, not gold. Mixed (some scored) keeps the gold star. */
.rizq-seal.is-unrated::before { filter: grayscale(1) brightness(1.15); opacity: .38; }

/* Inline seal — a true MINIATURE of the full rub: the star PNG outline stays
   visible and the gems remain rotated diamonds (inheriting the base .rizq-gem
   geometry). Labels are dropped — illegible at this size. */
.rizq-seal.is-inline .rizq-gem {
  backdrop-filter: blur(3px) saturate(200%); -webkit-backdrop-filter: blur(3px) saturate(200%);
  box-shadow: inset -0.5px -0.5px 0 rgba(255,255,255,0.35);
}
.rizq-seal.is-inline .rizq-gem-label { display: none; }

/* ── iOS: stop the auto-zoom on input focus ─────────────────────────────────
   iOS Safari zooms into any field whose font-size is < 16px. Our type scale is
   compact (12–14px), so every input triggered it. Force 16px on inputs at phone
   widths only — desktop keeps the compact type, and pinch-zoom (accessibility)
   is untouched (this is the recommended fix, not user-scalable=no). !important
   because many pages set an inline/specific font-size on their inputs. */
@media (max-width: 1024px) {
  input, textarea, select { font-size: 16px !important; }
}