/* Shared visual layer aligned with oalfawzan.sa.
   Single design authority for every page: home, all tools, and 404.
   Load order on every page: pages/<tool>.css -> platform.css -> this file */

:root {
  color-scheme: dark;
  --site-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --site-bg: #010204;
  --site-accent: #007aff;
  --site-text: #ffffff;
  --site-text-muted: rgba(255,255,255,.60);
  --site-text-faint: rgba(255,255,255,.44);
  --site-glass-fill: rgba(255,255,255,.032);
  --site-glass-fill-strong: rgba(255,255,255,.050);
  --site-glass-border: rgba(255,255,255,.13);
  --site-glass-highlight: rgba(255,255,255,.20);
  --site-glass-shadow: rgba(0,0,0,.14);
  --site-glass-blur: 20px;
  --site-glass-saturation: 160%;
  --site-width: 900px;
  --site-page-pad: 16px;
  --site-radius-card: 24px;
  --site-radius-nav: 28px;
  --site-radius-control: 18px;
  --ds-bg: var(--site-bg);
  --ds-surface: var(--site-glass-fill);
  --ds-surface-2: var(--site-glass-fill-strong);
  --ds-surface-3: rgba(255,255,255,.07);
  --ds-text: var(--site-text);
  --ds-muted: var(--site-text-muted);
  --ds-border: var(--site-glass-border);
  --ds-border-strong: rgba(255,255,255,.22);
  --ds-primary: var(--site-accent);
  --ds-primary-hover: #3395ff;
  --ds-primary-soft: rgba(0,122,255,.12);
  --ds-success: #2bd7a5;
  --ds-warning: #f5c451;
  --ds-danger: #ff7070;
  --bg: var(--site-bg);
  --surface: var(--site-glass-fill);
  --surface2: var(--site-glass-fill-strong);
  --surface-soft: var(--site-glass-fill-strong);
  --surface-light: var(--site-glass-fill-strong);
  --field: var(--site-glass-fill-strong);
  --field-bg: var(--site-glass-fill-strong);
  --border: var(--site-glass-border);
  --border2: rgba(255,255,255,.22);
  --text: var(--site-text);
  --text-p: var(--site-text);
  --text-s: var(--site-text-muted);
  --muted: var(--site-text-muted);
  --muted2: var(--site-text-faint);
  --text-muted: var(--site-text-muted);
  --primary: var(--site-accent);
  --accent: var(--site-accent);
  --new: var(--site-accent);
}

html[data-theme="light"] {
  color-scheme: light;
  --site-bg: #dce8f5;
  --site-accent: #0062cc;
  --site-text: #111827;
  --site-text-muted: rgba(24,33,49,.76);
  --site-text-faint: rgba(24,33,49,.68);
  --site-glass-fill: rgba(255,255,255,.50);
  --site-glass-fill-strong: rgba(255,255,255,.66);
  --site-glass-border: rgba(255,255,255,.82);
  --site-glass-highlight: rgba(255,255,255,.98);
  --site-glass-shadow: rgba(46,65,90,.16);
  --ds-border-strong: rgba(55,75,102,.28);
  --border2: rgba(55,75,102,.28);
  --ds-primary-hover: #004fa8;
  --ds-primary-soft: rgba(0,98,204,.10);
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { background: var(--site-bg) !important; scroll-behavior: smooth; }
body, html[lang] body, button, input, textarea, select { font-family: var(--site-font) !important; }
body {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  display: flow-root;
  min-height: 100vh;
  color: var(--site-text) !important;
  background:
    linear-gradient(rgba(13,22,45,.84), rgba(1,2,4,.94)),
    url('https://oalfawzan.sa/image-1600.webp') center / cover fixed !important;
  background-color: var(--site-bg) !important;
  overflow-x: hidden;
}
html[data-theme="light"] body {
  background: url('https://oalfawzan.sa/image-1600.webp') center / cover fixed !important;
  background-color: var(--site-bg) !important;
}
::selection { background: color-mix(in srgb,var(--site-accent) 32%,transparent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--site-accent) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* Shared glass material */
.site-header,
.manifesto,
.tool-card,
.tool-page .panel,
.tool-page .card,
.tool-page .editor-card,
.tool-page .preview-card,
.tool-page .control-panel,
.tool-page .mode-switcher,
.tool-page .nat-unified,
.tool-page .factors-card,
.tool-page .totals-bar,
.tool-page .overall-card,
.tool-page .decision-card,
.tool-page .winner-card,
.tool-page .simple-result,
.tool-page .summary-card,
.tool-page .fee-section,
.tool-page .option-content,
.tool-page .ai-card,
.tool-page .popup,
.tool-page .dropdown {
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.004) 58%),
    var(--site-glass-fill) !important;
  border: 1px solid var(--site-glass-border) !important;
  border-radius: var(--site-radius-card) !important;
  box-shadow:
    inset 0 1px 0 var(--site-glass-highlight),
    0 8px 26px var(--site-glass-shadow) !important;
  -webkit-backdrop-filter: blur(var(--site-glass-blur)) saturate(var(--site-glass-saturation)) !important;
  backdrop-filter: blur(var(--site-glass-blur)) saturate(var(--site-glass-saturation)) !important;
}
html[data-theme="light"] .site-header,
html[data-theme="light"] .manifesto,
html[data-theme="light"] .tool-card,
html[data-theme="light"] .tool-page .panel,
html[data-theme="light"] .tool-page .card,
html[data-theme="light"] .tool-page .editor-card,
html[data-theme="light"] .tool-page .preview-card,
html[data-theme="light"] .tool-page .control-panel,
html[data-theme="light"] .tool-page .mode-switcher,
html[data-theme="light"] .tool-page .nat-unified,
html[data-theme="light"] .tool-page .factors-card,
html[data-theme="light"] .tool-page .totals-bar,
html[data-theme="light"] .tool-page .overall-card,
html[data-theme="light"] .tool-page .decision-card,
html[data-theme="light"] .tool-page .winner-card,
html[data-theme="light"] .tool-page .simple-result,
html[data-theme="light"] .tool-page .summary-card,
html[data-theme="light"] .tool-page .fee-section,
html[data-theme="light"] .tool-page .option-content,
html[data-theme="light"] .tool-page .ai-card,
html[data-theme="light"] .tool-page .popup,
html[data-theme="light"] .tool-page .dropdown {
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.24) 62%),
    var(--site-glass-fill) !important;
  box-shadow:
    inset 0 1px 0 var(--site-glass-highlight),
    inset 0 -1px 0 rgba(71,85,105,.10),
    0 12px 32px var(--site-glass-shadow) !important;
}

