:root {
  color-scheme: dark;
  --bg: #000000;
  --panel: rgba(0, 0, 0, 0.96);
  --panel-2: rgba(18, 18, 18, 0.96);
  --text: #ffffff;
  --text-primary: #ffffff;
  --text-secondary: #e5e5ea;
  --text-muted: #a1a1aa;
  --text-on-accent: #ffffff;
  --text-result: #ffffff;
  --muted: #a1a1aa;
  --accent: #ea580c;
  --accent-2: #f97316;
  --danger: #fb7185;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --surface-subtle: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.1);
  --surface-active: rgba(255, 255, 255, 0.12);
  --success: #22c55e;
  --warning: #facc15;
  --info: #fbbf24;
  --error: #ef4444;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  /* Calculator-specific surfaces (OLED default) */
  --calc-display-bg: #121212;
  --calc-display-border: #27272a;
  --calc-num-bg: #1c1c1e;
  --calc-num-text: #ffffff;
  --calc-fn-bg: #2c2c2e;
  --calc-fn-text: #e5e5ea;
  --calc-op-bg: #2c2c2e;
  --calc-op-text: #fb923c;
  --calc-equals-bg: #ea580c;
  --calc-equals-text: #ffffff;
  --app-height: 100dvh;
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);

  /* RESERVED TOP AD SPACE — single source of truth of the ONE global ad bar.
     --ad-bar-h   : height of the ad bar itself (mirrors .ad-placeholder).
     --ad-bar-gap : gap kept between the ad bar and the content below it.
     --ad-band    : the whole reserved band = the app padding above the bar
                    (same formula as the body padding-top) + the bar + the gap.
     EVERY full-screen view starts at `top: var(--ad-band)`, so the reserved
     advertisement space is present in every view and is never covered.
     The values are breakpoint-identical to the previous fixed numbers, so the
     Calculator geometry is unchanged. */
  --ad-bar-h: 50px;
  --ad-bar-gap: 14px;
  --ad-band: calc(max(12px, calc(var(--safe-top) + 12px)) + var(--ad-bar-h) + var(--ad-bar-gap));
}

/* Legacy alias: old "dark" id now maps to OLED Black */
body[data-theme='dark'],
body[data-theme='oled'] {
  color-scheme: dark;
  --bg: #000000;
  --panel: rgba(0, 0, 0, 0.96);
  --panel-2: rgba(18, 18, 18, 0.96);
  --text: #ffffff;
  --text-primary: #ffffff;
  --text-secondary: #e5e5ea;
  --text-muted: #a1a1aa;
  --text-on-accent: #ffffff;
  --text-result: #ffffff;
  --muted: #a1a1aa;
  --accent: #ea580c;
  --accent-2: #f97316;
  --danger: #fb7185;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --surface-subtle: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.1);
  --surface-active: rgba(255, 255, 255, 0.12);
  --success: #22c55e;
  --warning: #facc15;
  --info: #fbbf24;
  --error: #ef4444;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  --calc-display-bg: #121212;
  --calc-display-border: #27272a;
  --calc-num-bg: #1c1c1e;
  --calc-num-text: #ffffff;
  --calc-fn-bg: #2c2c2e;
  --calc-fn-text: #e5e5ea;
  --calc-op-bg: #2c2c2e;
  --calc-op-text: #fb923c;
  --calc-equals-bg: #ea580c;
  --calc-equals-text: #ffffff;
}

body[data-theme='charcoal'] {
  color-scheme: dark;
  --bg: #111417;
  --panel: rgba(24, 28, 33, 0.96);
  --panel-2: rgba(32, 38, 45, 0.96);
  --text: #f1f5f9;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-on-accent: #ffffff;
  --text-result: #f1f5f9;
  --muted: #94a3b8;
  --accent: #2dd4bf;
  --accent-2: #22d3ee;
  --danger: #fb7185;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.15);
  --surface-subtle: rgba(255, 255, 255, 0.05);
  --surface-hover: rgba(255, 255, 255, 0.1);
  --surface-active: rgba(255, 255, 255, 0.13);
  --success: #22c55e;
  --warning: #facc15;
  --info: #fbbf24;
  --error: #ef4444;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  --calc-display-bg: #1a1f24;
  --calc-display-border: #334155;
  --calc-num-bg: #242b33;
  --calc-num-text: #f1f5f9;
  --calc-fn-bg: #2f3740;
  --calc-fn-text: #cbd5e1;
  --calc-op-bg: #134e4a;
  --calc-op-text: #5eead4;
  --calc-equals-bg: #14b8a6;
  --calc-equals-text: #ffffff;
}

body[data-theme='titanium'] {
  color-scheme: dark;
  --bg: #1c1f26;
  --panel: rgba(35, 40, 51, 0.96);
  --panel-2: rgba(44, 50, 63, 0.96);
  --text: #e8ecf3;
  --text-primary: #e8ecf3;
  --text-secondary: #b6bfce;
  --text-muted: #8b94a7;
  --text-on-accent: #ffffff;
  --text-result: #e8ecf3;
  --muted: #8b94a7;
  --accent: #818cf8;
  --accent-2: #60a5fa;
  --danger: #fb7185;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.17);
  --surface-subtle: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.11);
  --surface-active: rgba(255, 255, 255, 0.14);
  --success: #4ade80;
  --warning: #facc15;
  --info: #fbbf24;
  --error: #fb7185;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  --calc-display-bg: #262b36;
  --calc-display-border: #475569;
  --calc-num-bg: #323947;
  --calc-num-text: #e8ecf3;
  --calc-fn-bg: #3d4456;
  --calc-fn-text: #c3ccdd;
  --calc-op-bg: #3730a3;
  --calc-op-text: #c7d2fe;
  --calc-equals-bg: #6366f1;
  --calc-equals-text: #ffffff;
}

body[data-theme='light'] {
  color-scheme: light;
  --bg: #f8fafc;
  --panel: rgba(255, 255, 255, 0.96);
  --panel-2: rgba(241, 245, 249, 0.98);
  --text: #0f172a;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #475569;
  --text-on-accent: #ffffff;
  --text-result: #0f172a;
  --muted: #475569;
  --accent: #ea580c;
  --accent-2: #f97316;
  --danger: #dc2626;
  --border: rgba(15, 23, 42, 0.1);
  --border-strong: rgba(15, 23, 42, 0.16);
  --surface-subtle: rgba(15, 23, 42, 0.04);
  --surface-hover: rgba(15, 23, 42, 0.08);
  --surface-active: rgba(15, 23, 42, 0.1);
  --success: #16a34a;
  --warning: #ca8a04;
  --info: #d97706;
  --error: #dc2626;
  --shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
  --calc-display-bg: #ffffff;
  --calc-display-border: #e2e8f0;
  --calc-num-bg: #ffffff;
  --calc-num-text: #0f172a;
  --calc-fn-bg: #eef2f7;
  --calc-fn-text: #334155;
  --calc-op-bg: #ffedd5;
  --calc-op-text: #c2410c;
  --calc-equals-bg: #ea580c;
  --calc-equals-text: #ffffff;
}

/* Legacy alias: old "violet" id maps to Titanium Slate */
body[data-theme='violet'],
body[data-theme='titanium-alias'] {
  color-scheme: dark;
  --bg: #1c1f26;
  --panel: rgba(35, 40, 51, 0.96);
  --panel-2: rgba(44, 50, 63, 0.96);
  --text: #e8ecf3;
  --text-primary: #e8ecf3;
  --text-secondary: #b6bfce;
  --text-muted: #8b94a7;
  --text-on-accent: #ffffff;
  --text-result: #e8ecf3;
  --muted: #8b94a7;
  --accent: #818cf8;
  --accent-2: #60a5fa;
  --danger: #fb7185;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.17);
  --surface-subtle: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.11);
  --surface-active: rgba(255, 255, 255, 0.14);
  --success: #4ade80;
  --warning: #facc15;
  --info: #fbbf24;
  --error: #fb7185;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  --calc-display-bg: #262b36;
  --calc-display-border: #475569;
  --calc-num-bg: #323947;
  --calc-num-text: #e8ecf3;
  --calc-fn-bg: #3d4456;
  --calc-fn-text: #c3ccdd;
  --calc-op-bg: #3730a3;
  --calc-op-text: #c7d2fe;
  --calc-equals-bg: #6366f1;
  --calc-equals-text: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: var(--app-height);
  min-height: 100dvh;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  justify-content: center;
  align-items: center;
  /* APP SHELL / GLOBAL AD BAR: when the app is taller than the viewport the
     plain centred flex layout pushed the TOP of the app (now the Global Ad Bar)
     ABOVE the scrollable area, where it could neither be seen nor reached.
     `safe center` keeps the exact same centring whenever everything fits, and
     top-aligns (fully reachable, nothing hidden) when it does not. Engines that
     do not understand `safe` keep the previous `center` behaviour above. */
  align-items: safe center;
  padding: max(12px, calc(var(--safe-top) + 12px)) max(12px, calc(var(--safe-right) + 12px)) max(12px, calc(var(--safe-bottom) + 12px)) max(12px, calc(var(--safe-left) + 12px));
  transition: background 0.25s ease, color 0.25s ease;
  overflow-x: hidden;
  overscroll-behavior: none;
}

body[data-language='ar'] {
  direction: rtl;
}

body[data-language='ar'] .top-bar,
body[data-language='ar'] .history-header {
  flex-direction: row-reverse;
}

body[data-language='ar'] .top-bar-actions {
  justify-content: flex-start;
}

body[data-language='ar'] .drawer-toolbar {
  justify-content: flex-start;
}

button,
input,
select {
  font: inherit;
  touch-action: manipulation;
}

/* ============================================================
   GLOBAL AD BAR — the ONE advertisement slot of the app shell.
   It lives in normal document flow (position: relative, no top/left
   offset, no fixed/sticky) so it always reserves its own space and can
   never overlay the top bar, the feature navigation, the calculator,
   the notes, the PDF workspace or Smart Documents. Its height is fixed
   per breakpoint, so using the calculator never causes layout jumping.
   Every feature shares this single bar: there is no per-feature ad.
   ============================================================ */
.ad-placeholder {
  position: relative; /* in flow — never fixed/sticky, never overlays content */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  height: var(--ad-bar-h); /* mobile: fixed, modest */
  min-height: var(--ad-bar-h);
  max-height: var(--ad-bar-h);
  flex: 0 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0 0 var(--ad-bar-gap);
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.08);
  color: var(--text-muted);
  text-align: center;
}

/* GLOBAL TOP AD BANNER — unified top banner class applied to the single
   app-shell slot (#adPlaceholder). Requested base geometry: full width,
   centred contents, transparent background, hard 50px ceiling and the
   highest stacking order so the banner is never covered by anything in
   the shell. Declared AFTER .ad-placeholder so these values win the
   cascade where both classes apply.

   STACKING RULE (UI-overlap fix): the banner stays in normal flow with
   z-index:auto. It must NEVER out-stack the fixed modal / sheet / drawer
   surfaces (z-index 14..62 in this stylesheet): a positioned banner with a
   huge z-index painted ABOVE every modal's top region and blocked the
   close (X), back and toolbar buttons that live there. With z-index:auto
   the banner reserves its own space, still stacks above plain in-flow
   content, and every fixed overlay correctly covers it. */
.global-top-ad-banner {
  width: 100%;
  height: var(--ad-bar-h);
  min-height: var(--ad-bar-h); /* keep min <= max-height so the ceiling holds on every breakpoint */
  max-height: var(--ad-bar-h);
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0; /* APP-SHELL FLEX COLUMN: the bar keeps its real height in the column flow */
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto; /* never overlay fixed modals/sheets/drawer (see comment above) */
}

/* PRINT ISOLATION (CRITICAL): the global top ad banner must NEVER appear
   on a printed page or inside a generated PDF. Hide it 100% (element +
   every child, incl. the rendered ad slot content) whenever the browser
   is in print media — the A4 output must be a pure white page containing
   only the note text. */
@media print {
  .global-top-ad-banner,
  #adPlaceholder,
  .ad-placeholder,
  #global-top-ad-banner {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
  }
  .global-top-ad-banner *,
  .ad-placeholder * {
    display: none !important;
    visibility: hidden !important;
  }
  /* Printed page itself: pure white, no app chrome bleed. */
  @page {
    background: #ffffff;
  }
}

/* Dedicated slot inside the bar: a real ad is rendered here later.
   It is empty for now, so the reserved space never changes. */
.ad-placeholder-slot {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
}

/* "Advertisement" placeholder label, localized through the EXISTING EQ
   i18n system (data-i18n="adBarLabel"). Never overflows the viewport. */
.ad-placeholder-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0.85;
}

/* Tablet / desktop: a little taller, still modest and fixed.
   The height lives in --ad-bar-h so the reserved band (--ad-band) that every
   view uses stays in sync with the bar itself. */
@media (min-width: 768px) {
  :root {
    --ad-bar-h: 60px;
  }
  .ad-placeholder {
    height: var(--ad-bar-h);
    min-height: var(--ad-bar-h);
    max-height: var(--ad-bar-h);
  }
}

.app-shell {
  width: min(100%, 560px);
  max-width: 100%;
  min-height: 0;
  /* APP-SHELL FLEX COLUMN (UI-overlap fix): the ONE global ad bar is the
     first flex item of the shell, then header/nav/content follow. The bar
     takes its real 50/60px from the layout flow (flex-shrink:0) and the
     rest of the shell flows below it, so the bar can never overlap or
     block the modals, sheets, toolbars or any control. */
  display: flex;
  flex-direction: column;
}

.mode-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.mode-switch {
  flex: 1;
  border: none;
  border-radius: 999px;
  padding: 10px 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
}

