/* ==========================================================================
   Tools Kingdom (مملكة الأدوات) — tools-kd.com — Design System
   ROYAL THEME: deep navy / dark slate surfaces with royal-gold accents
   (buttons, hover states, icons, the crown logo). Single type family (Cairo)
   carries both display and body text. RTL-first layout with a dashboard sidebar.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
  /* Royal palette (used directly by the sidebar, header, hero, footer and buttons) */
  --navy-950: #070F1F;
  --navy-900: #0B1A33;
  --navy-800: #13284A;
  --navy-700: #1D3763;
  --gold: #D4AF37;
  --gold-light: #F0D67A;
  --gold-deep: #A8841A;
  --gold-grad: linear-gradient(135deg, #F0D67A 0%, #D4AF37 45%, #A8841A 100%);

  --bg: #F5F6FA;
  --surface: #FFFFFF;
  --surface-2: #EEF0F6;
  --ink: #141B2D;
  --ink-soft: #4B5568;
  --primary: #13284A;
  --primary-dark: #0B1A33;
  --primary-tint: #E8ECF5;
  --accent: #A8841A;
  --accent-tint: #FAF3DC;
  --border: #E1E4EE;
  --danger: #B3423A;
  --success: #1F7A4D;
  --shadow: 0 1px 2px rgba(11, 26, 51, .05), 0 8px 24px -12px rgba(11, 26, 51, .18);
  --shadow-lift: 0 18px 40px -16px rgba(11, 26, 51, .34);
  --shadow-gold: 0 10px 24px -10px rgba(212, 175, 55, .55);
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;
  --font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --sidebar-w: 288px;

  --cat-tech: #1B6FA8;
  --cat-home: #3D8B4C;
  --cat-finance: #B8902E;
  --cat-text: #B5533D;
  --cat-health: #C13E6D;
  --cat-general: #13284A;
  --cat-converters: #1B6FA8;
  --cat-gold: #C9A227;
  --cat-education: #2E6FB7;
  --cat-numbers: #8A4FB5;
}

:root[data-theme="dark"] {
  --bg: #0A1020;
  --surface: #111A2E;
  --surface-2: #17223A;
  --ink: #ECEFF6;
  --ink-soft: #A9B2C7;
  --primary: #D4AF37;
  --primary-dark: #B8922A;
  --primary-tint: #1C2540;
  --accent: #E6C25A;
  --accent-tint: #2A2414;
  --border: #23304A;
  --cat-general: #D4AF37;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lift: 0 18px 40px -16px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ------------------------------ Brand + toggle ------------------------------ */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; color: var(--primary-dark); }
:root[data-theme="dark"] .brand { color: var(--primary); }
.brand .crown { font-size: 1.45rem; }
.theme-toggle {
  flex: 0 0 auto; width: 46px; height: 26px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface-2);
  position: relative; cursor: pointer; padding: 0;
}
.theme-toggle .knob {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--primary); transition: transform .2s ease;
}
:root[data-theme="dark"] .theme-toggle .knob { transform: translateX(-20px); background: var(--accent); }

/* ==========================================================================
   RTL dashboard sidebar layout
   ========================================================================== */
.app-shell { display: flex; align-items: flex-start; min-height: 100vh; }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.app-main main { flex: 1 0 auto; }

/* In RTL the first flex child sits on the right: the sidebar is on the right. */
.sidebar {
  flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 16px;
  padding: 18px 14px 16px;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  z-index: 50;
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sidebar-close, .menu-btn {
  display: none; width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink);
  font-size: 1.15rem; cursor: pointer;
}
.mobile-bar { display: none; }

/* search box (shared by sidebar + homepage hero) */
.search-box { position: relative; }
.search-box input {
  width: 100%; height: 46px; padding: 0 42px 0 14px;
  border-radius: 14px; border: 1px solid var(--border);
  background: var(--bg); color: var(--ink); font-family: inherit; font-size: .95rem;
  -webkit-appearance: none; appearance: none;
}
.search-box input::-webkit-search-cancel-button { display: none; }
.search-box input:focus { border-color: var(--primary); outline: none; }
.search-ico { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); pointer-events: none; font-size: .95rem; }
.search-results {
  position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 60;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lift);
  max-height: 360px; overflow-y: auto;
}
.search-results[hidden] { display: none; }
.search-results li a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 10px; font-size: .92rem; font-weight: 600;
}
.search-results li a:hover, .search-results li a:focus { background: var(--primary-tint); }
.sr-ico { width: 28px; text-align: center; }
.sr-empty { padding: 10px; color: var(--ink-soft); font-size: .9rem; }
.search-results li a.is-active { background: var(--primary-tint); }
.sr-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.45; }
.sr-hub { font-size: .74rem; font-weight: 600; color: var(--ink-soft); }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-group-title {
  margin: 12px 8px 4px; font-size: .74rem; font-weight: 800; letter-spacing: .02em;
  color: var(--ink-soft); text-transform: none;
}
.side-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 12px; font-size: .93rem; font-weight: 600; color: var(--ink);
  transition: background .15s ease, color .15s ease;
}
.side-link:hover { background: var(--surface-2); }
.side-link.active { background: var(--primary-tint); color: var(--primary-dark); }
:root[data-theme="dark"] .side-link.active { color: var(--primary); }
.side-ico { width: 26px; text-align: center; font-size: 1.05rem; }
.side-link span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
/* Sidebar-only tool counter, e.g. "محول الأطوال (56)" — the ONLY public place counts appear */
.side-count {
  font-size: .72rem; font-weight: 600; color: var(--ink-soft); opacity: .75;
  font-variant-numeric: tabular-nums; unicode-bidi: isolate; white-space: nowrap;
}
.side-link.active .side-count, .side-link:hover .side-count { opacity: 1; }
.side-bio {
  margin-top: auto; padding: 14px; border-radius: var(--radius-m);
  background: var(--surface-2); border: 1px solid var(--border);
}
.side-bio h2 { margin: 0 0 6px; font-size: .95rem; }
.side-bio p { margin: 0; font-size: .8rem; color: var(--ink-soft); line-height: 1.8; }
.ad-slot-sidebar { padding: 0; margin: 0; }

.sidebar-overlay { position: fixed; inset: 0; background: rgba(7, 15, 31, .55); z-index: 45; }
.sidebar-overlay[hidden] { display: none; }

@media (max-width: 899px) {
  .app-shell { display: block; }
  .mobile-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: 0; z-index: 40; padding: 10px 14px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
  }
  .menu-btn, .sidebar-close { display: inline-flex; align-items: center; justify-content: center; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; right: 0; height: 100%;
    width: min(320px, 86vw); transform: translateX(100%);
    transition: transform .22s ease; box-shadow: var(--shadow-lift);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar .theme-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* ==========================================================================
   Homepage — Directory of Hubs
   ========================================================================== */
.hp-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.hp-hero {
  padding: 28px 0 12px; text-align: center;
  background: linear-gradient(180deg, var(--primary-tint), var(--bg));
}
.hp-hero h1 { margin: 0 0 6px; font-size: clamp(1.45rem, 5.5vw, 2.5rem); font-weight: 800; line-height: 1.35; }
.hp-hero .highlight { color: var(--primary); }
.hp-lead { margin: 0 auto 18px; max-width: 560px; color: var(--ink-soft); font-size: .95rem; }
.hero-search { max-width: 560px; margin: 0 auto; }
.hero-search input { height: 54px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); font-size: 1rem; }
.hero-stats { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.hero-stat {
  font-size: .8rem; font-weight: 700; padding: 4px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--ink-soft);
}
a.hero-stat { text-decoration: none; }
a.hero-stat:hover { color: var(--primary); border-color: var(--primary); }
@media (min-width: 900px) {
  .hero-search { display: none; }
  .hp-hero { padding-top: 34px; }
}

.hp-tier { padding: 26px 0 8px; scroll-margin-top: 70px; }
.hp-tier + .hp-tier { border-top: 1px solid var(--border); margin-top: 18px; }
.hp-tier-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.hp-tier-title { margin: 0; font-size: 1.3rem; font-weight: 800; }
.hp-tier-desc { margin: 4px 0 0; font-size: .86rem; color: var(--ink-soft); }
.hp-tier-finance .hp-tier-title { color: var(--accent); }

.hub-grid { display: grid; grid-template-columns: 1fr; gap: 14px; padding-bottom: 24px; }
@media (min-width: 600px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hub-card {
  --cat-color: var(--primary);
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 18px; border-radius: 20px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hub-card::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px;
  background: var(--cat-color);
}
@media (hover: hover) { .hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } }
.hub-card:active { transform: scale(.98); }
.hub-card-top { display: flex; align-items: center; gap: 12px; }
.hub-card-icon {
  flex: 0 0 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; background: color-mix(in srgb, var(--cat-color) 14%, var(--surface));
}
.hub-card-name { font-size: 1.07rem; font-weight: 800; line-height: 1.4; }
.hub-card-meta { font-size: .76rem; color: var(--ink-soft); font-weight: 700; }
.hub-card-desc { margin: 0; color: var(--ink-soft); font-size: .86rem; line-height: 1.7; }
.hub-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-chip {
  font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--border);
}
.hub-card-go { margin-top: auto; font-size: .85rem; font-weight: 800; color: var(--primary); }
.hub-card-finance { background: linear-gradient(160deg, var(--surface), var(--accent-tint)); }
.hub-live {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 3px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
}
.hub-live.up { color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.hub-live.down { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }

/* ==========================================================================
   Tool / hub / matrix pages
   ========================================================================== */
.tool-page-header { padding: 32px 0 12px; }
.crumbs { font-size: .85rem; color: var(--ink-soft); margin-bottom: 14px; }
.crumbs a { color: var(--primary); font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.tool-title-row { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.tool-title-row .icon-chip {
  width: 56px; height: 56px; border-radius: 16px; font-size: 1.7rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--primary-tint);
}
.tool-title-row h1 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.45; }
.tool-page-header .desc { color: var(--ink-soft); margin: 0 0 18px; }
.hub-badge {
  display: inline-block; font-size: .76rem; font-weight: 800; padding: 2px 10px; border-radius: 999px;
  background: var(--accent-tint); color: var(--ink); margin-bottom: 8px;
}

.calculator-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  box-shadow: var(--shadow); padding: 28px; margin-bottom: 32px;
}
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--ink); }
.field .hint, .hint { font-size: .78rem; color: var(--ink-soft); margin-top: 4px; }
.field input[type="text"], .field input[type="number"], .field input[type="password"],
.field input[type="date"], .field input[type="search"], .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-s);
  border: 1px solid var(--border); background: var(--bg); color: var(--ink);
  font-family: inherit; font-size: .95rem;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); outline: none; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.checkbox-row input { width: 18px; height: 18px; }
.checkbox-row label { font-weight: 500; font-size: .9rem; margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radius-s); padding: 12px 24px;
  font-weight: 700; font-size: .95rem; cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { background: var(--surface-2); color: var(--ink); }
.btn-ghost:hover { background: var(--border); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 8px 16px; font-size: .85rem; }

.result-box {
  margin-top: 20px; padding: 20px; border-radius: var(--radius-m);
  background: var(--primary-tint); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  display: none;
}
.result-box.show { display: block; }
.result-box .big-number { font-size: 1.8rem; font-weight: 800; color: var(--primary-dark); overflow-wrap: anywhere; }
:root[data-theme="dark"] .result-box .big-number { color: var(--primary); }
.result-box .result-line {
  display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
  border-top: 1px dashed color-mix(in srgb, var(--primary) 30%, transparent); font-size: .92rem;
}
.result-box .result-line:first-child { border-top: none; }

.error-box {
  margin-top: 16px; padding: 14px 18px; border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger); font-size: .9rem; display: none; white-space: pre-wrap;
  font-family: 'Courier New', monospace;
}
.error-box.show { display: block; }
.output-block {
  margin-top: 16px; padding: 16px; border-radius: var(--radius-s);
  background: var(--surface-2); border: 1px solid var(--border);
  font-family: 'Courier New', monospace; font-size: .85rem;
  white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto; display: none;
}
.output-block.show { display: block; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tag-chip {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-size: .85rem; color: var(--primary-dark);
}
:root[data-theme="dark"] .tag-chip { color: var(--primary); }

/* Swap (bidirectional converters) */
.swap-wrap { display: flex; flex-direction: column; }
.swap-wrap > .field:first-child { order: 1; }
.swap-wrap > .swap-btn { order: 2; }
.swap-wrap > .field:last-child { order: 3; }
.swap-wrap.swapped > .field:first-child { order: 3; }
.swap-wrap.swapped > .field:last-child { order: 1; }
.swap-btn, .cc-swap {
  align-self: center; width: 46px; height: 46px; margin: 0 0 16px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--primary-tint); color: var(--primary);
  font-size: 1.35rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s ease, background .15s ease;
}
.swap-btn span, .cc-swap span { display: inline-block; transition: transform .3s ease; }
.swap-btn:hover, .cc-swap:hover { background: var(--primary); color: #fff; }
.swap-btn:active { transform: scale(.92); }
.swap-wrap.swapped .swap-btn span { transform: rotate(180deg); }
.cc-swap.flipped span { transform: rotate(180deg); }

.cc-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
@media (max-width: 520px) {
  .cc-row { grid-template-columns: 1fr; }
  .cc-swap { justify-self: center; margin: 0 0 14px; transform: rotate(90deg); }
}

/* Spoke cards (inside hubs + related) */
.section-h { font-size: 1.2rem; margin: 6px 0 14px; }
.spoke-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 32px; }
.tool-card {
  --cat-color: var(--primary);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease;
}
.tool-card::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--cat-color);
}
.tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.tool-card .icon-chip {
  width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; background: color-mix(in srgb, var(--cat-color) 14%, var(--surface));
}
.tool-card h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.tool-card p { margin: 0; color: var(--ink-soft); font-size: .85rem; flex-grow: 1; }

/* Matrix link directory */
.dir-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.dir-tools input {
  flex: 1 1 240px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: .92rem;
}
.dir-wrap { display: grid; gap: 10px; margin-bottom: 32px; }
.dir-group {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 4px 14px; box-shadow: var(--shadow);
}
.dir-group[hidden] { display: none; }
.dir-group summary {
  cursor: pointer; padding: 10px 0; font-weight: 800; font-size: .95rem; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.dir-group summary::-webkit-details-marker { display: none; }
.dir-group summary::after { content: "▾"; margin-inline-start: auto; color: var(--ink-soft); transition: transform .2s; }
.dir-group[open] summary::after { transform: rotate(180deg); }
.dir-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 14px; }
.dir-links a {
  font-size: .84rem; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.dir-links a:hover { border-color: var(--primary); color: var(--primary); }
.dir-links a[hidden] { display: none; }
.dir-links a.legacy { background: var(--primary-tint); }
.pop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 26px; }
.pop-pair {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  font-weight: 800; font-size: .9rem;
}
.pop-pair:hover { border-color: var(--accent); }