/* Shared navigation shell */
.site-header,
.tool-page header.site-header {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 8px 10px !important;
  min-height: 0 !important;
  padding: 10px 14px !important;
  margin: 16px 0 38px !important;
  border-radius: var(--site-radius-nav) !important;
  border-bottom: 1px solid var(--site-glass-border) !important;
  position: relative !important;
  z-index: 30 !important;
}
.brand,
.tool-page .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  min-width: 0;
  color: var(--site-text) !important;
  text-decoration: none !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap;
}
.brand-mark, .tool-page .brand-mark { display: none !important; }
.brand-text, .tool-page .brand-text { display: inline !important; color: var(--site-text) !important; font-size: inherit !important; font-family: var(--site-font) !important; }
.brand-text strong, .tool-page .brand-text strong { color: var(--site-accent) !important; font-weight: 600 !important; }
.header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  flex-wrap: nowrap !important;
}
.header-actions .link-btn,
.header-actions .icon-btn,
.tool-page header.site-header button,
.tool-page header.site-header a:not(.brand) {
  min-height: 34px !important;
  height: 34px !important;
  width: auto !important;
  min-width: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 13px !important;
  border-radius: var(--site-radius-control) !important;
  color: var(--site-text) !important;
  font-size: .80rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--site-glass-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(12px) saturate(145%) !important;
  backdrop-filter: blur(12px) saturate(145%) !important;
}
html[data-theme="light"] .header-actions .link-btn,
html[data-theme="light"] .header-actions .icon-btn,
html[data-theme="light"] .tool-page header.site-header button,
html[data-theme="light"] .tool-page header.site-header a:not(.brand) {
  background: rgba(255,255,255,.42) !important;
  border-color: rgba(255,255,255,.78) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 3px 10px rgba(46,65,90,.08) !important;
}