.mode-switch.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--text-on-accent);
}

.view-panel[hidden] {
  display: none !important;
}

.view-panel.active {
  display: block;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.lang-switch {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 9px 10px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  max-width: 120px;
  -webkit-appearance: none;
  appearance: none;
  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='%23cbd5e1' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

body[data-language='ar'] .lang-switch {
  background-position: left 10px center;
  padding-right: 10px;
  padding-left: 28px;
}

.app-logo {
  display: inline-block;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  transform: translateY(-1px);
}

.app-logo .logo-e {
  color: var(--accent);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.3),
    0 2px 0 rgba(0,0,0,0.25),
    0 3px 0 rgba(0,0,0,0.2),
    0 4px 0 rgba(0,0,0,0.15),
    0 5px 4px rgba(0,0,0,0.3);
}

.app-logo .logo-q {
  color: var(--accent-2);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.3),
    0 2px 0 rgba(0,0,0,0.25),
    0 3px 0 rgba(0,0,0,0.2),
    0 4px 0 rgba(0,0,0,0.15),
    0 5px 4px rgba(0,0,0,0.3);
}

.drawer-header .app-logo {
  font-size: 1.2rem;
}
.eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
}

h1,
h2,
p {
  margin: 0;
}

.top-bar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ghost-btn,
.accent-btn,
.control-btn,
.keypad-btn,
.theme-option,
.drawer-tab {
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.ghost-btn,
.drawer-tab {
  background: var(--panel);
  color: var(--text);
  padding: 10px 12px;
  box-shadow: var(--shadow);
}

.ghost-btn:hover,
.accent-btn:hover,
.control-btn:hover,
.keypad-btn:hover,
.theme-option:hover,
.drawer-tab:hover {
  transform: translateY(-1px);
}

.accent-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--text-on-accent);
  padding: 12px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.calculator-card,
.trading-pro-card,
.drawer,
.drawer-panel,
.currency-modal,
.converter-card {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow);
}

.calculator-card,
.trading-pro-card,
.converter-card {
  border-radius: clamp(20px, 3vw, 28px);
  padding: clamp(14px, 2.3vw, 22px);
  backdrop-filter: blur(18px);
  width: 100%;
}

.trading-pro-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trading-pro-header h2 {
  margin-bottom: 4px;
}

.trading-pro-header p {
  color: var(--muted);
  font-size: 0.95rem;
}

.asset-selector,
.quick-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.timeframe-selector {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.asset-btn,
.quick-option,
.copy-btn,
.timeframe-btn {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}

.asset-btn.active,
.quick-option.active,
.timeframe-btn.active {
  background: rgba(56, 189, 248, 0.16);
  color: var(--accent);
  border-color: rgba(56, 189, 248, 0.32);
}

.trading-field input {
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.risk-control-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trading-output-card,
.safety-alert,
.action-zone-card {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(45, 212, 191, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.safety-alert {
  border-left: 4px solid var(--accent);
  font-size: 0.92rem;
  line-height: 1.5;
}

.safety-alert.danger {
  border-left-color: var(--danger);
}

.safety-alert.warning {
  border-left-color: var(--warning);
}

.action-zone-grid {
  display: grid;
  gap: 10px;
}

.action-zone-card {
  gap: 8px;
}

.action-zone-title {
  font-weight: 700;
  color: var(--accent);
}

.action-zone-value {
  font-size: 1.02rem;
  color: var(--text);
}

.copy-zone-btn {
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(56, 189, 248, 0.16);
  color: var(--accent);
  cursor: pointer;
  align-self: flex-start;
}

.output-top-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.output-label {
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 4px;
}

.output-value {
  font-size: 1.2rem;
}

.copy-btn {
  background: rgba(56, 189, 248, 0.16);
  color: var(--accent);
}

.risk-gauge {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.risk-gauge-bar {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.09);
}

.risk-gauge-fill {
  height: 100%;
  width: 40%;
  border-radius: inherit;
}

.risk-gauge-fill.safe {
  background: var(--success);
}

.risk-gauge-fill.warning {
  background: var(--warning);
}

.risk-gauge-fill.danger {
  background: var(--error);
}

.risk-gauge-text.safe {
  color: var(--success);
}

.risk-gauge-text.warning {
  color: var(--warning);
}

.risk-gauge-text.danger {
  color: var(--error);
}

.breakdown-grid,
.metrics-grid,
.pivot-levels-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.breakdown-card,
.metric-pill,
.pivot-level,
.metric-pill,
.pivot-level {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}

.section-title {
  font-weight: 700;
  color: var(--accent);
}

.copy-level-btn {
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(56, 189, 248, 0.16);
  color: var(--accent);
  cursor: pointer;
}

.display-section {
  position: relative;
  display: block;
  background: var(--calc-display-bg);
  border: 1px solid var(--calc-display-border);
  border-radius: clamp(16px, 2vw, 24px);
  padding: clamp(14px, 2.5vw, 20px);
  padding-top: clamp(56px, 8vw, 64px);
  margin-bottom: 16px;
}

.speech-btn {
  position: absolute;
  top: 12px;
  border: none;
  border-radius: 999px;
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,0.1);
  color: var(--text);
  cursor: pointer;
  z-index: 2;
}

html[dir="ltr"] .speech-btn {
  right: 12px;
  left: auto;
}

html[dir="rtl"] .speech-btn {
  left: 12px;
  right: auto;
}

html[dir="ltr"] .primary-display,
html[dir="ltr"] .expression-display,
html[dir="ltr"] .secondary-display {
  text-align: left;
}

html[dir="rtl"] .primary-display,
html[dir="rtl"] .expression-display,
html[dir="rtl"] .secondary-display {
  text-align: right;
}

.scientific-toggle-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.scientific-toggle {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
}

.scientific-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
  margin-bottom: 0;
  padding: 0;
  position: static;
  transform: none;
}

.scientific-panel.open {
  max-height: 480px;
  opacity: 1;
  margin-bottom: 12px;
}

/* UI-only flatten: nested wrappers contribute their buttons directly to the
   4-column panel grid (handlers/DOM/ids unchanged, no logic change). */
.scientific-panel .angle-mode-selector,
.scientific-panel .scientific-row {
  display: contents;
}

/* Uniform scientific keys (incl. DEG/RAD/GRAD mode keys): same height,
   padding, radius, light uniform background; never float/overlap. */
.scientific-panel .scientific-btn,
.scientific-panel .angle-mode-btn {
  border: none;
  border-radius: 12px;
  padding: 10px 8px;
  min-height: 44px;
  height: auto;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  position: static;
  transform: none;
  float: none;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scientific-panel .angle-mode-btn.active {
  outline: 2px solid var(--accent, #38bdf8);
  outline-offset: -2px;
}

.primary-display {
  font-size: clamp(1.6rem, 4.8vw, 2.4rem);
  font-weight: 700;
  min-height: 64px;
  overflow-wrap: anywhere;
  color: var(--text-result);
}

.expression-display {
  font-size: 0.95rem;
  color: var(--text-secondary);
  min-height: 24px;
  margin-top: 6px;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.secondary-display {
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 8px;
  min-height: 28px;
}

.control-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.control-btn {
  background: var(--panel-2);
  color: var(--text);
  padding: clamp(10px, 2.2vw, 13px);
  min-height: clamp(42px, 8vw, 54px);
}

.keypad-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.8vw, 10px);
}

.keypad-btn {
  padding: clamp(12px, 2.5vw, 16px) 0;
  font-size: clamp(0.95rem, 3.2vw, 1.1rem);
  min-height: clamp(48px, 10vw, 64px);
  background: var(--calc-num-bg);
  color: var(--calc-num-text);
  border: 1px solid transparent;
}

.keypad-btn.number {
  background: var(--calc-num-bg);
  color: var(--calc-num-text);
}

.keypad-btn.function,
.keypad-btn.control-btn {
  background: var(--calc-fn-bg);
  color: var(--calc-fn-text);
}

.keypad-btn.operator {
  background: var(--calc-op-bg);
  color: #F97316;
  font-size: 1.5rem;
  font-weight: bold;
  opacity: 1;
}

.keypad-btn.equals {
  background: var(--calc-equals-bg);
  color: var(--calc-equals-text);
  font-weight: 800;
}

/* Light theme: subtle key separation */
body[data-theme='light'] .keypad-btn {
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Keypad area: keypad and percent panel share the same space */
.keypad-area {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.keypad-area > .keypad-grid {
  grid-area: 1 / 1;
}

.percent-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.28s ease, margin 0.28s ease;
  margin-bottom: 0;
}

.percent-panel.percent-open {
  max-height: 280px;
  opacity: 1;
  margin-bottom: 12px;
}

.keypad-grid.percent-open {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Scoped: Backspace/Copy/Paste tools row — 3 equal buttons over the
   full 4-column grid width. Order, classes and handlers unchanged. */
.control-row-3 {
  grid-column: span 4;
  display: flex;
  gap: 8px;
  width: 100%;
}

.control-row-3 .control-btn {
  flex: 1 1 0;
  min-width: 0;
}

.control-row-3 .keypad-btn {
  flex: 1 1 0;
  min-width: 0;
}

.percent-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.percent-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.percent-panel-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.percent-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: var(--surface-subtle);
  color: var(--text);
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s ease, transform 0.2s ease;
}

.percent-refresh-btn:hover {
  background: var(--surface-hover);
  transform: translateY(-1px);
}

.percent-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 12px;
  padding: 8px 12px;
  background: var(--surface-subtle);
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.percent-back-btn:hover {
  background: var(--surface-hover);
  transform: translateY(-1px);
}

.percent-back-btn i {
  font-size: 0.85rem;
}

body[data-language='ar'] .percent-panel-header {
  flex-direction: row-reverse;
}

body[data-language='ar'] .percent-header-actions {
  flex-direction: row-reverse;
}

body[data-language='ar'] .percent-back-btn {
  flex-direction: row-reverse;
}

.percent-panel-body {
  display: grid;
  gap: 10px;
}

.percent-panel-body .field {
  margin-bottom: 0;
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 23, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 14;
}

.drawer-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: min(75vw, 360px);
  max-width: 100%;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  background: var(--panel);
  border-right: 1px solid var(--border);
  border-radius: 0 26px 26px 0;
  box-shadow: 0 40px 80px rgba(0,0,0,0.35);
  z-index: 15;
  overflow: hidden;
}

body[data-language='ar'] .drawer {
  left: auto;
  right: 0;
  border-radius: 26px 0 0 26px;
  transform: translateX(100%);
}

.drawer.open {
  transform: translateX(0);
}

body[data-language='ar'] .drawer.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 20px 18px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.drawer-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.drawer-menu {
  display: grid;
  gap: 10px;
  padding: 18px 16px 24px;
}

.drawer-menu-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  width: 100%;
  border: none;
  border-radius: 18px;
  padding: 18px 16px;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.drawer-menu-item:hover {
  transform: translateX(2px);
  background: rgba(56, 189, 248, 0.12);
}

/* الحاوية الخارجية للأيقونة */
.item-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--accent, #38bdf8) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
/* الأيقونة نفسها تتكبر وتملأ المربع وتتسنتر */
.item-icon svg {
    width: 26px !important;  /* تكبير الأيقونة لتملأ المربع */
    height: 26px !important;
    display: block !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2.2 !important; /* تخشين خط الأيقونة لتصير بارزة جداً */
}

.drawer-menu-item strong {
  display: block;
  font-size: 0.98rem;
  margin-bottom: 4px;
}

.drawer-menu-item span {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
}

.top-bar-actions {
  display: flex;
  align-items: center;
}

.icon-btn {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 0;
}

/* Currency Popover (independent from drawer & language select) */
.currency-menu-wrap {
  position: relative;
}

.currency-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 6px;
  max-width: min(420px, calc(100vw - 32px));
  min-width: 200px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  overflow: visible;
}

.currency-popover.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.currency-popover-item {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  text-align: start;
  transition: background 0.15s ease;
}

.currency-popover-item:hover,
.currency-popover-item:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

.currency-popover-item:active {
  background: var(--surface-active);
}

.currency-popover-item span {
  white-space: normal;
  overflow-wrap: break-word;
}

body[data-language='ar'] .currency-popover {
  right: 0;
  left: auto;
}

@media (max-width: 480px) {
  body[data-language='ar'] .currency-popover,
  .currency-popover {
    left: 0;
    right: auto;
    max-width: min(160px, calc(100vw - 32px));
    min-width: 160px;
  }
}

.settings-modal-backdrop,
.currency-modal-backdrop,
.install-modal-backdrop,
.pdf-reports-backdrop,
.notes-manager-backdrop,
.full-screen-note-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 23, 0.72);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.settings-modal-backdrop.show,
.currency-modal-backdrop.show,
.install-modal-backdrop.show,
.pdf-reports-backdrop.show,
.notes-manager-backdrop.show,
.full-screen-note-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.settings-modal {
  width: min(92vw, 440px);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 20px;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s ease;
}

.settings-modal-backdrop.show .settings-modal {
  transform: translateY(0) scale(1);
}

.settings-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.settings-modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.settings-modal-subtitle {
  color: var(--muted);
  margin-top: 6px;
}

/* ---- Help & About (Settings item) ---- */
.help-about-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.help-about-item:hover {
  border-color: rgba(56,189,248,0.5);
  background: rgba(56,189,248,0.12);
}
.help-about-item:active { transform: scale(0.99); }
.help-about-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--accent, #38bdf8);
  flex-shrink: 0;
}
.help-about-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.help-about-text { font-weight: 600; }
.help-about-chevron { color: var(--muted); display: inline-flex; }
/* ---- Settings modal — spacing & layout polish (Settings only) ---- */
/* Scoped strictly to .settings-modal* so no other modal/screen is affected.
   Colors, fonts, sizes, borders and the glass/dark look are unchanged. */