/* Conversion tables (matrix pages) */
.conv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 30px; }
@media (min-width: 900px) { .conv-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.formula-box {
  padding: 14px 18px; border-radius: var(--radius-m); background: var(--accent-tint);
  border: 1px solid var(--border); font-weight: 700; margin-bottom: 14px;
}
.quick-answer { font-size: 1.05rem; font-weight: 800; color: var(--primary-dark); margin: 0 0 6px; }
:root[data-theme="dark"] .quick-answer { color: var(--primary); }
.reverse-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 16px;
  border-radius: 999px; background: var(--primary-tint); color: var(--primary); font-weight: 800; font-size: .88rem;
}
.reverse-link:hover { background: var(--primary); color: #fff; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-s); }
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .92rem; }
.data-table th, .data-table td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table th { background: var(--surface-2); font-weight: 700; }
.data-table tr:last-child td { border-bottom: none; }
.data-table td[dir="ltr"] { text-align: left; font-variant-numeric: tabular-nums; }

/* Article (SEO) — only on inner tool / hub / gold / matrix pages */
.article {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  padding: 32px; max-width: 80ch; margin: 0 auto 50px;
}
.article h2 { font-size: 1.35rem; margin-top: 0; }
.article h3 { font-size: 1.1rem; color: var(--primary-dark); }
:root[data-theme="dark"] .article h3 { color: var(--primary); }
.article p { color: var(--ink-soft); }
.article a { color: var(--primary); font-weight: 700; }
.article ul { padding-inline-start: 22px; color: var(--ink-soft); }
.article li { margin-bottom: 6px; }
.article .seo-article { margin-top: 28px; padding-top: 20px; border-top: 1px dashed var(--border); }
.article .seo-article h4 { font-size: 1rem; margin: 18px 0 4px; color: var(--ink); }
.article .seo-article h4::before { content: "؟ "; color: var(--accent); font-weight: 800; }