/* Homepage */
.home {
  width: 100% !important;
  max-width: var(--site-width) !important;
  margin: 0 auto !important;
  padding: 0 var(--site-page-pad) !important;
}
.home .hero {
  min-height: 0 !important;
  padding: 10px 0 46px !important;
  margin: 0 !important;
  border: 0 !important;
  text-align: center !important;
}
.home .hero-stage { display: block !important; height: auto !important; padding: 0 !important; overflow: visible !important; }
.home .hero-copy { max-width: 680px !important; margin: 0 auto !important; }
.home .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  color: var(--site-text-faint) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
}
.home .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--site-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb,var(--site-accent) 14%,transparent) !important; }
.home .hero h1 {
  margin: 0 0 16px !important;
  color: var(--site-text) !important;
  font-size: clamp(2.55rem,6vw,3.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}
.home .hero h1 span { display: inline !important; transform: none !important; opacity: 1 !important; }
.home .hero h1 span + span::before { content: " "; }
.home .hero h1 span:last-child { color: var(--site-accent) !important; }
.home .hero p {
  max-width: 560px !important;
  margin: 0 auto !important;
  color: var(--site-text-muted) !important;
  font-size: .96rem !important;
  line-height: 1.65 !important;
  transform: none !important;
  opacity: 1 !important;
}
.manifesto {
  min-height: 0 !important;
  display: block !important;
  padding: 28px !important;
  margin: 0 0 52px !important;
  text-align: start;
}
.manifesto > * { opacity: 1 !important; transform: none !important; transition: none !important; }
.manifesto-kicker,
.section-label {
  color: var(--site-text-faint) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
}
.manifesto h2 { margin: 8px 0 10px !important; font-size: 1.35rem !important; line-height: 1.25 !important; letter-spacing: -.02em !important; max-width: none !important; }
.manifesto p:last-child { margin: 0 !important; color: var(--site-text-muted) !important; font-size: .96rem !important; line-height: 1.65 !important; max-width: 700px !important; }
.directory { padding: 0 0 20px !important; }
.directory-head { display: flex !important; align-items: end !important; justify-content: space-between !important; gap: 24px !important; margin-bottom: 18px !important; }
.directory-head h2 { margin: 5px 0 !important; font-size: 1.35rem !important; font-weight: 600 !important; letter-spacing: -.02em !important; }
.directory-head p { margin: 0 !important; color: var(--site-text-muted) !important; font-size: .84rem !important; }
.search-wrap { width: min(330px,100%) !important; }
.search-wrap input { width: 100%; padding: 10px 12px; }
.search-wrap label { display: block; margin-bottom: 7px; color: var(--site-text-muted) !important; font-size: .72rem !important; }
.search-wrap input,
.tool-page input,
.tool-page select,
.tool-page textarea {
  color: var(--site-text) !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--site-glass-border) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
html[data-theme="light"] .search-wrap input,
html[data-theme="light"] .tool-page input,
html[data-theme="light"] .tool-page select,
html[data-theme="light"] .tool-page textarea {
  background: rgba(255,255,255,.50) !important;
  border-color: rgba(255,255,255,.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 3px 10px rgba(46,65,90,.06) !important;
}
.filters { display: flex !important; gap: 7px !important; flex-wrap: wrap !important; margin: 0 0 18px !important; padding: 0 !important; border: 0 !important; }
.filter {
  min-height: 34px !important;
  padding: 7px 13px !important;
  border-radius: var(--site-radius-control) !important;
  color: var(--site-text) !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--site-glass-border) !important;
  font-size: .80rem !important;
  font-weight: 500 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(12px) saturate(145%) !important;
  backdrop-filter: blur(12px) saturate(145%) !important;
}
.filter[aria-pressed="true"] { color: #fff !important; background: rgba(0,122,255,.90) !important; border-color: rgba(255,255,255,.20) !important; }
html[data-theme="light"] .filter[aria-pressed="true"] { background: #0062cc !important; border-color: rgba(255,255,255,.62) !important; }
.tools-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 18px !important; }
.tool-card {
  display: flex;
  flex-direction: column;
  min-height: 230px !important;
  padding: 24px !important;
  color: var(--site-text) !important;
  text-decoration: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: transform .22s ease,border-color .22s ease,background .22s ease !important;
}
.tool-card::before { display: none !important; }
.tool-card:hover { transform: translateY(-3px) !important; border-color: rgba(255,255,255,.24) !important; }
.tool-card .category { color: var(--site-text-faint) !important; font-size: .72rem !important; font-weight: 600 !important; letter-spacing: .12em !important; }
.tool-card .tool-glyph { color: var(--site-text-muted) !important; }
.tool-card .tool-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px !important; height: 42px !important; margin-top: 24px !important; border: 1px solid var(--site-glass-border) !important; border-radius: 14px !important; background: rgba(255,255,255,.035) !important; color: var(--site-accent) !important; }
.tool-card .tool-icon > svg { display: block; }
.tool-card h3 { margin: 16px 0 8px !important; color: var(--site-text) !important; font-size: 1.05rem !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: -.015em !important; }
.tool-card p { margin: 0 0 18px !important; color: var(--site-text-muted) !important; font-size: .88rem !important; line-height: 1.65 !important; }
.tool-card .launch { margin-top: auto !important; color: var(--site-accent) !important; font-size: .82rem !important; font-weight: 500 !important; }
.empty-tools { border: 1px dashed var(--site-glass-border) !important; border-radius: 20px !important; color: var(--site-text-muted) !important; }
.home [hidden] { display: none !important; }

/* Shared footer (identical markup on every page) */
.site-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  margin-top: 48px !important;
  padding: 28px 0 34px !important;
  border-top: 1px solid var(--site-glass-border) !important;
  text-align: center !important;
  color: var(--site-text-muted) !important;
  font-size: .84rem !important;
  letter-spacing: 0 !important;
}
.site-footer a { color: var(--site-text-muted) !important; }

/* Tool pages */
.tool-page {
  background:
    linear-gradient(rgba(13,22,45,.84), rgba(1,2,4,.94)),
    url('https://oalfawzan.sa/image-1600.webp') center / cover fixed !important;
  background-color: var(--site-bg) !important;
  color: var(--site-text) !important;
}
html[data-theme="light"] .tool-page {
  background: url('https://oalfawzan.sa/image-1600.webp') center / cover fixed !important;
  background-color: var(--site-bg) !important;
  color: #0f172a !important;
}
.tool-page::before { display: none !important; }
.tool-page > .wrap,
.tool-page > .container,
.tool-page > .app {
  width: 100% !important;
  max-width: var(--site-width) !important;
  margin: 0 auto !important;
  padding: 0 var(--site-page-pad) !important;
  position: relative !important;
  z-index: 1 !important;
}
.tool-page .hero,
.tool-page .tool-hero {
  display: block !important;
  min-height: 0 !important;
  max-width: 680px !important;
  margin: 0 auto 34px !important;
  padding: 6px 0 16px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}