.settings-modal {
  padding: 24px;
}

.settings-modal-header {
  gap: 14px;
}

.settings-modal-header h3 {
  margin: 0;
}

.settings-modal-subtitle {
  margin-top: 8px;
  line-height: 1.5;
}

.settings-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 18px;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  /* Minus the reserved top ad band so the Settings panel always fits BELOW
     the global advertisement bar. */
  max-height: calc(100dvh - var(--ad-band) - 220px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Language field */
.settings-modal-body .field {
  gap: 8px;
  margin-bottom: 0;
}

/* Theme group */
.settings-modal-body .theme-group {
  gap: 10px;
  margin-bottom: 0;
}

/* App Sounds / Speaker groups */
.settings-modal-body .app-sounds-group {
  padding: 14px 14px 16px;
  margin-bottom: 0;
}

.settings-modal-body .app-sounds-header {
  gap: 12px;
}

.settings-modal-body .app-sounds-modes {
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
}

/* Button sound & haptics mode field */
.settings-modal-body .app-sound-mode {
  gap: 8px;
  margin-bottom: 0;
}

.settings-modal-body .switch-row {
  gap: 12px;
}

.settings-modal-body .field-caption {
  margin-top: 2px;
  line-height: 1.45;
  padding-right: 12px;
}

body[data-language='ar'] .settings-modal-body .field-caption {
  padding-right: 0;
  padding-left: 12px;
}

/* Speaker caption (full-width paragraph) */
.settings-modal-body .speaker-caption {
  margin-top: 0;
  line-height: 1.5;
}

/* Help & About item — spacing handled by the body gap */
.settings-modal-body .help-about-item {
  margin-top: 0;
}

/* Responsive: slightly tighter on small screens so it stays comfortable */
@media (max-width: 480px) {
  .settings-modal {
    padding: 20px;
  }
  .settings-modal-body {
    gap: 14px;
    padding-top: 16px;
    margin-top: 14px;
    /* Small screens: same cap, still minus the reserved top ad band. */
    max-height: calc(100dvh - var(--ad-band) - 180px);
  }
  .settings-modal-body .app-sounds-group {
    padding: 12px 12px 14px;
  }
}

/* ---- Help modal ---- */
.help-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 23, 0.72);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.help-modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}
.help-modal {
  width: min(92vw, 480px);
  /* Reserved top ad band (--ad-band) is added to the 40px backdrop padding so
     the panel can never grow up into the advertisement space. */
  max-height: calc(100vh - var(--ad-band) - 40px);
  max-height: calc(100dvh - var(--ad-band) - 40px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: var(--shadow);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s ease;
}
.help-modal-backdrop.show .help-modal {
  transform: translateY(0) scale(1);
}
.help-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 0;
}
.help-back-btn {
  border: none;
  background: var(--panel-2);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.help-back-btn:hover { background: rgba(56,189,248,0.15); }
.help-heading { flex: 1; min-width: 0; }
.help-heading h3 { margin: 0; font-size: 1.2rem; }
.help-modal-subtitle { color: var(--muted); margin-top: 6px; font-size: 0.9rem; }
.help-modal-body {
  overflow-y: auto;
  padding: 14px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.help-card {
  background: var(--panel-2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 14px 16px;
}
.help-card-title {
  margin: 0 0 10px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.help-card-title .help-dot { color: var(--accent); }
.help-card-text {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.93rem;
}
.help-card-text + .help-card-text { margin-top: 8px; }
.help-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.help-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}
.help-list .help-bullet { color: var(--accent-2); flex-shrink: 0; }
.help-subsection { margin-top: 4px; }
.help-subsection-title {
  display: block;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  font-size: 0.95rem;
}
.help-example {
  margin: 4px 0 0;
  color: var(--accent-2);
  font-size: 0.88rem;
  font-weight: 600;
}
.help-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 10px 0;
}
.help-btn-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}
.help-btn-row:last-child { border-bottom: none; }
.help-btn-key {
  color: var(--text);
  font-weight: 700;
  flex-shrink: 0;
  min-width: 42px;
  text-align: center;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 2px 6px;
}

/* RTL */
body[data-language='ar'] .help-back-btn i,
body[data-language='ar'] .help-about-chevron i { transform: rotate(180deg); }
body[data-language='ar'] .help-card,
body[data-language='ar'] .help-about-item { text-align: right; }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.field input,
.field select {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: clamp(10px, 2vw, 12px) clamp(12px, 2.3vw, 14px);
  background: var(--panel-2);
  color: var(--text);
  width: 100%;
}

.panel-result,
.history-list {
  margin-top: 10px;
}

.drawer-panel .panel-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
}

.drawer-panel .result-value {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.drawer-panel .result-words {
  font-size: 0.95rem;
  line-height: 1.5;
}

.result-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-result);
}

.result-words {
  color: var(--text-muted);
  margin-top: 6px;
}

.switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.switch {
  position: relative;
  display: inline-flex;
  width: 52px;
  height: 30px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  inset: 0;
  background: var(--panel-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 4px;
  top: 4px;
  border-radius: 50%;
  background: white;
  transition: transform 0.2s ease;
}

.switch input:checked + .slider {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.switch input:checked + .slider::before {
  transform: translateX(22px);
}

.field-caption {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 4px;
}

.app-sounds-group {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: var(--panel-2);
  padding: 12px;
  margin-bottom: 12px;
}

.app-sounds-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.app-sounds-title {
  font-weight: 600;
}

.app-sounds-modes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 10px;
  transition: opacity 0.2s ease;
}

.app-sounds-group.app-sounds-off .app-sounds-modes {
  opacity: 0.45;
}

.app-sound-mode {
  margin-bottom: 0;
}

.field-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.preset-group {
  margin-bottom: 12px;
}

.preset-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.preset-btn {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 13px;
  padding: 10px 8px;
  background: var(--panel-2);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.preset-btn.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.2);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(45, 212, 191, 0.16));
}

.preset-title {
  font-weight: 700;
  font-size: 0.9rem;
}

.preset-preview {
  color: var(--muted);
  font-size: 0.8rem;
}

.trading-summary {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.summary-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--panel-2);
  color: var(--muted);
}

.summary-card strong {
  color: var(--text);
  font-size: 0.95rem;
}

.theme-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.theme-option {
  background: var(--panel-2);
  color: var(--text);
  padding: 8px 12px;
}

.theme-option.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--text-on-accent);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.note-compose,
.quick-note-compose {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.note-input {
  flex: 1;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--panel-2);
  color: var(--text);
}

.small {
  padding: 8px 10px;
  font-size: 0.85rem;
}

.quick-notes-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 12px;
}

.quick-notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.quick-notes-panel {
  display: block;
}

.quick-notes-panel.collapsed {
  display: none;
}

.history-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-list.compact {
  gap: 8px;
}

.history-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--panel-2);
  border-radius: 12px;
  padding: 10px;
}

.history-item input {
  margin-top: 4px;
}

.history-actions-inline {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.history-action-btn {
  border: none;
  border-radius: 10px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  cursor: pointer;
}

.history-note-input {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
}

/* History entry cards */
.history-entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--panel-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: var(--shadow);
}

.history-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.history-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.history-select {
  accent-color: var(--accent);
  cursor: pointer;
}

.history-id-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: rgba(56, 189, 248, 0.12);
  border-radius: 999px;
  padding: 2px 8px;
  opacity: 0.75;
}

.history-expression {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.history-result {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-result);
  overflow-wrap: anywhere;
}

.history-datetime {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.history-datetime .history-date,
.history-datetime .history-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-subtle);
  border-radius: 999px;
  padding: 2px 8px;
}

.history-remaining-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 2px;
}

.history-note-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.history-note-row .history-note-input {
  flex: 1;
  margin-top: 0;
}

.history-edit-note-btn,
.history-share-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  font-size: 0.98rem;
}

.history-edit-note-btn:hover {
  background: rgba(56, 189, 248, 0.18);
  color: var(--accent);
  transform: translateY(-1px);
}

.history-share-btn:hover {
  background: rgba(45, 212, 191, 0.18);
  color: var(--accent-2);
  transform: translateY(-1px);
}

/* Per-entry speaker button (History card header). VISUAL ONLY: the inline
   speaker SVG carries no width/height attributes, so without an explicit
   size here it collapses to 0x0 and the button renders as an empty nub.
   Markup, click handler and speech behaviour are untouched. */
.history-speak-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.history-speak-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.history-speak-btn:hover {
  background: rgba(56, 189, 248, 0.18);
  color: var(--accent);
  transform: translateY(-1px);
}

.history-speak-btn.speaking {
  color: var(--info);
  background: rgba(251, 191, 36, 0.16);
}

/* HISTORY UI VISIBILITY ONLY — hide the per-entry "Insert Result" button.
   The button markup, its click handler and insertResultIntoSmartDocument()
   are intentionally left intact; delete this one rule to restore it. */
.history-insert-smart-btn {
  display: none;
}

.empty-history {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  color: var(--text-muted);
  font-size: 0.95rem;
  text-align: center;
}

body[data-language='ar'] .history-datetime {
  flex-direction: row-reverse;
}

@media (max-width: 480px) {
  .history-entry {
    padding: 12px 12px 10px;
  }
  .history-result {
    font-size: 1.15rem;
  }
}

.history-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.history-actions {
  margin-top: 12px;
}

/* Full-screen History panel */
.history-panel {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  overflow: hidden;
}

.history-panel.open {
  opacity: 1;
  pointer-events: auto;
}

.history-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: max(16px, calc(var(--safe-top) + 16px)) max(16px, calc(var(--safe-right) + 16px)) max(16px, calc(var(--safe-bottom) + 16px)) max(16px, calc(var(--safe-left) + 16px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.history-screen-header {
  display: flex;
  /* The screen title is hidden (see .history-screen-title), so keep the four
     top-bar icons packed together in one tidy row at the same edge as before. */
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.history-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;
}

.history-back-btn i {
  font-size: 0.85rem;
}

/* History top bar — icon-only buttons (select all / company name / share / close).
   Text labels are intentionally not rendered; each button keeps an aria-label
   plus a localized data-i18n-title tooltip. */
.history-top-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: 14px;
  font-size: 1rem;
  line-height: 1;
  flex: 0 0 auto;
}

.history-top-icon-btn i {
  font-size: 1rem;
  line-height: 1;
}

.history-screen-title {
  /* Visible title ("سجل 24 ساعة") intentionally hidden — display only removed. */
  display: none;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  text-align: center;
}

.history-remaining {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.7;
  background: var(--surface-subtle);
  border-radius: 999px;
  padding: 2px 8px;
  align-self: flex-start;
}

body[data-language='ar'] .history-back-btn {
  flex-direction: row-reverse;
}

body[data-language='ar'] .history-screen-header {
  flex-direction: row-reverse;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--panel-2);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  visibility: visible;
}

body.modal-open {
  overflow: hidden;
}

.converter-card {
  margin-top: 18px;
  display: grid;
  gap: 18px;
}

.card-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.card-heading h2 {
  margin: 0;
  font-size: 1.2rem;
}

.converter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.converter-field,
.converter-result-field {
  display: grid;
  gap: 8px;
}

.amount-field {
  grid-column: span 2;
}

.converter-result-field {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
}

.converter-output {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
  min-height: 48px;
  display: flex;
  align-items: center;
}

.conversion-rate {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 6px;
}

.currency-words {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  min-height: 20px;
  margin-top: 8px;
}

.converter-mode-switcher {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.converter-mode-btn {
  flex: 1;
  border: none;
  border-radius: 999px;
  padding: 10px 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}

.converter-mode-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--text-on-accent);
}

.market-rate-field {
  grid-column: span 2;
}

.market-rate-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: clamp(10px, 2vw, 12px) clamp(12px, 2.3vw, 14px);
  background: var(--panel-2);
}

.market-rate-prefix,
.market-rate-suffix {
  color: var(--muted);
  font-size: 0.92rem;
  white-space: nowrap;
  font-weight: 600;
}

.market-rate-row input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  min-width: 0;
}

.currency-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.currency-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.currency-select-wrapper select {
  flex: 1;
}

.favorite-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.2s ease;
  z-index: 2;
}

.favorite-btn:hover {
  color: var(--info);
  background: rgba(251, 191, 36, 0.1);
}

.favorite-btn.active {
  color: var(--info);
}

body[data-language='ar'] .favorite-btn {
  right: auto;
  left: 8px;
}

.currency-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.currency-status {
  color: var(--muted);
  font-size: 0.95rem;
  flex: 1;
}

.cache-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--info);
  font-size: 0.85rem;
  padding: 4px 10px;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 999px;
}

.cache-indicator i {
  font-size: 0.75rem;
}

.currency-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 23, 0.72);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.currency-modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.currency-modal {
  width: min(100%, 640px);
  /* 90vh minus the reserved top ad band, so the panel always fits BELOW the
     advertisement band (it used to centre against the whole viewport). */
  max-height: min(calc(100vh - var(--ad-band) - 40px), 740px);
  max-height: min(calc(100dvh - var(--ad-band) - 40px), 740px);
  overflow-y: auto;
  display: grid;
  gap: 18px;
  padding: 22px;
  border-radius: 28px;
}

.currency-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.currency-modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
}

.currency-modal-subtitle {
  color: var(--muted);
  margin-top: 6px;
}

.currency-modal-body {
  display: grid;
  gap: 14px;
}

.currency-search-field input {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  padding: 14px 16px;
}