.related-tools { padding-bottom: 50px; }
.related-tools h2 { font-size: 1.2rem; margin-bottom: 16px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

.hp-card-price {
  align-self: flex-start; font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 2px 10px; border-radius: 999px;
}
.hp-card-price.up { color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
.hp-card-price.down { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.hp-card-desc { color: var(--ink-soft); font-size: .78rem; line-height: 1.55; }

/* ----------------------------------- Footer -------------------------------- */
.site-footer { border-top: 1px solid var(--border); padding: 26px 0; text-align: center; color: var(--ink-soft); font-size: .85rem; }
.site-footer nav { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.site-footer nav a:hover { color: var(--primary); }

/* ----------------------------------- Admin --------------------------------- */
.admin-shell { padding: 34px 0 80px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft);
  padding: 8px 16px; border-radius: 999px; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.pill:hover { border-color: var(--primary); color: var(--primary); }
.pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.admin-table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow);
}
.admin-table th, .admin-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); text-align: right; font-size: .88rem; vertical-align: top; }
.admin-table th { background: var(--surface-2); font-weight: 700; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr.is-hub td { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.badge.on { background: var(--primary-tint); color: var(--primary-dark); }
.badge.off { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.badge.hub { background: var(--accent-tint); color: var(--ink); }
.login-shell { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  padding: 40px; width: 100%; max-width: 380px; box-shadow: var(--shadow-lift); text-align: center;
}
.flash { padding: 12px 18px; border-radius: var(--radius-s); margin-bottom: 16px; font-size: .9rem; }
.flash.success { background: var(--primary-tint); color: var(--primary-dark); }
.flash.error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.seo-analyzer {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 20px; margin-bottom: 20px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px;
}
.seo-metric { text-align: center; }
.seo-metric .value { font-size: 1.5rem; font-weight: 800; }
.seo-metric .label { font-size: .78rem; color: var(--ink-soft); }
.seo-metric.good .value { color: var(--success); }
.seo-metric.bad .value { color: var(--danger); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 16px; box-shadow: var(--shadow); }
.stat-card b { display: block; font-size: 1.6rem; }
.stat-card span { font-size: .8rem; color: var(--ink-soft); }
.bar-track { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bar-fill { height: 100%; background: var(--primary); border-radius: 99px; }
.pager { display: flex; gap: 8px; justify-content: center; margin: 18px 0; flex-wrap: wrap; }

/* ----------------------------------- Ad slots ------------------------------ */
/* Plain in-flow slots only: no overlays, no interstitials, no ad walls. */
.ad-slot { max-width: 1180px; margin: 16px auto; padding: 0 24px; text-align: center; overflow: hidden; }
.ad-slot-header, .ad-slot-footer { margin: 0 auto; padding: 10px 24px; }
.ad-slot-above-calc, .ad-slot-below-calc, .ad-slot-in-article { margin: 0 0 20px; padding: 0; }

@media (max-width: 720px) {
  .article { padding: 22px; }
  .calculator-card { padding: 20px; }
  .container { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-card, .tool-card { transition: none; }
}


/* ------------------------- CMS article (إدارة المقالات) ------------------------- */
.cms-article { border-top: 4px solid var(--primary); }
.cms-head { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.cms-title { font-size: clamp(1.3rem, 4vw, 1.7rem); line-height: 1.45; margin: 0 0 6px; }
.cms-meta { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.cms-body h2 { font-size: 1.3rem; margin-top: 26px; }
.cms-body h2:first-child { margin-top: 0; }
.cms-body ol { padding-inline-start: 22px; color: var(--ink-soft); }
.cms-body img { max-width: 100%; height: auto; border-radius: var(--radius-m); }
.cms-body table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: .92rem; }
.cms-body th, .cms-body td { border: 1px solid var(--border); padding: 8px 10px; }
.cms-body th { background: var(--surface-2); }
.cms-body blockquote { margin: 16px 0; padding: 10px 16px; border-inline-start: 4px solid var(--accent); background: var(--surface-2); border-radius: 8px; }
.cms-refs { margin-top: 26px; padding-top: 16px; border-top: 1px dashed var(--border); }
.cms-refs h2 { font-size: 1.05rem; margin: 0 0 8px; }
.cms-refs ol { margin: 0; padding-inline-start: 22px; font-size: .88rem; color: var(--ink-soft); }
.cms-refs li { margin-bottom: 4px; overflow-wrap: anywhere; }
.tool-card-hub { border-style: dashed; }

/* Admin: article editor */
.cms-target { border: 1px solid var(--border); border-radius: var(--radius-m); padding: 12px 14px 4px; margin: 0 0 16px; }
.cms-target legend { font-weight: 700; padding: 0 6px; }
.cms-target-preview { margin: 0 0 10px; font-size: .88rem; color: var(--ink-soft); }
.cms-target-preview.ok { color: var(--success); }
.cms-target-preview.bad { color: var(--danger); }
/* Related tool / page picker (static/target-picker.js) — replaces <datalist>, works on phones */
.cms-target { min-width: 0; }
.tp-wrap { position: relative; }
.tp-wrap input { padding-inline-end: 42px; }
.tp-clear {
  position: absolute; top: 50%; inset-inline-end: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); color: var(--ink-soft); font-size: .9rem; line-height: 1;
}
.tp-clear[hidden] { display: none; }
.tp-list {
  position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 80;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lift);
  max-height: min(340px, 52vh); overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.tp-list[hidden] { display: none; }
.tp-group {
  position: sticky; top: -6px; z-index: 1; margin: 0 -6px; padding: 6px 12px 4px;
  font-size: .74rem; font-weight: 800; color: var(--accent); background: var(--surface);
}
.tp-opt {
  display: flex; flex-direction: column; gap: 1px; padding: 10px 12px; min-height: 44px;
  border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tp-opt:hover, .tp-opt.is-active { background: var(--primary-tint); }
.tp-opt:active { background: var(--accent-tint); }
.tp-label { font-weight: 700; font-size: .93rem; line-height: 1.5; }
.tp-meta { font-size: .74rem; color: var(--ink-soft); display: flex; gap: 8px; flex-wrap: wrap; }
.tp-meta [dir="ltr"] { unicode-bidi: isolate; word-break: break-all; }
.tp-empty { padding: 12px; color: var(--ink-soft); font-size: .88rem; }
@media (max-width: 899px) {
  .tp-wrap input { font-size: 16px; scroll-margin-top: 156px; }   /* iOS: no auto-zoom; stay below the sticky bars */
  .tp-list { max-height: 45vh; }
}
.admin-input {
  height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font-family: inherit;
}

/* ------------------------- Numbers: Western digits, LTR ------------------------- */
input[type="number"], input[inputmode="decimal"], input[inputmode="numeric"] {
  direction: ltr; text-align: right; font-variant-numeric: tabular-nums;
}
.big-number, .result-line span:last-child, [dir="ltr"] { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Admin bar (WordPress-style) — rendered ONLY for a logged-in admin.
   Fixed on top; the sidebar / mobile bar are pushed down by --ab-h.
   ========================================================================== */
body.has-admin-bar { --ab-h: 42px; padding-top: var(--ab-h); }
.admin-bar {
  position: fixed; top: 0; inset-inline: 0; height: 42px; z-index: 1000;
  background: #1d2327; color: #f0f0f1; font-size: .84rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.ab-inner {
  height: 100%; display: flex; align-items: center; gap: 2px; padding: 0 10px;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none;
}
.ab-inner::-webkit-scrollbar { display: none; }
.ab-item {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  border-radius: 8px; color: #f0f0f1; background: transparent; border: 0;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; flex: 0 0 auto;
}
.ab-item:hover, .ab-item:focus-visible { background: #2c3338; color: #72aee6; outline: none; }
.ab-brand { font-weight: 800; }
.ab-primary { background: var(--primary); color: #fff; }
.ab-primary:hover, .ab-primary:focus-visible { background: color-mix(in srgb, var(--primary) 80%, #000); color: #fff; }
.ab-sep { width: 1px; height: 22px; background: #3c434a; margin: 0 6px; flex: 0 0 auto; }
.ab-page { max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: #c3c4c7; padding: 0 6px; flex: 0 1 auto; }
.ab-badge { flex: 0 0 auto; padding: 2px 8px; border-radius: 99px; background: #3c434a; color: #f0f0f1; font-size: .74rem; font-weight: 700; }
.ab-badge-warn { background: #b32d2e; }
.ab-spacer { flex: 1 1 auto; min-width: 8px; }
.ab-form { margin: 0; display: inline-flex; }
body.has-admin-bar .sidebar { top: var(--ab-h); height: calc(100vh - var(--ab-h)); }
@media (max-width: 899px) {
  body.has-admin-bar .mobile-bar { top: var(--ab-h); }
  body.has-admin-bar .sidebar { top: var(--ab-h); height: auto; bottom: 0; }
  .ab-item span { display: none; }          /* icons only on small screens */
  .ab-primary span, .ab-brand span { display: inline; }
  .ab-page, .ab-sep { display: none; }
}

/* Admin-only inline editing shortcuts inside the page */
.admin-inline-empty {
  margin: 28px 0; padding: 18px 20px; border: 2px dashed var(--primary);
  border-radius: var(--radius-m); background: var(--primary-tint);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.admin-inline-empty p { margin: 0; flex: 1 1 280px; }
.admin-inline-empty small { flex-basis: 100%; color: var(--ink-soft); }
.admin-inline-edit {
  float: left; margin-inline-start: 12px; padding: 6px 12px; border-radius: 99px;
  background: #1d2327; color: #f0f0f1; font-size: .8rem; font-weight: 700;
}
.admin-inline-edit:hover { background: var(--primary); color: #fff; }

/* ---------------- New tools: GPA table, words output ---------------- */
.gpa-table td { white-space: normal; padding: 8px 8px; vertical-align: middle; }
.gpa-table input, .gpa-table select {
  width: 100%; min-width: 64px; height: 40px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--ink); font-family: inherit; font-size: .92rem;
}
.gpa-table input:focus, .gpa-table select:focus { border-color: var(--primary); outline: none; }
.gpa-table .gpa-hours { max-width: 90px; }
.gpa-table th:last-child, .gpa-table td:last-child { width: 1%; }
.output-block.words-out { font-family: inherit; word-break: normal; font-size: 1.12rem; line-height: 2; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
.digit-map td { font-size: 1.15rem; text-align: center; }
.digit-map th { text-align: center; }
@media (max-width: 600px) {
  .gpa-table td, .gpa-table th { padding: 6px 4px; }
  .gpa-table input, .gpa-table select { min-width: 0; padding: 0 6px; font-size: .85rem; }
  .gpa-table .gpa-hours { max-width: 52px; }
  .gpa-table .btn-sm { padding: 6px 8px; }
}

/* ==========================================================================
   Admin: drag & drop ordering board (/admin/order + dashboard)
   ========================================================================== */
.ord-dash > summary { cursor: pointer; font-weight: 800; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ord-dash[open] > summary { margin-bottom: 14px; }
.ord-help p { margin: 0 0 6px; }
.ord-grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.ord-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 14px; }
.ord-section h2 { margin: 0 0 10px; font-size: 1.05rem; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ord-section h2 small { font-size: .75rem; color: var(--ink-soft); font-weight: 600; }
.ord-list[hidden] { display: none; }
.ord-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ord-hubs { min-height: 56px; border-radius: 12px; }
.ord-hubs:empty { border: 2px dashed var(--border); }
.ord-hubs:empty::before { content: "اسحب قسماً إلى هنا"; display: block; padding: 16px; text-align: center; color: var(--ink-soft); font-size: .85rem; }
.ord-tools { margin: 6px 22px 4px 0; padding-inline-start: 0; }
.ord-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border); user-select: none;
}
.ord-tool .ord-row { background: var(--bg); padding: 6px 10px; }
.ord-handle { cursor: grab; font-size: 1.15rem; color: var(--ink-soft); padding: 0 4px; touch-action: none; }
.ord-handle:active { cursor: grabbing; }
.ord-pos { min-width: 22px; text-align: center; font-size: .75rem; font-weight: 800; color: var(--primary-dark);
  background: var(--primary-tint); border-radius: 99px; padding: 2px 6px; font-variant-numeric: tabular-nums; }
.ord-ico { width: 24px; text-align: center; }
.ord-name { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-badge { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--surface); }
.ord-badge.warn { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }
.ord-actions { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.ord-btn {
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font: inherit; font-size: .78rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.ord-btn:hover, .ord-btn:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }
.ord-item.dragging > .ord-row { opacity: .45; border-style: dashed; border-color: var(--primary); }
.ord-status {
  position: fixed; bottom: 18px; inset-inline-start: 50%; transform: translateX(50%) translateY(20px);
  padding: 10px 18px; border-radius: 99px; background: #1d2327; color: #fff; font-weight: 700; font-size: .88rem;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 1100;
}
.ord-status.show { opacity: 1; transform: translateX(50%) translateY(0); }
.ord-status.ok { background: var(--primary); }
.ord-status.error { background: var(--danger); pointer-events: auto; }
@media (max-width: 600px) {
  .ord-grid { grid-template-columns: 1fr; }
  .ord-btn { min-width: 34px; height: 34px; }
  .ord-name { white-space: normal; }
}

/* Sidebar account links (login / dashboard / logout) — subtle, at the very bottom */
.side-account { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; padding: 2px 4px 4px; }
.side-acc-link {
  font-size: .76rem; font-weight: 600; color: var(--ink-soft); background: none; border: 0; padding: 4px 2px;
  font-family: inherit; cursor: pointer; opacity: .8;
}
.side-acc-link:hover, .side-acc-link:focus-visible { color: var(--primary); opacity: 1; }
.side-acc-form { margin: 0; display: inline; }

/* ON / OFF visibility switch on the ordering board */
.ord-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; flex: 0 0 auto; position: relative; }
.ord-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ord-slider {
  width: 40px; height: 22px; border-radius: 99px; background: #c3c4c7; position: relative;
  transition: background .18s ease; flex: 0 0 auto;
}
.ord-slider::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: inset-inline-start .18s ease;
}
.ord-switch input:checked + .ord-slider { background: var(--success, #1f8f4e); }
.ord-switch input:checked + .ord-slider::after { inset-inline-start: 21px; }
.ord-switch input:focus-visible + .ord-slider { outline: 2px solid var(--primary); outline-offset: 2px; }
.ord-switch input:disabled + .ord-slider { opacity: .6; }
.ord-switch-txt { font-size: .72rem; font-weight: 700; color: var(--ink-soft); min-width: 30px; }
.ord-item.is-off > .ord-row { background: repeating-linear-gradient(-45deg, var(--surface-2), var(--surface-2) 8px, var(--bg) 8px, var(--bg) 16px); }
.ord-item.is-off > .ord-row .ord-name, .ord-item.is-off > .ord-row .ord-ico { opacity: .5; text-decoration: line-through; }
.ord-item.is-off > .ord-row .ord-switch-txt { color: var(--danger); }
.ord-off-note { display: none; font-size: .78rem; color: var(--danger); padding: 4px 8px; }
.ord-hub.is-off > .ord-tools .ord-off-note { display: block; }
.ord-hub.is-off > .ord-tools > .ord-item { opacity: .55; }

/* ==========================================================================
   Article editor: real-time SEO analyzer
   ========================================================================== */
.cms-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.cms-editor-grid > form { margin-bottom: 0; }
.seo-panel { position: sticky; top: calc(var(--ab-h, 0px) + 16px); margin-bottom: 0; }
.seo-panel h2 { margin: 0 0 12px; font-size: 1.05rem; }
.seo-score-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.seo-score { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.seo-score.good { color: var(--success); } .seo-score.ok { color: #B8902E; } .seo-score.bad { color: var(--danger); }
.seo-score-label { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.seo-bar { height: 12px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin-bottom: 14px; }
.seo-bar-fill { height: 100%; width: 0; border-radius: 99px; transition: width .35s ease, background .35s ease; background: var(--danger); }
.seo-bar-fill.ok { background: #D9A21B; } .seo-bar-fill.good { background: var(--success); }
.seo-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.seo-checks li { position: relative; padding: 8px 34px 8px 10px; border-radius: 10px; font-size: .86rem; font-weight: 600;
  background: var(--surface-2); line-height: 1.6; }
.seo-checks li::before { position: absolute; right: 10px; top: 8px; font-weight: 800; }
.seo-checks li.pass { background: color-mix(in srgb, var(--success) 10%, var(--surface)); color: var(--success); }
.seo-checks li.pass::before { content: "✓"; }
.seo-checks li.fail { color: var(--ink); }
.seo-checks li.fail::before { content: "✕"; color: var(--danger); }
.seo-val { display: block; font-size: .74rem; font-weight: 600; color: var(--ink-soft); }
.seo-val:empty { display: none; }
.seo-tips { margin-top: 12px; font-size: .8rem; color: var(--ink-soft); }
.seo-tips p { margin: 0 0 4px; font-weight: 700; }
.seo-tips ul { margin: 0; padding-inline-start: 18px; }
.seo-pill { display: inline-block; min-width: 46px; text-align: center; padding: 2px 8px; border-radius: 99px; font-weight: 800; font-size: .8rem; cursor: help; }
.seo-pill.good { background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); }
.seo-pill.ok { background: color-mix(in srgb, #D9A21B 18%, var(--surface)); color: #8a6510; }
.seo-pill.bad { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
@media (max-width: 1100px) {
  .cms-editor-grid { grid-template-columns: 1fr; }
  .seo-panel { position: static; order: -1; }   /* analyzer above the form on smaller screens */
}
@media (max-width: 600px) {
  .ord-row { flex-wrap: wrap; row-gap: 8px; }
  .ord-name { flex: 1 1 0; white-space: normal; }
  .ord-actions { flex: 1 0 100%; justify-content: flex-end; flex-wrap: wrap; }
  .ord-switch-txt { display: none; }
  .ord-tools { margin-inline-start: 0; margin-inline-end: 8px; }
}

/* ==========================================================================
   Ads (ads.py) — safe, in-flow, responsive zones. AdSense-policy friendly:
   labelled, never floating/overlapping (CSS containment traps position:fixed),
   kept away from tool buttons, nothing can overflow the column.
   ========================================================================== */
.ad-zone {
  display: block; position: relative; clear: both;
  width: 100%; max-width: 100%; margin: 28px auto; padding: 6px 0 0;
  text-align: center; overflow: hidden;
  contain: layout paint;                 /* fixed/absolute children stay INSIDE the box */
  isolation: isolate; z-index: 0;
}
.ad-label {
  display: block; margin: 0 0 4px; font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-soft); opacity: .75; user-select: none;
}
.ad-inner { max-width: 100%; margin: 0 auto; overflow: hidden; }
.ad-inner > *, .ad-inner iframe, .ad-inner img, .ad-inner ins, .ad-inner video { max-width: 100% !important; }
.ad-inner img { height: auto; }
.ad-inner ins.adsbygoogle { display: block; }
.ad-zone-header-banner { max-width: 1180px; margin: 12px auto 8px; padding-inline: 24px; }
.ad-zone-footer-banner { max-width: 1180px; padding-inline: 24px; }
.ad-zone-above-tool { margin: 0 0 28px; }
.ad-zone-below-tool { margin: 28px 0; }
.ad-zone-in-article { margin: 26px 0; padding-block: 10px; border-block: 1px solid var(--border); }
.ad-zone-sidebar-ad { margin: 8px 0 0; }
@media (max-width: 899px) {
  .ad-zone-header-banner, .ad-zone-footer-banner { padding-inline: 14px; }
}
@media print { .ad-zone, .tk-slot-preview { display: none !important; } }

/* Admin-only placeholder (admins never load real ads → no invalid self-clicks) */
.tk-slot-preview {
  margin: 20px auto; padding: 12px 14px; border: 2px dashed #c9a227; border-radius: 12px;
  background: color-mix(in srgb, #c9a227 8%, var(--surface)); color: var(--ink-soft);
  font-size: .82rem; text-align: center; max-width: 1180px;
}
.sidebar .tk-slot-preview { margin: 6px 0; }

/* Ads Manager screen */
.sp-intro ul { margin: 8px 0 0; padding-inline-start: 20px; font-size: .88rem; color: var(--ink-soft); line-height: 1.9; }
.sp-intro p { margin: 0; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; }
.sp-card { margin: 0; display: flex; flex-direction: column; }
.sp-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sp-card-head h2 { margin: 0 0 4px; font-size: 1.02rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sp-card-head h2 code { font-size: .72rem; background: var(--surface-2); padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.sp-card-head .hint { margin: 0 0 10px; }
.sp-code { font-family: ui-monospace, "Courier New", monospace !important; font-size: .8rem !important; text-align: left; min-height: 110px; }
.sp-card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.sp-card-foot .btn { margin-inline-start: auto; }
.sp-state { font-size: .75rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: var(--surface-2); color: var(--ink-soft); }
.sp-state.live { background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); }
.sp-state.off { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.sp-msg { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.sp-msg.ok { color: var(--success); } .sp-msg.error { color: var(--danger); }
.sp-card.dirty { border-color: #c9a227; }
@media (max-width: 600px) { .sp-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Pro UX (static/ux.js): favourites ⭐, result toolbar, recent history
   ========================================================================== */
.fav-star {
  border: 0; background: transparent; cursor: pointer; line-height: 1; padding: 4px 6px; border-radius: 10px;
  color: var(--ink-soft); font-size: 1.15rem; position: relative; transition: transform .15s ease, color .15s ease;
}
.fav-star:hover, .fav-star:focus-visible { color: #C9A227; transform: scale(1.12); outline: none; }
.fav-star.on { color: #E0A800; }
.fav-star-title { font-size: 1.6rem; margin-inline-start: 4px; }
.fav-wrap { position: relative; display: flex; min-width: 0; }
.fav-wrap > a { flex: 1 1 auto; min-width: 0; }
.fav-star-card { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; background: var(--surface);
  box-shadow: var(--shadow); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.side-row { display: flex; align-items: center; min-width: 0; }
.side-row > .side-link { flex: 1 1 auto; min-width: 0; }
.fav-star-side { font-size: .95rem; opacity: 0; padding: 4px; flex: 0 0 auto; }
.side-row:hover .fav-star-side, .fav-star-side:focus-visible, .fav-star-side.on { opacity: 1; }
@media (hover: none) { .fav-star-side { opacity: .55; } }
.side-favs { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 6px; border-bottom: 1px dashed var(--border); }
.side-favs[hidden] { display: none; }
.side-favs .side-group-title { margin-top: 2px; }
.fav-remove { border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: .8rem; padding: 6px; border-radius: 8px; opacity: .55; }
.fav-remove:hover, .fav-remove:focus-visible { opacity: 1; color: var(--danger); outline: none; }

/* Result toolbar */
.ux-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -10px 0 18px; }
.ux-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem;
  font-weight: 700; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.ux-btn:hover:not(:disabled), .ux-btn:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }
.ux-btn:disabled { opacity: .45; cursor: not-allowed; }
.ux-btn.sm { padding: 5px 10px; font-size: .78rem; }
.ux-hint { font-size: .74rem; color: var(--ink-soft); margin-inline-start: auto; }
.ux-link { border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: .78rem; cursor: pointer; text-decoration: underline; padding: 4px; }
.ux-link:hover { color: var(--danger); }
.ux-tip {
  position: absolute; bottom: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(50%);
  white-space: nowrap; background: #1d2327; color: #fff; font-size: .75rem; font-weight: 700;
  padding: 6px 10px; border-radius: 8px; pointer-events: none; z-index: 5; animation: uxTipIn .15s ease;
}
.ux-tip.bad { background: var(--danger); }
.ux-tip.out { opacity: 0; transition: opacity .3s ease; }
.ux-tip::after { content: ""; position: absolute; top: 100%; inset-inline-start: 50%; transform: translateX(50%);
  border: 5px solid transparent; border-top-color: inherit; border-top-color: #1d2327; }
.ux-tip.bad::after { border-top-color: var(--danger); }
@keyframes uxTipIn { from { opacity: 0; transform: translate(50%, 4px); } to { opacity: 1; transform: translate(50%, 0); } }
.ux-print-frame { position: absolute; width: 0; height: 0; border: 0; left: -9999px; }

/* Recent history */
.ux-history { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m);
  padding: 14px 16px; margin: 0 0 24px; box-shadow: var(--shadow); }
.ux-history[hidden] { display: none; }
.ux-history-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.ux-history-head h2 { margin: 0; font-size: 1rem; }
.ux-history-head small { color: var(--ink-soft); font-weight: 600; }
.ux-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ux-history-list details { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.ux-history-list summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 12px;
  cursor: pointer; list-style: none; font-size: .88rem; font-weight: 700; }
.ux-history-list summary::-webkit-details-marker { display: none; }
.ux-history-list summary::before { content: "▸"; color: var(--ink-soft); margin-inline-end: 4px; }
.ux-history-list details[open] summary::before { content: "▾"; }
.ux-h-main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; text-align: start; }
.ux-history-list time { flex: 0 0 auto; font-size: .72rem; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.ux-h-full { margin: 0 12px; padding: 10px 12px; background: var(--surface); border-radius: 10px; white-space: pre-wrap;
  font-family: inherit; font-size: .85rem; line-height: 1.8; max-height: 240px; overflow: auto; unicode-bidi: plaintext; }
.ux-h-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; }
@media (max-width: 600px) {
  .ux-hint { flex-basis: 100%; margin: 0; }
  .ux-btn span { font-size: .8rem; }
}
@media print { .ux-bar, .ux-history, .fav-star { display: none !important; } }

/* ==========================================================================
   ⚡ الأدوات اليومية — quick-access menu (sidebar, below favourites)
   ========================================================================== */
.side-daily {
  padding: 10px 8px 8px; border-radius: var(--radius-m);
  background: linear-gradient(180deg, var(--primary-tint), color-mix(in srgb, var(--primary-tint) 35%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
}
.side-daily-title { margin: 0 4px 6px; color: var(--primary-dark); }
:root[data-theme="dark"] .side-daily-title { color: var(--primary); }
.side-daily-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1px; }
.side-daily-link {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 10px;
  font-size: .86rem; font-weight: 600; color: var(--ink); transition: background .15s ease, color .15s ease;
}
.side-daily-link:hover, .side-daily-link:focus-visible { background: var(--surface); color: var(--primary-dark); outline: none; }
.side-daily-link.active { background: var(--surface); color: var(--primary-dark); box-shadow: inset -3px 0 0 var(--primary); }
:root[data-theme="dark"] .side-daily-link:hover, :root[data-theme="dark"] .side-daily-link.active { color: var(--primary); }
.side-daily-ico {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--primary); background: var(--surface); border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
}
.side-daily-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   ⚡ الأدوات اليومية — homepage quick-access grid (above the hubs directory)
   Same curated list as the sidebar menu. The ONLY place individual tools
   appear on the homepage. No counts here (counts stay in the sidebar).
   ========================================================================== */
.hp-daily {
  margin: 22px 0 6px; padding: 18px 16px 16px; scroll-margin-top: 70px;
  border-radius: var(--radius-l);
  background: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--primary-tint) 70%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  box-shadow: var(--shadow);
}
.hp-daily-head { margin-bottom: 14px; }
.hp-daily-title { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--primary-dark); display: flex; align-items: center; gap: 8px; }
:root[data-theme="dark"] .hp-daily-title { color: var(--primary); }
.hp-daily-bolt {
  width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}
.hp-daily-desc { margin: 4px 0 0; font-size: .86rem; color: var(--ink-soft); }

.daily-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 520px) { .daily-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .daily-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .daily-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.daily-grid > li { min-width: 0; }

.daily-card {
  --dc: var(--primary);
  display: flex; align-items: center; gap: 12px; height: 100%; min-height: 72px;
  padding: 12px 14px; border-radius: var(--radius-m); text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
@media (hover: hover) {
  .daily-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--dc) 45%, var(--border)); }
  .daily-card:hover .daily-card-go { transform: translateX(-3px); color: var(--dc); }
}
.daily-card:focus-visible { outline: 2px solid var(--dc); outline-offset: 2px; }
.daily-card:active { transform: scale(.98); }
.daily-card-ico {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--dc); background: color-mix(in srgb, var(--dc) 13%, var(--surface));
}
.daily-card-ico svg { width: 22px; height: 22px; }
.daily-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.daily-card-name { font-size: .97rem; font-weight: 800; line-height: 1.45; }
.daily-card-hint { font-size: .78rem; color: var(--ink-soft); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.daily-card-go { flex: 0 0 auto; font-weight: 800; color: var(--ink-soft); transition: transform .15s ease, color .15s ease; }

/* Category tints per icon (reuse the site palette) */
.daily-ico-scale, .daily-ico-cap { --dc: var(--cat-education); }
.daily-ico-currency { --dc: var(--cat-finance); }
.daily-ico-heart, .daily-ico-calendar { --dc: var(--cat-health); }
.daily-ico-users, .daily-ico-cake { --dc: var(--cat-general); }
.daily-ico-percent, .daily-ico-text { --dc: var(--cat-numbers); }
.daily-ico-receipt { --dc: var(--cat-text); }
.daily-ico-moon { --dc: var(--cat-education); }

a.hero-stat-daily { color: var(--primary-dark); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--primary-tint); }
:root[data-theme="dark"] a.hero-stat-daily { color: var(--primary); }
@media (max-width: 519px) { .hp-daily { padding: 16px 12px 12px; border-radius: var(--radius-m); } }
@media (prefers-reduced-motion: reduce) { .daily-card, .daily-card-go { transition: none; } }

/* ==========================================================================
   🌙 التقويم الهجري (hijri-calendar) — today cards, month grid, converter
   All numbers rendered by the JS are Western (0-9) inside dir="ltr".
   ========================================================================== */
.hc { display: flex; flex-direction: column; gap: 22px; }
.hc-today {
  padding: 18px; border-radius: var(--radius-m);
  background: linear-gradient(150deg, var(--primary-tint), color-mix(in srgb, var(--accent-tint) 60%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
}
.hc-today-label { margin: 0 0 10px; font-weight: 800; color: var(--primary-dark); font-size: .95rem; }
:root[data-theme="dark"] .hc-today-label { color: var(--primary); }
.hc-today-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .hc-today-grid { grid-template-columns: 1fr 1fr; } }
.hc-today-card {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--radius-s);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.hc-today-hijri { border-inline-start: 4px solid var(--primary); }
.hc-today-greg { border-inline-start: 4px solid var(--accent); }
.hc-today-kind { font-size: .75rem; font-weight: 800; color: var(--ink-soft); }
.hc-today-main { font-size: clamp(1.2rem, 4.5vw, 1.55rem); font-weight: 800; line-height: 1.4; }
.hc-today-sub { font-size: .85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; align-self: flex-start; }
.hc-today-day { margin: 12px 0 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.8; }
.hc-today-day strong { color: var(--ink); }
.hc-settings .field { margin-bottom: 0; }

.hc-cal, .hc-conv { border: 1px solid var(--border); border-radius: var(--radius-m); padding: 16px; background: var(--surface); }
.hc-cal-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hc-cal-modes .pill { cursor: pointer; font-family: inherit; }
.hc-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hc-cal-title { text-align: center; min-width: 0; }
.hc-cal-title h2 { margin: 0; font-size: clamp(1.1rem, 4vw, 1.4rem); font-weight: 800; }
.hc-cal-title p { margin: 2px 0 0; font-size: .82rem; color: var(--ink-soft); }
.hc-nav {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; font-size: 1.15rem; font-weight: 800;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); font-family: inherit;
}
.hc-nav:hover, .hc-nav:focus-visible { border-color: var(--primary); color: var(--primary); outline: none; }
.hc-cal-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.hc-legend { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-soft); }
.hc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.hc-dot-today { background: var(--primary); }
.hc-dot-fri { background: color-mix(in srgb, var(--accent) 35%, var(--surface)); margin-inline-start: 8px; }

.hc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.hc-wd { text-align: center; font-size: .74rem; font-weight: 800; color: var(--ink-soft); padding: 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-wd.is-fri { color: var(--accent); }
.hc-blank { min-height: 58px; }
.hc-day {
  min-height: 58px; padding: 6px 2px; border-radius: 12px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--surface-2); border: 1px solid transparent; color: var(--ink);
  transition: border-color .12s ease, transform .12s ease;
}
.hc-day:hover, .hc-day:focus-visible { border-color: var(--primary); outline: none; }
.hc-day:active { transform: scale(.96); }
.hc-big { font-size: 1.12rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hc-small { font-size: .66rem; color: var(--ink-soft); line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-day.is-fri { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.hc-day.is-sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.hc-day.is-today { background: var(--primary); color: #fff; }
.hc-day.is-today .hc-small { color: rgba(255, 255, 255, .85); }
.hc-grid-hint { margin: 10px 0 0; }
.hc-conv-title { margin: 0 0 12px; font-size: 1.15rem; font-weight: 800; }
.hc-conv .result-box { margin-top: 12px; }
@media (max-width: 480px) {
  .hc-cal, .hc-conv { padding: 12px 10px; }
  .hc-grid { gap: 3px; }
  .hc-day, .hc-blank { min-height: 50px; }
  .hc-big { font-size: .98rem; }
  .hc-small { font-size: .58rem; }
  .hc-wd { font-size: .62rem; }
}
@media print { .hc-nav, .hc-cal-tools .btn, .hc-settings { display: none !important; } }

/* ==========================================================================
   ROYAL THEME — Tools Kingdom (tools-kd.com)
   Deep navy chrome (sidebar, mobile header, hero, footer) + royal-gold accents.
   Kept at the end so it layers on top of the base components above.
   ========================================================================== */

/* ---- Brand / logo: gold crown + Arabic name + "Tools Kingdom" ---- */
.brand { gap: 10px; color: var(--primary-dark); }
.brand .crown {
  font-size: 1.35rem; color: var(--gold);
  filter: drop-shadow(0 2px 6px rgba(212, 175, 55, .45));
  transition: transform .25s ease;
}
.brand:hover .crown { transform: rotate(-10deg) scale(1.08); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-ar { font-size: 1.12rem; font-weight: 800; }
.brand-en {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); unicode-bidi: isolate; text-align: start;
}

/* ---- Sidebar: always deep navy, in light and dark mode ---- */
.sidebar {
  --ink: #E9ECF5;
  --ink-soft: #A3ADC6;
  --surface: #10223F;
  --surface-2: rgba(255, 255, 255, .06);
  --bg: rgba(255, 255, 255, .06);
  --border: rgba(212, 175, 55, .18);
  --primary: var(--gold);
  --primary-dark: var(--gold-light);
  --primary-tint: rgba(212, 175, 55, .14);
  color: var(--ink);
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  border-inline-end: 1px solid rgba(212, 175, 55, .22);
  scrollbar-color: rgba(212, 175, 55, .35) transparent;
}
.sidebar .brand, :root[data-theme="dark"] .sidebar .brand { color: #FFFFFF; }
.sidebar-top { padding-bottom: 14px; border-bottom: 1px solid rgba(212, 175, 55, .22); }
.sidebar .side-link:hover { background: rgba(212, 175, 55, .10); color: var(--gold-light); }
.sidebar .side-link:hover .side-ico { transform: scale(1.1); }
.sidebar .side-ico { transition: transform .15s ease; }
.sidebar .side-link.active {
  background: rgba(212, 175, 55, .16); color: var(--gold-light);
  box-shadow: inset -3px 0 0 var(--gold);
}
.sidebar .side-group-title { color: var(--gold); opacity: .9; }
.sidebar .side-count { color: var(--gold-light); }
.sidebar .search-box input { color: #FFFFFF; }
.sidebar .search-box input::placeholder { color: #8E99B5; }
.sidebar .search-box input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, .18); }
.sidebar .side-bio { background: rgba(255, 255, 255, .04); border-color: rgba(212, 175, 55, .22); }
.sidebar .side-bio h2 { color: var(--gold-light); }
.sidebar .sidebar-close { color: #FFFFFF; }

/* Theme toggle: gold knob */
.theme-toggle .knob { background: var(--gold-grad); }
.sidebar .theme-toggle, .mobile-bar .theme-toggle { background: rgba(255, 255, 255, .08); border-color: rgba(212, 175, 55, .35); }

/* ---- Mobile header bar: navy with gold hairline ---- */
@media (max-width: 899px) {
  .mobile-bar {
    background: color-mix(in srgb, var(--navy-900) 94%, transparent);
    border-bottom: 1px solid rgba(212, 175, 55, .3);
  }
  .mobile-bar .brand, :root[data-theme="dark"] .mobile-bar .brand { color: #FFFFFF; }
  .mobile-bar .menu-btn {
    background: rgba(255, 255, 255, .08); border-color: rgba(212, 175, 55, .35); color: var(--gold);
  }
}

/* ---- Buttons: royal gold ---- */
.btn-primary {
  background: var(--gold-grad); color: var(--navy-900);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--gold-grad); filter: brightness(1.06); box-shadow: var(--shadow-gold);
}
.btn-ghost:hover { background: var(--accent-tint); color: var(--ink); }
.pill.active { background: var(--navy-800); border-color: var(--gold); color: var(--gold-light); }
.pill:hover, .ux-btn:hover:not(:disabled), .ux-btn:focus-visible, .ord-btn:hover, .ord-btn:focus-visible {
  border-color: var(--gold); color: var(--accent);
}
.swap-btn:hover, .cc-swap:hover { background: var(--gold-grad); color: var(--navy-900); }

/* Links & inputs: gold hover / focus */
.crumbs a:hover, .site-footer nav a:hover, a.hero-stat:hover { color: var(--accent); }
a.hero-stat:hover { border-color: var(--gold); }
.field input:focus, .field select:focus, .field textarea:focus, .search-box input:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, .16);
}

/* ---- Homepage hero: navy banner with gold highlight ---- */
.hp-hero {
  background:
    radial-gradient(ellipse at 50% -20%, rgba(212, 175, 55, .22), transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 78%, var(--bg) 100%);
  color: #FFFFFF; padding-bottom: 34px;
}
.hp-hero h1 { color: #FFFFFF; }
.hp-hero .highlight {
  color: var(--gold);
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hp-hero .hp-lead { color: #C3CADB; }
.hp-hero .hero-stat { background: rgba(255, 255, 255, .07); border-color: rgba(212, 175, 55, .35); color: #E9ECF5; }
.hp-hero a.hero-stat:hover { background: rgba(212, 175, 55, .16); color: var(--gold-light); border-color: var(--gold); }

/* ---- Cards: gold hover accents ---- */
.hub-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
@media (hover: hover) {
  .hub-card:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); }
  .hub-card:hover .hub-card-go { color: var(--accent); }
}
.hub-card-go { color: var(--primary); }
.tool-title-row .icon-chip { box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .35); }
.hub-badge { background: var(--accent-tint); border: 1px solid rgba(212, 175, 55, .4); }
.result-box { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }

/* ---- Footer: deep navy with gold accents ---- */
.site-footer {
  background: linear-gradient(180deg, var(--navy-800), var(--navy-950));
  color: #B9C1D6; border-top: 2px solid var(--gold);
}
.site-footer nav a { color: #DDE2EE; }
.site-footer nav a:hover { color: var(--gold-light); }
.site-footer p { margin: 6px 0; }
.site-footer .footer-brand .fa-crown { color: var(--gold); }
.site-footer .copyright { font-size: .8rem; color: #9AA4BE; }
.site-footer .copyright a { color: var(--gold); font-weight: 700; }
.site-footer .copyright a:hover { color: var(--gold-light); text-decoration: underline; }

/* Dark mode: navy chrome a shade deeper */
:root[data-theme="dark"] .sidebar { background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%); }
:root[data-theme="dark"] .hp-hero {
  background:
    radial-gradient(ellipse at 50% -20%, rgba(212, 175, 55, .18), transparent 60%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 78%, var(--bg) 100%);
}

/* ==========================================================================
   SITE THEMES — switched from the admin panel (<portal>/theme)
   <html data-site-theme="royal|light|tech"> + <body class="theme-...">
     royal : default (everything above)
     light : "Clean Light Theme"  — minimalist white / light gray, blue accents
     tech  : "Modern Tech Dark"   — deep black, neon green / cyan accents
   The royal components above read the --navy-* / --gold* tokens, so each theme
   mostly re-maps tokens; the few hard-coded gold glows are re-mapped through
   --theme-line / --theme-soft / --theme-strong / --theme-glow below.
   ========================================================================== */
body { transition: background-color .35s ease, color .35s ease; }
.sidebar, .mobile-bar, .site-footer, .hp-hero, .calculator-card, .hub-card, .btn-primary {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .2s ease;
}

/* ---------------------------- Theme 2: Clean Light ---------------------------- */
:root[data-site-theme="light"] {
  --navy-950: #E5E7EB;
  --navy-900: #FFFFFF;
  --navy-800: #F9FAFB;
  --navy-700: #F3F4F6;
  --gold: #2563EB;
  --gold-light: #3B82F6;
  --gold-deep: #1D4ED8;
  --gold-grad: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #F3F4F6;
  --ink: #111827;
  --ink-soft: #6B7280;
  --primary: #1F2937;
  --primary-dark: #111827;
  --primary-tint: #F1F3F6;
  --accent: #2563EB;
  --accent-tint: #EFF4FF;
  --border: #E5E7EB;
  --cat-general: #374151;
  --shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 6px 18px -12px rgba(17, 24, 39, .14);
  --shadow-lift: 0 16px 34px -18px rgba(17, 24, 39, .28);
  --shadow-gold: 0 8px 20px -10px rgba(37, 99, 235, .45);
  --theme-line: #E5E7EB;
  --theme-soft: #F3F4F6;
  --theme-strong: #EFF4FF;
  --theme-glow: rgba(37, 99, 235, .16);
}
/* Clean Light + the visitor's own night mode (moon toggle): neutral graphite instead of navy */
:root[data-site-theme="light"][data-theme="dark"] {
  --navy-950: #0A0B0E;
  --navy-900: #111317;
  --navy-800: #181B21;
  --navy-700: #22262E;
  --gold: #60A5FA;
  --gold-light: #93C5FD;
  --gold-deep: #3B82F6;
  --gold-grad: linear-gradient(135deg, #93C5FD 0%, #60A5FA 50%, #3B82F6 100%);
  --bg: #0F1115;
  --surface: #16191F;
  --surface-2: #1D2129;
  --ink: #F3F4F6;
  --ink-soft: #9CA3AF;
  --primary: #93C5FD;
  --primary-dark: #60A5FA;
  --primary-tint: #1A2333;
  --accent: #60A5FA;
  --accent-tint: #172033;
  --border: #262B35;
  --cat-general: #93C5FD;
  --theme-line: rgba(96, 165, 250, .22);
  --theme-soft: rgba(96, 165, 250, .10);
  --theme-strong: rgba(96, 165, 250, .16);
  --theme-glow: rgba(96, 165, 250, .22);
}
/* Light chrome: white sidebar / header / footer with dark text (day mode only) */
:root[data-site-theme="light"]:not([data-theme="dark"]) .sidebar {
  --ink: #111827; --ink-soft: #6B7280; --surface: #FFFFFF; --surface-2: #F3F4F6; --bg: #F9FAFB;
  --border: #E5E7EB; --primary: #2563EB; --primary-dark: #1D4ED8; --primary-tint: #EFF4FF;
  background: #FFFFFF; scrollbar-color: #D1D5DB transparent;
}
:root[data-site-theme="light"]:not([data-theme="dark"]) .sidebar .brand,
:root[data-site-theme="light"]:not([data-theme="dark"]) .mobile-bar .brand { color: #111827; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .sidebar .search-box input { color: #111827; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .sidebar .search-box input::placeholder { color: #9CA3AF; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .sidebar .sidebar-close { color: #111827; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .sidebar .side-link:hover { color: #1D4ED8; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .sidebar .side-link.active { color: #1D4ED8; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .sidebar .side-bio { background: #F9FAFB; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .sidebar .side-bio h2 { color: #111827; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .sidebar .theme-toggle,
:root[data-site-theme="light"]:not([data-theme="dark"]) .mobile-bar .theme-toggle { background: #F3F4F6; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .mobile-bar .menu-btn { background: #F3F4F6; color: #111827; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .hp-hero { color: var(--ink); }
:root[data-site-theme="light"]:not([data-theme="dark"]) .hp-hero h1 { color: #111827; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .hp-hero .hp-lead { color: #4B5563; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .hp-hero .hero-stat { background: #FFFFFF; color: #374151; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .hp-hero a.hero-stat:hover { color: #1D4ED8; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .site-footer { color: #6B7280; border-top-width: 1px; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .site-footer nav a { color: #374151; }
:root[data-site-theme="light"]:not([data-theme="dark"]) .site-footer .copyright { color: #9CA3AF; }
:root[data-site-theme="light"] .btn-primary { color: #FFFFFF; }
:root[data-site-theme="light"] .pill.active { background: #111827; border-color: #111827; color: #FFFFFF; }
:root[data-site-theme="light"][data-theme="dark"] .pill.active { background: #1D2129; border-color: var(--gold); color: var(--gold-light); }
:root[data-site-theme="light"] .brand .crown { filter: none; }

/* ---------------------------- Theme 3: Modern Tech Dark ---------------------------- */
:root[data-site-theme="tech"] {
  color-scheme: dark;
  --navy-950: #000000;
  --navy-900: #05070A;
  --navy-800: #0A0E13;
  --navy-700: #111820;
  --gold: #00FF9C;
  --gold-light: #00E5FF;
  --gold-deep: #00C77A;
  --gold-grad: linear-gradient(135deg, #00FF9C 0%, #00E5FF 100%);
  --bg: #05070A;
  --surface: #0D1117;
  --surface-2: #131A22;
  --ink: #E6EDF3;
  --ink-soft: #8B98A9;
  --primary: #00E5FF;
  --primary-dark: #00FF9C;
  --primary-tint: rgba(0, 229, 255, .10);
  --accent: #00FF9C;
  --accent-tint: rgba(0, 255, 156, .10);
  --border: #1C2632;
  --danger: #FF4D6D;
  --success: #00C77A;
  --cat-general: #00E5FF;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .8);
  --shadow-lift: 0 18px 40px -16px rgba(0, 229, 255, .18);
  --shadow-gold: 0 0 18px -4px rgba(0, 255, 156, .6);
  --theme-line: rgba(0, 229, 255, .20);
  --theme-soft: rgba(0, 255, 156, .08);
  --theme-strong: rgba(0, 229, 255, .14);
  --theme-glow: rgba(0, 255, 156, .22);
}
:root[data-site-theme="tech"] [data-theme-toggle] { display: none; }      /* always dark */
:root[data-site-theme="tech"] .btn-primary { color: #001A10; font-weight: 800; }
:root[data-site-theme="tech"] .btn-primary:hover, :root[data-site-theme="tech"] .btn-primary:focus-visible { box-shadow: var(--shadow-gold); }
:root[data-site-theme="tech"] .brand .crown { filter: drop-shadow(0 0 6px rgba(0, 255, 156, .7)); }
:root[data-site-theme="tech"] .hp-hero .highlight { text-shadow: none; }
:root[data-site-theme="tech"] .hp-hero h1 { letter-spacing: .01em; }
:root[data-site-theme="tech"] .calculator-card, :root[data-site-theme="tech"] .hub-card {
  border-color: #1C2632; box-shadow: 0 0 0 1px rgba(0, 229, 255, .04), var(--shadow);
}
@media (hover: hover) {
  :root[data-site-theme="tech"] .hub-card:hover { box-shadow: 0 0 0 1px rgba(0, 255, 156, .35), 0 0 24px -8px rgba(0, 255, 156, .45); }
}
:root[data-site-theme="tech"] .result-box .big-number, :root[data-site-theme="tech"] .result-box b { text-shadow: 0 0 12px rgba(0, 229, 255, .35); }
:root[data-site-theme="tech"] .pill.active { background: #0A0E13; border-color: var(--gold); color: var(--gold); }
:root[data-site-theme="tech"] .site-footer { border-top-color: var(--gold); }
:root[data-site-theme="tech"] ::selection { background: rgba(0, 255, 156, .35); color: #FFFFFF; }

/* ---------- Shared: re-map the royal theme's hard-coded gold glows ---------- */
:root:not([data-site-theme="royal"]) .sidebar { border-inline-end-color: var(--theme-line); --border: var(--theme-line); }
:root:not([data-site-theme="royal"]) .sidebar-top { border-bottom-color: var(--theme-line); }
:root:not([data-site-theme="royal"]) .sidebar .side-link:hover { background: var(--theme-soft); }
:root:not([data-site-theme="royal"]) .sidebar .side-link.active { background: var(--theme-strong); }
:root:not([data-site-theme="royal"]) .sidebar .side-bio { border-color: var(--theme-line); }
:root:not([data-site-theme="royal"]) .sidebar .search-box input:focus,
:root:not([data-site-theme="royal"]) .field input:focus, :root:not([data-site-theme="royal"]) .field select:focus,
:root:not([data-site-theme="royal"]) .field textarea:focus, :root:not([data-site-theme="royal"]) .search-box input:focus {
  box-shadow: 0 0 0 3px var(--theme-glow);
}
:root:not([data-site-theme="royal"]) .sidebar .theme-toggle,
:root:not([data-site-theme="royal"]) .mobile-bar .theme-toggle,
:root:not([data-site-theme="royal"]) .mobile-bar .menu-btn { border-color: var(--theme-line); }
@media (max-width: 899px) {
  :root:not([data-site-theme="royal"]) .mobile-bar {
    background: color-mix(in srgb, var(--navy-900) 94%, transparent); border-bottom-color: var(--theme-line);
  }
}
:root:not([data-site-theme="royal"]) .hp-hero {
  background: radial-gradient(ellipse at 50% -20%, var(--theme-glow), transparent 60%),
              linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 78%, var(--bg) 100%);
}
:root:not([data-site-theme="royal"]) .hp-hero .hero-stat { border-color: var(--theme-line); }
:root:not([data-site-theme="royal"]) .tool-title-row .icon-chip { box-shadow: inset 0 0 0 1px var(--theme-line); }
:root:not([data-site-theme="royal"]) .hub-badge { border-color: var(--theme-line); }
:root[data-site-theme="light"]:not([data-theme="dark"]) .hp-hero {
  background: radial-gradient(ellipse at 50% -30%, rgba(37, 99, 235, .08), transparent 60%),
              linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 70%, var(--bg) 100%);
  border-bottom: 1px solid #E5E7EB;
}

/* ==========================================================================
   Announcement bar (admin: الإعدادات العامة و SEO)
   ========================================================================== */
.announce-bar {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 48px; position: relative; text-align: center;
  font-size: .92rem; font-weight: 600; line-height: 1.6;
  background: #13284A; color: #FFFFFF; border-bottom: 2px solid #D4AF37;
  transition: opacity .25s ease, transform .25s ease;
}
.announce-bar[hidden] { display: none; }
.announce-bar.is-closing { opacity: 0; transform: translateY(-6px); }
.announce-text { margin: 0; }
.announce-text .fa-bullhorn { margin-inline-end: 4px; opacity: .9; }
.announce-bar a { color: #F0D67A; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.announce-close {
  position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: inherit; font-size: .85rem; line-height: 30px; text-align: center;
}
.announce-close:hover { background: rgba(255, 255, 255, .24); }
.announce-success { background: #14532D; border-bottom-color: #22C55E; }
.announce-success a { color: #BBF7D0; }
.announce-warning { background: #FDF3D0; color: #4A3700; border-bottom-color: #D4AF37; }
.announce-warning a { color: #7A4F00; }
.announce-warning .announce-close { background: rgba(0, 0, 0, .07); }
.announce-danger { background: #8E1B1E; border-bottom-color: #F87171; }
.announce-danger a { color: #FECACA; }
:root[data-site-theme="light"] .announce-info { background: #EFF4FF; color: #1E3A8A; border-bottom-color: #BFDBFE; }
:root[data-site-theme="light"] .announce-info a { color: #1D4ED8; }
:root[data-site-theme="light"] .announce-info .announce-close { background: rgba(30, 58, 138, .08); }
:root[data-site-theme="tech"] .announce-info { background: #04151A; color: #00E5FF; border-bottom-color: #00E5FF; }
:root[data-site-theme="tech"] .announce-info a { color: #00FF9C; }
.announce-bar.is-disabled { opacity: .45; }
@media (max-width: 640px) { .announce-bar { padding: 9px 44px 9px 16px; font-size: .85rem; } }

/* ==========================================================================
   Maintenance page (tool switched OFF)
   ========================================================================== */
.maintenance-page { padding: 64px 16px; display: flex; justify-content: center; }
.maintenance-card {
  max-width: 560px; width: 100%; text-align: center; padding: 40px 28px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow);
}
.maintenance-icon { font-size: 3.2rem; margin: 0 0 6px; }
.maintenance-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent); font-size: .82rem; font-weight: 800;
}
.maintenance-card h1 { margin: 14px 0 8px; font-size: clamp(1.3rem, 4vw, 1.75rem); }
.maintenance-msg { color: var(--ink-soft); margin: 0 0 22px; }
.maintenance-actions .btn { display: inline-flex; }

/* ==========================================================================
   Admin dashboard: theme picker, settings, tools management
   ========================================================================== */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.theme-option {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; cursor: pointer;
  border: 2px solid var(--border); border-radius: var(--radius-m); background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.theme-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.theme-option:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.theme-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.theme-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-meta { display: flex; flex-direction: column; gap: 3px; }
.theme-meta b { font-size: .98rem; }
.theme-en { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-align: start; }
.theme-swatches { display: flex; gap: 6px; margin-top: 4px; }
.theme-swatches i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.theme-preview { display: flex; height: 112px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.tp-side { flex: 0 0 28%; }
.tp-main { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.tp-hero { height: 30px; border-radius: 6px; }
.tp-card { height: 16px; border-radius: 5px; }
.tp-btn { width: 44%; height: 14px; border-radius: 99px; margin-top: auto; }
.theme-preview-royal .tp-side { background: linear-gradient(180deg, #0B1A33, #13284A); box-shadow: inset -2px 0 0 #D4AF37; }
.theme-preview-royal .tp-main { background: #F5F6FA; }
.theme-preview-royal .tp-hero { background: linear-gradient(180deg, #0B1A33, #13284A); }
.theme-preview-royal .tp-card { background: #FFFFFF; border: 1px solid #E1E4EE; }
.theme-preview-royal .tp-btn { background: linear-gradient(135deg, #F0D67A, #D4AF37, #A8841A); }
.theme-preview-light .tp-side { background: #FFFFFF; box-shadow: inset -1px 0 0 #E5E7EB; }
.theme-preview-light .tp-main { background: #F4F5F7; }
.theme-preview-light .tp-hero { background: #FFFFFF; border: 1px solid #E5E7EB; }
.theme-preview-light .tp-card { background: #FFFFFF; border: 1px solid #E5E7EB; }
.theme-preview-light .tp-btn { background: #2563EB; }
.theme-preview-tech .tp-side { background: #05070A; box-shadow: inset -1px 0 0 rgba(0, 229, 255, .35); }
.theme-preview-tech .tp-main { background: #0D1117; }
.theme-preview-tech .tp-hero { background: #05070A; box-shadow: inset 0 0 0 1px rgba(0, 255, 156, .35); }
.theme-preview-tech .tp-card { background: #131A22; border: 1px solid #1C2632; }
.theme-preview-tech .tp-btn { background: linear-gradient(135deg, #00FF9C, #00E5FF); box-shadow: 0 0 10px rgba(0, 255, 156, .6); }

.settings-form { display: flex; flex-direction: column; gap: 0; }
.settings-h { margin: 0 0 14px; font-size: 1.08rem; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.settings-switch { margin-bottom: 14px; font-weight: 700; }
.settings-check { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; font-size: .9rem; cursor: pointer; }
.settings-save { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(180deg, transparent, var(--bg) 40%); z-index: 5; }
.code-area { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.6; text-align: left; }
.char-count.over { color: var(--danger); font-weight: 700; }
.serp-preview {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px;
  background: #FFFFFF; border: 1px solid #DADCE0; font-family: Arial, sans-serif; max-width: 640px;
}
.serp-url { font-size: .78rem; color: #202124; text-align: left; }
.serp-title { font-size: 1.15rem; color: #1A0DAB; line-height: 1.4; }
.serp-desc { font-size: .85rem; color: #4D5156; line-height: 1.6; }

.tools-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 12px; }
.tools-filter input, .tools-filter select {
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: .9rem;
}
.tools-filter input { flex: 1 1 220px; }
.tools-table td { vertical-align: middle; }
.tools-table tr.is-off td { opacity: .62; }
.tools-table tr.is-off td:nth-child(3) { opacity: 1; }
.tt-icon { font-size: 1.2rem; }
.tt-actions { white-space: nowrap; }
.tt-actions .btn { padding: 4px 10px; }
.tools-status {
  position: fixed; bottom: 18px; inset-inline-start: 18px; z-index: 90; padding: 10px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lift); font-size: .88rem; font-weight: 700;
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.tools-status.show { opacity: 1; transform: none; }
.tools-status.ok { border-color: var(--success); color: var(--success); }
.tools-status.error { border-color: var(--danger); color: var(--danger); }

/* Built-in usage guide (tool_guides.py) + site information pages footer links */
.article.tool-guide { margin-bottom: 24px; }
.site-footer nav.footer-info { margin-top: 4px; font-size: .82rem; }
/* Tier icons (Font Awesome instead of emoji, see hubs.TIER_FA) */
.hero-stat .fa-solid, .side-group-title .fa-solid, .hp-tier-title .fa-solid { color: var(--gold, #D4AF37); margin-inline-end: 2px; }


/* ==========================================================================
   MORE SITE THEMES (2026-10-06): emerald, ocean, burgundy, violet, desert, onyx
   Same layout as the royal theme (dark chrome + light content, night mode supported);
   each theme re-maps the design tokens for day and for the visitor's night mode.
   ========================================================================== */
/* ---- Emerald & Gold ---- */
:root[data-site-theme="emerald"] {
  --navy-950: #03140F; --navy-900: #052E24; --navy-800: #064E3B; --navy-700: #0B6B52;
  --gold: #D4AF37; --gold-light: #F0D67A; --gold-deep: #A8841A;
  --gold-grad: linear-gradient(135deg, #F0D67A 0%, #D4AF37 45%, #A8841A 100%);
  --bg: #F3F7F5; --surface: #FFFFFF; --surface-2: #E9F1EE;
  --ink: #0F241D; --ink-soft: #4A5E57;
  --primary: #064E3B; --primary-dark: #064E3B; --primary-tint: #E3F0EB;
  --accent: #8A6D12; --accent-tint: #FAF3DC; --border: #DCE7E2;
  --cat-general: #064E3B;
  --shadow-gold: 0 10px 24px -10px rgba(212, 175, 55, .55);
  --theme-line: rgba(212, 175, 55, .24); --theme-soft: rgba(212, 175, 55, .10); --theme-strong: rgba(212, 175, 55, .16); --theme-glow: rgba(212, 175, 55, .18);
}
:root[data-site-theme="emerald"][data-theme="dark"] {
  color-scheme: dark;
  --navy-950: #03140F; --navy-900: #03140F; --navy-800: #052E24; --navy-700: #064E3B;
  --gold: #D4AF37; --gold-light: #F0D67A; --gold-deep: #A8841A;
  --gold-grad: linear-gradient(135deg, #F0D67A 0%, #D4AF37 45%, #A8841A 100%);
  --bg: #06120E; --surface: #0C1D17; --surface-2: #12281F;
  --ink: #E8F2EE; --ink-soft: #9FB5AC;
  --primary: #E0BC4F; --primary-dark: #E0BC4F; --primary-tint: #13261F;
  --accent: #E6C25A; --accent-tint: #2A2414; --border: #1E3A30;
  --cat-general: #E0BC4F;
  --shadow-gold: 0 10px 24px -10px rgba(212, 175, 55, .55);
  --theme-line: rgba(212, 175, 55, .24); --theme-soft: rgba(212, 175, 55, .10); --theme-strong: rgba(212, 175, 55, .16); --theme-glow: rgba(212, 175, 55, .18);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lift: 0 18px 40px -16px rgba(0, 0, 0, .7);
}
:root[data-site-theme="emerald"] .brand .crown { filter: drop-shadow(0 2px 6px rgba(212, 175, 55, .45)); }
:root[data-site-theme="emerald"] .hp-hero { background: radial-gradient(ellipse at 50% -20%, rgba(212, 175, 55, .22), transparent 60%), linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 78%, var(--bg) 100%); }
:root[data-site-theme="emerald"] .site-footer { color: color-mix(in srgb, #FFFFFF 72%, var(--navy-700)); }
.theme-preview-emerald .tp-side { background: linear-gradient(180deg, #052E24, #064E3B); box-shadow: inset -2px 0 0 #D4AF37; }
.theme-preview-emerald .tp-main { background: #F3F7F5; }
.theme-preview-emerald .tp-hero { background: linear-gradient(180deg, #052E24, #064E3B); }
.theme-preview-emerald .tp-card { background: #FFFFFF; border: 1px solid #DCE7E2; }
.theme-preview-emerald .tp-btn { background: linear-gradient(135deg, #F0D67A, #D4AF37, #A8841A); }
/* ---- Ocean Blue ---- */
:root[data-site-theme="ocean"] {
  --navy-950: #031524; --navy-900: #062A43; --navy-800: #0B3D5E; --navy-700: #11507A;
  --gold: #22D3EE; --gold-light: #67E8F9; --gold-deep: #0891B2;
  --gold-grad: linear-gradient(135deg, #67E8F9 0%, #22D3EE 45%, #0891B2 100%);
  --bg: #F2F7FA; --surface: #FFFFFF; --surface-2: #E6EFF5;
  --ink: #0B1E2D; --ink-soft: #4A6072;
  --primary: #0B3D5E; --primary-dark: #0B3D5E; --primary-tint: #E2EEF6;
  --accent: #0E7490; --accent-tint: #E0F7FB; --border: #D8E5EE;
  --cat-general: #0B3D5E;
  --shadow-gold: 0 10px 24px -10px rgba(34, 211, 238, .55);
  --theme-line: rgba(34, 211, 238, .24); --theme-soft: rgba(34, 211, 238, .10); --theme-strong: rgba(34, 211, 238, .16); --theme-glow: rgba(34, 211, 238, .18);
}
:root[data-site-theme="ocean"][data-theme="dark"] {
  color-scheme: dark;
  --navy-950: #031524; --navy-900: #031524; --navy-800: #062A43; --navy-700: #0B3D5E;
  --gold: #22D3EE; --gold-light: #67E8F9; --gold-deep: #0891B2;
  --gold-grad: linear-gradient(135deg, #67E8F9 0%, #22D3EE 45%, #0891B2 100%);
  --bg: #04111C; --surface: #0A1C2B; --surface-2: #10273A;
  --ink: #E6F1F8; --ink-soft: #93AABB;
  --primary: #67E8F9; --primary-dark: #67E8F9; --primary-tint: #0F2A3A;
  --accent: #22D3EE; --accent-tint: #0B2A33; --border: #1A3549;
  --cat-general: #67E8F9;
  --shadow-gold: 0 10px 24px -10px rgba(34, 211, 238, .55);
  --theme-line: rgba(34, 211, 238, .24); --theme-soft: rgba(34, 211, 238, .10); --theme-strong: rgba(34, 211, 238, .16); --theme-glow: rgba(34, 211, 238, .18);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lift: 0 18px 40px -16px rgba(0, 0, 0, .7);
}
:root[data-site-theme="ocean"] .brand .crown { filter: drop-shadow(0 2px 6px rgba(34, 211, 238, .45)); }
:root[data-site-theme="ocean"] .hp-hero { background: radial-gradient(ellipse at 50% -20%, rgba(34, 211, 238, .22), transparent 60%), linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 78%, var(--bg) 100%); }
:root[data-site-theme="ocean"] .site-footer { color: color-mix(in srgb, #FFFFFF 72%, var(--navy-700)); }
.theme-preview-ocean .tp-side { background: linear-gradient(180deg, #062A43, #0B3D5E); box-shadow: inset -2px 0 0 #22D3EE; }
.theme-preview-ocean .tp-main { background: #F2F7FA; }
.theme-preview-ocean .tp-hero { background: linear-gradient(180deg, #062A43, #0B3D5E); }
.theme-preview-ocean .tp-card { background: #FFFFFF; border: 1px solid #D8E5EE; }
.theme-preview-ocean .tp-btn { background: linear-gradient(135deg, #67E8F9, #22D3EE, #0891B2); }
/* ---- Burgundy & Amber ---- */
:root[data-site-theme="burgundy"] {
  --navy-950: #1A050C; --navy-900: #2E0A16; --navy-800: #4A1024; --navy-700: #631A33;
  --gold: #E0A43A; --gold-light: #F2C879; --gold-deep: #B07A1E;
  --gold-grad: linear-gradient(135deg, #F2C879 0%, #E0A43A 45%, #B07A1E 100%);
  --bg: #FAF5F5; --surface: #FFFFFF; --surface-2: #F3E9EA;
  --ink: #2A1218; --ink-soft: #6B4E55;
  --primary: #4A1024; --primary-dark: #4A1024; --primary-tint: #F5E6E9;
  --accent: #9A6512; --accent-tint: #FBF1DF; --border: #EBDDE0;
  --cat-general: #4A1024;
  --shadow-gold: 0 10px 24px -10px rgba(224, 164, 58, .55);
  --theme-line: rgba(224, 164, 58, .24); --theme-soft: rgba(224, 164, 58, .10); --theme-strong: rgba(224, 164, 58, .16); --theme-glow: rgba(224, 164, 58, .18);
}
:root[data-site-theme="burgundy"][data-theme="dark"] {
  color-scheme: dark;
  --navy-950: #1A050C; --navy-900: #1A050C; --navy-800: #2E0A16; --navy-700: #4A1024;
  --gold: #E0A43A; --gold-light: #F2C879; --gold-deep: #B07A1E;
  --gold-grad: linear-gradient(135deg, #F2C879 0%, #E0A43A 45%, #B07A1E 100%);
  --bg: #12060A; --surface: #1E0C12; --surface-2: #2A121A;
  --ink: #F6ECEE; --ink-soft: #BFA3AA;
  --primary: #F2C879; --primary-dark: #F2C879; --primary-tint: #2A1219;
  --accent: #E0A43A; --accent-tint: #2E2112; --border: #3A1C25;
  --cat-general: #F2C879;
  --shadow-gold: 0 10px 24px -10px rgba(224, 164, 58, .55);
  --theme-line: rgba(224, 164, 58, .24); --theme-soft: rgba(224, 164, 58, .10); --theme-strong: rgba(224, 164, 58, .16); --theme-glow: rgba(224, 164, 58, .18);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lift: 0 18px 40px -16px rgba(0, 0, 0, .7);
}
:root[data-site-theme="burgundy"] .brand .crown { filter: drop-shadow(0 2px 6px rgba(224, 164, 58, .45)); }
:root[data-site-theme="burgundy"] .hp-hero { background: radial-gradient(ellipse at 50% -20%, rgba(224, 164, 58, .22), transparent 60%), linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 78%, var(--bg) 100%); }
:root[data-site-theme="burgundy"] .site-footer { color: color-mix(in srgb, #FFFFFF 72%, var(--navy-700)); }
.theme-preview-burgundy .tp-side { background: linear-gradient(180deg, #2E0A16, #4A1024); box-shadow: inset -2px 0 0 #E0A43A; }
.theme-preview-burgundy .tp-main { background: #FAF5F5; }
.theme-preview-burgundy .tp-hero { background: linear-gradient(180deg, #2E0A16, #4A1024); }
.theme-preview-burgundy .tp-card { background: #FFFFFF; border: 1px solid #EBDDE0; }
.theme-preview-burgundy .tp-btn { background: linear-gradient(135deg, #F2C879, #E0A43A, #B07A1E); }
/* ---- Royal Violet ---- */
:root[data-site-theme="violet"] {
  --navy-950: #0E0820; --navy-900: #1A1036; --navy-800: #2A1A52; --navy-700: #3B256E;
  --gold: #C4A1FF; --gold-light: #DDC8FF; --gold-deep: #9B6BF0;
  --gold-grad: linear-gradient(135deg, #DDC8FF 0%, #C4A1FF 45%, #9B6BF0 100%);
  --bg: #F6F4FB; --surface: #FFFFFF; --surface-2: #ECE8F7;
  --ink: #1B1530; --ink-soft: #5B5372;
  --primary: #2A1A52; --primary-dark: #2A1A52; --primary-tint: #ECE6FA;
  --accent: #6D3FD1; --accent-tint: #F0E9FF; --border: #E2DCF0;
  --cat-general: #2A1A52;
  --shadow-gold: 0 10px 24px -10px rgba(196, 161, 255, .55);
  --theme-line: rgba(196, 161, 255, .24); --theme-soft: rgba(196, 161, 255, .10); --theme-strong: rgba(196, 161, 255, .16); --theme-glow: rgba(196, 161, 255, .18);
}
:root[data-site-theme="violet"][data-theme="dark"] {
  color-scheme: dark;
  --navy-950: #0E0820; --navy-900: #0E0820; --navy-800: #1A1036; --navy-700: #2A1A52;
  --gold: #C4A1FF; --gold-light: #DDC8FF; --gold-deep: #9B6BF0;
  --gold-grad: linear-gradient(135deg, #DDC8FF 0%, #C4A1FF 45%, #9B6BF0 100%);
  --bg: #0B0717; --surface: #150F27; --surface-2: #1D1535;
  --ink: #EFEAFB; --ink-soft: #A79FC0;
  --primary: #DDC8FF; --primary-dark: #DDC8FF; --primary-tint: #1F1638;
  --accent: #C4A1FF; --accent-tint: #251A40; --border: #2C2248;
  --cat-general: #DDC8FF;
  --shadow-gold: 0 10px 24px -10px rgba(196, 161, 255, .55);
  --theme-line: rgba(196, 161, 255, .24); --theme-soft: rgba(196, 161, 255, .10); --theme-strong: rgba(196, 161, 255, .16); --theme-glow: rgba(196, 161, 255, .18);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lift: 0 18px 40px -16px rgba(0, 0, 0, .7);
}
:root[data-site-theme="violet"] .brand .crown { filter: drop-shadow(0 2px 6px rgba(196, 161, 255, .45)); }
:root[data-site-theme="violet"] .hp-hero { background: radial-gradient(ellipse at 50% -20%, rgba(196, 161, 255, .22), transparent 60%), linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 78%, var(--bg) 100%); }
:root[data-site-theme="violet"] .site-footer { color: color-mix(in srgb, #FFFFFF 72%, var(--navy-700)); }
.theme-preview-violet .tp-side { background: linear-gradient(180deg, #1A1036, #2A1A52); box-shadow: inset -2px 0 0 #C4A1FF; }
.theme-preview-violet .tp-main { background: #F6F4FB; }
.theme-preview-violet .tp-hero { background: linear-gradient(180deg, #1A1036, #2A1A52); }
.theme-preview-violet .tp-card { background: #FFFFFF; border: 1px solid #E2DCF0; }
.theme-preview-violet .tp-btn { background: linear-gradient(135deg, #DDC8FF, #C4A1FF, #9B6BF0); }
/* ---- Desert Sand ---- */
:root[data-site-theme="desert"] {
  --navy-950: #1C130A; --navy-900: #2E2012; --navy-800: #47321C; --navy-700: #5E4427;
  --gold: #E2A55B; --gold-light: #F3CB94; --gold-deep: #B87A33;
  --gold-grad: linear-gradient(135deg, #F3CB94 0%, #E2A55B 45%, #B87A33 100%);
  --bg: #FAF6EF; --surface: #FFFDF9; --surface-2: #F2EADC;
  --ink: #2B1F12; --ink-soft: #6E5C46;
  --primary: #47321C; --primary-dark: #47321C; --primary-tint: #F3EAD9;
  --accent: #9A5F17; --accent-tint: #FBEEDB; --border: #E8DCC7;
  --cat-general: #47321C;
  --shadow-gold: 0 10px 24px -10px rgba(226, 165, 91, .55);
  --theme-line: rgba(226, 165, 91, .24); --theme-soft: rgba(226, 165, 91, .10); --theme-strong: rgba(226, 165, 91, .16); --theme-glow: rgba(226, 165, 91, .18);
}
:root[data-site-theme="desert"][data-theme="dark"] {
  color-scheme: dark;
  --navy-950: #1C130A; --navy-900: #1C130A; --navy-800: #2E2012; --navy-700: #47321C;
  --gold: #E2A55B; --gold-light: #F3CB94; --gold-deep: #B87A33;
  --gold-grad: linear-gradient(135deg, #F3CB94 0%, #E2A55B 45%, #B87A33 100%);
  --bg: #120C06; --surface: #1D150D; --surface-2: #271D13;
  --ink: #F5EDE1; --ink-soft: #BBA88E;
  --primary: #F3CB94; --primary-dark: #F3CB94; --primary-tint: #2A1F14;
  --accent: #E2A55B; --accent-tint: #2E2214; --border: #3A2C1D;
  --cat-general: #F3CB94;
  --shadow-gold: 0 10px 24px -10px rgba(226, 165, 91, .55);
  --theme-line: rgba(226, 165, 91, .24); --theme-soft: rgba(226, 165, 91, .10); --theme-strong: rgba(226, 165, 91, .16); --theme-glow: rgba(226, 165, 91, .18);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lift: 0 18px 40px -16px rgba(0, 0, 0, .7);
}
:root[data-site-theme="desert"] .brand .crown { filter: drop-shadow(0 2px 6px rgba(226, 165, 91, .45)); }
:root[data-site-theme="desert"] .hp-hero { background: radial-gradient(ellipse at 50% -20%, rgba(226, 165, 91, .22), transparent 60%), linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 78%, var(--bg) 100%); }
:root[data-site-theme="desert"] .site-footer { color: color-mix(in srgb, #FFFFFF 72%, var(--navy-700)); }
.theme-preview-desert .tp-side { background: linear-gradient(180deg, #2E2012, #47321C); box-shadow: inset -2px 0 0 #E2A55B; }
.theme-preview-desert .tp-main { background: #FAF6EF; }
.theme-preview-desert .tp-hero { background: linear-gradient(180deg, #2E2012, #47321C); }
.theme-preview-desert .tp-card { background: #FFFDF9; border: 1px solid #E8DCC7; }
.theme-preview-desert .tp-btn { background: linear-gradient(135deg, #F3CB94, #E2A55B, #B87A33); }
/* ---- Onyx & Gold ---- */
:root[data-site-theme="onyx"] {
  --navy-950: #000000; --navy-900: #0B0B0C; --navy-800: #161618; --navy-700: #232326;
  --gold: #D4AF37; --gold-light: #F0D67A; --gold-deep: #A8841A;
  --gold-grad: linear-gradient(135deg, #F0D67A 0%, #D4AF37 45%, #A8841A 100%);
  --bg: #F6F6F4; --surface: #FFFFFF; --surface-2: #ECECE8;
  --ink: #141414; --ink-soft: #5A5A57;
  --primary: #161618; --primary-dark: #161618; --primary-tint: #EDEDEA;
  --accent: #8F7216; --accent-tint: #F8F1DA; --border: #E2E2DD;
  --cat-general: #161618;
  --shadow-gold: 0 10px 24px -10px rgba(212, 175, 55, .55);
  --theme-line: rgba(212, 175, 55, .24); --theme-soft: rgba(212, 175, 55, .10); --theme-strong: rgba(212, 175, 55, .16); --theme-glow: rgba(212, 175, 55, .18);
}
:root[data-site-theme="onyx"][data-theme="dark"] {
  color-scheme: dark;
  --navy-950: #000000; --navy-900: #000000; --navy-800: #0B0B0C; --navy-700: #161618;
  --gold: #D4AF37; --gold-light: #F0D67A; --gold-deep: #A8841A;
  --gold-grad: linear-gradient(135deg, #F0D67A 0%, #D4AF37 45%, #A8841A 100%);
  --bg: #08080A; --surface: #111113; --surface-2: #18181B;
  --ink: #F2F2F0; --ink-soft: #A3A3A0;
  --primary: #E6C25A; --primary-dark: #E6C25A; --primary-tint: #1C1C1F;
  --accent: #E6C25A; --accent-tint: #262113; --border: #26262A;
  --cat-general: #E6C25A;
  --shadow-gold: 0 10px 24px -10px rgba(212, 175, 55, .55);
  --theme-line: rgba(212, 175, 55, .24); --theme-soft: rgba(212, 175, 55, .10); --theme-strong: rgba(212, 175, 55, .16); --theme-glow: rgba(212, 175, 55, .18);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lift: 0 18px 40px -16px rgba(0, 0, 0, .7);
}
:root[data-site-theme="onyx"] .brand .crown { filter: drop-shadow(0 2px 6px rgba(212, 175, 55, .45)); }
:root[data-site-theme="onyx"] .hp-hero { background: radial-gradient(ellipse at 50% -20%, rgba(212, 175, 55, .22), transparent 60%), linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 78%, var(--bg) 100%); }
:root[data-site-theme="onyx"] .site-footer { color: color-mix(in srgb, #FFFFFF 72%, var(--navy-700)); }
.theme-preview-onyx .tp-side { background: linear-gradient(180deg, #0B0B0C, #161618); box-shadow: inset -2px 0 0 #D4AF37; }
.theme-preview-onyx .tp-main { background: #F6F6F4; }
.theme-preview-onyx .tp-hero { background: linear-gradient(180deg, #0B0B0C, #161618); }
.theme-preview-onyx .tp-card { background: #FFFFFF; border: 1px solid #E2E2DD; }
.theme-preview-onyx .tp-btn { background: linear-gradient(135deg, #F0D67A, #D4AF37, #A8841A); }


/* ==========================================================================
   Day / night toggle: sun + moon. Every color comes from the active theme's tokens
   (--gold* = theme accent, --navy-* = theme chrome), so it matches all themes.
   Day: accent knob with a sun, faint moon on the other side of the track.
   Night: the knob slides over and turns into a moon on the theme's dark chrome.
   ========================================================================== */
.theme-toggle {
  --tt-knob: var(--gold-grad);
  --tt-knob-ink: var(--navy-950);
  --tt-knob-night: var(--navy-800);
  --tt-moon-ink: var(--gold-light);
  --tt-sun: var(--gold);
  --tt-moon: rgba(255, 255, 255, .72);
  width: 58px; height: 30px; border-radius: 999px;
}
.theme-toggle .tt-track {
  position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 1;
  pointer-events: none; opacity: .6; transition: opacity .2s ease;
}
.theme-toggle .tt-sun { right: 8px; color: var(--tt-sun); }
.theme-toggle .tt-moon { left: 8px; color: var(--tt-moon); }
.theme-toggle .knob {
  top: 2px; right: 2px; width: 24px; height: 24px; display: grid; place-items: center;
  background: var(--tt-knob); box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  transition: transform .25s ease, background .25s ease;
}
.theme-toggle .knob i { grid-area: 1 / 1; font-size: 12px; line-height: 1; transition: opacity .2s ease, transform .25s ease; }
.theme-toggle .knob-sun { color: var(--tt-knob-ink); opacity: 1; }
.theme-toggle .knob-moon { color: var(--tt-moon-ink); opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle .knob {
  transform: translateX(-28px); background: var(--tt-knob-night);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent), 0 2px 6px rgba(0, 0, 0, .4);
}
:root[data-theme="dark"] .theme-toggle .knob-sun { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle .knob-moon { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle .tt-moon { opacity: 0; }
:root:not([data-theme="dark"]) .theme-toggle .tt-sun { opacity: 0; }
.sidebar .theme-toggle, .mobile-bar .theme-toggle { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
/* Clean Light: white header/sidebar by day -> grey moon, white sun on the blue knob */
:root[data-site-theme="light"]:not([data-theme="dark"]) .theme-toggle { --tt-moon: #6B7280; --tt-knob-ink: #FFFFFF; }
.theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle .knob, .theme-toggle .knob i, .theme-toggle .tt-track { transition: none; }
}

/* ---------- Admin analytics: "online now" (2026-10-07) ---------- */
.live-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #22C55E;
  margin-inline-end: 8px; vertical-align: middle; box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); animation: live-pulse 1.8s infinite; }
.stat-live { border-color: rgba(34, 197, 94, .45); }
.live-box .admin-table a { color: inherit; font-weight: 600; text-decoration: none; }
.live-box .admin-table a:hover { color: var(--gold, #C9A227); }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ---------- Admin "معاينة قبل النشر" banner (2026-10-07) ---------- */
.preview-banner { position: sticky; top: 0; z-index: 1000; padding: 10px 16px; text-align: center; font-size: .9rem;
  background: var(--gold, #C9A227); color: #13284A; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }

/* ---------- Article status: مسودة / خاص بالأدمن / منشور (2026-10-07) ---------- */
.badge.private { background: color-mix(in srgb, var(--gold, #C9A227) 18%, var(--surface)); color: var(--ink); }
.badge.sched { background: var(--accent-tint, #EEF2FA); color: var(--ink); }
.vis-chip { border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); border-radius: 999px;
  padding: 2px 9px; font-size: .72rem; cursor: pointer; white-space: nowrap; }
.vis-chip:hover { border-color: var(--gold, #C9A227); color: var(--ink); }
.vis-field { margin-top: 10px; }
.vis-label { display: block; font-weight: 700; margin-bottom: 6px; }
.vis-options { display: flex; gap: 10px; flex-wrap: wrap; }
.vis-option { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-m, 10px); cursor: pointer; background: var(--surface); }
.vis-option:has(input:checked) { border-color: var(--gold, #C9A227); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold, #C9A227) 25%, transparent); }
.admin-private-note { margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; font-size: .85rem;
  background: color-mix(in srgb, var(--gold, #C9A227) 14%, var(--surface)); }

/* ---------- Admin: favicon picker (2026-10-07) ---------- */
.favicon-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.favicon-option { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-m, 10px); background: var(--surface); text-align: center; }
.favicon-option input { position: absolute; opacity: 0; pointer-events: none; }
.favicon-option:has(input:checked) { border-color: var(--gold, #C9A227); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold, #C9A227) 30%, transparent); }
.favicon-art { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.favicon-tab { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px 8px 0 0; background: #DEE1E6; color: #202124; font-size: .75rem; }
.favicon-option b { font-size: .85rem; }
.flag { font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 1.1em; }
.flag-img { width: 24px; height: 18px; vertical-align: -3px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); object-fit: cover; }

/* ---------------- Finance calculators: mortgage + early retirement ---------------- */
.mg-table-title { font-size: 1.05rem; margin: 20px 0 10px; }
.fin-table td, .fin-table th { padding: 8px 10px; }
.fin-table tr.is-goal td { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); font-weight: 700; }
#mgTableWrap .table-wrap, #erTableWrap .table-wrap { max-height: 420px; overflow-y: auto; }
.field[hidden], #calculatorRoot [hidden] { display: none !important; }
.gc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; }
#gcPasteBox textarea { width: 100%; }

/* ---------------- Required / optional input markers (ux.js markFields) ---------------- */
.req-mark { color: #d93636; font-weight: 800; margin-inline-start: 2px; }
:root[data-theme="dark"] .req-mark { color: #ff7a7a; }
.opt-mark {
  display: inline-block; font-size: .72rem; font-weight: 600; line-height: 1.5;
  padding: 0 8px; margin-inline-start: 4px; border-radius: 999px; vertical-align: middle;
  color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--border);
}
.req-legend { font-size: .8rem; color: var(--ink-soft); margin: 0 0 12px; }

/* ---------------- "جميع أدوات الموقع" — classic, calm index (/all-tools) ---------------- */
.at-page { max-width: 1100px; }
.at-hero { padding: 8px 0 18px; border-bottom: 1px solid var(--border); margin-bottom: 26px; }
.at-hero h1 { font-size: 1.7rem; margin: 6px 0 8px; }
.at-hero p { color: var(--ink-soft); margin: 0 0 16px; max-width: 720px; line-height: 1.9; }
.at-filter { position: relative; max-width: 520px; }
.at-filter i { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); }
.at-filter input {
  width: 100%; padding: 11px 42px 11px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font: inherit;
}
.at-filter input:focus { outline: none; border-color: var(--gold, var(--primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold, var(--primary)) 18%, transparent); }
.at-jump { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; font-size: .85rem; }
.at-jump a { color: var(--ink-soft); text-decoration: none; }
.at-jump a:hover { color: var(--primary); text-decoration: underline; }
.at-tier { margin-bottom: 30px; }
.at-tier[hidden], .at-section[hidden], .at-list li[hidden] { display: none; }
.at-tier-title { font-size: 1.05rem; color: var(--ink-soft); font-weight: 700; letter-spacing: .2px; margin: 0 0 14px; }
.at-tier-title i { color: var(--gold, var(--primary)); }
.at-section { padding: 18px 0 20px; border-top: 1px dashed var(--border); scroll-margin-top: 80px; }
.at-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.at-section-head h3 { margin: 0; font-size: 1.15rem; }
.at-section-head h3 a { color: var(--ink); text-decoration: none; }
.at-section-head h3 a:hover { color: var(--primary); }
.at-open { font-size: .82rem; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.at-open:hover { color: var(--primary); }
.at-desc { color: var(--ink-soft); font-size: .88rem; margin: 6px 0 12px; line-height: 1.8; }
.at-list { list-style: none; margin: 0; padding: 0; columns: 3 240px; column-gap: 28px; }
.at-list li { break-inside: avoid; }
.at-list a {
  display: flex; align-items: center; gap: 10px; padding: 7px 4px; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: .95rem;
}
.at-list a:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
.at-list .at-ico { width: 1.5em; text-align: center; flex: none; }
.at-list .at-more a { color: var(--ink-soft); font-style: normal; }
.at-empty { text-align: center; color: var(--ink-soft); padding: 30px 0; }
.at-empty[hidden] { display: none; }
@media (max-width: 640px) { .at-hero h1 { font-size: 1.4rem; } .at-list { columns: 1; } }

/* Homepage hero: "عرض جميع أدوات الموقع" button */
.hp-hero a.hero-stat-all { background: rgba(212, 175, 55, .18); border-color: var(--gold); color: var(--gold-light, #F3D67A); font-weight: 700; }
.hp-hero a.hero-stat-all:hover { background: rgba(212, 175, 55, .3); }

/* Generated unit guide (unit_content.py) */
.unit-guide ol { padding-inline-start: 22px; color: var(--ink-soft); }
.unit-guide .formula-line { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-m, 10px); padding: 10px 14px; }
.unit-guide .table-wrap { margin: 10px 0 18px; }
.unit-guide h4 { font-size: 1rem; margin: 16px 0 4px; color: var(--ink); }
.unit-guide h4::before { content: "؟ "; color: var(--accent); font-weight: 800; }
.unit-guide .refs { font-size: .88rem; }
.unit-guide .refs a { font-weight: 600; word-break: break-word; }

/* ---------------- Tawjihi / university GPA tables ---------------- */
.tw-table th.tw-col-max { width: 84px; }
.tw-nodel th:last-child, .tw-nodel td:last-child { width: 84px; }
.tw-table .tw-max, .gpa-table .tw-max { max-width: 84px; }
@media (max-width: 600px) {
  .tw-table th.tw-col-max, .tw-nodel th:last-child, .tw-nodel td:last-child { width: 64px; }
  .tw-table .tw-max { max-width: 64px; }
}
/* Very long results (huge numbers) wrap instead of widening the page */
.result-box .big-number, .result-box .result-line span { overflow-wrap: anywhere; }

/* ==========================================================================
   Admin "✏️ تعديل" floating buttons (_admin_edit_fab.html) — admin session only.
   ========================================================================== */
.tk-edit-fab {
  position: fixed; inset-inline-end: 18px; bottom: calc(18px + var(--tk-pbar-h, 0px)); z-index: 1001;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.tk-edit-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 99px;
  background: #1d2327; color: #f0f0f1; font-weight: 800; font-size: .9rem; text-decoration: none;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .12);
}
.tk-edit-btn.is-primary { background: var(--gold-grad, var(--primary)); color: var(--navy-900, #fff); padding: 12px 20px; font-size: .98rem; }
.tk-edit-btn:hover, .tk-edit-btn:focus-visible { filter: brightness(1.08); color: inherit; outline: 2px solid var(--gold, var(--primary)); outline-offset: 2px; }
.tk-edit-btn:not(.is-primary):hover { color: #fff; }
@media (max-width: 600px) {
  .tk-edit-fab { inset-inline-end: 12px; bottom: calc(12px + var(--tk-pbar-h, 0px)); }
  .tk-edit-btn { padding: 8px 13px; font-size: .82rem; }
  .tk-edit-btn.is-primary { padding: 10px 16px; font-size: .9rem; }
}
@media print { .tk-edit-fab { display: none; } }

/* ==========================================================================
   Cookie consent bar (consent.js) — non-blocking, bottom of the page, RTL.
   Neutral class names (no "cookie" / "ad-") so ad / annoyance blockers don't hide it.
   ========================================================================== */
body.has-pbar { padding-bottom: calc(var(--tk-pbar-h, 0px) + 12px); }
.tk-pbar {
  position: fixed; bottom: 12px; inset-inline: 12px; z-index: 1000; max-width: 980px; margin-inline: auto;
  display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 16px;
  background: var(--surface, #fff); color: var(--ink, #141B2D);
  border: 1px solid color-mix(in srgb, var(--gold, #D4AF37) 45%, var(--border, #ddd));
  box-shadow: 0 18px 40px -18px rgba(7, 15, 31, .55);
}
.tk-pbar[hidden] { display: none; }
@media (min-width: 900px) {   /* desktop: keep clear of the fixed sidebar (right side in RTL) */
  .tk-pbar { inset-inline-start: calc(var(--sidebar-w, 288px) + 12px); }
}
.tk-pbar-text { flex: 1 1 420px; margin: 0; font-size: .9rem; line-height: 1.8; }
.tk-pbar-text a { color: var(--primary-dark, var(--primary)); font-weight: 700; text-decoration: underline; }
.tk-pbar-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.tk-pbar-actions .btn { min-width: 112px; justify-content: center; }
.tk-pbar-reject {
  background: transparent; color: var(--ink, #141B2D); border: 1.5px solid var(--ink-soft, #5a6275); font-weight: 800;
}
.tk-pbar-reject:hover, .tk-pbar-reject:focus-visible { background: var(--ink, #141B2D); color: var(--surface, #fff); }
@media (max-width: 600px) {
  .tk-pbar { inset-inline: 8px; bottom: 8px; padding: 12px 14px; }
  .tk-pbar-text { flex-basis: 100%; font-size: .84rem; }
  .tk-pbar-actions { width: 100%; }
  .tk-pbar-actions .btn { flex: 1 1 0; min-width: 0; }
}
@media print { .tk-pbar { display: none !important; } }

/* ==========================================================================
   Calculator spacing (2026-10-26): tighter, consistent rhythm inside every calculator.
   One scale for all tools: 8 / 12 / 16 / 20 px. Layout presets in layouts.css still apply.
   ========================================================================== */
:root { --calc-pad: 20px; --calc-gap: 12px; }
.tool-page-header { padding: 22px 0 6px; padding-inline: 24px; }   /* keep the container's side padding */
.tool-page-header .crumbs { margin-bottom: 10px; }
.tool-title-row { gap: 12px; margin-bottom: 4px; }
.tool-title-row .icon-chip { width: 48px; height: 48px; border-radius: 14px; font-size: 1.45rem; }
.tool-page-header .desc { margin: 0 0 12px; line-height: 1.8; }

.calculator-card { padding: var(--calc-pad); margin-bottom: 20px; }
.calculator-card > :first-child { margin-top: 0; }
.calculator-card > :last-child { margin-bottom: 0; }
.calculator-card .field { margin-bottom: var(--calc-gap); }
.calculator-card .field label { margin-bottom: 5px; line-height: 1.5; }
.calculator-card .field input[type="text"], .calculator-card .field input[type="number"],
.calculator-card .field input[type="password"], .calculator-card .field input[type="date"],
.calculator-card .field input[type="search"], .calculator-card .field select {
  min-height: 44px; padding: 8px 12px; line-height: 1.5;
}
.calculator-card .field textarea { padding: 10px 12px; }
.calculator-card .field-row { gap: var(--calc-gap); }
.calculator-card .field-row > .field { margin-bottom: 0; }
.calculator-card .field-row { margin-bottom: var(--calc-gap); }
.calculator-card .field .hint, .calculator-card .hint { margin-top: 4px; margin-bottom: 0; line-height: 1.7; }
.calculator-card > .hint, .calculator-card > p.hint { margin-bottom: var(--calc-gap); }
.calculator-card .checkbox-row { margin-bottom: 8px; }
.calculator-card .btn { padding: 10px 20px; }
.calculator-card .btn-sm { padding: 7px 14px; }
.calculator-card .cc-row { gap: 8px; }
.calculator-card .swap-btn, .calculator-card .cc-swap { width: 42px; height: 42px; margin-bottom: var(--calc-gap); }
.calculator-card h2, .calculator-card h3 { margin: 16px 0 8px; line-height: 1.5; }
.calculator-card .mg-table-title { margin: 16px 0 8px; }
.calculator-card .section-h { margin: 16px 0 10px; }
.calculator-card .table-wrap { margin-bottom: var(--calc-gap); }
.calculator-card .data-table th, .calculator-card .data-table td { padding: 8px 12px; }

.result-box { margin-top: 14px; padding: 14px 16px; }
.result-box .big-number { font-size: 1.65rem; line-height: 1.35; margin-bottom: 4px; }
.result-box .result-line { padding: 6px 0; }
.result-box p { margin: 6px 0 0; }
.result-box .hint { margin-top: 8px; }
.error-box { margin-top: 12px; padding: 10px 14px; }
.output-block { margin-top: 12px; padding: 12px; }

.ux-bar { margin: -8px 0 16px; }
.article { padding: 26px 28px; margin-bottom: 36px; }

@media (max-width: 720px) {
  :root { --calc-pad: 14px; --calc-gap: 10px; }
  .tool-page-header { padding: 16px 16px 4px; }
  .tool-title-row .icon-chip { width: 42px; height: 42px; font-size: 1.25rem; border-radius: 12px; }
  .calculator-card { margin-bottom: 16px; }
  .result-box { padding: 12px 14px; }
  .result-box .big-number { font-size: 1.45rem; }
  .article { padding: 18px 16px; }
}

/* Light tool search box (_search_box.html): hub / tool / 404 pages */
.tk-find { max-width: 560px; margin: 0 0 18px; }
.tk-find-title { margin: 0 0 6px; font-size: .88rem; font-weight: 700; color: var(--ink-soft); }
.tk-find-box input { height: 42px; border-radius: 999px; font-size: .9rem; background: var(--surface); box-shadow: none; }
.tk-find-box .search-results { border-radius: 14px; }
.tool-page-header .tk-find { margin: 2px 0 6px; }
.tk-find.is-center { margin-inline: auto; }
.err-card .tk-find { margin: 0 auto 22px; text-align: start; }
@media print { .tk-find { display: none; } }

/* ==========================================================================
   Inline text editing (static/inline-edit.js) — admin session only.
   ========================================================================== */
.tk-edit-btn.is-inline { background: #fff; color: #1d2327; border-color: rgba(0, 0, 0, .15); cursor: pointer; font-family: inherit; }
.tk-edit-btn.is-inline.is-active { background: #16a34a; color: #fff; }
body.tk-ie-on [data-tk-ek], body.tk-ie-on [data-tk-pk], body.tk-ie-on select:has(option[data-tk-ek]) {
  outline: 1.5px dashed color-mix(in srgb, var(--gold, #D4AF37) 75%, transparent); outline-offset: 2px; cursor: text; border-radius: 4px;
}
body.tk-ie-on [data-tk-ek]:hover, body.tk-ie-on [data-tk-pk]:hover { outline-style: solid; background: color-mix(in srgb, var(--gold, #D4AF37) 10%, transparent); }
body.tk-ie-on [data-tk-st~="pub"] { outline-color: #16a34a; }
body.tk-ie-on [data-tk-st~="draft"] { outline: 2px dashed #ea580c; }
body.tk-ie-on .tk-ie-editing { outline: 2px solid #2563eb !important; background: color-mix(in srgb, #2563eb 7%, transparent); }
body.tk-ie-peek [data-tk-ek], body.tk-ie-peek [data-tk-pk], body.tk-ie-peek select { outline: none !important; background: none; }
body.tk-ie-peek .tk-ie-panel, body.tk-ie-peek .tk-ie-bar, body.tk-ie-peek .tk-edit-fab { display: none !important; }
body.tk-ie-on { padding-top: calc(var(--ab-h, 0px) + 54px); }
body.tk-ie-on.tk-ie-rv { padding-top: calc(var(--ab-h, 0px) + 100px); }
body.tk-ie-on.tk-ie-peek { padding-top: var(--ab-h, 0px); }
.tk-ie-bar {
  position: fixed; top: calc(var(--ab-h, 0px) + 6px); inset-inline: 12px; z-index: 1002; margin-inline: auto; max-width: 980px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 12px; border-radius: 14px;
  background: #1d2327; color: #f0f0f1; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); font-size: .84rem;
}
.tk-ie-bar[hidden] { display: none; }
.tk-ie-bar-title { font-weight: 800; margin-inline-end: auto; }
.tk-ie-bar-title small { font-weight: 600; opacity: .75; margin-inline-start: 6px; }
.tk-ie-count { font-size: .76rem; padding: 2px 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.tk-ie-count.has { background: #ea580c; color: #fff; font-weight: 800; }
.tk-ie-b {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(127, 127, 127, .35); background: transparent; color: inherit; font: inherit; font-size: .82rem; font-weight: 700; text-decoration: none;
}
.tk-ie-b:hover:not(:disabled) { border-color: var(--gold, #D4AF37); }
.tk-ie-b:disabled { opacity: .45; cursor: not-allowed; }
.tk-ie-b.is-main { background: #16a34a; border-color: #16a34a; color: #fff; }
.tk-ie-b.is-soft { font-weight: 600; opacity: .9; }
.tk-ie-bar .tk-ie-close { border-color: transparent; }
.tk-ie-panel {
  position: absolute; z-index: 1003; padding: 12px; border-radius: 14px; direction: rtl;
  background: var(--surface, #fff); color: var(--ink, #141B2D); border: 1px solid var(--border, #ddd);
  box-shadow: 0 22px 50px -18px rgba(7, 15, 31, .55);
}
.tk-ie-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; font-size: .9rem; }
.tk-ie-chip { font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--surface-2, #eee); color: var(--ink-soft, #555); }
.tk-ie-chip.pub { background: color-mix(in srgb, #16a34a 15%, transparent); color: #15803d; }
.tk-ie-chip.draft { background: color-mix(in srgb, #ea580c 15%, transparent); color: #c2410c; }
.tk-ie-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.tk-ie-tools button, .tk-ie-link button {
  border: 1px solid var(--border, #ddd); background: var(--surface-2, #f3f3f3); color: inherit; border-radius: 8px;
  padding: 3px 10px; cursor: pointer; font: inherit; font-size: .8rem;
}
.tk-ie-link { display: flex; gap: 6px; margin-bottom: 6px; }
.tk-ie-link[hidden] { display: none; }
.tk-ie-link input { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--border, #ddd); border-radius: 8px; background: var(--bg, #fff); color: inherit; }
.tk-ie-rich, .tk-ie-text {
  display: block; width: 100%; min-height: 44px; max-height: 300px; overflow-y: auto; padding: 8px 10px;
  border: 1.5px solid #2563eb; border-radius: 10px; background: var(--bg, #fff); color: var(--ink, #141B2D);
  font: inherit; font-size: .95rem; line-height: 1.8; resize: vertical; outline: none;
}
.tk-ie-msg { min-height: 1.2em; margin: 6px 0; font-size: .8rem; color: var(--ink-soft, #555); }
.tk-ie-msg.bad { color: var(--danger, #dc2626); font-weight: 700; }
.tk-ie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tk-ie-panel .tk-ie-b { color: var(--ink, #141B2D); }
.tk-ie-panel .tk-ie-b.is-main { color: #fff; }
.tk-ie-sp { flex: 1 1 auto; }
.tk-ie-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tk-ie-opt { border: 1px dashed var(--gold, #D4AF37); background: var(--surface-2, #f5f5f5); color: inherit; border-radius: 8px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: .85rem; }
.tk-ie-opt.is-pub { border-color: #16a34a; border-style: solid; }
.tk-ie-opt.is-draft { border-color: #ea580c; }
.tk-ie-peek-chip {
  position: fixed; bottom: 18px; inset-inline-start: 50%; transform: translateX(50%); z-index: 1004;
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-radius: 99px;
  background: #1d2327; color: #fff; font-weight: 700; font-size: .88rem; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
}
.tk-ie-peek-chip[hidden] { display: none; }
.tk-ie-toast {
  position: fixed; top: calc(var(--ab-h, 0px) + 64px); inset-inline-start: 50%; transform: translateX(50%); z-index: 1005;
  padding: 8px 16px; border-radius: 10px; background: #16a34a; color: #fff; font-weight: 700; font-size: .88rem;
}
.tk-ie-toast.bad { background: var(--danger, #dc2626); }
.tk-ie-toast[hidden] { display: none; }
@media (min-width: 900px) { .tk-ie-bar { inset-inline-start: calc(var(--sidebar-w, 288px) + 12px); } }
@media (max-width: 1280px) { .tk-ie-bar-title small { display: none; } }
@media (max-width: 600px) {
  body.tk-ie-on { padding-top: calc(var(--ab-h, 0px) + 92px); }
  body.tk-ie-on.tk-ie-rv { padding-top: calc(var(--ab-h, 0px) + 170px); }
  .tk-ie-bar-title { flex-basis: 100%; font-size: .78rem; }
  .tk-ie-bar { inset-inline: 6px; padding: 6px 8px; }
  .tk-ie-b { padding: 5px 9px; font-size: .76rem; }
}
@media print { .tk-ie-bar, .tk-ie-panel, .tk-ie-peek-chip, .tk-ie-toast { display: none !important; } }
/* "عُدّل بتاريخ ... الساعة ..." badges (inline-edit.js, edit mode only) */
.tk-ie-at {
  display: inline-flex; flex-wrap: wrap; gap: 4px 8px; margin-inline-start: 8px; vertical-align: middle;
  font-size: .68rem !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: 0; text-transform: none;
  color: #15803d; white-space: normal; font-family: inherit;
}
.tk-ie-at-pub { background: color-mix(in srgb, #16a34a 12%, transparent); padding: 1px 8px; border-radius: 99px; }
.tk-ie-at-draft { background: color-mix(in srgb, #ea580c 14%, transparent); color: #c2410c; padding: 1px 8px; border-radius: 99px; }
input + .tk-ie-at, textarea + .tk-ie-at, select + .tk-ie-at, .tk-ie-at + .tk-ie-at { display: flex; margin: 4px 0 0; color: var(--ink-soft); }
body.tk-ie-peek .tk-ie-at { display: none !important; }
@media print { .tk-ie-at { display: none !important; } }

/* «✅ مراجعة الأدوات» (admin_review.html) */
.rv-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-m); }
.rv-progress { flex: 1 1 100%; height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.rv-progress span { display: block; height: 100%; background: #16a34a; border-radius: 99px; transition: width .3s ease; }
.rv-progress-text { margin: 0; flex: 1 1 auto; font-size: .9rem; }
.rv-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.rv-filters input[type=search] { flex: 1 1 200px; max-width: 320px; }
.rv-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; }
.rv-item { background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--border); border-radius: 12px; }
.rv-item.rv-doing { border-inline-start-color: #2563eb; }
.rv-item.rv-done { border-inline-start-color: #16a34a; }
.rv-item.rv-fix { border-inline-start-color: #dc2626; }
.rv-item summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.rv-item summary::-webkit-details-marker { display: none; }
.rv-ico { font-size: 1.3rem; width: 30px; text-align: center; }
.rv-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.rv-name small { color: var(--ink-soft); font-size: .76rem; }
.rv-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.rv-chip { font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); }
.rv-chip-draft { background: color-mix(in srgb, #ea580c 14%, transparent); color: #c2410c; }
.rv-status { font-size: .76rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: var(--surface-2); white-space: nowrap; }
.rv-doing .rv-status { background: color-mix(in srgb, #2563eb 14%, transparent); color: #1d4ed8; }
.rv-done .rv-status { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.rv-fix .rv-status { background: color-mix(in srgb, #dc2626 14%, transparent); color: #b91c1c; }
.rv-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; padding: 4px 14px 14px; border-top: 1px dashed var(--border); }
.rv-checks { padding-top: 10px; }
.rv-side { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.rv-side label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 700; }
.rv-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-when, .rv-msg { margin: 0; font-size: .78rem; color: var(--ink-soft); min-height: 1em; }
@media (max-width: 720px) { .rv-body { grid-template-columns: 1fr; } .rv-item summary { flex-wrap: wrap; } .rv-meta { flex-basis: 100%; justify-content: flex-start; } }

/* review mode buttons in the inline-edit bar (opened from «مراجعة الأدوات») */
.tk-ie-b.is-review { background: #2563eb; border-color: #2563eb; color: #fff; }