.tool-page .hero-tag { display: inline-flex !important; width: auto !important; margin: 0 auto 10px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--site-text-faint) !important; font-size: .72rem !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: .14em !important; text-transform: uppercase !important; }
.tool-page .hero-tag::before { display: none !important; }
.tool-page .hero h1,
.tool-page .tool-hero h1,
.tool-page .tool-heading h1,
.tool-page > .wrap > h1 {
  max-width: none !important;
  margin: 0 0 12px !important;
  color: var(--site-text) !important;
  font-size: clamp(2.20rem,5vw,2.85rem) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}
.tool-page .tool-heading { max-width: 680px !important; margin: 0 auto 28px !important; text-align: center !important; }
.tool-page .tool-heading > div:first-child { margin: 0 auto !important; }
.tool-page .hero h1 em { color: var(--site-accent) !important; font: inherit !important; font-style: normal !important; }
.tool-page .hero p,
.tool-page .tool-hero p,
.tool-page p.sub { max-width: 560px !important; margin: 0 auto !important; color: var(--site-text-muted) !important; font-size: .96rem !important; line-height: 1.65 !important; }
.tool-page .quick-actions { justify-content: center !important; margin-top: 16px !important; }
.tool-page .back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-height: 34px !important;
  margin: 0 0 22px !important;
  padding: 7px 13px !important;
  border: 1px solid var(--site-glass-border) !important;
  border-radius: var(--site-radius-control) !important;
  color: var(--site-text-muted) !important;
  background: rgba(255,255,255,.035) !important;
  text-decoration: none !important;
  font-size: .80rem !important;
  font-weight: 500 !important;
}
html[dir="rtl"] .tool-page .back-link .back-icon,
html[dir="rtl"] .back-link .back-icon { display: inline-block; transform: scaleX(-1); }
.tool-page .panel,
.tool-page .card,
.tool-page .editor-card,
.tool-page .preview-card,
.tool-page .control-panel,
.tool-page .factors-card,
.tool-page .summary-card,
.tool-page .overall-card,
.tool-page .decision-card,
.tool-page .simple-result,
.tool-page .fee-section,
.tool-page .option-content,
.tool-page .mode-switcher,
.tool-page .nat-unified,
.tool-page .ai-card { padding: 22px !important; }
.tool-page .grid { gap: 18px !important; }
.tool-page .panel h2,
.tool-page .card h2,
.tool-page .card h3,
.tool-page .editor-card h2,
.tool-page .preview-card h2 { color: var(--site-text) !important; font-weight: 600 !important; letter-spacing: -.015em !important; }
.tool-page .muted,
.tool-page .helper,
.tool-page .preview-help,
.tool-page .input-help,
.tool-page .shortcut-hint,
.tool-page footer { color: var(--site-text-muted) !important; }
.tool-page input,
.tool-page select,
.tool-page textarea { min-height: 44px; padding: 10px 12px; }
.tool-page textarea { line-height: 1.6 !important; }
.tool-page .btn,
.tool-page .mini-btn,
.tool-page .zoom-btn,
.tool-page .clear-history,
.tool-page .modal-close,
.tool-page button.ghost,
.tool-page .icon-action,
.tool-page .entry-tools button,
.tool-page .tab,
.tool-page .mode-tab,
.tool-page .mode-btn,
.tool-page .nat-btn,
.tool-page .calc-btn,
.tool-page .spin-button,
.tool-page .export-btn,
.tool-page .popup-btn,
.tool-page .add-field-btn {
  border-radius: var(--site-radius-control) !important;
  border: 1px solid var(--site-glass-border) !important;
  background: rgba(255,255,255,.035) !important;
  color: var(--site-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(12px) saturate(145%) !important;
  backdrop-filter: blur(12px) saturate(145%) !important;
}
.tool-page .btn.primary,
.tool-page button.primary,
.tool-page .calc-btn,
.tool-page .spin-button,
.tool-page .mode-tab.active,
.tool-page .tab.is-active,
.tool-page .nat-btn.active,
.tool-page .mode-btn.active,
.tool-page .mode-btn.active-simple,
.tool-page .mode-btn.active-detailed,
.tool-page .popup-btn.confirm {
  color: #fff !important;
  background: rgba(0,122,255,.90) !important;
  border-color: rgba(255,255,255,.20) !important;
  font-weight: 700 !important;
}
html[data-theme="light"] .tool-page .btn.primary,
html[data-theme="light"] .tool-page button.primary,
html[data-theme="light"] .tool-page .calc-btn,
html[data-theme="light"] .tool-page .spin-button,
html[data-theme="light"] .tool-page .mode-tab.active,
html[data-theme="light"] .tool-page .tab.is-active,
html[data-theme="light"] .tool-page .nat-btn.active,
html[data-theme="light"] .tool-page .mode-btn.active,
html[data-theme="light"] .tool-page .mode-btn.active-simple,
html[data-theme="light"] .tool-page .mode-btn.active-detailed,
html[data-theme="light"] .tool-page .popup-btn.confirm { background: #0062cc !important; border-color: rgba(255,255,255,.62) !important; }
.tool-page .result,
.tool-page .status,
.tool-page .ai-box,
.tool-page .kpi,
.tool-page .stock-item,
.tool-page .history-item {
  border-color: var(--site-glass-border) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.025) !important;
  color: var(--site-text) !important;
}
.tool-page .chart-wrap { border-color: var(--site-glass-border) !important; border-radius: 20px !important; background: rgba(255,255,255,.018) !important; }
.tool-page .qr-box { background: #fff !important; border-radius: 20px !important; }
.tool-page .wheel-stage { filter: drop-shadow(0 16px 36px rgba(0,0,0,.16)); }
.tool-page .winner-overlay { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* QR Generator: the type switcher is a nested glass control, centered under the hero. */
.tool-page .mode-tabs {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  width: min(360px,100%) !important;
  margin: 0 auto 22px !important;
  padding: 4px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.018) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
}
.tool-page .mode-tabs .mode-tab {
  min-height: 44px !important;
  box-shadow: none !important;
  background: transparent !important;
  border-color: transparent !important;
}
.tool-page .mode-tabs .mode-tab.active {
  color: var(--site-text) !important;
  background: rgba(0,122,255,.14) !important;
  border-color: rgba(0,122,255,.30) !important;
}
html[data-theme="light"] .tool-page .mode-tabs {
  background: rgba(255,255,255,.28) !important;
  border-color: rgba(255,255,255,.68) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}
html[data-theme="light"] .tool-page .mode-tabs .mode-tab.active {
  color: #0f172a !important;
  background: rgba(0,98,204,.10) !important;
  border-color: rgba(0,98,204,.24) !important;
}

@media (hover:hover) and (pointer:fine) {
  .header-actions .link-btn:hover,
  .header-actions .icon-btn:hover,
  .tool-page header.site-header button:hover,
  .tool-page header.site-header a:not(.brand):hover,
  .filter:hover,
  .tool-page .btn:hover,
  .tool-page button.ghost:hover,
  .tool-page .icon-action:hover,
  .tool-page .entry-tools button:hover,
  .tool-page .tab:hover,
  .tool-page .mode-tab:hover,
  .tool-page .nat-btn:hover {
    background: var(--site-glass-fill-strong) !important;
    border-color: rgba(255,255,255,.24) !important;
  }
}

@media (max-width:700px), (pointer:coarse) {
  :root { --site-page-pad: 14px; --site-glass-blur: 14px; --site-glass-saturation: 145%; }
  body, html[data-theme="light"] body { background-attachment: scroll !important; }
  .site-header,
  .tool-page header.site-header {
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 7px 8px !important;
    padding: 10px 12px !important;
    margin: 12px 0 34px !important;
    border-radius: 26px !important;
  }
  .brand { font-size: 1rem !important; }
  .header-actions { gap: 6px !important; overflow-x: auto; scrollbar-width: none; }
  .header-actions::-webkit-scrollbar { display: none; }
  .header-actions .link-btn { display: none !important; }
  .header-actions .icon-btn,
  .tool-page header.site-header button,
  .tool-page header.site-header a:not(.brand) { min-width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 6px 10px !important; font-size: .76rem !important; }
  .home .hero { padding: 4px 0 38px !important; }
  .home .hero h1 { font-size: 2.48rem !important; }
  .manifesto { padding: 22px !important; margin-bottom: 40px !important; }
  .directory-head { align-items: stretch !important; flex-direction: column !important; gap: 14px !important; }
  .search-wrap { width: 100% !important; }
  .tools-grid { grid-template-columns: 1fr !important; }
  .tool-card { min-height: 205px !important; padding: 22px !important; }
  .tool-page .hero h1,
  .tool-page .tool-hero h1 { font-size: 2.20rem !important; }
  .tool-page .panel,
  .tool-page .card,
  .tool-page .editor-card,
  .tool-page .preview-card,
  .tool-page .control-panel,
  .tool-page .factors-card,
  .tool-page .summary-card,
  .tool-page .overall-card,
  .tool-page .decision-card,
  .tool-page .simple-result,
  .tool-page .fee-section,
  .tool-page .option-content,
  .tool-page .mode-switcher,
  .tool-page .nat-unified,
  .tool-page .ai-card { padding: 20px !important; }
  .tool-page .mode-tabs { width: 100% !important; margin-bottom: 18px !important; }
  .tool-page .quick-actions { margin-top: 14px !important; }
  .site-header,
  .manifesto,
  .tool-card,
  .tool-page .panel,
  .tool-page .card,
  .tool-page .editor-card,
  .tool-page .preview-card,
  .tool-page .control-panel,
  .tool-page .mode-switcher,
  .tool-page .nat-unified,
  .tool-page .factors-card,
  .tool-page .totals-bar,
  .tool-page .overall-card,
  .tool-page .decision-card,
  .tool-page .winner-card,
  .tool-page .simple-result,
  .tool-page .summary-card,
  .tool-page .fee-section,
  .tool-page .option-content,
  .tool-page .ai-card,
  .tool-page .popup,
  .tool-page .dropdown {
    -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
    backdrop-filter: blur(14px) saturate(145%) !important;
  }
}

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

/* Post-validation refinements */
@media (min-width:701px) {
  .tools-grid > .tool-card:last-child:nth-child(odd):not([hidden]) {
    grid-column: 1 / -1 !important;
    min-height: 190px !important;
    display: grid !important;
    grid-template-columns: 64px minmax(0,1fr) auto !important;
    grid-template-rows: auto auto 1fr !important;
    grid-template-areas:
      "top top launch"
      "icon title launch"
      "icon desc launch" !important;
    column-gap: 18px !important;
    row-gap: 2px !important;
    align-items: center !important;
    padding: 26px 30px !important;
  }
  .tools-grid > .tool-card:last-child:nth-child(odd):not([hidden]) .tool-top { grid-area: top !important; }
  .tools-grid > .tool-card:last-child:nth-child(odd):not([hidden]) .tool-icon { grid-area: icon !important; width: 52px !important; height: 52px !important; margin: 0 !important; }
  .tools-grid > .tool-card:last-child:nth-child(odd):not([hidden]) h3 { grid-area: title !important; margin: 0 0 3px !important; font-size: 1.12rem !important; }
  .tools-grid > .tool-card:last-child:nth-child(odd):not([hidden]) p { grid-area: desc !important; max-width: 62ch !important; margin: 0 !important; }
  .tools-grid > .tool-card:last-child:nth-child(odd):not([hidden]) .launch { grid-area: launch !important; align-self: center !important; margin: 0 !important; white-space: nowrap; }
}

/* Nested controls should feel lighter than their parent glass surface. */
.tool-page .mode-switcher,
.tool-page .nat-unified {
  background: rgba(255,255,255,.018) !important;
  border-color: rgba(255,255,255,.09) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
}
.tool-page .mode-switcher .mode-btn,
.tool-page .nat-unified .nat-btn,
.tool-page .panel-tabs .tab {
  box-shadow: none !important;
}
.tool-page .mode-switcher .mode-btn:not(.active):not(.active-simple):not(.active-detailed),
.tool-page .nat-unified .nat-btn:not(.active),
.tool-page .panel-tabs .tab:not(.is-active) {
  background: transparent !important;
  border-color: transparent !important;
}
.tool-page .mode-switcher .mode-btn.active,
.tool-page .mode-switcher .mode-btn.active-simple,
.tool-page .mode-switcher .mode-btn.active-detailed,
.tool-page .nat-unified .nat-btn.active,
.tool-page .panel-tabs .tab.is-active {
  color: var(--site-text) !important;
  background: rgba(0,122,255,.14) !important;
  border-color: rgba(0,122,255,.30) !important;
}
html[data-theme="light"] .tool-page .mode-switcher,
html[data-theme="light"] .tool-page .nat-unified {
  background: rgba(255,255,255,.28) !important;
  border-color: rgba(255,255,255,.68) !important;
}
html[data-theme="light"] .tool-page .mode-switcher .mode-btn.active,
html[data-theme="light"] .tool-page .mode-switcher .mode-btn.active-simple,
html[data-theme="light"] .tool-page .mode-switcher .mode-btn.active-detailed,
html[data-theme="light"] .tool-page .nat-unified .nat-btn.active,
html[data-theme="light"] .tool-page .panel-tabs .tab.is-active {
  color: #0f172a !important;
  background: rgba(0,98,204,.10) !important;
  border-color: rgba(0,98,204,.24) !important;
}
.tool-page .simple-result .winner-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* QR preview is intentionally quieter than the editing surface. */
.tool-page .preview-card {
  background: linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.004)),rgba(255,255,255,.016) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10),0 6px 20px rgba(0,0,0,.08) !important;
}
html[data-theme="light"] .tool-page .preview-card {
  background: rgba(255,255,255,.38) !important;
}
.tool-page .qr-box { padding: 18px !important; }