.currency-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-height: min(60vh, 520px);
  overflow: auto;
}

.currency-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.currency-item strong {
  color: var(--text);
  display: block;
  margin-bottom: 4px;
}

.currency-item span {
  color: var(--muted);
  font-size: 0.92rem;
}

.currency-close-button,
.modal-close-btn {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Currency Rates screen (أسعار العملات) */
.currency-rates-modal {
  width: min(100%, 560px);
}

.currency-rates-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.currency-rates-back-btn {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.currency-rates-back-btn:hover,
.currency-rates-back-btn:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

.currency-rates-title {
  margin: 0;
  font-size: 1.25rem;
  text-align: center;
}

.currency-rates-body {
  display: grid;
  gap: 12px;
}

.currency-rates-status {
  padding: 14px;
  text-align: center;
  border-radius: 14px;
  font-size: 0.95rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.currency-rates-status.error {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
}

.currency-rates-status.empty {
  color: var(--muted);
}

.currency-rates-list {
  max-height: min(64vh, 560px);
}

.currency-rates-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.currency-rates-flag {
  font-size: 1.5rem;
  line-height: 1;
}

.currency-rates-info {
  display: grid;
  min-width: 0;
}

.currency-rates-code {
  font-weight: 700;
  color: var(--text);
}

.currency-rates-name {
  color: var(--muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.currency-rates-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  justify-content: flex-end;
}

.currency-rates-price {
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.currency-rates-price.muted {
  opacity: 0.5;
}

.currency-rates-fav {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}

.currency-rates-fav:hover {
  transform: scale(1.15);
}

.currency-rates-fav.active {
  color: #fbbf24;
}

/* Flip the back arrow for RTL so it points to the "back" (right) side */
[dir='rtl'] .currency-rates-back-btn i {
  transform: scaleX(-1);
}

@media (max-width: 720px) {
  .currency-rates-list {
    max-height: 72vh;
  }

  .currency-rates-item {
    grid-template-columns: auto 1fr;
  }

  .currency-rates-right {
    grid-column: 2;
    justify-content: space-between;
  }
}

/* Currency Favorites screen (المفضلة) */
.currency-favorites-modal {
  width: min(100%, 560px);
}

.currency-favorites-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}

.currency-favorites-back-btn {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.currency-favorites-back-btn:hover,
.currency-favorites-back-btn:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

.currency-favorites-title {
  margin: 0;
  font-size: 1.25rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.currency-favorites-body {
  display: grid;
  gap: 12px;
}

.currency-favorites-status {
  padding: 14px;
  text-align: center;
  border-radius: 14px;
  font-size: 0.95rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.currency-favorites-status.empty {
  color: var(--muted);
}

.currency-favorites-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 36px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.14);
}

.currency-favorites-empty-icon {
  font-size: 2.2rem;
  color: #fbbf24;
  opacity: 0.8;
}

.currency-favorites-empty-text {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.currency-favorites-empty-hint {
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 36ch;
  overflow-wrap: anywhere;
}

.currency-favorites-list {
  max-height: min(64vh, 560px);
}

.currency-favorites-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.currency-favorites-flag {
  font-size: 1.6rem;
  line-height: 1;
}

.currency-favorites-info {
  display: grid;
  min-width: 0;
}

.currency-favorites-code {
  font-weight: 700;
  color: var(--text);
}

.currency-favorites-name {
  color: var(--muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.currency-favorites-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  justify-content: flex-end;
}

.currency-favorites-price {
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.currency-favorites-price.muted {
  opacity: 0.5;
}

.currency-favorites-fav {
  border: none;
  background: transparent;
  color: #fbbf24;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}

.currency-favorites-fav:hover {
  transform: scale(1.15);
}

/* Flip the back arrow for RTL so it points to the "back" (right) side */
[dir='rtl'] .currency-favorites-back-btn i {
  transform: scaleX(-1);
}

@media (max-width: 720px) {
  .currency-favorites-list {
    max-height: 72vh;
  }

  .currency-favorites-item {
    grid-template-columns: auto 1fr;
  }

  .currency-favorites-right {
    grid-column: 2;
    justify-content: space-between;
  }
}

@media (max-width: 720px) {
  .converter-grid {
    grid-template-columns: 1fr;
  }

  .amount-field,
  .market-rate-field {
    grid-column: span 1;
  }

  .currency-modal {
    width: min(100%, 100vw);
    /* 92vh minus the reserved top ad band (see the base rule). */
    max-height: calc(100vh - var(--ad-band) - 40px);
    max-height: calc(100dvh - var(--ad-band) - 40px);
    border-radius: 22px;
  }

  .currency-modal-header {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   CURRENCY CONVERTER SCREEN (redesign)
   ============================================================ */
.currency-converter-modal {
  width: min(100%, 600px);
  gap: 14px;
}

/* Top bar: back | centered title | refresh */
.currency-converter-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.currency-converter-title {
  margin: 0;
  font-size: 1.25rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.currency-converter-icon-btn {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1.15rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}

.currency-converter-icon-btn:hover,
.currency-converter-icon-btn:focus-visible {
  background: var(--surface-hover);
  outline: none;
}

.currency-converter-icon-btn:active {
  transform: scale(0.9);
}

/* Back arrow flip for RTL */
[dir='rtl'] .currency-converter-back i {
  transform: scaleX(-1);
}

/* Refresh spin feedback */
.currency-converter-refresh i.spinning {
  animation: converterSpin 0.6s linear;
}
@keyframes converterSpin {
  to { transform: rotate(360deg); }
}

/* Cards */
.converter-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  padding: 14px 16px;
  display: grid;
  gap: 14px;
  min-width: 0;
}

/* Currency strip (clickable -> opens the existing native select) */
.converter-card-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.converter-flag {
  font-size: 1.7rem;
  line-height: 1;
  flex-shrink: 0;
}

.converter-label {
  font-weight: 700;
  color: var(--text);
  font-size: 1.02rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.converter-strip-spacer {
  flex: 1;
}

.converter-chevron {
  color: var(--muted);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.converter-strip-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px; /* avoids iOS input zoom */
}

.converter-fav-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  font-size: 1.05rem;
  flex-shrink: 0;
  z-index: 2;
  transition: color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.converter-fav-btn:hover {
  background: rgba(251, 191, 36, 0.12);
  color: var(--info);
}
.converter-fav-btn.active { color: var(--info); }
.converter-fav-btn:active { transform: scale(0.9); }

/* Amount input */
.converter-amount-field {
  display: block;
}

.converter-amount-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: clamp(2rem, 7vw, 2.8rem);
  font-weight: 700;
  padding: 4px 2px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
  min-width: 0;
}
.converter-amount-input:focus { border-bottom-color: var(--accent); }
.converter-amount-input::placeholder { color: var(--muted); opacity: 0.6; }

/* Custom-rate screen field labels (تحويل بسعر مخصص) */
.custom-rate-field-label {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 4px;
}

/* Swap row + circular button between the two cards */
.converter-swap-row {
  display: flex;
  justify-content: center;
  margin: -8px 0;
  position: relative;
  z-index: 3;
}
.converter-swap-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--text-on-accent);
  font-size: 1.3rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}
.converter-swap-btn:hover { transform: scale(1.08); }
.converter-swap-btn:active { transform: scale(0.94); }

/* Output block inside the To card */
.converter-card-output {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.converter-output-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.converter-output {
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  font-weight: 800;
  color: var(--text);
  min-height: 50px;
  display: flex;
  align-items: center;
  flex: 1;
  overflow-wrap: anywhere;
  min-width: 0;
}

.converter-speak-btn {
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.converter-speak-btn:hover { background: var(--surface-hover); }
.converter-speak-btn:active { transform: scale(0.9); }
.converter-speak-btn.speaking {
  color: var(--info);
  background: rgba(251, 191, 36, 0.16);
  animation: converterPulse 1s ease-in-out infinite;
}
@keyframes converterPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0); }
}

.conversion-rate {
  color: var(--accent-2);
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.currency-words {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .currency-converter-modal {
    gap: 12px;
  }
  .converter-card {
    padding: 12px 14px;
  }
  .converter-chevron { display: none; }
}


.install-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 23, 0.72);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.install-modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.install-modal {
  width: min(92vw, 440px);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 20px;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s ease;
}

.install-modal-backdrop.show .install-modal {
  transform: translateY(0) scale(1);
}

.install-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.install-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(45, 212, 191, 0.16));
  font-size: 1.2rem;
}

.install-modal-heading {
  flex: 1;
}

.install-modal-heading h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.install-modal-subtitle {
  color: var(--muted);
  font-size: 0.9rem;
}

.modal-close-btn {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1.3rem;
  cursor: pointer;
}

.install-modal-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-inline-start: 18px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 16px;
}

.install-modal-steps li {
  color: var(--muted);
}

/* ============================================================
   NOTES DESIGN SYSTEM
   ============================================================ */

/* --- Notes Backdrops --- */
.pdf-reports-backdrop,
.notes-manager-backdrop,
.full-screen-note-backdrop,
.delete-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 23, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.pdf-reports-backdrop.show,
.notes-manager-backdrop.show,
.full-screen-note-backdrop.show,
.delete-confirm-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* --- Notes Manager Container --- */
.pdf-reports-workspace,
.notes-manager {
  width: min(100vw, 720px);
  max-height: calc(100dvh - 24px);
  max-height: calc(100vh - 24px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px) scale(0.985);
  transition: transform 0.22s ease;
}

.pdf-reports-backdrop.show .pdf-reports-workspace,
.notes-manager-backdrop.show .notes-manager {
  transform: translateY(0) scale(1);
}

/* --- Notes Manager Header --- */
.notes-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.notes-manager-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* --- Smart Documents (standalone home page) --- */
.smart-docs-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 23, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.smart-docs-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.smart-docs-home {
  width: min(100vw, 720px);
  max-height: calc(100dvh - 24px);
  max-height: calc(100vh - 24px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px) scale(0.985);
  transition: transform 0.22s ease;
}

.smart-docs-backdrop.show .smart-docs-home {
  transform: translateY(0) scale(1);
}

.smart-docs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.smart-docs-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

.smart-docs-body {
  padding: 20px 18px 24px;
  overflow-y: auto;
}

#smartDocsModal .smart-docs-home {
  width: min(100vw - 32px, 960px);
}

.smart-docs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
}

body[data-language='ar'] .smart-docs-header {
  flex-direction: row-reverse;
}

/* In RTL the back arrow should point to the right (mirror the LTR glyph) */
body[data-language='ar'] #closeSmartDocs svg {
  transform: scaleX(-1);
}

/* --- Icon Buttons (shared) --- */
.notes-back-btn,
.notes-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.notes-back-btn:hover,
.notes-add-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}

.notes-back-btn:active,
.notes-add-btn:active {
  background: var(--surface-active);
  transform: scale(0.96);
}

/* --- Folder Tabs --- */
.notes-folder-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.folder-tabs-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex: 1;
  padding-block: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.folder-tabs-scroll::-webkit-scrollbar {
  display: none;
}

.folder-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.folder-tab:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.folder-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

.folder-tab-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px dashed var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.folder-tab-add:hover {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--text-secondary);
}

.folder-tab-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.folder-tab-group .folder-tab {
  border-color: transparent;
}

.folder-tab-group.active {
  background: var(--accent);
  border-color: var(--accent);
}

.folder-tab-group.active .folder-tab {
  background: transparent;
  color: var(--text-on-accent);
}

.folder-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease, color 0.18s ease;
}

.folder-tab-btn:hover {
  background: rgba(127, 127, 127, 0.22);
  color: var(--text);
}

.folder-tab-btn.delete:hover {
  color: #e5484d;
}

.folder-tab-group.active .folder-tab-btn {
  color: var(--text-on-accent);
}

/* --- Notes Manager Body --- */
.notes-manager-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.notes-list-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 8px 12px 12px;
  position: absolute;
  inset: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.notes-list-panel.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
}

body[data-language='ar'] .notes-list-panel.hidden {
  transform: translateX(-8px);
}

.notes-list-panel:not(.hidden) {
  position: relative;
}

/* --- Notes List --- */
.notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.note-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  text-align: start;
}

.note-item:hover {
  background: var(--surface-hover);
  border-color: var(--border);
}

.note-item:active {
  background: var(--surface-active);
  transform: scale(0.985);
}

.note-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.note-item-title {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-item-preview {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.note-item-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.8;
}

.note-item-actions {
  display: flex;
  gap: 4px;
  margin-inline-start: auto;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.note-item:hover .note-item-actions,
.note-item:focus-within .note-item-actions {
  opacity: 1;
}

.note-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.note-action-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.note-action-btn.restore:hover {
  color: var(--accent);
}

.note-action-btn.danger:hover {
  color: var(--danger);
}
/* --- Notes List / Folder View — cards, pin badge, actions menu, toolbar --- */
.notes-list .note-item {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  min-width: 0;
}

.notes-list .note-item.pinned {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.note-item-main {
  gap: 6px; /* clear vertical space between title and "Updated today" */
}

.note-pin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.9;
}

.note-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  margin-inline-start: auto;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.note-menu-btn:hover,
.note-menu-btn:focus-visible {
  background: var(--surface-hover);
  color: var(--text);
}

/* Dropdown anchored to its own card; sized to stay inside the viewport. */
.note-menu {
  position: absolute;
  top: calc(100% - 4px);
  inset-inline-end: 8px;
  z-index: 60;
  display: none;
  flex-direction: column;
  min-width: 160px;
  max-width: calc(100% - 16px);
  max-height: 60vh;
  overflow: auto;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.note-menu.open {
  display: flex;
}

.note-menu button {
  text-align: start;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

.note-menu button:hover,
.note-menu button:focus-visible {
  background: var(--surface-hover);
}

.note-menu button.danger {
  color: var(--danger);
}

/* Top bar: search row + one-line folder/filter bar (folders + "+" left, sort right). */
.notes-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 2px;
  flex-wrap: nowrap;
}

.notes-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.notes-search-icon {
  position: absolute;
  inset-inline-start: 10px;
  opacity: 0.55;
  pointer-events: none;
}

.notes-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  padding-inline-start: 32px;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-subtle, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}

.notes-search-input:focus-visible {
  outline: none;
  border-color: var(--accent);
}

.notes-sort-select {
  flex-shrink: 0;
  max-width: 130px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-subtle, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.notes-section-label {
  margin: 8px 4px 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.folder-tabs-scroll {
  min-width: 0;
  flex-wrap: nowrap;
}

@media (max-width: 480px) {
  .notes-toolbar {
    flex-wrap: wrap;
    padding: 8px 10px 2px;
  }
  .notes-sort-select {
    max-width: 110px;
  }
  .note-menu {
    min-width: 150px;
  }
}
/* --- End Notes List / Folder View --- */

/* --- Empty States --- */

/* --- Empty States --- */
.notes-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
}

.notes-empty-state.hidden {
  display: none;
}

.notes-empty-icon {
  opacity: 0.5;
  margin-bottom: 4px;
}

.notes-empty-state p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.notes-empty-btn {
  margin-top: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.15s ease;
}

.notes-empty-btn:hover {
  opacity: 0.9;
}

.notes-empty-btn:active {
  transform: scale(0.96);
}

/* --- Bottom Navigation --- */
.notes-bottom-nav {
  display: flex;
  border-top: 1px solid var(--border);
  padding: 6px 12px;
  gap: 6px;
  background: var(--panel);
}

.notes-nav-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.notes-nav-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.notes-nav-btn.active {
  background: var(--surface-active);
  color: var(--text);
}

/* --- Full Screen Note Editor --- */
.full-screen-note {
  width: min(100vw, 720px);
  max-height: calc(100dvh - 24px);
  max-height: calc(100vh - 24px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(10px) scale(0.985);
  transition: transform 0.22s ease;
}

.full-screen-note-backdrop.show .full-screen-note {
  transform: translateY(0) scale(1);
}

.full-screen-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.full-screen-note-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.note-title-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background 0.18s ease;
}

.note-title-input:focus {
  background: var(--surface-subtle);
}

.note-title-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.notes-done-btn {
  padding: 8px 16px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.notes-done-btn:hover {
  opacity: 0.9;
}

.notes-done-btn:active {
  transform: scale(0.96);
}

/* --- Notes Save (✓) Button --- */
.notes-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--text-on-accent);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.18s ease, transform 0.15s ease, background 0.18s ease;
}

.notes-save-btn:hover {
  opacity: 0.9;
}

.notes-save-btn:active {
  transform: scale(0.92);
}

/* --- Notes Send (Arrow) Button --- */
.notes-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--accent-2);
  color: var(--text-on-accent);
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.18s ease, transform 0.15s ease, background 0.18s ease;
}

.notes-send-btn:hover {
  opacity: 0.9;
}

.notes-send-btn:active {
  transform: scale(0.92);
}

/* --- Full Screen Body --- */
.full-screen-note-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.note-body-input {
  flex: 1;
  width: 100%;
  min-height: 160px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  padding: 16px 18px;
  overflow-y: auto;
  text-align: start;
  word-break: break-word;
  cursor: text;
}

.note-body-input:empty::before {
  content: attr(placeholder);
  color: var(--text-muted);
  opacity: 0.6;
  pointer-events: none;
}

/* Mixed AR/EN direction + list fix (Notes scope only): the editable body resolves
   each paragraph's base direction from its own content (Arabic RTL, English LTR,
   mixed naturally); list items do the same and lists keep logical indentation.
   Toolbar/controls/tables/images are untouched. */
.note-body-input {
  unicode-bidi: plaintext;
}
.note-body-input p,
.note-body-input li {
  text-align: start;
  unicode-bidi: plaintext;
}
.note-body-input ul,
.note-body-input ol {
  padding-inline-start: 20px;
  padding-inline-end: 0;
}

/* --- Note format toolbar --- */
.note-format-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
}

.note-format-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 1.05rem;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.note-format-btn:hover { background: var(--surface-subtle); }
.note-format-btn:active { background: var(--surface-hover); }

.fmt-bold { font-weight: 700; }
.fmt-italic { font-style: italic; }
.fmt-underline { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================================
   Minimalist Notes Editor UI — Notes feature scope only (UI / layout).
   The editor now shows ONE compact horizontal toolbar row
   (B I U | Text Style ▼ | • List 1. List | Image Table) and the small
   Text Style dropdown. All ids, classes, handlers, autosave/persistence and
   data stay exactly as they were — only the arrangement/visibility changed.
   ============================================================================ */

/* Single row, compact spacing (never wraps into a second row). */
.note-format-toolbar {
  flex-wrap: nowrap;
  gap: 6px;
  padding: 6px 10px;
  overflow: visible;
}

/* Buttons that belong to the toolbar itself (the dropdown's own items are untouched). */
.note-format-toolbar > .note-format-btn {
  flex: 0 0 auto;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
}

.note-aa-btn { font-weight: 600; }

/* Toolbar separators: soft, low-contrast, same visual language as the editor. */
.note-aa-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  margin: 0 1px;
  background: var(--border);
}
/* PHASE 09: Notes PDF document-options panel (template / header / footer /
   watermark). Compact popover row under the preview toolbar, same visual
   language as the note-format toolbar above. */
.note-pdf-doc-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
  font-size: 13px;
}
.note-pdf-doc-options[hidden] { display: none; }
.note-pdf-doc-opt { display: inline-flex; align-items: center; gap: 6px; }
.note-pdf-doc-opt select { height: 30px; padding: 0 6px; }
.note-pdf-doc-check { display: inline-flex; align-items: center; gap: 5px; }
.note-pdf-doc-wmtext { height: 30px; padding: 0 8px; min-width: 140px; flex: 1 1 140px; max-width: 260px; }


.note-aa-chevron {
  flex: 0 0 auto;
  margin-inline-start: 3px;
  opacity: 0.7;
}

/* Notes UI-only removal: elements kept fully wired (same ids/handlers) but no longer
   displayed — bottom floating Delete, checklist/divider/cell-bg row buttons,
   Font Size / Colors / Presets / Styles / Frames sections, palettes, color inputs. */
.note-ui-hidden { display: none !important; }

/* Notes popovers: make the pre-existing `.hidden` class effective for the Notes
   editor's own popovers ONLY (the global class is intentionally left untouched, so
   no other feature is affected). */
#noteAaPanel.hidden,
#noteTextColorPalette.hidden,
#noteHighlightPalette.hidden,
#noteCellBgColorPalette.hidden {
  display: none !important;
}

/* Text Style dropdown: the existing #noteAaPanel as a small popover anchored under
   the single toolbar row (instead of a large in-flow block). */
.full-screen-note-body { --note-toolbar-h: 47px; }

.note-aa-panel {
  position: absolute;
  top: var(--note-toolbar-h);
  inset-inline-start: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(264px, calc(100vw - 24px));
  max-height: min(60vh, 360px);
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  overflow-y: auto;
}

.note-aa-section {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.note-aa-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}

.note-aa-item {
  flex: 0 0 auto;
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.note-aa-item:hover { background: var(--surface-subtle); }
.note-aa-style { font-weight: 600; white-space: nowrap; }

/* Narrow phones (390px / 360px and below): stay on ONE row, compact, no overflow,
   no clipping — no second toolbar row. */
@media (max-width: 400px) {
  .full-screen-note-body { --note-toolbar-h: 43px; }

  .note-format-toolbar { gap: 3px; padding: 6px 8px; }

  .note-format-toolbar > .note-format-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    font-size: 1rem;
  }

  .note-aa-sep { height: 16px; margin: 0; }
  .note-aa-chevron { margin-inline-start: 2px; }

  .note-aa-panel {
    width: min(240px, calc(100vw - 20px));
    padding: 8px;
  }

  .note-aa-item {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    font-size: 0.85rem;
  }
}

/* --- Notes Header: single balanced row (actions + title + close) --- */
/* The bar is ONE flex row that inherits the document direction, so the very same
   markup mirrors itself for RTL (ar/ku) and for every LTR language
   (en/fr/de/es/ru/tr) — the layout is language-independent.
   The icon buttons are fixed-size and icon-only (their meaning lives in
   aria-label/title, never in translated text), so no translation can stretch or
   break the bar; the title field is the only flexible item and takes every pixel
   that is left. */

.full-screen-note-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding-block: 10px 6px;
  padding-inline: 12px;
  overflow: visible;
}

.full-screen-note-title-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.full-screen-note-title-wrap {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.note-title-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-block: 9px;
  padding-inline: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  outline: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.note-title-input::placeholder { color: var(--text-muted); opacity: 0.8; font-weight: 500; }
.note-title-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* N03 — autosave confirmation chip beside the title input. Rendered (non-zero
   width) at all times; only its colour/opacity change when a save lands. */
.note-saved-indicator {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 45%;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.note-saved-indicator.show { opacity: 1; color: var(--accent); }

/* Fixed-size action group: never grows, never shrinks — so the icons can never
   overlap the title field nor push anything out of the bar. */
.full-screen-note-action-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 0;
  flex: 0 0 auto;
}

/* Notes header buttons — circular, colour-coded, identical size/alignment. */
.notes-back-btn,
.notes-save-btn,
.notes-send-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.notes-back-btn { background: var(--surface-subtle); color: var(--text); }
.notes-back-btn:hover { background: var(--surface-hover); }
.notes-back-btn:active { transform: scale(0.94); }

.notes-save-btn { background: var(--accent); color: #fff; }
.notes-save-btn:hover { background: var(--accent-dark); }
.notes-save-btn:active { transform: scale(0.94); }

.notes-send-btn { background: var(--send); color: #fff; }
.notes-send-btn:hover { background: var(--send-dark); }
.notes-send-btn:active { transform: scale(0.94); }

/* Narrow phones: keep the bar compact without ever pushing an item off screen. */
@media (max-width: 400px) {
  .full-screen-note-header { gap: 6px; padding-block: 8px 4px; padding-inline: 10px; }

  .full-screen-note-title-row,
  .full-screen-note-title-wrap { gap: 6px; }

  .note-title-input { padding-block: 8px; padding-inline: 10px; font-size: 1rem; }

  .full-screen-note-action-bar { gap: 6px; }

  .notes-back-btn,
  .notes-save-btn,
  .notes-send-btn {
    width: 38px;
    height: 38px;
  }
}

/* Very narrow phones / split screen: compact ONLY the Note editor bar, so the
   title stays usable and the X / PDF / Share icons stay clear and on screen. */
@media (max-width: 340px) {
  #fullScreenNoteModal .full-screen-note-header { gap: 5px; padding-inline: 8px; }

  #fullScreenNoteModal .full-screen-note-action-bar { gap: 5px; }

  #fullScreenNoteModal .note-title-input { padding-inline: 7px; font-size: 0.95rem; }

  #fullScreenNoteModal .notes-back-btn,
  #fullScreenNoteModal .notes-save-btn,
  #fullScreenNoteModal .notes-send-btn {
    width: 34px;
    height: 34px;
  }
}

/* Keyboard-safe spacing: extra bottom padding when virtual keyboard is active on mobile. */
@media (hover: none) and (pointer: coarse) {
  .full-screen-note-header { padding-bottom: 14px; }
}
.note-table-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  margin: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-subtle, rgba(128,128,128,0.08));
  flex-shrink: 0;
}

.note-table-panel.hidden { display: none; }

.note-table-panel-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.note-table-panel-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.note-table-panel-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text);
}

.note-table-panel-field input[type="number"] {
  width: 64px;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}

.note-table-panel-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.note-table-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.note-table-insert-btn {
  padding: 8px 16px;
  border-radius: 9px;
  border: none;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.15s ease;
}

.note-table-insert-btn:hover { opacity: 0.9; }
.note-table-insert-btn:active { transform: scale(0.96); }

.note-table-cancel-btn {
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.note-table-cancel-btn:hover { background: var(--surface-hover); color: var(--text); }

/* --- Note Blocks --- */

.note-block { min-height: 1.4em; }

/* --- Note Table --- */
.note-table-wrap {
  margin: 10px 0;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}

.note-table-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle, rgba(128,128,128,0.06));
  flex-wrap: wrap;
  user-select: none;
}

/* Grouped table controls: related actions sit together with a subtle divider
   between logical groups (Structure / Appearance / Alignment). Uses
   inline-start so it mirrors correctly in RTL (Arabic). */
.note-table-controls > .note-table-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.note-table-controls > .note-table-group + .note-table-group {
  padding-inline-start: 10px;
  border-inline-start: 1px solid var(--border);
  margin-inline-start: -2px;
}
.note-table-controls > .note-table-group + .note-table-group:empty { display: none; }