/* Wheel stays playful, but its saturation now sits inside the portfolio palette. */
.tool-page #wheelCanvas {
  filter: saturate(.76) contrast(.98) !important;
}
html[data-theme="light"] .tool-page #wheelCanvas { filter: saturate(.72) contrast(.97) !important; }
.tool-page .spin-center {
  box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Small rhythm improvements across dense tools. */
.tool-page .card + .card,
.tool-page .panel + .panel { margin-top: 0; }
.tool-page .two-col { gap: 18px !important; }
.tool-page .workspace { gap: 18px !important; }
.tool-page .main-grid { gap: 18px !important; }
.tool-page .factors-card { margin-top: 16px !important; }

/* 404 shell: same width, hero hierarchy, and glass material as every other page. */
.not-found-shell {
  width: 100%;
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 0 var(--site-page-pad);
}
.not-found-main { padding-bottom: 20px; }
.not-found-hero {
  max-width: 680px;
  margin: 0 auto 28px;
  padding: 18px 0 12px;
  text-align: center;
}
.not-found-code {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--site-text-faint);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.not-found-hero h1 {
  margin: 0 0 12px;
  color: var(--site-text);
  font-size: clamp(2.20rem,5vw,2.85rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
}
.not-found-hero p {
  max-width: 560px;
  margin: 0 auto;
  color: var(--site-text-muted);
  font-size: .96rem;
  line-height: 1.65;
}
.not-found-card {
  max-width: 620px;
  margin: 0 auto;
  padding: 22px;
  text-align: center;
  background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.004) 58%),var(--site-glass-fill);
  border: 1px solid var(--site-glass-border);
  border-radius: var(--site-radius-card);
  box-shadow: inset 0 1px 0 var(--site-glass-highlight),0 8px 26px var(--site-glass-shadow);
  -webkit-backdrop-filter: blur(var(--site-glass-blur)) saturate(var(--site-glass-saturation));
  backdrop-filter: blur(var(--site-glass-blur)) saturate(var(--site-glass-saturation));
}
.not-found-card .back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--site-radius-control);
  color: #fff;
  background: rgba(0,122,255,.90);
  text-decoration: none;
  font-weight: 600;
}

/* Mobile usability refinements for tools.oalfawzan.sa.
   This layer intentionally changes presentation only, never tool calculations. */

/* Bilingual tool titles: keep both languages readable without mixed-direction punctuation. */
.tool-card .tool-title-primary,
.tool-card .tool-title-secondary {
  display: block;
  unicode-bidi: isolate;
}
.tool-card .tool-title-secondary {
  margin-top: 4px;
  color: var(--site-text-muted, rgba(255,255,255,.60));
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}
html[lang="ar"] .tool-card .tool-title-secondary { direction: ltr; text-align: right; }
html[lang="en"] .tool-card .tool-title-secondary { direction: rtl; text-align: left; }

@media (max-width: 700px) {
  /* Keep the compact visual language, but make primary header controls finger-sized. */
  .site-header,
  .tool-page header.site-header {
    gap: 8px !important;
    padding: 7px 9px !important;
    margin-top: 12px !important;
    margin-bottom: 20px !important;
  }
  .brand {
    font-size: .95rem !important;
    letter-spacing: -.025em !important;
  }
  .header-actions { gap: 4px !important; }
  .header-actions .icon-btn,
  .tool-page header.site-header button,
  .tool-page header.site-header a:not(.brand) {
    min-width: 44px !important;
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 8px 11px !important;
    border-radius: 16px !important;
  }
  .header-actions .link-btn { display: none !important; }

  /* The brand already returns to the directory, so a second mobile back row is redundant. */
  .tool-page .back-link,
  .tool-page .tool-breadcrumb {
    display: none !important;
  }

  /* Home: expose the actual tools much earlier in the first mobile viewport. */
  .home .hero {
    padding: 0 0 24px !important;
  }
  .home .eyebrow {
    margin-bottom: 9px !important;
  }
  .home .hero h1 {
    margin-bottom: 11px !important;
    font-size: 2.26rem !important;
    line-height: 1.04 !important;
  }
  .home .hero p {
    max-width: 34ch !important;
    font-size: .90rem !important;
    line-height: 1.55 !important;
  }
  .home .manifesto {
    padding: 15px 17px !important;
    margin-bottom: 24px !important;
    border-radius: 18px !important;
  }
  .home .manifesto-kicker,
  .home .manifesto > p:last-child {
    display: none !important;
  }
  .home .manifesto h2 {
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: -.015em !important;
  }
  .home .directory-head {
    gap: 8px !important;
    margin-bottom: 11px !important;
  }
  .home .directory-head .section-label,
  .home .directory-head p {
    display: none !important;
  }
  .home .directory-head h2 {
    margin: 0 !important;
    font-size: 1.12rem !important;
  }
  .home .search-wrap label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .home .search-wrap input {
    min-height: 44px !important;
  }
  .home .filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-bottom: 14px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .home .filters::-webkit-scrollbar { display: none; }
  .home .filter {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding-inline: 13px !important;
  }
  .home .tool-card {
    padding: 18px !important;
  }
  .home .tool-card h3 {
    margin-top: 11px !important;
    line-height: 1.32 !important;
  }
  .home .tool-card p {
    margin-top: 9px !important;
  }

  /* Offer: Save is moved into the existing overflow menu by platform.js on phones. */
  body.tool-page #headerMenu .mobile-menu-save {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 44px !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html[dir="rtl"] body.tool-page #headerMenu .mobile-menu-save {
    justify-content: flex-start !important;
    text-align: right !important;
  }

  /* Header parity: every page matches the homepage's finger-sized controls. */
  .site-header .header-actions .icon-btn,
  .site-header .header-actions .lang-btn,
  .site-header .header-actions .platform-control,
  body.tool-page header.site-header .header-actions button,
  body.tool-page header.site-header .header-actions a:not(.brand) {
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 8px 11px !important;
  }
  body.tool-page header.site-header .menu-wrap .btn-ghost,
  body.tool-page header.site-header .menu-wrap button {
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
  }
  body.tool-page header.site-header .header-actions .menu-wrap {
    display: inline-flex !important;
    align-items: center !important;
  }
  body.tool-page header.site-header .header-actions .menu-wrap > button {
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 360px) {
  /* Very narrow phones: reclaim space so the brand text never clips
     next to three 44px controls. */
  .site-header,
  .tool-page header.site-header {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .site-header .header-actions,
  .tool-page header.site-header .header-actions {
    gap: 6px !important;
  }
  .site-header .brand,
  .tool-page header.site-header .brand {
    font-size: .88rem !important;
  }
}

@media (max-width: 390px) {
  /* Four tiny labels were too dense on narrow iPhones. */
  .tool-page .entry-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .tool-page .entry-tools button {
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: .72rem !important;
  }
}

/* Mobile fields remain legible without iOS focus zoom; dense tools stack on phones. */
@media (max-width: 700px) {
  .search-wrap input,
  .tool-page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  .tool-page select,
  .tool-page textarea { font-size: 16px !important; min-width: 0; max-width: 100%; }
  .tool-page button:not(.switch),
  .home .filter { min-height: 44px !important; }
  .tool-page .bg-btn,
  .tool-page .modal-close { min-width: 44px; width: 44px; height: 44px; }
  .tool-page .popup { max-height: calc(100dvh - 32px); overflow-y: auto; }
  .tool-page .winner-card { max-height: calc(100dvh - 40px); overflow-y: auto; }
}
@media (max-width: 600px) {
  .tool-page .grid { grid-template-columns: minmax(0, 1fr); }
  .tool-page .panel { min-width: 0; }
}

/* Shared component parity, including older page rules with body-level selectors. */
.tool-page :is(.mini-btn, .zoom-btn, .clear-history) {
  min-height: 44px;
  font-size: .80rem;
  font-weight: 600;
}
html[data-theme="light"] .tool-page :is(.btn:not(.primary), .mini-btn, .zoom-btn, .clear-history, .modal-close, .icon-action, .export-btn, .popup-btn:not(.confirm), .add-field-btn) {
  background: var(--site-glass-fill-strong) !important;
}
body.tool-page .site-footer {
  padding: 28px 0 34px !important;
  line-height: 1.6 !important;
}
.site-footer { line-height: 1.6 !important; }
.tool-page .status { color: var(--ds-success) !important; }
.tool-page .status.error,
.tool-page .result.error,
.tool-page .clear-history { color: var(--ds-danger) !important; }
.tool-page .card h2,
.tool-page .panel h2,
.tool-page .editor-card h2,
.tool-page .preview-card h2 { font-size: 1.05rem !important; line-height: 1.35 !important; }
@media (hover: hover) {
  .tool-page :is(.mini-btn, .zoom-btn, .clear-history, .modal-close):not(:disabled):hover {
    border-color: var(--site-accent) !important;
    background: var(--site-glass-fill-strong) !important;
  }
}
@media (max-width: 700px) {
  body.tool-page .hero,
  body.tool-page .tool-hero,
  body.tool-page .tool-heading {
    margin: 0 auto 34px !important;
    padding: 6px 0 16px !important;
  }
  body.tool-page .hero h1,
  body.tool-page .tool-hero h1,
  body.tool-page .tool-heading h1,
  .not-found-hero h1 { font-size: 2.20rem !important; }
  body.tool-page .hero p,
  body.tool-page .tool-hero p,
  body.tool-page p.sub,
  .not-found-hero p { font-size: .96rem !important; line-height: 1.65 !important; }
  .not-found-card { padding: 20px; }
  /* Preserve alignment between highlighted code and the editable overlay. */
  #svgSource,
  .code-highlight,
  .line-gutter { font-size: 16px !important; line-height: 1.65 !important; }
}
@media (max-width: 700px) {
  body .site-header,
  body.tool-page header.site-header { padding: 7px 9px !important; }
  body .site-header .brand,
  body.tool-page .site-header .brand { font-size: .95rem !important; }
}
@media (max-width: 360px) {
  body .site-header,
  body.tool-page header.site-header { padding-inline: 5px !important; }
  body .site-header .brand,
  body.tool-page .site-header .brand { font-size: .88rem !important; }
}
/* Offer tabs and pinned actions use the same control shapes as other tools. */
html body.tool-page .sticky-compare :is(.calc-btn, .export-btn) {
  border-radius: var(--site-radius-control) !important;
  font-weight: 700 !important;
}
html body.tool-page .card-tabs {
  border-radius: 20px !important;
  border-color: var(--site-glass-border) !important;
  padding: 4px !important;
  background: var(--site-glass-fill) !important;
}
.tool-page .card-tab { border-radius: var(--site-radius-control) !important; }
html[data-theme="light"] .not-found-card .back {
  background: var(--site-accent);
  border-color: rgba(255,255,255,.62);
}
/* Preview instructions remain readable over white, black, and checker backgrounds. */
.tool-page .stage-empty {
  inset: auto 16px;
  padding: 12px;
  border: 1px solid var(--site-glass-border);
  border-radius: var(--site-radius-control);
  background: var(--site-bg);
  color: var(--site-text);
}