.note-table-ctl { 
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.note-table-ctl:hover { background: var(--surface-hover); color: var(--text); }
.note-table-ctl:active { border-color: var(--accent); color: var(--text); }
/* Keyboard navigation feedback for the table toolbar controls. */
.note-table-ctl:focus-visible,
.note-table-border-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* The Split Cell control is shown only while a merged cell is selected. */
.note-table-ctl[hidden] { display: none !important; }

/* --- Mobile table toolbar (shown above keyboard on coarse-pointer devices) --- */
.note-mobile-table-toolbar {
  /* Docked as a normal flex row below the editable note body: it sits above the
     on-screen keyboard (the modal shrinks via dynamic viewport units) without any
     body scroll-locking, and scrolls horizontally when the controls overflow. */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  padding: 6px 4px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  margin: 0;
  padding-inline-start: 0 !important;
}

.note-mobile-table-toolbar .note-table-ctl,
.note-mobile-table-toolbar .note-table-border-select {
  flex-shrink: 0;
  margin: 0 2px;
  font-size: 0.7rem;
  height: 26px;
  padding: 0 6px;
}

/* --- Table Borders control (compact <select> alongside the other table controls) --- */
.note-table-border-select {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  min-width: 110px;
  max-width: 160px;
}

.note-table-border-select:hover { background: var(--surface-hover); color: var(--text); }

/* Cell alignment <select> controls reuse the compact border <select> styling,
   just narrowed so the toolbar stays compact. */
.note-table-align-select { min-width: 66px; max-width: 92px; }

.note-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  min-width: 0;
}

.note-table td.note-cell {
  border: 1px solid var(--border);
  padding: 8px 10px;
  min-width: 56px;
  min-height: 30px;
  vertical-align: top;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: start;
  word-break: break-word;
  outline: none;
  background: transparent;
}

.note-table td.note-cell:focus {
  background: var(--surface-subtle, rgba(128,128,128,0.08));
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Selected cells that are pending a Merge Cells operation. */
.note-table td.note-cell.note-cell-selected {
  background: var(--surface-hover, rgba(128,128,128,0.16));
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Merged region focus cue: a merged cell (colspan/rowspan present) gets a
   firmer inner ring than a plain cell so it is clearly readable as one region. */
.note-table td.note-cell[colspan]:focus,
.note-table td.note-cell[rowspan]:focus {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: var(--surface-subtle, rgba(128,128,128,0.10));
}

.note-table.note-table-hasheader tr:first-child td.note-cell {
  font-weight: 600;
  background: var(--surface-subtle, rgba(128,128,128,0.05));
}

/* --- Table Borders (data-border-style on the <table>; absent/"all" = default look above) --- */
.note-table[data-border-style="none"] td.note-cell { border: none; }

.note-table[data-border-style="outside"] td.note-cell { border: none; }
.note-table[data-border-style="outside"] { border: 1px solid var(--border); }

.note-table[data-border-style="inside"] { border: none; }
.note-table[data-border-style="inside"] td.note-cell { border: 1px solid var(--border); }
.note-table[data-border-style="inside"] tr:first-child td.note-cell { border-top: none; }
.note-table[data-border-style="inside"] tr:last-child td.note-cell { border-bottom: none; }
.note-table[data-border-style="inside"] td.note-cell:first-child { border-left: none; }
.note-table[data-border-style="inside"] td.note-cell:last-child { border-right: none; }

/* --- Cell Alignment (data-h-align / data-v-align on the <td>; absent = default look) --- */
.note-table td.note-cell[data-h-align="left"] { text-align: left; }
.note-table td.note-cell[data-h-align="center"] { text-align: center; }
.note-table td.note-cell[data-h-align="right"] { text-align: right; }
.note-table td.note-cell[data-v-align="top"] { vertical-align: top; }
.note-table td.note-cell[data-v-align="middle"] { vertical-align: middle; }
.note-table td.note-cell[data-v-align="bottom"] { vertical-align: bottom; }

.note-table td.note-cell p,
.note-table td.note-cell div {
  margin: 0;
}

/* --- Note Table Resize (column widths / row heights via in-table handles) --- */
.note-table.note-table-fixed { width: auto; table-layout: fixed; }
.note-table-resize {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}
.note-table-resize > .note-col-handle,
.note-table-resize > .note-row-handle { pointer-events: auto; touch-action: none; }
.note-col-handle, .note-row-handle {
  position: absolute;
  background: transparent;
  z-index: 6;
}
.note-col-handle { cursor: col-resize; }
.note-row-handle { cursor: row-resize; }
.note-col-handle::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: transparent;
  transition: background 0.15s ease;
}
.note-row-handle::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 2px;
  background: transparent;
  transition: background 0.15s ease;
}
.note-col-handle:hover::after, .note-col-handle.is-dragging::after { background: var(--accent); }
.note-row-handle:hover::after, .note-row-handle.is-dragging::after { background: var(--accent); }
/* Active resize feedback: a firmer accent line plus a faint tint over the whole
   handle so the grabbed border is unmistakable while dragging. */
.note-col-handle.is-dragging { background: rgba(128,128,128,0.10); }
.note-row-handle.is-dragging { background: rgba(128,128,128,0.10); }
.note-col-handle.is-dragging::after { width: 3px; }
.note-row-handle.is-dragging::after { height: 3px; }

/* --- Note Table Responsive --- */
@media (max-width: 640px) {
  .note-table-wrap { overflow-x: auto; }
  .note-table { min-width: 480px; }
  .note-table td.note-cell { padding: 7px 8px; min-width: 52px; font-size: 0.9rem; }
  .note-table-ctl { padding: 0 8px; font-size: 0.75rem; }
  /* Let the grouped toolbar wrap within each group instead of overflowing off
     the screen, keeping every control reachable on small screens. */
  .note-table-controls { gap: 6px; padding: 7px 8px; }
  .note-table-controls > .note-table-group { flex-wrap: wrap; row-gap: 4px; }
  .note-table-controls > .note-table-group + .note-table-group { padding-inline-start: 8px; }
}

/* Touch devices: slightly larger tap targets for the table toolbar controls
   and a clearer resize line. Visual only — no resize calculation or control
   behaviour is changed. */
@media (pointer: coarse) {
  .note-table-controls { padding: 10px; gap: 8px; }
  .note-table-controls > .note-table-group { gap: 8px; row-gap: 6px; }
  .note-table-ctl,
  .note-table-border-select { height: 34px; font-size: 0.82rem; }
  .note-col-handle::after { width: 4px; }
  .note-row-handle::after { height: 4px; }
}

.note-delete-float-btn {
  position: absolute;
  bottom: 16px;
  inset-inline-end: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
  z-index: 2;
}

.note-delete-float-btn:hover {
  background: var(--surface-hover);
  color: var(--danger);
  border-color: var(--danger);
}

.note-delete-float-btn:active {
  transform: scale(0.92);
}

/* --- Notes Responsive --- */
@media (max-width: 920px) {
  .notes-manager,
  .pdf-reports-workspace,
  .full-screen-note,
  .smart-docs-home {
    width: min(100vw - 20px, 100%);
    max-height: calc(100dvh - 20px);
    max-height: calc(100vh - 20px);
  }
}

@media (max-width: 640px) {
  .notes-manager,
  .pdf-reports-workspace,
  .full-screen-note,
  .smart-docs-home {
    width: 100vw;
    max-height: 100dvh;
    max-height: 100vh;
    border-radius: 0;
  }

  .notes-manager-backdrop,
  .pdf-reports-backdrop,
  .full-screen-note-backdrop,
  .smart-docs-backdrop {
    padding: 0;
  }

  .notes-manager-header {
    padding: 10px 14px;
  }

  .notes-folder-tabs {
    padding: 8px 10px;
  }

  .notes-list-panel {
    padding: 6px 8px 10px;
  }

  .notes-bottom-nav {
    padding: 6px 10px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }

  .note-body-input {
    padding: 12px 14px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .note-delete-float-btn {
    bottom: max(14px, env(safe-area-inset-bottom));
    inset-inline-end: 14px;
  }
}

@media (min-width: 921px) {
  .notes-manager {
    width: min(100vw, 780px);
  }
}

/* --- RTL Logical Properties Notes --- */
body[data-language='ar'] .notes-manager-header {
  flex-direction: row-reverse;
}

body[data-language='ar'] .folder-tabs-scroll {
  direction: rtl;
}

body[data-language='ar'] .note-item {
  text-align: right;
}

body[data-language='ar'] .note-item-meta {
  margin-inline-start: 0;
  margin-inline-end: 2px;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  .notes-manager,
  .smart-docs-home,
  .full-screen-note,
  .delete-confirm-modal,
  .note-item,
  .notes-nav-btn,
  .folder-tab,
  .notes-done-btn,
  .notes-save-btn,
  .notes-send-btn,
  .note-delete-float-btn,
  .notes-empty-btn {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --- Legacy compat: hide removed elements if referenced --- */
.note-open-btn,
.history-action-btn,
.ghost-btn.small {
  white-space: nowrap;
}

#foldersList,
.folders-list,
.folders-panel,
.notes-panel .folder-header,
.notes-manager-content,
.refreshNotesButton,
#refreshNotesButton {
  display: none !important;
}

/* ensure old note-body class doesn't conflict */
.note-body {
  display: none !important;
}

/* === FULL-SCREEN Notes UX (Notes Manager + Note Editor) === */
/* PDF V1 — Phase 1 import styles (scoped to #pdfReportsWorkspace only). */
#pdfReportsWorkspace .pdfv1-body {
  min-height: 240px;
}
#pdfReportsWorkspace .pdfv1-file-input {
  display: none;
}
#pdfReportsWorkspace .pdfv1-dropzone {
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 26px 18px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
#pdfReportsWorkspace .pdfv1-dropzone:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}
#pdfReportsWorkspace .pdfv1-dropzone.pdfv1-dragover {
  background: rgba(96, 165, 250, 0.14);
}
#pdfReportsWorkspace .pdfv1-drop-icon {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 8px;
}
#pdfReportsWorkspace .pdfv1-drop-title {
  margin: 0 0 4px;
  font-weight: 700;
}
#pdfReportsWorkspace .pdfv1-drop-sub {
  margin: 0 0 14px;
  opacity: 0.75;
  font-size: 0.9rem;
}
#pdfReportsWorkspace .pdfv1-browse-btn,
#pdfReportsWorkspace .pdfv1-change-btn {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  cursor: pointer;
}
#pdfReportsWorkspace .pdfv1-error {
  margin: 10px 2px 0;
  color: #fca5a5;
}
#pdfReportsWorkspace .pdfv1-viewer-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
#pdfReportsWorkspace .pdfv1-viewer-wrap[hidden] {
  display: none;
}
#pdfReportsWorkspace .pdfv1-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#pdfReportsWorkspace .pdfv1-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  opacity: 0.85;
}
#pdfReportsWorkspace .pdfv1-viewer {
  width: 100%;
  height: min(62vh, 560px);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
/* PDF V1 — Phase 2: Light Overlay ONLY (scoped to #pdfReportsWorkspace).
   Layer sits over the page area; controls stay outside the layer. */
#pdfReportsWorkspace .pdfv1-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
}
#pdfReportsWorkspace .pdfv1-tools[hidden] { display: none; }
#pdfReportsWorkspace .pdfv1-tools-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#pdfReportsWorkspace .pdfv1-tool-btn,
#pdfReportsWorkspace .pdfv1-page-btn {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  touch-action: manipulation;
}
#pdfReportsWorkspace .pdfv1-page-btn { padding: 6px 12px; }
#pdfReportsWorkspace .pdfv1-tool-btn:disabled { opacity: 0.45; cursor: default; }
#pdfReportsWorkspace .pdfv1-pagerow { justify-content: flex-start; }
#pdfReportsWorkspace .pdfv1-page-label { font-size: 0.86rem; opacity: 0.9; min-width: 130px; text-align: center; }
#pdfReportsWorkspace .pdfv1-tools-hint { font-size: 0.78rem; opacity: 0.7; }
#pdfReportsWorkspace .pdfv1-textrow { display: flex; gap: 8px; flex-wrap: wrap; }
#pdfReportsWorkspace .pdfv1-textrow[hidden] { display: none; }
#pdfReportsWorkspace .pdfv1-text-input {
  flex: 1 1 180px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
}
#pdfReportsWorkspace .pdfv1-stage {
  position: relative;
  direction: ltr;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
#pdfReportsWorkspace .pdfv1-stage .pdfv1-viewer {
  border: 0;
  border-radius: 0;
  display: block;
}
#pdfReportsWorkspace .pdfv1-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
}
#pdfReportsWorkspace .pdfv1-item {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  border: 2px solid transparent;
  border-radius: 6px;
  box-sizing: border-box;
}
#pdfReportsWorkspace .pdfv1-item.pdfv1-selected {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.35);
}
#pdfReportsWorkspace .pdfv1-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
#pdfReportsWorkspace .pdfv1-item-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2px 6px;
  font: inherit;
  font-weight: 700;
  color: #0f172a;
  background: rgba(255, 255, 235, 0.88);
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}
#pdfReportsWorkspace .pdfv1-handle {
  position: absolute;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: #2563eb;
  border: 2px solid #fff;
  border-radius: 50%;
  touch-action: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  z-index: 5;
  opacity: 0;
  transition: opacity 0.12s;
}
#pdfReportsWorkspace .pdfv1-item.pdfv1-selected .pdfv1-handle {
  opacity: 1;
}
#pdfReportsWorkspace .pdfv1-handle[data-handle="nw"] {
  top: -11px;
  left: -11px;
  cursor: nwse-resize;
}
#pdfReportsWorkspace .pdfv1-handle[data-handle="ne"] {
  top: -11px;
  right: -11px;
  cursor: nesw-resize;
}
#pdfReportsWorkspace .pdfv1-handle[data-handle="sw"] {
  bottom: -11px;
  left: -11px;
  cursor: nesw-resize;
}
#pdfReportsWorkspace .pdfv1-handle[data-handle="se"] {
  bottom: -11px;
  right: -11px;
  cursor: nwse-resize;
}
#pdfReportsWorkspace .pdfv1-item.is-signature:not(.pdfv1-selected) {
  border-color: transparent;
  box-shadow: none;
  background: transparent;
}
#pdfReportsWorkspace .pdfv1-item.is-signature:not(.pdfv1-selected) .pdfv1-sig-del,
#pdfReportsWorkspace .pdfv1-item.is-signature:not(.pdfv1-selected) .pdfv1-handle {
  display: none;
}
#pdfReportsWorkspace .pdfv1-item.is-signature.pdfv1-selected .pdfv1-handle {
  display: flex;
  opacity: 1;
}
#pdfReportsWorkspace .pdfv1-sig-del {
  position: absolute;
  /* Float fully OUTSIDE the top-end corner: its center must never sit on top
     of the ne/sw resize handle (which is centered on the same corner), or the
     X would swallow the handle's pointerdown and corner-resize would break. */
  top: -28px;
  inset-inline-end: -28px;
  width: 26px;
  height: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #dc2626;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  touch-action: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  z-index: 6;
  padding: 0;
}
#pdfReportsWorkspace .pdfv1-item.is-signature.pdfv1-selected .pdfv1-sig-del {
  display: flex;
}
/* Signature: 4 corner handles sit just outside the thin bounding box. */
#pdfReportsWorkspace .pdfv1-item.is-signature .pdfv1-handle[data-handle="nw"] {
  top: -11px; left: -11px; bottom: auto; right: auto;
}
#pdfReportsWorkspace .pdfv1-item.is-signature .pdfv1-handle[data-handle="ne"] {
  top: -11px; right: -11px; bottom: auto; left: auto;
}
#pdfReportsWorkspace .pdfv1-item.is-signature .pdfv1-handle[data-handle="sw"] {
  bottom: -11px; left: -11px; top: auto; right: auto;
}
#pdfReportsWorkspace .pdfv1-item.is-signature .pdfv1-handle[data-handle="se"] {
  bottom: -11px; right: -11px; top: auto; left: auto;
}
#pdfReportsWorkspace .pdfv1-sigwrap { display: flex; flex-direction: column; gap: 8px; }
#pdfReportsWorkspace .pdfv1-sigwrap[hidden] { display: none; }
#pdfReportsWorkspace .pdfv1-sig-title { margin: 0; font-size: 0.88rem; opacity: 0.85; }
#pdfReportsWorkspace .pdfv1-sig-canvas {
  width: 100%;
  max-width: 520px;
  height: 220px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}
#pdfReportsWorkspace .pdfv1-sig-row { display: flex; gap: 8px; flex-wrap: wrap; }
#pdfReportsWorkspace .pdfv1-place-btn { border-color: #34d399; }
/* === FULL-SCREEN Notes UX (Notes Manager + Note Editor) ===
   Notes must cover the entire application/viewport, not a small floating
   Notes must cover the entire application/viewport, not a small floating
   window. Placed after all Notes media queries so these rules win by
   source order (equal specificity) over the responsive width caps above.
   Delete-confirmation modal is intentionally left untouched. */
.notes-manager-backdrop,
.pdf-reports-backdrop,
.full-screen-note-backdrop {
  padding: 0; /* remove the padded "window" surround so panels reach the edges */
}

.notes-manager,
.pdf-reports-workspace,
.full-screen-note {
  width: 100%;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  box-shadow: none;
}


/* --- Delete Confirmation Modal --- */
.delete-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 8, 23, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 35;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.delete-confirm-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.delete-confirm-modal {
  width: min(100%, 340px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(10px) scale(0.97);
  transition: transform 0.22s ease;
}

.delete-confirm-backdrop.show .delete-confirm-modal {
  transform: translateY(0) scale(1);
}

.delete-confirm-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.delete-confirm-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.delete-confirm-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.delete-cancel-btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease;
}

.delete-cancel-btn:hover {
  background: var(--surface-hover);
}

.delete-ok-btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: 12px;
  border: none;
  background: var(--danger);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.15s ease;
}

.delete-ok-btn:hover {
  opacity: 0.9;
}

.delete-ok-btn:active {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 767px) {
  .drawer.side {
    width: 75vw;
    max-width: 75vw;
  }

  .drawer.top {
    width: min(100vw - 16px, 560px);
    height: clamp(320px, 58dvh, 480px);
  }

  .top-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-bar-actions {
    justify-content: flex-start;
  }

  .preset-buttons {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  body {
    padding: max(10px, calc(var(--safe-top) + 10px)) max(10px, calc(var(--safe-right) + 10px)) max(10px, calc(var(--safe-bottom) + 10px)) max(10px, calc(var(--safe-left) + 10px));
  }

  .calculator-card {
    padding: 14px;
  }

  .display-section {
    padding: 12px;
    padding-top: 58px;
  }

  .primary-display {
    min-height: 48px;
  }
}

@media (orientation: landscape) and (max-width: 900px) {
  body {
    align-items: flex-start;
    padding-top: calc(var(--safe-top) + 8px);
  }

  .app-shell {
    width: min(100%, 860px);
  }

  .calculator-card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas: "display controls" "display keypad";
    gap: 12px;
    align-items: start;
  }

  .display-section {
    grid-area: display;
    margin-bottom: 0;
    min-height: 0;
  }

  .calculator-card > .control-row {
    grid-area: controls;
    margin-bottom: 8px;
  }

  .calculator-card > .scientific-toggle-row,
  .calculator-card > .scientific-panel,
  .calculator-card > .percent-panel {
    grid-column: 2;
    min-width: 0;
    max-width: 100%;
  }

  .keypad-area {
    grid-area: keypad;
  }

  .drawer.side {
    width: min(75vw, 420px);
  }

  .drawer-tab {
    min-height: 44px;
  }
}

/* ============================================================
   PART 09 — NOTES IMAGE EDITOR (image blocks inside #noteBodyInput)
   Scoped ONLY to the Notes editor. Adds: selection box + 4 corner
   handles, image-only opacity slider, Send to Back layering with a
   proper stacking context (no z-index:-1), and responsive clamping.
   Aspect ratio is always preserved (width + height:auto).
   ============================================================ */
#noteBodyInput {
  position: relative; /* containing block + stacking context for image layering */
  overflow-x: hidden; /* image editor must never cause horizontal overflow */
}
/* Text and all other note blocks paint ABOVE the image layer. */
#noteBodyInput > *:not(.note-image-block) {
  position: relative;
  z-index: 2;
}
#noteBodyInput > .note-image-block {
  position: relative;
  z-index: 1;
  margin: 10px 0;
  max-width: 100%;
  border-radius: 10px;
  text-align: left; /* physical, not flipped by RTL */
}
#noteBodyInput > .note-image-block[data-image-align='center'] { text-align: center; }
#noteBodyInput > .note-image-block[data-image-align='right'] { text-align: right; }
/* Send to Back: image floats behind the text but stays visible & editable. */
#noteBodyInput > .note-image-block.is-behind {
  position: absolute;
  z-index: 0;
  margin: 0;
}
/* While the behind-image is NOT selected it must not block text interaction:
   the whole block is pointer-transparent; re-selecting happens via the
   delegated click handler in noteImageEnsureBodyClicks(). */
#noteBodyInput > .note-image-block.is-behind:not(.is-selected) {
  pointer-events: none;
}
.note-image-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: 8px;
}
.note-image-elem {
  display: block;
  height: auto;      /* aspect ratio locked */
  max-width: 100%;
  border-radius: 8px;
  -webkit-user-drag: none;
  user-select: none;
}
.note-image-block.is-selected .note-image-frame {
  outline: 2px solid rgba(96, 165, 250, 0.9);
  outline-offset: 2px;
}
/* 4 corner resize handles — visible only while selected */
.note-image-grip {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(96, 165, 250, 0.95);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  z-index: 3;
}
.note-image-grip.nw { top: -14px; left: -14px; cursor: nwse-resize; }
.note-image-grip.ne { top: -14px; right: -14px; cursor: nesw-resize; }
.note-image-grip.sw { bottom: -14px; left: -14px; cursor: nesw-resize; }
.note-image-grip.se { bottom: -14px; right: -14px; cursor: nwse-resize; }
.note-image-block.is-selected .note-image-grip {
  opacity: 1;
  pointer-events: auto;
}
.note-image-block.is-interacting,
.note-image-block.is-moving { touch-action: none; }
.note-image-block.is-moving-active { opacity: 0.85; }
/* Per-image control bar — shown ONLY while the image is selected */
.note-image-ctl {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 12px;
  background: var(--surface-subtle, rgba(127, 127, 127, 0.12));
  border: 1px solid var(--border, rgba(127, 127, 127, 0.25));
  max-width: 100%;
  box-sizing: border-box;
}
.note-image-block.is-selected .note-image-ctl { display: flex; }
.note-image-align,
.note-image-del,
.note-image-back {
  min-width: 30px;
  height: 28px;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.35));
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.note-image-align:active { transform: scale(0.96); }
.note-image-del { color: #ef4444; border-color: rgba(239, 68, 68, 0.4); }
.note-image-back[aria-pressed='true'] {
  background: var(--accent, #6c5ce7);
  color: #fff;
  border-color: transparent;
  /* Nudge (arrow) buttons — move image 2px per tap, touch-friendly */
  .note-image-nudge {
    min-width: 34px;
    height: 30px;
    padding: 0 5px;
    border-radius: 8px;
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.18));
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .note-image-nudge:active { transform: scale(0.95); background: rgba(255, 255, 255, 0.12); }
  .note-image-ctl-row-nudge { gap: 4px; }
  /* Zoom (+ / -) buttons — scale image 5% per tap */
  .note-image-zoom-minus,
  .note-image-zoom-plus {
    min-width: 32px;
    height: 30px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.18));
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
  }
  .note-image-zoom-minus:active,
  .note-image-zoom-plus:active { transform: scale(0.95); background: rgba(16, 185, 129, 0.25); }
  .note-image-ctl-row-zoom { gap: 4px; }
  .note-image-ctl-row-align { gap: 4px; }
  .note-image-align,
  .note-image-del,
  .note-image-back {
    min-width: 30px;
    height: 28px;
    padding: 2px 8px;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(127, 127, 127, 0.35));
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .note-image-align:active,
  .note-image-del:active,
  .note-image-back:active { transform: scale(0.96); }
  .note-image-del { color: #ef4444; border-color: rgba(239, 68, 68, 0.4); }
  .note-image-back[aria-pressed='true'] {
    background: var(--accent, #6c5ce7);
    color: #fff;
    border-color: transparent;
  }
  .note-image-ctl-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 150px;
  }
  .note-image-opacity-label {
    font-size: 0.75rem;
    opacity: 0.85;
    white-space: nowrap;
  }
  .note-image-opacity {
    flex: 1 1 80px;
    min-width: 70px;
    max-width: 170px;
    height: 24px;
    accent-color: var(--accent, #6c5ce7);
  }
  .note-image-opacity-val {
    font-size: 0.72rem;
    min-width: 36px;
    text-align: center;
    opacity: 0.9;
  }
  @media (max-width: 480px) {
    .note-image-ctl-row { flex-basis: 100%; }
    .note-image-opacity { max-width: none; }
    .note-image-grip { width: 20px; height: 20px; }
    .note-image-nudge { min-width: 30px; height: 28px; font-size: 0.9rem; }
    .note-image-zoom-minus,
    .note-image-zoom-plus { min-width: 28px; height: 28px; font-size: 0.95rem; }
  }


}
.note-image-ctl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 150px;
}
.note-image-opacity-label {
  font-size: 0.75rem;
  opacity: 0.85;
  white-space: nowrap;
}
.note-image-opacity {
  flex: 1 1 80px;
  min-width: 70px;
  max-width: 170px;
  height: 24px;
  accent-color: var(--accent, #6c5ce7);
}
.note-image-opacity-val {
  font-size: 0.72rem;
  min-width: 36px;
  text-align: center;
  opacity: 0.9;
}
@media (max-width: 480px) {
  .note-image-ctl-row { flex-basis: 100%; }
  .note-image-opacity { max-width: none; }
  .note-image-grip { width: 16px; height: 16px; }
}



/* ============================================================
   PDF REPORTS — post-upload FULL WORKSPACE (loaded state).
   Scoped strictly to #pdfReportsWorkspace. No other feature touched.
   Empty state: header + upload dropzone (unchanged behaviour).
   Loaded state (.pdf-reports-loaded on .pdf-reports-workspace):
   header hidden, upload hidden, slim 44px single-row toolbar,
   PDF stage fills the remaining viewport. */
#pdfReportsWorkspace {
  padding: 0;
}
#pdfReportsWorkspace .pdf-reports-workspace {
  padding: 10px;
}
#pdfReportsWorkspace .pdf-reports-workspace.pdf-reports-loaded {
  width: 100%;
  height: 100%;
  max-height: 100%;
}
#pdfReportsWorkspace .pdfv1-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding-top: 8px;
  margin-top: 0;
  border-top: 0;
  max-height: none;
  overflow: visible;
  flex: 1 1 auto;
}
/* ============================================================
   Smart PDF Workspace (independent, Phase 01 only).
   Empty workspace shell — no PDF tools, no viewer, no upload,
   no export, no editing. Reserved for future phases.
   ============================================================ */
#smartPdfWorkspace .smart-pdf-workspace {
  padding: 10px;
}
/* Tiny inset so the Smart PDF title is not flush with the edge
   (≈ two spaces): LTR → away from the left edge, RTL → away from
   the right edge (margin-inline-start handles both directions). */
#smartPdfWorkspace #smartPdfTitle {
  margin-inline-start: 10px;
}
#smartPdfWorkspace .smart-pdf-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding-top: 8px;
  margin-top: 0;
  border-top: 0;
  max-height: none;
  overflow: visible;
  flex: 1 1 auto;
}
#smartPdfWorkspace .smart-pdf-placeholder {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}
#smartPdfWorkspace .smart-pdf-placeholder-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
#smartPdfWorkspace .smart-pdf-placeholder-sub {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0;
}
#pdfReportsWorkspace .pdf-reports-workspace.pdf-reports-loaded .settings-modal-header {
  display: none;
}
#pdfReportsWorkspace .pdf-reports-workspace.pdf-reports-loaded .pdfv1-dropzone,
#pdfReportsWorkspace .pdf-reports-workspace.pdf-reports-loaded .pdfv1-error {
  display: none !important;
}
#pdfReportsWorkspace .pdf-reports-workspace.pdf-reports-loaded .pdfv1-viewer-wrap {
  flex: 1 1 auto;
  min-height: 0;
  gap: 6px;
}
#pdfReportsWorkspace .pdf-reports-workspace.pdf-reports-loaded .pdfv1-body {
  padding-top: 4px;
  gap: 6px;
}
#pdfReportsWorkspace .pdf-reports-workspace.pdf-reports-loaded .pdfv1-stage {
  flex: 1 1 auto;
  min-height: 0;
}
#pdfReportsWorkspace .pdf-reports-workspace.pdf-reports-loaded .pdfv1-viewer {
  width: 100%;
  height: 100%;
}
/* Slim single-row toolbar: 44px, no wrapping, horizontal scroll only. */
#pdfReportsWorkspace .pdfv1-tools {
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
#pdfReportsWorkspace .pdfv1-tools-row {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 6px;
}
#pdfReportsWorkspace .pdfv1-tool-btn,
#pdfReportsWorkspace .pdfv1-page-btn {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 0.85rem;
  white-space: nowrap;
}
#pdfReportsWorkspace .pdfv1-close-btn {
  font-weight: 700;
}
#pdfReportsWorkspace .pdfv1-file-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 220px;
}
#pdfReportsWorkspace .pdfv1-tb-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 22px;
  background: var(--border);
}
#pdfReportsWorkspace .pdfv1-tools-hint {
  flex: 0 0 auto;
  white-space: nowrap;
}
#pdfReportsWorkspace .pdfv1-textrow {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 6px;
}
#pdfReportsWorkspace .pdfv1-text-input {
  padding: 4px 10px;
}
@media (max-width: 1100px) {
  #pdfReportsWorkspace .pdfv1-tools-hint { display: none; }
}
/* RTL/LTR: toolbar follows document direction; stage stays LTR (existing rule). */

/* --- Stamp Options popover — stamp color + opacity ONLY ---------------------
   Small popover anchored to the selected stamp. Scoped strictly to
   #pdfReportsWorkspace and placed from JS (position: fixed, clamped to the
   viewport so it can never overflow horizontally and flips sides near an
   edge). No toolbar and no modal were added. */
#pdfReportsWorkspace .pdfv1-stamp-options {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  min-width: min(208px, calc(100vw - 16px));
  max-width: min(272px, calc(100vw - 16px));
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
}
#pdfReportsWorkspace .pdfv1-stamp-options[hidden] { display: none; }
#pdfReportsWorkspace .pdfv1-stamp-opt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#pdfReportsWorkspace .pdfv1-stamp-opt-title { font-size: 0.88rem; font-weight: 700; }
#pdfReportsWorkspace .pdfv1-stamp-opt-close {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 8px;
  cursor: pointer;
}
#pdfReportsWorkspace .pdfv1-stamp-opt-close:hover { background: rgba(15, 23, 42, 0.08); }
#pdfReportsWorkspace .pdfv1-stamp-opt-body { display: flex; flex-direction: column; gap: 8px; }
#pdfReportsWorkspace .pdfv1-stamp-opt-row { display: flex; flex-direction: column; gap: 6px; }
#pdfReportsWorkspace .pdfv1-stamp-opt-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
}
#pdfReportsWorkspace .pdfv1-stamp-opt-val { font-weight: 700; color: #475569; font-variant-numeric: tabular-nums; }
#pdfReportsWorkspace .pdfv1-stamp-color-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#pdfReportsWorkspace .pdfv1-stamp-color-picker {
  width: 42px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
#pdfReportsWorkspace .pdfv1-stamp-color-swatches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#pdfReportsWorkspace .pdfv1-stamp-swatch {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
}
#pdfReportsWorkspace .pdfv1-stamp-swatch.is-active { box-shadow: 0 0 0 2px #2563eb; }
#pdfReportsWorkspace .pdfv1-stamp-swatch:active { transform: scale(0.92); }
#pdfReportsWorkspace .pdfv1-stamp-opacity-slider { width: 100%; margin: 0; accent-color: #2563eb; cursor: pointer; }
#pdfReportsWorkspace .pdfv1-stamp-opt-actions { align-items: flex-start; }
#pdfReportsWorkspace .pdfv1-stamp-reset-btn {
  border: 1px solid rgba(15, 23, 42, 0.2);
  background: rgba(15, 23, 42, 0.04);
  color: #0f172a;
  font: inherit;
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  touch-action: manipulation;
}
#pdfReportsWorkspace .pdfv1-stamp-reset-btn:active { transform: scale(0.97); }
/* ============================================================
   RESPONSIVE + ROTATION — calculator layout only (scoped).
   Same design adapts to viewport width AND height (portrait/
   landscape, rotation without refresh). No scale/zoom hacks,
   no negative margins, no absolute forcing, no logic changes.
   - .app-shell: fluid width + safe-area + max-width cap on large screens.
   - .calculator-card: normal stacked flow in portrait; compact
     paddings/gaps when height is short (landscape phones).
   - .keypad-grid: 4 columns always; button min-heights shrink with
     viewport height via dvh-aware clamp so nothing leaves viewport.
   - landscape (short height): 2-column card (display | controls+keypad)
     already exists — extended with height-aware compact sizing +
     a fallback single-column compact mode for very short heights.
   ============================================================ */
.app-shell {
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
}
.calculator-card,
.display-section,
.keypad-grid,
.keypad-area,
.control-row,
.control-row-3,
.scientific-toggle-row,
.scientific-panel,
#featureNavBar,
.top-bar {
  min-width: 0;
  max-width: 100%;
}
.calculator-card {
  overflow-x: clip;
}
.display-section {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.primary-display,
.expression-display,
.secondary-display {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}
.keypad-grid {
  grid-auto-rows: minmax(0, auto);
}
.keypad-area {
  min-height: 0;
}
/* Very small phones: tighter but tappable sizing (no hidden keys). */
@media (max-width: 360px) {
  .calculator-card {
    padding: 12px;
    border-radius: 18px;
  }
  .display-section {
    padding: 10px;
    padding-top: 54px;
    margin-bottom: 12px;
  }
  .keypad-grid {
    gap: 6px;
  }
  .control-row {
    gap: 6px;
    margin-bottom: 8px;
  }
  .keypad-btn {
    min-height: 44px;
    font-size: 0.95rem;
  }
}
/* Large screens: keep current proportions, never overstretch. */
@media (min-width: 1024px) {
  .app-shell {
    width: min(100%, 560px);
  }
}
/* Short-height landscape (rotated phones, small laptop windows):
   compact paddings/gaps + viewport-height-aware key sizing so the
   full display + full keypad stay inside the viewport. */
@media (max-height: 520px) {
  /* Compact ad bar at short heights. Declared here (last) so these values win
     for the bar AND for the shared reserved band (--ad-band). */
  :root {
    --ad-bar-h: 40px;
    --ad-bar-gap: 8px;
  }
  body {
    align-items: flex-start;
  }
  .ad-placeholder,
  .global-top-ad-banner {
    height: var(--ad-bar-h); /* keeps the documented 40-80px ad contract at EVERY height */
    min-height: var(--ad-bar-h);
    max-height: var(--ad-bar-h);
    margin-bottom: var(--ad-bar-gap);
  }
  .top-bar {
    margin-bottom: 8px;
  }
  #featureNavBar {
    margin-top: 4px;
    padding: 6px 8px;
    gap: 4px;
  }
  .calculator-card {
    padding: 12px;
    gap: 8px;
  }
  .display-section {
    padding: 10px;
    padding-top: 54px; /* ≥ speech-btn bottom (1+12+42=55) — no text under the button */
    margin-bottom: 8px;
  }
  .primary-display {
    font-size: clamp(1.15rem, 4.2vh, 1.6rem);
    min-height: 40px;
  }
  .expression-display {
    min-height: 20px;
  }
  .secondary-display {
    min-height: 22px;
    margin-top: 4px;
  }
  .scientific-toggle-row {
    margin-bottom: 8px;
  }
  .control-row {
    margin-bottom: 8px;
    gap: 6px;
  }
  .keypad-grid {
    gap: 6px;
  }
  .keypad-btn {
    min-height: clamp(34px, 8.5vh, 48px);
    padding: 8px 0;
  }
  .control-btn {
    min-height: clamp(32px, 7.5vh, 44px);
    padding: 8px;
  }
}
/* Landscape two-column mode (existing rule extended): cap display
   column height; toggle row + collapsible panels stay in the right
   column so they never overlap display or push keypad off-screen. */
@media (orientation: landscape) and (max-width: 900px) {
  .calculator-card {
    max-width: 100%;
    overflow-x: clip;
  }
  .display-section {
    min-height: 0;
    max-height: calc(100dvh - 120px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .calculator-card > .scientific-toggle-row,
  .calculator-card > .scientific-panel,
  .calculator-card > .percent-panel {
    grid-column: 2;
    min-width: 0;
    max-width: 100%;
  }
  .display-section {
    min-height: 0;
    max-height: calc(100dvh - 120px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .scientific-toggle-row,
  .scientific-panel,
  .percent-panel {
    min-width: 0;
    max-width: 100%;
  }
  .keypad-grid {
    grid-auto-rows: minmax(clamp(30px, 7.5vh, 52px), auto);
  }
  .keypad-btn {
    min-height: clamp(32px, 7.5vh, 52px);
  }
}
/* Very short landscape (e.g. 360px height phones): keep the proven
   single-column flow but ultra-compact, so no key leaves viewport.
   Placed LAST so it wins over the two-column mode when both match. */
@media (orientation: landscape) and (max-height: 420px) {
  .calculator-card {
    display: block;
  }
  .display-section {
    margin-bottom: 8px;
    min-height: 0;
    max-height: none;
  }
  .scientific-toggle-row,
  .scientific-panel,
  .percent-panel {
    grid-column: auto;
  }
  .keypad-btn {
    min-height: clamp(30px, 8vh, 40px);
    padding: 6px 0;
    font-size: 0.9rem;
  }
  .keypad-btn.operator {
    font-size: 1.15rem;
  }
}
@media (max-width: 480px) {
  #pdfReportsWorkspace .pdfv1-stamp-options { min-width: min(186px, calc(100vw - 16px)); }
}


/* ============================================================
   RESERVED TOP AD SPACE — EVERY USER-FACING VIEW
   The Calculator already demonstrates the model: the ONE global ad bar
   (#adPlaceholder) sits FIRST inside the app shell, in normal flow, and the
   calculator content simply begins below it. The same reserved band is now
   honoured by every other view (History, Notes, Notes→PDF preview, PDF V1,
   Smart PDF, Smart Documents, Settings, Help, Currency converter/modals,
   install + delete confirm and the side drawer): each one begins at
   `top: var(--ad-band)` instead of the viewport top, so the reserved
   advertisement area is never covered:

        RESERVED AD SPACE   (the one global bar)
                ↓
        VIEW HEADER → TOOLBAR → CONTENT → BUTTONS

   This is a plain normal-flow geometry offset ONLY:
     • the ad bar stays `position: relative` in the shell (no fixed/sticky
       overlay, no z-index, no per-view ad, no duplicated ad unit);
     • no view is resized with transform/zoom/negative margins;
     • every view keeps its own scrolling and stays reachable — only the
       band already reserved above the app is skipped.
   Placed LAST in the stylesheet (same convention as the full-screen Notes
   block above) so these offsets win by source order over the earlier
   `inset: 0` / `top: 0` declarations, including inside media queries.
   ============================================================ */
.settings-modal-backdrop,
.currency-modal-backdrop,
.install-modal-backdrop,
.pdf-reports-backdrop,
.notes-manager-backdrop,
.full-screen-note-backdrop,
.delete-confirm-backdrop,
.help-modal-backdrop,
.smart-docs-backdrop,
.note-pdf-preview-backdrop,
.history-panel,
.drawer-overlay {
  top: var(--ad-band); /* left/right/bottom stay 0 from `inset: 0` */
}

/* The side drawer is a full-height sheet: reserve the band at the top and end
   at the viewport bottom (its old 100vh height would stick out below the fold
   once the top is offset). */
.drawer {
  top: var(--ad-band);
  bottom: 0;
  height: auto;
}

/* Panels that capped themselves with viewport units (100dvh / 100vh) would now
   overflow the shorter backdrop and paint over the advertisement. Capping them
   against the backdrop instead keeps them exactly inside the space that is left
   below the reserved band - at every breakpoint and on rotation. */
.smart-docs-home {
  max-height: 100%;
}

/* The install dialog centres itself inside its backdrop, so on short viewports
   (e.g. 800x360 landscape) an uncapped panel taller than the space below the
   band would poke BOTH above it (over the advertisement) and below the fold.
   Capping it against the backdrop — same rule as the currency/help modals
   above — keeps it fully inside the space left below the reserved band, and it
   scrolls internally instead. 40px = the backdrop's 20px padding top+bottom. */
.install-modal {
  max-height: calc(100vh - var(--ad-band) - 40px);
  max-height: calc(100dvh - var(--ad-band) - 40px);
  overflow-y: auto;
}