/* FUTURE CHANGES ONLY: Keep each file to a maximum of three thousand five
 * hundred (3500) lines. Split only when needed, separate responsibilities
 * cleanly, and run all applicable verification to confirm that behavior, user
 * experience, integrations, relationships, and tasks remain unchanged or improve. */

/* ============================================================================
   ذهين AI — Web app design system
   Mirrors the Flutter app's dark RTL theme, laid out for desktop + mobile.
   ========================================================================== */

/* Thmanyah — the same family the Flutter app ships, so web matches 1:1. */
@font-face {
  font-family: "Thmanyah";
  src: url("fonts/thmanyah-sans-official-regular.47a4ce3ff9e8.woff2") format("woff2"),
    url("fonts/ThmanyahSans-Regular.756eb81f126c.ttf") format("opentype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ثمانية";
  src: url("fonts/thmanyah-sans-official-regular.47a4ce3ff9e8.woff2") format("woff2"),
    url("fonts/ThmanyahSans-Regular.756eb81f126c.ttf") format("opentype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ثمانية";
  src: url("fonts/thmanyah-sans-official-medium.0fc18262ad87.woff2") format("woff2"),
    url("fonts/ThmanyahSans-Medium.c796e87fb741.ttf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ثمانية";
  src: url("fonts/thmanyah-sans-official-bold.58a3141ec483.woff2") format("woff2"),
    url("fonts/ThmanyahSans-Bold.a0fe9e87f553.ttf") format("opentype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Thmanyah";
  src: url("fonts/thmanyah-sans-official-medium.0fc18262ad87.woff2") format("woff2"),
    url("fonts/ThmanyahSans-Medium.c796e87fb741.ttf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Thmanyah";
  src: url("fonts/thmanyah-sans-official-bold.58a3141ec483.woff2") format("woff2"),
    url("fonts/ThmanyahSans-Bold.a0fe9e87f553.ttf") format("opentype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ThmanyahDisplay";
  src: url("fonts/thmanyah-serif-display-bold.d5c96ea1736a.woff2") format("woff2"),
    url("fonts/ThmanyahSerifDisplay-Bold.269a19949d12.ttf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ThmanyahDisplay";
  src: url("fonts/thmanyah-serif-display-black.c5f7002ed3f7.woff2") format("woff2"),
    url("fonts/ThmanyahSerifDisplay-Black.4d25d342e620.ttf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Font picker for delivered files — each option shows its real typeface.
   Family names mirror text_overlay.py keys (prefixed "Pick"). */
@font-face {
  font-family: "PickReemKufi";
  src: url("fonts/picker/ReemKufi.6f959fa12bdc.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "PickAmiri";
  src: url("fonts/picker/Amiri-Bold.9d358a17fee7.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "PickCairo";
  src: url("fonts/picker/Cairo.0e355a997fd3.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "PickTajawal";
  src: url("fonts/picker/Tajawal-Bold.ef7c3dc2a2b8.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "PickAlmarai";
  src: url("fonts/picker/Almarai-ExtraBold.26765177ab88.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "PickPlayfair";
  src: url("fonts/picker/PlayfairDisplay.038aec929d8d.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "PickMontserrat";
  src: url("fonts/picker/Montserrat.ef2306ad45ba.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "PickOswald";
  src: url("fonts/picker/Oswald.ffe9883ec811.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "PickPoppins";
  src: url("fonts/picker/Poppins-SemiBold.2c63e05091c7.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "PickLora";
  src: url("fonts/picker/Lora.e71368f22122.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* Identity (dark): neutral slate — matched exactly to the Flutter mobile app's
     dark palette (app_colors.dart): bg #121418, card #1B1F24, line #2B323B,
     text #F2F4F7, muted #A7B0BB, light-medium green buttons. One source of truth;
     the whole site inherits from here. */
  --base: #121418;
  --base-2: #0F1115;
  --panel: #161A1F;
  --card: #1B1F24;
  --line: #2B323B;
  --text: #F2F4F7;
  --muted: #A7B0BB;
  --cyan: #49D3FF;
  --mint: #3FF2B8;
  --violet: #A98BFF;
  --rose: #FF5FA2;
  --amber: #FFC857;
  --orange: #FF8A00;
  --success: #34C759;
  --blue: #6C8EFF;

  /* Buttons / active accents: light-medium green only (mirrors Flutter btn). */
  --grad-accent: linear-gradient(90deg, #3FF2B8, #1FCE92);
  --shell-bg:
    radial-gradient(120% 80% at 70% 0%, #181C22 0%, var(--base) 55%, var(--base-2) 100%);
  --sidebar-bg: rgba(22, 26, 31, 0.92);
  --topbar-bg: rgba(18, 20, 24, .85);
  --surface: #20252B;
  --surface-strong: #161A1F;
  --surface-soft: rgba(255, 255, 255, .04);
  --surface-hover: rgba(255, 255, 255, .08);
  --field-bg: #20252B;
  --field-bg-strong: #161A1F;
  --border-soft: rgba(255, 255, 255, .08);
  --border-softer: rgba(255, 255, 255, .06);
  --muted-soft: rgba(167, 176, 187, .70);
  --image-text: #FFFFFF;
  --image-muted: #D7E4DC;
  --accent-shadow: rgba(63, 242, 184, .28);
  --accent-ink: #04130D;
  --sidebar-w: 280px;
  --topbar-h: 62px;
  --bottom-nav-h: 64px;
  --radius: 14px;
  --radius-card: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --radius-field: 14px;
  --content-max: 1080px;
  --col-max: 760px;
  --chat-max: 860px;
  --chat-pad-x: clamp(16px, 3vw, 34px);
  --chat-toolbar-h: 68px;
  --chat-composer-max: 860px;
  /* Soft, brand-tinted elevation — mirrors Flutter's Surface shadow (dark). */
  --shadow-card: 0 10px 24px rgba(0, 0, 0, .30);
  --shadow-card-hover: 0 16px 34px rgba(0, 0, 0, .40);
  --font: "ثمانية", "Thmanyah", "IBM Plex Sans Arabic", -apple-system, "Segoe UI", Tahoma, sans-serif;
}

html[data-theme="light"] {
  /* Identity (light): clean green-tinted whites, dark green-black ink, green
     buttons — the same olive/green identity as dark, just inverted. No blue. */
  --base: #F3FAF5;
  --base-2: #E6F2EA;
  --panel: #FFFFFF;
  --card: #FFFFFF;
  --line: #C8DCCE;
  --text: #0C1A12;
  --muted: #3F5447;
  --cyan: #0278A7;
  --mint: #078262;
  --violet: #6E56CF;
  --rose: #C02662;
  --amber: #A15C04;
  --orange: #B45309;
  --success: #1E9E4A;
  --blue: #3D5BD6;

  --grad-accent: linear-gradient(90deg, #18B583, #0EA372);
  --shell-bg:
    radial-gradient(120% 80% at 72% 0%, #E4FBEE 0%, #F3FAF5 50%, #E9F4EC 100%);
  --sidebar-bg: rgba(255, 255, 255, .88);
  --topbar-bg: rgba(255, 255, 255, .92);
  --surface: rgba(255, 255, 255, .88);
  --surface-strong: #FFFFFF;
  --surface-soft: rgba(12, 26, 18, .045);
  --surface-hover: rgba(12, 26, 18, .075);
  --field-bg: #FFFFFF;
  --field-bg-strong: #F5FBF7;
  --border-soft: rgba(63, 84, 71, .18);
  --border-softer: rgba(63, 84, 71, .12);
  --muted-soft: rgba(63, 84, 71, .82);
  --accent-shadow: rgba(24, 181, 131, .22);
  --accent-ink: #06120C;
  /* Light elevation is soft green-slate, never murky black. */
  --shadow-card: 0 14px 34px rgba(20, 45, 32, .12);
  --shadow-card-hover: 0 18px 40px rgba(20, 45, 32, .18);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--base);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overscroll-behavior-y: none;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 10px;
  border: 2px solid var(--base);
}

::-webkit-scrollbar-track {
  background: transparent;
}

.muted {
  color: var(--muted);
}

.hidden {
  display: none !important;
}

.spacer {
  flex: 1 1 auto;
}

.app-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  background:
    radial-gradient(84% 58% at 50% 38%, rgba(63, 242, 184, .13), transparent 62%),
    radial-gradient(120% 80% at 50% 26%, #0C1B12 0%, #08120D 58%, #050C08 100%);
  transition: opacity .38s ease, visibility .38s ease;
}

.splash-seen .app-splash {
  display: none;
}

.app-splash.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Particle canvas: green "stars" converge to form the S logo */
.splash-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.app-splash-inner {
  position: relative;
  z-index: 1;
  width: min(320px, 72vw);
  display: grid;
  justify-items: center;
  gap: 22px;
  transform: translateY(-2vh);
}

/* The S logo (transparent) assembles where the particles converge */
.splash-logo-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(168px, 44vw);
  height: min(168px, 44vw);
}

/* Soft bloom of light that flashes the instant the S forms */
.splash-bloom {
  position: absolute;
  width: 190%;
  height: 190%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 242, 184, .55) 0%, rgba(63, 242, 184, .16) 38%, transparent 66%);
  opacity: 0;
  transform: scale(.35);
  pointer-events: none;
}

.splash-bloom.formed {
  animation: splashBloom 1.4s ease-out forwards;
}

@keyframes splashBloom {
  0% {
    opacity: 0;
    transform: scale(.35);
  }

  35% {
    opacity: 1;
    transform: scale(1.05);
  }

  100% {
    opacity: .28;
    transform: scale(1);
  }
}

/* A thin ring that expands outward at the moment of formation */
.splash-ring {
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  border: 2px solid rgba(63, 242, 184, .6);
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
}

.splash-ring.formed {
  animation: splashRing 1.1s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes splashRing {
  0% {
    opacity: 0;
    transform: scale(.4);
  }

  25% {
    opacity: .9;
  }

  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

.splash-s {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(.5);
  filter: blur(14px) drop-shadow(0 0 0 rgba(63, 242, 184, 0));
}

.splash-s.formed {
  animation: splashForm .95s cubic-bezier(.2, .8, .25, 1) forwards, splashGlow 2.6s ease-in-out .95s infinite;
}

@keyframes splashForm {
  0% {
    opacity: 0;
    transform: scale(.5);
    filter: blur(14px) drop-shadow(0 0 0 rgba(63, 242, 184, 0));
  }

  55% {
    opacity: 1;
    transform: scale(1.08);
    filter: blur(0) drop-shadow(0 0 40px rgba(63, 242, 184, .65));
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) drop-shadow(0 8px 36px rgba(63, 242, 184, .40));
  }
}

@keyframes splashGlow {

  0%,
  100% {
    filter: blur(0) drop-shadow(0 8px 34px rgba(63, 242, 184, .34));
  }

  50% {
    filter: blur(0) drop-shadow(0 8px 46px rgba(63, 242, 184, .56));
  }
}

/* Wordmark fades up after the S forms */
.splash-word {
  width: min(210px, 56vw);
  height: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}

.splash-word.show {
  opacity: 1;
  transform: translateY(0);
}

.app-splash-bar {
  width: min(210px, 48vw);
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  opacity: 0;
  transition: opacity .5s ease;
}

.app-splash-bar.show {
  opacity: 1;
}

.app-splash-bar span {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--grad-accent);
  animation: splashBar 1.05s ease-in-out infinite;
}

@keyframes splashBar {
  0% {
    transform: translateX(-150%);
  }

  100% {
    transform: translateX(245%);
  }
}

/* ---------- App shell: sidebar (desktop) + content ------------------------ */
.app-shell {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  /* RTL: sidebar on the right */
  min-height: 100vh;
  background: var(--shell-bg);
}

.sidebar {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 12px 10px;
  background: var(--sidebar-bg);
  backdrop-filter: blur(14px);
  border-inline-start: 1px solid var(--line);
}

.sidebar-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-bottom: 6px;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 4px;
}

.sidebar .brand img {
  height: 25px;
  width: auto;
}

.sidebar-controls {
  direction: ltr;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  margin-bottom: 8px;
}

.sidebar-controls .points-chip {
  direction: rtl;
  margin: 0;
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-softer);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}

.nav-item .ico {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

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

.nav-item.active {
  color: var(--text);
  background: linear-gradient(90deg, rgba(63, 242, 184, .16), rgba(73, 211, 255, .10));
  border-color: rgba(63, 242, 184, .28);
}

.nav-item .badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px rgba(63, 242, 184, .6);
  margin-inline-start: auto;
}

/* Collapsible nav groups — e.g. «المحاسبة» → البسيط / الشامل → its sections. */
.nav-grp-toggle { width: 100%; cursor: pointer; background: none; font-family: inherit; }
.nav-grp-toggle .nav-chev { width: 14px; height: 14px; margin-inline-start: auto; opacity: .55; transition: transform .2s; }
.nav-group.open > .nav-grp-toggle .nav-chev { transform: rotate(90deg); }
.nav-sub { display: none; flex-direction: column; gap: 2px; margin: 2px 4px 4px 0; padding-inline-start: 9px; border-inline-start: 1px solid var(--border-soft); }
.nav-group.open > .nav-sub { display: flex; }
.nav-subitem {
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 10px; border-radius: 9px;
  color: var(--muted); font-weight: 600; font-size: 12px; text-decoration: none; cursor: pointer;
  background: none; border: 1px solid transparent; font-family: inherit; text-align: start; width: 100%;
  transition: background .15s, color .15s;
}
.nav-subitem:hover { background: var(--surface-hover); color: var(--text); }
.nav-subitem.active { color: var(--text); background: linear-gradient(90deg, rgba(63, 242, 184, .14), rgba(73, 211, 255, .08)); border-color: rgba(63, 242, 184, .24); }
.nav-subitem .ai { width: 16px; text-align: center; flex: none; opacity: .8; }
.nav-subitem2 { font-size: 11.5px; padding-inline-start: 14px; }

.nav-new-chat {
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  text-align: start;
  background: color-mix(in srgb, var(--mint) 13%, var(--surface-soft));
  border-color: color-mix(in srgb, var(--mint) 28%, transparent);
  color: var(--text);
}

.nav-new-chat .ico {
  color: var(--accent-ink);
  background: var(--grad-accent);
}

.chat-nav-group {
  min-width: 0;
}

.chat-nav-sub {
  gap: 0;
  margin: 3px 0 7px;
  padding: 0;
  border-inline-start: 0;
}

.chat-nav-sub .chat-history {
  flex: 0 1 auto;
  margin: 0;
  padding: 6px 3px 2px;
  min-height: 0;
  max-height: min(42vh, 350px);
}

/* Secretary badge: a small count pill on the "طلباتي" item, shakes when busy */
.nav-item .badge-dot.count {
  width: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--base);
  background: var(--mint);
  box-shadow: 0 0 10px rgba(63, 242, 184, .5);
}

.bottom-nav .badge-dot.count {
  position: absolute;
  top: 6px;
  inset-inline-end: 50%;
  margin-inline-end: -22px;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
}

.shake {
  animation: secShake 1.1s ease-in-out infinite;
  transform-origin: center;
}

@keyframes secShake {

  0%,
  82%,
  100% {
    transform: rotate(0);
  }

  85% {
    transform: rotate(-12deg);
  }

  89% {
    transform: rotate(10deg);
  }

  93% {
    transform: rotate(-7deg);
  }

  97% {
    transform: rotate(4deg);
  }
}

.points-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border-radius: 11px;
  color: var(--text);
  font-weight: 800;
  font-size: 12.5px;
  background: rgba(63, 242, 184, .10);
  border: 1px solid rgba(63, 242, 184, .22);
}

.points-chip .ico {
  color: var(--mint);
}

.topbar .points-chip {
  margin-top: 0;
}

.topbar .plan-chip {
  background: rgba(183, 119, 14, .12);
  border-color: rgba(183, 119, 14, .28);
  max-width: 150px;
}

.topbar .plan-chip .ico {
  color: var(--amber);
}

.topbar .plan-chip span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-toggle {
  width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  color: var(--text);
  background: var(--surface-soft);
  font-size: 13px;
  font-weight: 800;
  transition: background .15s, border-color .15s, transform .12s;
}

.theme-toggle:hover {
  background: var(--surface-hover);
  border-color: rgba(63, 242, 184, .34);
}

.theme-toggle:active {
  transform: translateY(1px);
}

/* Language (AR/EN) toggle — mirrors the theme toggle, sits beside it. */
.lang-form {
  margin: 0;
  display: inline-flex;
}

.lang-toggle {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  color: var(--text);
  background: var(--surface-soft);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}

.lang-toggle:hover {
  background: var(--surface-hover);
  border-color: rgba(63, 242, 184, .34);
}

.lang-toggle:active {
  transform: translateY(1px);
}

.theme-toggle-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--mint);
}

.theme-toggle.compact {
  width: 38px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

.content {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content>.page {
  position: relative;
  z-index: 1;
}

/* page max width for comfortable desktop reading */
.page {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px clamp(16px, 4vw, 40px) 60px;
}

/* ---------- Top bar (mobile) ---------------------------------------------- */
.topbar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.topbar .brand img {
  height: 30px;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  color: var(--text);
}

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

/* ---------- Bottom nav (mobile) ------------------------------------------- */
.bottom-nav {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  height: 64px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav .row {
  display: flex;
  height: 64px;
}

.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.bottom-nav a .ico {
  width: 34px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.bottom-nav a.active {
  color: var(--text);
}

.bottom-nav a.active .ico {
  background: var(--grad-accent);
  color: var(--accent-ink);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--mint) 32%, transparent);
}

/* ---------- Headings / sections ------------------------------------------- */
.eyebrow {
  color: var(--mint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  margin: 0 0 6px;
}

.page-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  margin: 0 0 4px;
}

.page-sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 22px;
}

/* ---------- Cards / buttons ----------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border: none;
  border-radius: 14px;
  font-weight: 800;
  font-size: 15px;
  color: var(--accent-ink);
  background: var(--grad-accent);
  box-shadow: 0 8px 22px var(--accent-shadow);
  transition: transform .12s, filter .15s;
}

.btn:hover {
  filter: brightness(1.05);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled] {
  opacity: .6;
  cursor: default;
  box-shadow: none;
}

.btn-ghost {
  background: var(--surface-soft);
  color: var(--text);
  border: 1px solid var(--border-soft);
  box-shadow: none;
}

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

.spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.4px solid color-mix(in srgb, var(--accent-ink) 28%, transparent);
  border-top-color: var(--accent-ink);
  animation: spin .7s linear infinite;
}

.spinner.light {
  border-color: var(--border-soft);
  border-top-color: var(--mint);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.field {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 15px;
  outline: none;
  transition: border-color .15s;
}

.field:focus {
  border-color: var(--mint);
}

textarea.field {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.6;
}

.field-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0 7px;
  font-weight: 600;
}

.error-text {
  color: var(--rose);
  font-size: 13px;
  margin-top: 10px;
}

.toast {
  position: fixed;
  inset-inline: 0;
  bottom: 22px;
  margin-inline: auto;
  width: max-content;
  max-width: 90vw;
  z-index: 100;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .2s, transform .2s;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.ok {
  border-color: rgba(63, 242, 184, .4);
}

.toast.err {
  border-color: rgba(255, 95, 162, .5);
}

/* ---------- Animated background canvas ------------------------------------ */
.bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.bg-over {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(7, 10, 18, 0), rgba(7, 10, 18, .55));
}

/* ====================== LOGIN ============================================= */
.login-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 26px 24px 28px;
  font-family: "ثمانية", "Thmanyah", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--mint) 30%, transparent);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .42), 0 0 40px color-mix(in srgb, var(--mint) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

.login-logo {
  display: block;
  height: 64px;
  max-width: 80%;
  object-fit: contain;
  margin: 0 auto 14px;
}

.login-tag {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 26px;
}

.login-card h1 {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 4px;
}

.login-card .sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 18px;
}

.input-icon {
  position: relative;
}

.input-icon .ico {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mint);
}

.input-icon .field {
  padding-inline-start: 42px;
}

.login-foot {
  text-align: center;
  color: var(--muted-soft);
  font-size: 12px;
  margin-top: 18px;
}

.link-btn {
  background: none;
  border: none;
  color: var(--mint);
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
}

.about-login-btn {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
}

.about-login-btn:hover {
  background: color-mix(in srgb, var(--cyan) 16%, transparent);
  border-color: color-mix(in srgb, var(--mint) 36%, transparent);
}

.about-login-btn svg {
  width: 18px;
  height: 18px;
  color: var(--mint);
}

/* ====================== PUBLIC ABOUT ====================================== */
body[data-page="about"] {
  background: #050C08;
}

.about-flow {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  width: min(1180px, 100% - 32px);
  margin: 0 auto;
  padding: 20px 0 26px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
}

.about-flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.about-flow-brand {
  display: inline-flex;
  align-items: center;
}

.about-flow-brand img {
  width: auto;
  height: 36px;
  object-fit: contain;
}

.about-flow-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
}

.about-close {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 11px;
  background: rgba(255, 255, 255, .055);
  color: var(--text);
  font-size: 13px;
  letter-spacing: 0;
  white-space: nowrap;
}

.about-close {
  min-width: 72px;
  padding: 0 14px;
  font-weight: 900;
}

.about-close:hover {
  border-color: rgba(63, 242, 184, .34);
  background: rgba(63, 242, 184, .10);
}

.about-stage {
  min-height: 0;
  display: grid;
  align-items: center;
}

.about-slide-card {
  min-height: min(610px, calc(100vh - 168px));
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(380px, 1.05fr);
  direction: ltr;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(20, 34, 26, .92), rgba(9, 17, 12, .88)),
    rgba(20, 34, 26, .9);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .42);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
}

.about-slide-card.is-ready {
  opacity: 1;
  transform: translateY(0);
}

.about-slide-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  direction: rtl;
  text-align: right;
  font-family: "ثمانية", "Thmanyah", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  padding: clamp(24px, 5vw, 58px);
}

.about-eyebrow {
  margin: 0 0 12px;
  color: var(--mint);
  font-family: "Avenir Next", "Inter", "SF Pro Display", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.about-slide-copy h1 {
  margin: 0;
  color: var(--text);
  font-family: "ثمانية", "Thmanyah", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  font-size: clamp(24px, 2.75vw, 38px);
  line-height: 1.24;
  font-weight: 900;
  letter-spacing: 0;
}

.about-copy-ar {
  margin: 20px 0 0;
  color: rgba(246, 248, 255, .84);
  font-family: "ثمانية", "Thmanyah", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.9;
}

.about-copy-en {
  margin: 12px 0 0;
  color: rgba(169, 180, 204, .88);
  font-family: "Avenir Next", "Inter", "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 500;
  line-height: 1.7;
  text-align: left;
}

.about-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.about-points span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 9px;
  color: var(--text);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.about-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
  max-height: 210px;
  overflow: auto;
  padding-inline-end: 2px;
}

.about-product-grid span {
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 9px;
  color: rgba(246, 248, 255, .92);
  background:
    linear-gradient(135deg, rgba(63, 242, 184, .10), rgba(73, 211, 255, .055)),
    rgba(255, 255, 255, .035);
  border: 1px solid rgba(63, 242, 184, .18);
}

.about-product-grid strong {
  width: 100%;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.about-product-grid em {
  width: 100%;
  color: rgba(169, 180, 204, .90);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.about-slide-actions {
  margin-top: 24px;
  padding-top: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  direction: rtl;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.about-action-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  direction: rtl;
  min-width: 0;
}

.about-slide-media {
  position: relative;
  min-height: 100%;
  margin: 0;
  background: #08120D;
  overflow: hidden;
}

.about-slide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 10, 18, .42), rgba(7, 10, 18, .02) 34%),
    linear-gradient(180deg, rgba(7, 10, 18, 0), rgba(7, 10, 18, .30));
  pointer-events: none;
}

.about-slide-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center;
}

.about-dots {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  direction: ltr;
}

.about-dot {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .24);
  transition: width .18s ease, background .18s ease;
}

.about-dot.active {
  width: 28px;
  background: var(--mint);
}

.about-next {
  min-width: 158px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 13px;
  color: var(--accent-ink);
  background: var(--grad-accent);
  box-shadow: 0 16px 34px rgba(63, 242, 184, .18);
  font-family: "ثمانية", "Thmanyah", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  font-size: 15px;
  font-weight: 900;
  direction: rtl;
}

.about-skip {
  min-width: 0;
  max-width: 100%;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  color: var(--mint);
  background: transparent;
  font-family: "ثمانية", "Thmanyah", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  padding: 8px 2px;
  white-space: nowrap;
}

.about-skip:hover {
  color: var(--cyan);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  background: transparent;
}

@media (max-width: 900px) {
  .about-flow {
    min-height: 100dvh;
    width: min(100% - 24px, 620px);
    padding: 14px 0 18px;
    gap: 12px;
  }

  .about-slide-card {
    min-height: 0;
    grid-template-columns: 1fr;
    align-self: start;
  }

  .about-slide-media {
    order: 1;
    min-height: 260px;
    max-height: 330px;
  }

  .about-slide-copy {
    order: 2;
    padding: 22px 20px 24px;
  }

  .about-slide-copy h1 {
    font-size: clamp(20px, 5.4vw, 28px);
    line-height: 1.25;
  }

  .about-copy-ar {
    font-size: 14px;
    line-height: 1.75;
  }

  .about-copy-en {
    font-size: 12.5px;
    line-height: 1.6;
  }

  .about-product-grid {
    grid-template-columns: 1fr;
    max-height: 210px;
  }

  .about-slide-actions {
    gap: 12px;
  }

  .about-action-buttons {
    width: 100%;
    gap: 12px;
  }

  .about-dots {
    justify-content: center;
  }

  .about-next {
    flex: 0 0 min(180px, 48%);
    min-width: 0;
    width: auto;
  }

  .about-skip {
    flex: 1 1 auto;
    justify-content: flex-start;
    white-space: normal;
    text-align: right;
  }
}

@media (max-width: 520px) {
  .login-wrap {
    padding: 18px 14px;
  }

  .login-card {
    padding: 20px 16px 22px;
    border-radius: 18px;
  }

  .login-logo {
    height: 50px;
    margin-bottom: 10px;
  }

  .login-tag {
    margin-bottom: 18px;
    font-size: 12.5px;
  }

  .login-foot {
    font-size: 10.5px;
    line-height: 1.7;
  }

  .about-login-btn {
    min-height: 44px;
    font-size: 12.5px;
    border-radius: 12px;
  }

  .about-flow-brand img {
    height: 30px;
  }

  .about-close {
    min-height: 34px;
    font-size: 11.5px;
  }

  .about-close {
    min-width: 60px;
    padding: 0 10px;
  }

  .about-slide-media {
    min-height: 210px;
    max-height: 260px;
  }

  .about-slide-copy {
    padding: 18px 16px 20px;
  }

  .about-eyebrow {
    font-size: 10.5px;
    margin-bottom: 8px;
  }

  .about-slide-copy h1 {
    font-size: 19px;
    line-height: 1.28;
  }

  .about-copy-ar {
    margin-top: 14px;
    font-size: 13.2px;
  }

  .about-points {
    margin-top: 16px;
    gap: 6px;
  }

  .about-points span {
    min-height: 28px;
    font-size: 11px;
    padding: 5px 9px;
  }

  .about-product-grid {
    max-height: 184px;
    gap: 6px;
  }

  .about-product-grid span {
    min-height: 48px;
    padding: 6px 8px;
  }

  .about-product-grid strong {
    font-size: 10.8px;
  }

  .about-product-grid em {
    font-size: 9.8px;
  }

  .about-slide-actions {
    margin-top: 18px;
    padding-top: 14px;
  }

  .about-next {
    height: 44px;
    font-size: 13px;
  }

  .about-skip {
    font-size: 12.5px;
  }
}

/* ====================== CHAT / HOME ======================================= */
.chat-screen {
  position: relative;
  z-index: 1;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--base);
}

.chat-screen .chat-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .9;
  pointer-events: none;
  display: block;
}

.chat-bg-over {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(78% 48% at 50% 24%, color-mix(in srgb, var(--mint) 10%, transparent), transparent 64%),
    linear-gradient(to bottom, color-mix(in srgb, var(--base) 0%, transparent), color-mix(in srgb, var(--base) 28%, transparent) 38%, color-mix(in srgb, var(--base) 70%, transparent));
}

.chat-workspace {
  position: relative;
  z-index: 1;
  height: 100%;
}

.chat-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 1;
}

.chat-toolbar {
  flex: 0 0 var(--chat-toolbar-h);
  min-height: var(--chat-toolbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px var(--chat-pad-x);
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--base) 88%, transparent);
  backdrop-filter: blur(14px);
}

.chat-toolbar-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-toolbar-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.chat-toolbar-mark img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.chat-toolbar-title span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.chat-toolbar-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}

.chat-toolbar-title strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.chat-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.chat-head-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-soft);
  background: var(--surface-soft);
  color: var(--text);
}

.chat-head-btn:hover {
  background: var(--surface-hover);
}

.chat-scroll {
  flex: 1;
  overflow-y: auto;
  scroll-padding-bottom: 150px;
}

.chat-inner {
  width: min(100%, var(--chat-max));
  margin: 0 auto;
  padding: 28px var(--chat-pad-x) 18px;
  --msg-scale: 1;
}

/* Message text-size control (3 steps) — mirrors the app's font-size cycle. */
.chat-inner .user-card {
  font-size: calc(15px * var(--msg-scale));
}

.chat-inner .assistant-body {
  font-size: calc(15.5px * var(--msg-scale));
}

.text-size-btn {
  position: absolute;
  top: calc(var(--chat-toolbar-h) + 12px);
  inset-inline-end: 14px;
  z-index: 6;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  color: var(--text);
  font-weight: 800;
  line-height: 1;
  backdrop-filter: blur(8px);
  transition: background .15s, transform .12s;
}

.text-size-btn:hover {
  background: var(--surface-hover);
}

.text-size-btn:active {
  transform: scale(.94);
}

.text-size-btn .ts-a {
  font-size: 15px;
}

.text-size-btn .ts-a.s2 {
  font-size: 18px;
}

.text-size-btn .ts-a.s3 {
  font-size: 21px;
}

.chat-history {
  flex: 1 0 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  overflow: hidden;
}

.history-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 34px;
  gap: 7px;
  direction: rtl;
  flex: 0 0 auto;
}

.history-head-title {
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 11px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-soft) 76%, transparent);
  border: 1px solid var(--border-soft);
  font-size: 11.5px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-icon.on {
  background: var(--mint);
  color: var(--accent-ink);
  border-color: transparent;
}

.history-new {
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: none;
  border-radius: 11px;
  background: var(--mint);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 900;
}

.history-new span,
.history-icon span {
  display: inline-flex;
}

.history-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 1px solid var(--border-soft);
  display: grid;
  place-items: center;
  background: var(--surface-soft);
  color: var(--text);
}

.history-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  flex: 0 0 auto;
}

.history-tabs button,
.folder-filter button {
  height: 28px;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.history-tabs button.active,
.folder-filter button.active {
  color: var(--accent-ink);
  background: var(--grad-accent);
  border-color: transparent;
}

.folder-filter {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
  flex: 0 0 auto;
}

.folder-filter::-webkit-scrollbar {
  display: none;
}

.folder-filter button {
  flex: 0 0 auto;
  padding: 0 9px;
  max-width: 122px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 0 6px 2px;
}

.history-empty {
  color: var(--muted);
  font-size: 11.5px;
  text-align: center;
  padding: 22px 8px;
}

.history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 40px;
  padding: 6px 8px 6px 3px;
  border-radius: 11px;
  border: 1px solid var(--border-soft);
  background: var(--surface-soft);
  color: var(--text);
}

.history-item.active {
  border-color: rgba(63, 242, 184, .34);
  background: rgba(63, 242, 184, .08);
}

.history-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.8px;
  font-weight: 800;
  line-height: 1.25;
}

.history-meta {
  margin-top: 1px;
  color: var(--muted);
  font-size: 9.8px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-actions {
  display: flex;
  align-items: center;
  gap: 0;
}

.history-actions button {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--muted);
}

.history-actions button:hover {
  background: var(--surface-hover);
  color: var(--text);
}

/* Multi-select toolbar + checkboxes (clean, self-contained — no overlap) */
.history-select-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 7px 9px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--mint) 30%, transparent);
  background: color-mix(in srgb, var(--mint) 9%, transparent);
}

.history-select-bar[hidden] {
  display: none;
}

.hsb-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
}

.hsb-all input {
  width: 16px;
  height: 16px;
  accent-color: var(--mint);
}

.hsb-count {
  font-size: 10.5px;
  color: var(--muted);
}

.hsb-del,
.hsb-cancel {
  margin: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--surface-soft);
  color: var(--muted);
}

.hsb-del {
  margin-inline-start: auto;
  color: var(--rose);
  border-color: color-mix(in srgb, var(--rose) 30%, transparent);
  background: color-mix(in srgb, var(--rose) 10%, transparent);
}

.hsb-del:disabled {
  opacity: .45;
}

.hsb-del:not(:disabled):hover {
  background: color-mix(in srgb, var(--rose) 18%, transparent);
}

.hsb-cancel:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.hsb-del svg,
.hsb-cancel svg {
  width: 15px;
  height: 15px;
}

/* When selecting: the row carries a leading checkbox and selecting state */
.history-item.selecting {
  grid-template-columns: 18px minmax(0, 1fr);
  cursor: pointer;
}

.history-item.selecting .history-check {
  width: 17px;
  height: 17px;
  accent-color: var(--mint);
  margin: 0;
}

.history-item.selected {
  border-color: color-mix(in srgb, var(--mint) 50%, transparent);
  background: color-mix(in srgb, var(--mint) 10%, transparent);
}

.chat-empty {
  min-height: calc(100dvh - var(--chat-toolbar-h) - 260px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 46px 24px 28px;
}

.ce-hero {
  width: min(560px, 92vw);
  animation: ceRise .6s cubic-bezier(.2, .8, .2, 1) both;
}

/* The neural camel stands alone on the page background, no card and no plate,
   in both light and night themes, exactly like the app's chat-start mark.
   It stays perfectly still (no float) so it never jitters. */
.ce-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.ce-logo {
  height: 124px;
  width: auto;
  display: block;
  filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--mint) 18%, transparent));
}

.ce-team {
  width: min(560px, 92vw);
  height: auto;
  display: block;
  margin: -4px auto 8px;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px color-mix(in srgb, #000 26%, transparent));
}

.ce-team-title {
  margin: 0 0 12px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0;
}

.chat-empty h2 {
  margin: 0;
  color: var(--text);
  letter-spacing: 0;
}

.ce-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .34em;
  direction: rtl;
  font-family: var(--font);
  font-size: clamp(25px, 3.2vw, 34px);
  font-weight: 900;
  line-height: 1.16;
  font-feature-settings: normal;
}

@keyframes ceRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ceFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@media (prefers-reduced-motion: reduce) {

  .ce-hero,
  .ce-brand {
    animation: none;
  }
}

.sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 200px;
  padding: 6px 9px;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(73, 211, 255, .08);
  border: 1px solid rgba(73, 211, 255, .18);
  border-radius: 9px;
}

.source-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.typing {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--muted);
}

.typing .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: blink 1s infinite;
}

.typing .dot:nth-child(2) {
  animation-delay: .2s;
}

.typing .dot:nth-child(3) {
  animation-delay: .4s;
}

@keyframes blink {

  0%,
  100% {
    opacity: .3;
  }

  50% {
    opacity: 1;
  }
}

/* ---- Messages: ONLY the user message sits in a card; the
   assistant reply is plain full-width text (bigger font) with a robot avatar. */
.msg-row {
  display: flex;
}

.msg-row.user {
  justify-content: flex-end;
  margin: 18px 0 4px;
}

.user-msg-wrap {
  max-width: min(78%, 680px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user-card {
  max-width: 100%;
  padding: 10px 15px;
  border-radius: 17px;
  border-start-end-radius: 6px;
  background: var(--surface-strong);
  border: 1px solid var(--border-soft);
  font-size: 15px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text);
}

.user-msg-actions {
  display: flex;
  margin-top: 4px;
  padding-inline-start: 4px;
}

.msg-row.bot {
  gap: 12px;
  align-items: flex-start;
  margin: 12px 0 10px;
}

.assistant-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-top: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  background: transparent;
  border: 0;
}

.assistant-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  display: block;
}

.assistant-avatar .assistant-character {
  width: 44px;
  height: 44px;
  transform: translateY(4px);
}

.msg-row.bot.speaking .assistant-character,
.msg-row.bot.speaking .assistant-avatar-img {
  animation: svHeadTalk 1.7s ease-in-out infinite;
}

.assistant-main {
  flex: 1;
  min-width: 0;
}

.assistant-agent-name {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  margin: 1px 0 3px;
}

.assistant-body {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text);
  word-wrap: break-word;
}

.chat-error-inline {
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 11px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--rose) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--rose) 28%, transparent);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.chat-error-inline button {
  height: 30px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--rose) 34%, transparent);
  background: color-mix(in srgb, var(--rose) 12%, transparent);
  color: var(--rose);
  font-size: 12px;
  font-weight: 850;
}

.agent-switch-card {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(430px, 100%);
  margin: 6px 0 10px;
  padding: 9px 11px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent);
}

.agent-switch-face {
  width: 30px;
  height: 30px;
  border-radius: 0;
  object-fit: contain;
  object-position: 50% 100%;
  border: 0;
  flex: 0 0 auto;
}

.agent-switch-face.active {
  border-color: transparent;
  box-shadow: none;
}

.agent-switch-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.agent-switch-kicker {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}

.agent-switch-text strong {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-switch-arrow {
  color: var(--cyan);
  font-weight: 900;
}

.assistant-body b {
  font-weight: 800;
}

.assistant-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
  font-size: 13.5px;
}

.assistant-body th {
  background: var(--mint);
  color: var(--accent-ink);
  padding: 7px 9px;
  font-weight: 800;
}

.assistant-body td {
  border: 1px solid var(--border-soft);
  padding: 7px 9px;
}

.visual-sources {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 0 6px;
  margin: 0 0 12px;
  scrollbar-width: thin;
}

.visual-source-card {
  position: relative;
  flex: 0 0 190px;
  height: 122px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface-strong);
  border: 1px solid var(--border-soft);
}

.visual-source-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.visual-source-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .66));
}

.visual-source-label {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  color: #fff;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 800;
}

.visual-source-label svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .44);
  border: 1px solid rgba(255, 255, 255, .26);
}

.visual-source-label span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.inline-code {
  background: var(--surface-strong);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 1px 6px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  direction: ltr;
}

/* Copyable code block (the "editor" for copy-worthy snippets) */
.code-block {
  margin: 12px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: #0c1018;
  direction: ltr;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid var(--border-soft);
}

/* The code panel is always near-black, so its header label/button use a FIXED
   light tone (not var(--muted), which is dark in light mode → invisible here). */
.code-lang {
  font-size: 11.5px;
  color: #9ba8b4;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  text-transform: lowercase;
}

.code-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: #9ba8b4;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.code-copy:hover {
  color: var(--mint);
}

.code-block pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
}

.code-block code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #e6edf3;
  white-space: pre;
}

/* Per-reply actions: copy the whole reply + 👍 / 👎 (logged to admin) */
.msg-actions {
  display: flex;
  gap: 3px;
  margin-top: 8px;
}

.msg-act {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 15px;
  transition: .15s;
}

.msg-act-mini {
  min-width: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 7px;
}

.msg-act-mini svg {
  width: 13px;
  height: 13px;
}

.msg-act:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.msg-act.react.on {
  color: var(--mint);
  background: rgba(63, 242, 184, .14);
  border-color: rgba(63, 242, 184, .32);
}

.dock {
  position: relative;
  z-index: 2;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--base) 0%, transparent), color-mix(in srgb, var(--base) 92%, transparent) 24%, var(--base));
}

.dock-inner {
  max-width: var(--chat-composer-max);
  margin: 0 auto;
  padding: 8px var(--chat-pad-x) 18px;
}

.action-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: none;
  justify-content: center;
}

.action-rail::-webkit-scrollbar {
  display: none;
}

.action-pill {
  flex: 0 0 auto;
  width: auto;
  min-width: 108px;
  min-height: 42px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 12px;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 800;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  direction: rtl;
  text-decoration: none;
}

.action-pill:hover {
  border-color: rgba(63, 242, 184, .4);
}

.action-pill .ico {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 9px;
  display: grid;
  place-items: center;
}

.action-pill .lbl {
  min-width: 0;
  flex: 1 1 auto;
  display: -webkit-box;
  overflow: hidden;
  text-align: right;
  line-height: 1.25;
  word-break: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 4px;
  background: var(--field-bg-strong);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--base-2) 52%, transparent);
  transition: border-color .15s;
}

.composer:focus-within {
  border-color: rgba(63, 242, 184, .44);
}

.composer .lead {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(63, 242, 184, .1);
  color: var(--mint);
}

.composer textarea {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  max-height: 160px;
  min-height: 42px;
  padding: 9px 4px;
}

.send-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: none;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--surface-hover);
  color: var(--muted);
  transition: background .15s, color .15s;
}

.send-btn.ready {
  background: var(--mint);
  color: var(--accent-ink);
}

/* ====================== PRODUCTS ========================================== */
/* The catalog gets extra breathing room on wide desktops — a roomy 4-up grid
   that fills the screen without crowding (the listing page only). The double
   class keeps it ahead of the later generic `.page { max-width }` rule. */
.page.products-page {
  max-width: 1240px;
}

.cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 20px;
}

.cat-tab {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  transition: color .15s, background .15s, border-color .15s;
}

.cat-tab:hover {
  color: var(--text);
  border-color: rgba(63, 242, 184, .3);
}

.cat-tab.active {
  color: var(--accent-ink);
  background: var(--grad-accent);
  border-color: transparent;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 18px;
}

.product-card {
  position: relative;
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--mint) 36%, var(--border-soft));
  box-shadow: var(--shadow-card);
}

.product-card .poster {
  position: relative;
  height: 138px;
  background: var(--card);
  background-size: cover;
  background-position: center;
}

.product-card .poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(7, 10, 18, .02), rgba(7, 10, 18, .42));
}

.product-card .poster.fallback {
  display: grid;
  place-items: center;
}

.product-card .poster.fallback .pico {
  color: #fff;
  opacity: .92;
  position: relative;
  z-index: 1;
}

.product-card .cost-badge {
  position: absolute;
  top: 9px;
  inset-inline-start: 9px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: rgba(7, 10, 18, .5);
  border: 1px solid rgba(255, 255, 255, .12);
}

.product-card .cost-badge .ico {
  color: var(--amber);
  display: inline-flex;
}

.product-card .body {
  padding: 13px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.product-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.product-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ====================== PRODUCT DETAIL (full screen) ====================== */
.product-page {
  max-width: 1180px;
  padding-top: 18px;
  padding-inline: clamp(12px, 2.4vw, 28px);
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(300px, .86fr) minmax(420px, 1.14fr);
  gap: 16px;
  align-items: start;
}

.detail-summary {
  position: sticky;
  top: 22px;
  min-width: 0;
}

.detail-hero {
  position: relative;
  min-height: 264px;
  height: min(36vh, 320px);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card) center/cover no-repeat;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}

.detail-hero.fallback {
  display: grid;
  place-items: center;
}

.detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(7, 10, 18, .92) 0%, rgba(7, 10, 18, .40) 52%, rgba(7, 10, 18, .12) 100%),
    linear-gradient(100deg, rgba(63, 242, 184, .12), rgba(255, 95, 162, .05));
}

.detail-hero .fallico {
  position: relative;
  z-index: 1;
  color: #fff;
  opacity: .9;
}

.detail-back {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(7, 10, 18, .54);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  backdrop-filter: blur(8px);
}

.detail-back:hover {
  background: rgba(7, 10, 18, .78);
}

.detail-cost {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 31px;
  padding: 5px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  background: rgba(7, 10, 18, .58);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
}

.detail-cost .ico {
  color: var(--amber);
  display: inline-flex;
}

.detail-hero .htext {
  position: absolute;
  inset-inline: 18px;
  bottom: 17px;
  z-index: 2;
}

.detail-hero .htext span {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--mint);
  font-size: 11.5px;
  font-weight: 900;
}

.detail-hero .htext h1 {
  margin: 0 0 7px;
  color: var(--image-text);
  font-size: clamp(21px, 2.5vw, 29px);
  line-height: 1.24;
  font-weight: 900;
}

.detail-hero .htext p {
  margin: 0;
  color: var(--image-muted);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 96%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.detail-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 13px 14px;
  border-radius: 14px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  font-size: 12.8px;
  line-height: 1.65;
}

.detail-note .ico {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--mint);
  background: rgba(63, 242, 184, .11);
}

.detail-panel {
  min-width: 0;
  padding: 18px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}

.detail-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border-softer);
}

.detail-kicker {
  display: block;
  color: var(--mint);
  font-size: 11.5px;
  font-weight: 900;
  margin-bottom: 5px;
}

.detail-panel h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 900;
}

.detail-panel-head p {
  margin: 0;
  font-size: 12.8px;
  line-height: 1.6;
}

.detail-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

.detail-form .full {
  grid-column: 1 / -1;
}

.product-page .field-label {
  margin: 11px 0 6px;
  font-size: 12.5px;
}

.product-page .field {
  height: 46px;
  border-radius: 12px;
  background: var(--field-bg-strong);
}

.product-page textarea.field {
  min-height: 112px;
  padding-top: 11px;
}

.uploader {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px;
  border-radius: 14px;
  background: var(--field-bg-strong);
  border: 1px dashed rgba(73, 211, 255, .36);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}

.uploader:hover {
  background: rgba(73, 211, 255, .07);
  border-color: rgba(63, 242, 184, .5);
}

.uploader:active {
  transform: translateY(1px);
}

.uploader .uico {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(63, 242, 184, .12);
  color: var(--mint);
}

.uploader .ut {
  flex: 1;
  min-width: 0;
}

.uploader .ut .t1 {
  font-size: 13.5px;
  font-weight: 800;
}

.uploader .ut .t2 {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uploader .thumb {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .12);
}

.detail-actions {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 10px;
  margin-top: 18px;
}

.detail-actions .btn {
  width: 100%;
  height: 50px;
  border-radius: 13px;
}

@media (max-width: 1040px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }

  .detail-summary {
    position: static;
  }

  .detail-hero {
    min-height: 250px;
    height: 34vh;
  }
}

@media (max-width: 560px) {
  .product-page {
    padding-top: 12px;
    padding-inline: 12px;
  }

  .detail-layout {
    gap: 12px;
  }

  .detail-hero {
    min-height: 218px;
    height: 218px;
    border-radius: 16px;
  }

  .detail-hero .htext {
    inset-inline: 14px;
    bottom: 14px;
  }

  .detail-hero .htext h1 {
    font-size: 22px;
  }

  .detail-hero .htext p {
    font-size: 12.8px;
    line-height: 1.55;
  }

  .detail-note {
    display: none;
  }

  .detail-panel {
    padding: 14px;
    border-radius: 16px;
  }

  .detail-form {
    grid-template-columns: 1fr;
  }

  .detail-actions {
    grid-template-columns: 1fr;
  }
}

/* ====================== JOBS ============================================== */
/* Every colour here resolves from the central design tokens (:root + the
   html[data-theme="light"] block), so dark and light are driven from one place
   — no hardcoded hex, no per-component palette. */
.job-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.job-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.job-card:hover {
  box-shadow: var(--shadow-card);
}

.job-card.clickable {
  cursor: pointer;
}

.job-card.clickable:hover {
  border-color: color-mix(in srgb, var(--mint) 30%, var(--border-soft));
}

.job-card .jico {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--violet);
  background: color-mix(in srgb, var(--violet) 16%, transparent);
}

.job-card .jico svg {
  width: 21px;
  height: 21px;
}

.job-card .meta {
  flex: 1;
  min-width: 0;
}

.job-card .meta h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
}

.job-card .meta .sub {
  color: var(--muted);
  font-size: 12.5px;
}

.status-chip {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
}

.status-pending,
.status-processing,
.status-draft,
.status-sent,
.status-accepted {
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  color: var(--amber);
}

.status-completed,
.status-paid {
  background: color-mix(in srgb, var(--mint) 18%, transparent);
  color: var(--mint);
}

.status-failed,
.status-cancelled,
.status-blocked {
  background: color-mix(in srgb, var(--rose) 18%, transparent);
  color: var(--rose);
}

.progress-track {
  height: 5px;
  border-radius: 99px;
  background: var(--surface-soft);
  margin-top: 8px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--grad-accent);
  transition: width .4s;
}

/* --- Orders + studio shell ----------------------------------------------- */
.jobs-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  margin-bottom: 14px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mint) 12%, transparent), color-mix(in srgb, var(--cyan) 7%, transparent)),
    var(--card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}

.studio-hero {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--violet) 13%, transparent), color-mix(in srgb, var(--mint) 8%, transparent)),
    var(--card);
}

.jobs-hero-main,
.jobs-hero-actions {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.jobs-hero-main {
  flex: 1;
}

.jobs-hero-ico {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  background: var(--grad-accent);
}

.studio-hero .jobs-hero-ico {
  color: var(--text);
  background: color-mix(in srgb, var(--violet) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent);
}

.jobs-hero-ico svg {
  width: 24px;
  height: 24px;
}

.jobs-hero-txt {
  flex: 1;
  min-width: 0;
}

.jobs-hero-txt .page-sub {
  margin: 5px 0 0;
  max-width: 760px;
}

.jobs-hero-refresh,
.jobs-studio-link {
  flex: 0 0 auto;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  text-decoration: none;
}

.jobs-studio-link {
  padding: 0 14px;
  font-size: 13px;
  font-weight: 850;
}

.jobs-hero-refresh {
  width: 40px;
  color: var(--muted);
}

.jobs-hero-refresh:hover,
.jobs-studio-link:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--mint) 42%, transparent);
  background: color-mix(in srgb, var(--mint) 10%, transparent);
}

.orders-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.orders-insight-card {
  min-height: 72px;
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius-card);
  background: var(--card);
  border: 1px solid var(--border-soft);
}

.orders-insight-card span {
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 13%, transparent);
}

.orders-insight-card[data-tone="mint"] { --tone: var(--mint); }
.orders-insight-card[data-tone="amber"] { --tone: var(--amber); }
.orders-insight-card[data-tone="rose"] { --tone: var(--rose); }

.orders-insight-card b {
  font-size: 20px;
  line-height: 1;
}

.orders-insight-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.orders-filter-card,
.studio-toolbar {
  margin-bottom: 14px;
  padding: 12px;
  border-radius: var(--radius-card);
  background: var(--card);
  border: 1px solid var(--border-soft);
}

/* --- Type filter: products / agents / invoices --------------------------- */
.tf-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.tf-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 15px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  transition: color .15s, background .15s, border-color .15s;
}

.tf-chip svg {
  width: 16px;
  height: 16px;
}

.tf-chip .cnt {
  font-size: 12px;
  font-weight: 800;
  opacity: .7;
}

.tf-chip:hover {
  border-color: color-mix(in srgb, var(--mint) 30%, var(--border-soft));
}

.tf-chip.on {
  color: var(--accent-ink);
  background: var(--grad-accent);
  border-color: transparent;
}

.tf-chip.on .cnt {
  opacity: .85;
}

.tf-chip .unread {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  background: var(--rose);
  border: 2px solid var(--base);
}

.agent-scope-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: -2px 0 12px;
}

.as-chip {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
}

.as-chip.on {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 44%, transparent);
}

.orders-filter-row,
.studio-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- Status filter ------------------------------------------------------- */
.sf-bar {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0;
  flex: 1;
}

.sf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  transition: color .15s, background .15s, border-color .15s;
}

.sf-chip svg {
  width: 15px;
  height: 15px;
}

.sf-chip:hover {
  color: var(--text);
}

.sf-chip.on {
  color: var(--text);
  background: color-mix(in srgb, var(--mint) 12%, transparent);
  border-color: color-mix(in srgb, var(--mint) 42%, transparent);
}

.sf-chip .cnt {
  font-size: 11px;
  font-weight: 800;
  opacity: .85;
}

.jobs-search-wrap {
  flex: 0 1 360px;
  min-width: 240px;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--field-bg);
  color: var(--text);
}

.jobs-search-wrap > span {
  color: var(--muted);
  display: grid;
  place-items: center;
}

.jobs-search-wrap svg {
  width: 16px;
  height: 16px;
}

.jobs-search {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.jobs-search::placeholder {
  color: var(--muted);
}

.date-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  margin: 16px 2px 8px;
}

.date-head::before,
.svc-head::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent);
}

.svc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 2px 8px;
  font-size: 12.5px;
  font-weight: 900;
  color: var(--text);
}

/* --- Structured product job card (column layout) ------------------------- */
.job-card.jcol {
  display: block;
  padding: 14px;
}

.jcol-head {
  display: flex;
  align-items: center;
  gap: 13px;
}

.jcol-head .meta {
  flex: 1;
  min-width: 0;
}

.jcol-head .meta h3 {
  margin: 0 0 3px;
  font-size: 14.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jcol-head .meta .sub {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jcol-prog {
  margin-top: 12px;
}

.jcol-prog .progress-track {
  height: 7px;
}

.jcol-prog-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
}

.jcol-pct {
  font-weight: 800;
  color: var(--mint);
}

.jcol-narr {
  color: var(--muted);
}

.job-bg-note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 24%, transparent);
  border-radius: 10px;
  padding: 8px 11px;
}

/* Leading visual: real result thumbnail, or a branded fallback tile that shows
   the product icon + the order number when there's no image. */
.job-thumb {
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 13px;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--acc, var(--mint));
  background: linear-gradient(145deg, color-mix(in srgb, var(--acc, var(--mint)) 26%, transparent), color-mix(in srgb, var(--card) 92%, transparent));
  border: 1px solid color-mix(in srgb, var(--acc, var(--mint)) 24%, transparent);
}

.job-thumb svg {
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 0;
}

.job-thumb img,
.job-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.job-thumb .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: color-mix(in srgb, var(--base) 28%, transparent);
  z-index: 1;
}

.job-thumb .play svg {
  width: 20px;
  height: 20px;
}

.job-thumb .job-num {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: 2px 0 2px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--text);
  background: color-mix(in srgb, var(--base) 42%, transparent);
}

/* Action footer + subtle controls */
.job-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.job-foot .btn {
  height: 34px;
  padding: 0 13px;
  font-size: 12.5px;
}

.job-foot .cost-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 800;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface-soft);
}

.job-del {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  cursor: pointer;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
}

.job-del:hover {
  color: var(--rose);
  border-color: color-mix(in srgb, var(--rose) 38%, transparent);
  background: color-mix(in srgb, var(--rose) 10%, transparent);
}

.job-toggle {
  margin-inline-start: auto;
}

/* --- Generated files inside a completed job ------------------------------ */
.jcol-files {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jf-media video,
.jf-media img {
  width: 100%;
  border-radius: 14px;
  display: block;
  background: #000;
  max-height: 440px;
}

.jf-media img {
  cursor: zoom-in;
  object-fit: contain;
  background: var(--surface-soft);
}

.jf-audio {
  width: 100%;
}

.jf-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: 13px;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
}

.jf-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--acc, var(--mint));
  background: color-mix(in srgb, var(--acc, var(--mint)) 14%, transparent);
}

.jf-ico svg {
  width: 19px;
  height: 19px;
}

.jf-meta {
  flex: 1;
  min-width: 0;
}

.jf-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jf-sub {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.jf-act {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  text-decoration: none;
}

.jf-act:hover {
  border-color: var(--mint);
  color: var(--mint);
}

/* --- "جديد" ribbon for unread results ------------------------------------ */
.new-ribbon {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  color: var(--accent-ink);
  background: var(--grad-accent);
}

/* --- Studio (album) media grid ------------------------------------------ */
.mk-bar {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 4px 0 16px;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
}

.media-tile {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.media-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--mint) 32%, var(--border-soft));
  box-shadow: var(--shadow-card);
}

.media-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.media-thumb img,
.media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-thumb .ph {
  color: var(--muted);
}

.media-kind-badge {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  background: color-mix(in srgb, var(--base) 55%, transparent);
  backdrop-filter: blur(6px);
}

.media-kind-badge svg {
  width: 14px;
  height: 14px;
}

.media-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
}

.media-foot .mt-name {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-act {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  text-decoration: none;
}

.media-act:hover {
  color: var(--text);
}

.media-act.danger:hover {
  color: var(--rose);
  border-color: color-mix(in srgb, var(--rose) 40%, transparent);
}

/* --- Generic result viewer modal (image zoom / pdf / text) -------------- */
.jb-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: color-mix(in srgb, var(--base) 82%, transparent);
  backdrop-filter: blur(4px);
}

.jb-viewer[hidden] {
  display: none;
}

.jb-vbody {
  position: relative;
  max-width: min(94vw, 900px);
  max-height: 92vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.jb-vbody img {
  max-width: 100%;
  max-height: 88vh;
  margin: auto;
  border-radius: 12px;
  object-fit: contain;
  touch-action: none;
}

.jb-vbody video {
  max-width: 100%;
  max-height: 88vh;
  margin: auto;
  border-radius: 12px;
  background: #000;
}

.jb-vbody iframe {
  width: 100%;
  height: 86vh;
  border: none;
  border-radius: 12px;
  background: #fff;
}

.jb-vbody pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 18px;
  max-height: 86vh;
  overflow: auto;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
}

.jb-vclose {
  position: absolute;
  top: -44px;
  inset-inline-end: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--surface-strong);
  color: var(--text);
  font-size: 20px;
}

/* --- Orders/studio final polish ------------------------------------------ */
body[data-page="jobs"] .page,
body[data-page="studio"] .page {
  max-width: 1180px;
}

body[data-page="jobs"] .job-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  align-items: start;
}

body[data-page="jobs"] .job-list > .date-head,
body[data-page="jobs"] .job-list > .svc-head,
body[data-page="jobs"] .job-list > .empty-state {
  grid-column: 1 / -1;
}

body[data-page="jobs"] .job-card {
  min-width: 0;
  min-height: 96px;
  border-radius: var(--radius-card);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--mint) 3%, transparent)),
    var(--card);
  border: 1px solid var(--border-soft);
}

body[data-page="jobs"] .job-card.jcol {
  height: 100%;
  padding: 14px;
}

body[data-page="jobs"] .jcol-head {
  align-items: flex-start;
}

body[data-page="jobs"] .job-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
}

body[data-page="jobs"] .jcol-head .meta h3,
body[data-page="jobs"] .job-card .meta h3 {
  font-size: 15px;
  font-weight: 850;
}

body[data-page="jobs"] .jcol-head .meta .sub {
  margin-top: 4px;
}

body[data-page="jobs"] .job-card.clickable {
  align-items: center;
  gap: 11px;
  padding: 13px;
}

body[data-page="jobs"] .job-card.clickable .jico {
  border-radius: 12px;
}

body[data-page="jobs"] .status-chip {
  white-space: nowrap;
}

body[data-page="jobs"] .job-bg-note {
  border-radius: 12px;
}

.studio-toolbar {
  justify-content: space-between;
}

.studio-toolbar .mk-bar {
  margin: 0;
  flex: 1;
}

.studio-search {
  flex-basis: 320px;
}

.studio-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 12px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
}

.studio-summary b {
  color: var(--text);
  font-size: 14px;
}

.studio-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

.studio-tile {
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.studio-tile .media-thumb {
  aspect-ratio: 4 / 3;
}

.studio-tile .media-foot {
  min-height: 70px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 3px 10px;
  padding: 11px 12px;
}

.studio-tile .mt-name {
  grid-column: 1;
  font-size: 13px;
  font-weight: 850;
}

.studio-tile .media-foot small {
  grid-column: 1;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-actions {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  gap: 7px;
}

.media-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: color-mix(in srgb, var(--base) 18%, transparent);
}

.audio-ph {
  color: var(--amber) !important;
}

@media (max-width: 860px) {
  .jobs-hero,
  .studio-toolbar,
  .orders-filter-row {
    align-items: stretch;
    flex-direction: column;
  }

  .jobs-hero-main,
  .jobs-hero-actions {
    width: 100%;
  }

  .jobs-hero-actions {
    justify-content: flex-end;
  }

  .orders-insights {
    grid-template-columns: 1fr;
  }

  .orders-filter-card,
  .studio-toolbar {
    padding: 10px;
  }

  .jobs-search-wrap,
  .studio-search {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .tf-bar,
  .sf-bar,
  .mk-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .tf-bar::-webkit-scrollbar,
  .sf-bar::-webkit-scrollbar,
  .mk-bar::-webkit-scrollbar {
    display: none;
  }

  .tf-chip,
  .sf-chip {
    white-space: nowrap;
  }

  body[data-page="jobs"] .jcol-head {
    gap: 10px;
  }

  body[data-page="jobs"] .job-thumb {
    width: 54px;
    height: 54px;
  }

  body[data-page="jobs"] .status-chip {
    align-self: flex-start;
  }

  body[data-page="jobs"] .job-list {
    grid-template-columns: 1fr;
  }

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

  .studio-tile .media-foot {
    min-height: 78px;
    grid-template-columns: 1fr;
  }

  .media-actions {
    grid-column: 1;
    grid-row: 3;
  }
}

/* ====================== ACCOUNT =========================================== */
/* compact, grid-based account screen */
.acct-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.acct-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 800;
  color: var(--accent-ink);
  background: var(--grad-accent);
}

.acct-head .nm {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
}

.acct-head .ph {
  color: var(--muted);
  font-size: 12.5px;
  direction: ltr;
  text-align: start;
}

.acct-logout {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 95, 162, .1);
  border: 1px solid rgba(255, 95, 162, .25);
  color: var(--rose);
}

.acct-logout:hover {
  background: rgba(255, 95, 162, .18);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.stat {
  padding: 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
}

.stat.accent {
  background: linear-gradient(125deg, rgba(63, 242, 184, .16), rgba(73, 211, 255, .07));
  border-color: rgba(63, 242, 184, .3);
}

.stat .v {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.stat .k {
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 6px;
}

.acct-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: start;
}

.acct-grid .card {
  padding: 16px;
}

.acct-grid h3 {
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 800;
}

.acct-grid .hint {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 10px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}

.form-grid .field-label {
  margin: 6px 0 5px;
  font-size: 12px;
}

.form-grid .field {
  height: 42px;
  font-size: 13.5px;
  border-radius: 11px;
}

.txn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border-softer);
  font-size: 12.5px;
}

.txn:last-child {
  border-bottom: none;
}

.txn .amt.pos {
  color: var(--mint);
  font-weight: 800;
}

.txn .amt.neg {
  color: var(--rose);
  font-weight: 800;
}

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

/* ---------- Credit top-up (شحن النقاط) ---------- */
.topup-card {
  margin-bottom: 16px;
}

.topup-head h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 800;
}

.pkg-switcher {
  position: sticky;
  top: 70px;
  z-index: 8;
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  padding: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter: blur(14px);
}

.price-with-sar {
  direction: inherit;
  unicode-bidi: isolate;
  display: inline-flex;
  align-items: baseline;
  gap: .32em;
}

.price-with-sar > bdi {
  direction: ltr;
  unicode-bidi: isolate;
}

.sar-symbol {
  width: .82em;
  height: .92em;
  display: inline-block;
  flex: none;
  color: inherit;
  background: currentColor;
  vertical-align: -.08em;
  -webkit-mask: url("/static/web/saudi-riyal-symbol.0fe0cc8e4d11.svg") center / contain no-repeat;
  mask: url("/static/web/saudi-riyal-symbol.0fe0cc8e4d11.svg") center / contain no-repeat;
}

.pkg-switcher::-webkit-scrollbar {
  display: none;
}

.pkg-switcher button {
  min-width: 105px;
  min-height: 41px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 5px 10px;
  scroll-snap-align: center;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
}

.pkg-switcher button span {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 850;
}

.pkg-switcher button small {
  font-size: 9px;
}

.pkg-switcher button.active {
  color: var(--accent-ink);
  background: var(--grad-accent);
}

.pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.pkg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px 14px;
  border-radius: 16px;
  background: var(--surface-soft, rgba(20, 34, 26, .6));
  border: 1px solid var(--border-soft, rgba(255, 255, 255, .08));
  transition: border-color .15s, transform .14s;
  scroll-margin-top: 132px;
}

.pkg-card:hover {
  transform: translateY(-3px);
  border-color: rgba(63, 242, 184, .45);
}

.pkg-card.featured {
  border-color: rgba(63, 242, 184, .5);
  background: linear-gradient(150deg, rgba(63, 242, 184, .12), rgba(73, 211, 255, .05));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--mint) 22%, transparent);
}

.pkg-bonus.has-bonus {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--mint) 13%, transparent);
}

.pkg-tag {
  position: absolute;
  top: -9px;
  inset-inline-start: 12px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--base);
  background: var(--grad-accent);
  padding: 3px 9px;
  border-radius: 99px;
}

.pkg-name {
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

.pkg-points {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  color: var(--text);
}

.pkg-points small {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.pkg-bonus {
  font-size: 12px;
  font-weight: 800;
  color: var(--mint);
  min-height: 16px;
}

.pkg-desc {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
  flex: 0 0 auto;
}

.pkg-features {
  margin: 8px 0;
  padding: 12px;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, .08));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 76%, transparent);
}

.pkg-features-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border-soft, rgba(255, 255, 255, .08));
}

.pkg-features-head span {
  color: var(--text);
  font-size: 11.5px;
  font-weight: 850;
}

.pkg-features-head b {
  padding: 4px 7px;
  color: var(--mint);
  background: color-mix(in srgb, var(--mint) 10%, transparent);
  border-radius: 999px;
  font-size: 9.5px;
  white-space: nowrap;
}

.pkg-features ul {
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
}

.pkg-features li {
  min-height: 36px;
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  align-items: start;
  gap: 7px;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-soft) 65%, transparent);
}

.pkg-features li:last-child {
  padding-bottom: 1px;
  border-bottom: 0;
}

.pkg-feature-check {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  background: var(--grad-accent);
  border-radius: 7px;
  font-size: 10px;
  font-weight: 950;
}

.pkg-features li b,
.pkg-features li small {
  display: block;
}

.pkg-features li b {
  color: var(--text);
  font-size: 11px;
  line-height: 1.4;
}

.pkg-features li small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.45;
}

.pkg-features li em {
  align-self: center;
  padding: 3px 5px;
  color: var(--mint);
  border: 1px solid color-mix(in srgb, var(--mint) 23%, transparent);
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.pkg-features>p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.6;
}

.pkg-features-more {
  margin-top: 5px;
  padding-top: 7px;
  border-top: 1px solid var(--border-soft);
}

.pkg-features-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--mint);
  font-size: 9.5px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.pkg-features-more summary::-webkit-details-marker {
  display: none;
}

.pkg-features-more summary span {
  padding: 2px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mint) 10%, transparent);
}

.pkg-buy {
  height: 40px;
  width: 100%;
  margin-top: auto;
  font-size: 14px;
}

.custom-topup {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-soft, rgba(255, 255, 255, .1));
}

.custom-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.custom-amt {
  font-size: 20px;
  font-weight: 900;
  color: var(--mint);
  white-space: nowrap;
  padding-bottom: 8px;
}

.custom-amt small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

/* ---------- More / account screen unified cards ---------- */
.more-page .acct-head,
.more-page .card,
.more-page .stat,
.more-page .pkg-card {
  background: var(--card);
  border: 1px solid var(--line);
  color: #fff;
  box-shadow: none;
}

.more-page .acct-head {
  padding: 13px 14px;
  border-radius: 14px;
}

.more-page .acct-avatar,
.more-page .acct-logout,
.more-page .pkg-card,
.more-page .stat,
.more-page .topup-card,
.more-page .acct-grid .card,
.more-page .delete-card {
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.more-page .acct-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #fff;
  background: color-mix(in srgb, #fff 7%, transparent);
  border: 1px solid color-mix(in srgb, #fff 13%, transparent);
}

.more-page .acct-head .nm,
.more-page .stat .v,
.more-page .pkg-points,
.more-page .acct-grid h3,
.more-page .topup-head h3,
.more-page .txn,
.more-page .delete-title {
  color: #fff;
}

.more-page .acct-head .ph,
.more-page .stat .k,
.more-page .acct-grid .hint,
.more-page .pkg-name,
.more-page .pkg-points small,
.more-page .pkg-desc,
.more-page .custom-amt small {
  color: #fff;
}

.more-page .acct-logout {
  background: color-mix(in srgb, #fff 7%, transparent);
  border-color: color-mix(in srgb, #fff 13%, transparent);
  color: #fff;
}

.more-page .acct-logout:hover,
.more-page .pkg-card:hover,
.more-page .stat:hover,
.more-page .topup-card:hover,
.more-page .acct-grid .card:hover {
  border-color: color-mix(in srgb, #fff 24%, var(--line));
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .72);
  transform: translateY(-2px);
}

.more-page .acct-logout:active,
.more-page .pkg-card:active,
.more-page .stat:active,
.more-page .topup-card:active,
.more-page .acct-grid .card:active,
.more-page .btn:active {
  transform: translateY(-6px);
}

.more-page .stat.accent,
.more-page .pkg-card.featured {
  background: var(--card);
  border-color: var(--line);
}

.more-page .pkg-tag,
.more-page .btn {
  color: var(--base);
  background: #fff;
  box-shadow: none;
}

.more-page .btn-ghost {
  color: #fff;
  background: color-mix(in srgb, #fff 7%, transparent);
  border-color: color-mix(in srgb, #fff 13%, transparent);
}

.more-page .pkg-bonus,
.more-page .custom-amt,
.more-page .txn .amt.pos,
.more-page .txn .amt.neg {
  color: #fff;
}

.more-page .delete-card {
  margin-top: 14px;
}

.more-page .delete-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: color-mix(in srgb, #fff 7%, transparent);
  border: 1px solid color-mix(in srgb, #fff 13%, transparent);
}

.more-page .delete-title {
  margin: 0 0 5px;
}

.more-page .danger-btn {
  color: #fff;
  border-color: color-mix(in srgb, #fff 13%, transparent);
}

.more-page .danger-solid {
  color: var(--base);
  background: #fff;
}

html[data-theme="light"] .more-page .acct-head,
html[data-theme="light"] .more-page .card,
html[data-theme="light"] .more-page .stat,
html[data-theme="light"] .more-page .pkg-card {
  background: #fff;
  border-color: #D7E3DE;
  color: #0B4B3A;
  box-shadow: 0 10px 24px rgba(11, 75, 58, .06);
}

html[data-theme="light"] .more-page .acct-head .nm,
html[data-theme="light"] .more-page .acct-head .ph,
html[data-theme="light"] .more-page .stat .v,
html[data-theme="light"] .more-page .stat .k,
html[data-theme="light"] .more-page .pkg-name,
html[data-theme="light"] .more-page .pkg-points,
html[data-theme="light"] .more-page .pkg-points small,
html[data-theme="light"] .more-page .pkg-desc,
html[data-theme="light"] .more-page .acct-grid h3,
html[data-theme="light"] .more-page .acct-grid .hint,
html[data-theme="light"] .more-page .topup-head h3,
html[data-theme="light"] .more-page .txn,
html[data-theme="light"] .more-page .delete-title,
html[data-theme="light"] .more-page .custom-amt,
html[data-theme="light"] .more-page .custom-amt small,
html[data-theme="light"] .more-page .pkg-bonus,
html[data-theme="light"] .more-page .txn .amt.pos,
html[data-theme="light"] .more-page .txn .amt.neg {
  color: #0B4B3A;
}

html[data-theme="light"] .more-page .acct-avatar,
html[data-theme="light"] .more-page .acct-logout,
html[data-theme="light"] .more-page .delete-ico {
  color: #0B4B3A;
  background: #F4F9F7;
  border-color: #D7E3DE;
}

html[data-theme="light"] .more-page .acct-logout:hover,
html[data-theme="light"] .more-page .pkg-card:hover,
html[data-theme="light"] .more-page .stat:hover,
html[data-theme="light"] .more-page .topup-card:hover,
html[data-theme="light"] .more-page .acct-grid .card:hover {
  border-color: #0B4B3A;
  box-shadow: 0 12px 24px rgba(11, 75, 58, .10);
}

html[data-theme="light"] .more-page .pkg-tag,
html[data-theme="light"] .more-page .btn,
html[data-theme="light"] .more-page .danger-solid {
  color: #fff;
  background: #0B4B3A;
}

html[data-theme="light"] .more-page .btn-ghost,
html[data-theme="light"] .more-page .danger-btn {
  color: #0B4B3A;
  background: #F4F9F7;
  border-color: #D7E3DE;
}

/* ---------- Payment checkout page ---------- */
.pay-wrap {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3.5vw, 46px);
  position: relative;
  z-index: 1;
  background:
    radial-gradient(circle at 85% 8%, rgba(45, 212, 164, .15), transparent 30%),
    radial-gradient(circle at 12% 92%, rgba(63, 173, 224, .10), transparent 32%),
    #07110f;
}

.pay-card {
  width: min(1080px, 100%);
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(310px, 370px) minmax(0, 1fr);
  overflow: hidden;
  text-align: start;
  color: #10231d;
  background: #f7fbf9;
  border: 1px solid rgba(187, 211, 202, .52);
  border-radius: 28px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .38);
}

.pay-card-loading {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  min-height: min(650px, calc(100dvh - 32px));
  background: #0b1d18;
  color: #eafbf5;
}

.pay-page-loading,
.pay-load-failed {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  text-align: center;
}

.pay-page-loading span,
.pay-load-failed > span {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #09251d;
  background: #6ee7bd;
  border-radius: 18px;
}

.pay-page-loading b {
  font-size: 15px;
  font-weight: 850;
}

.pay-load-failed {
  grid-column: 1 / -1;
  margin: auto;
  color: #10231d;
}

.pay-load-failed h1 {
  margin: 4px 0 0;
  font-size: 24px;
}

.pay-load-failed p {
  margin: 0 0 8px;
  color: #60726c;
  line-height: 1.8;
}

.pay-aside,
.pay-checkout {
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
}

.pay-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #edfdf7;
  background:
    radial-gradient(circle at 90% 0, rgba(72, 222, 173, .18), transparent 38%),
    linear-gradient(155deg, #0d2921, #071713 72%);
  border-inline-end: 1px solid rgba(131, 211, 184, .16);
}

.pay-aside-top,
.pay-checkout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.pay-brand {
  height: 34px;
  width: auto;
  display: block;
}

.pay-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 0 10px;
  color: #c7f8e7;
  background: rgba(92, 226, 181, .10);
  border: 1px solid rgba(111, 231, 190, .24);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.pay-live-badge svg {
  flex: 0 0 auto;
}

.pay-title-group {
  padding-top: 12px;
}

.pay-kicker {
  margin: 0 0 8px;
  color: #75e5bd;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .02em;
}

.pay-title-group h1 {
  margin: 0;
  color: #f2fff9;
  font-size: clamp(25px, 2.6vw, 32px);
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: 0;
}

.pay-title-group p {
  margin: 10px 0 0;
  color: #abc6bc;
  font-size: 14px;
  line-height: 1.75;
}

.securepay-summary {
  margin-top: 8px;
  padding: 5px 17px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(171, 229, 209, .13);
  border-radius: 18px;
}

.pay-summary-row,
.pay-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
}

.pay-summary-row + .pay-summary-row {
  border-top: 1px solid rgba(171, 229, 209, .10);
}

.securepay-summary span {
  color: #a9c4ba;
  font-size: 12px;
  font-weight: 750;
}

.pay-summary-row b {
  min-width: 0;
  color: #f1fff9;
  font-size: 13px;
  font-weight: 800;
  text-align: end;
  overflow-wrap: anywhere;
}

.pay-summary-total {
  min-height: 66px;
  border-top: 1px solid rgba(117, 229, 189, .20);
}

.pay-summary-total strong {
  color: #89f1cb;
  font-size: 30px;
  font-weight: 900;
  white-space: nowrap;
}

.pay-summary-total strong small {
  color: #b9d7cc;
  font-size: 13px;
  font-weight: 750;
}

.pay-promo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 9px 12px;
  color: #ffe1a6;
  background: rgba(245, 158, 11, .09);
  border: 1px solid rgba(245, 190, 88, .20);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
}

.pay-promo span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.securepay-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.securepay-logos li {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #fff;
  border: 1px solid rgba(214, 226, 221, .9);
}

.securepay-logos img {
  height: 20px;
  width: auto;
  max-width: 78px;
  display: block;
  object-fit: contain;
}

.securepay-logos img[alt="Tamara"] {
  height: 16px;
}

.pay-aside-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: auto 0 0;
  color: #9ebdb2;
  font-size: 11.5px;
  line-height: 1.65;
}

.pay-aside-note svg {
  margin-top: 2px;
  color: #65deb3;
  flex: 0 0 auto;
}

.pay-checkout {
  display: flex;
  flex-direction: column;
  color: #10231d;
  background: #f7fbf9;
}

.pay-checkout-nav {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 25px;
}

.pay-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: #526761;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.pay-back-link svg {
  transform: rotate(180deg);
}

.pay-back-link:hover {
  color: #0c775b;
}

.pay-back-link:disabled {
  opacity: .55;
  cursor: wait;
}

.pay-step {
  padding: 6px 10px;
  color: #0f7258;
  background: #e1f6ee;
  border: 1px solid #c4eadc;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
}

.securepay-secure-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.securepay-secure-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #087557;
  background: #def6ed;
  border: 1px solid #c6ecdd;
  border-radius: 15px;
  flex: 0 0 auto;
}

.securepay-secure-head strong {
  display: block;
  color: #10231d;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
}

.securepay-secure-head small {
  display: block;
  color: #687a74;
  font-size: 12.5px;
  line-height: 1.55;
  margin-top: 4px;
}

.pay-checkout-total {
  min-width: 120px;
  text-align: end;
}

.pay-checkout-total span {
  display: block;
  color: #74847f;
  font-size: 11.5px;
  font-weight: 900;
}

.pay-checkout-total b {
  display: block;
  margin-top: 5px;
  color: #0c7357;
  font-size: 19px;
  font-weight: 900;
  white-space: nowrap;
}

.pay-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  padding: 11px 13px;
  color: #145f4c;
  background: #e8f8f2;
  border: 1px solid #c9ecdf;
  border-radius: 13px;
  font-size: 12.5px;
  line-height: 1.6;
}

.pay-alert svg {
  margin-top: 2px;
  flex: 0 0 auto;
}

.pay-alert span,
.pay-alert b,
.pay-alert small {
  display: block;
}

.pay-alert small {
  margin-top: 1px;
  color: #58746b;
}

.securepay-pixel-box {
  flex: 1 1 auto;
  position: relative;
  margin-top: 20px;
  padding: clamp(18px, 2.4vw, 25px);
  min-height: 430px;
  overflow: visible;
  background: #fff;
  border: 1px solid #dce8e3;
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(21, 75, 58, .07);
}

.securepay-form-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  color: #183d31;
  border-bottom: 1px solid #e6eeeb;
}

.securepay-form-title > span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0f7c5e;
  background: #e6f7f0;
  border-radius: 11px;
}

.securepay-form-title b,
.securepay-form-title small {
  display: block;
}

.securepay-form-title b {
  font-size: 14px;
  font-weight: 850;
}

.securepay-form-title small {
  margin-top: 3px;
  color: #6e7f79;
  font-size: 11.5px;
}

.securepay-elements {
  position: relative;
  z-index: 1;
  min-height: 330px;
  direction: ltr;
  isolation: isolate;
}

.securepay-elements input,
.securepay-elements iframe,
.securepay-elements button {
  pointer-events: auto;
}

.securepay-loading {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #667a73;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
}

.securepay-loading b {
  color: #193c31;
  font-size: 14px;
  font-weight: 850;
}

.securepay-loading small {
  color: #6d7f79;
}

.pay-loading-mark,
.pay-state-icon {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0c785b;
  background: #e2f7ef;
  border: 1px solid #c6ecdd;
  border-radius: 16px;
}

.pay-loading-mark.danger {
  color: #a52e49;
  background: #fff0f3;
  border-color: #f6d1da;
}

.securepay-input-status {
  margin: 12px 0 0;
  color: #6b7d77;
  direction: rtl;
  font-size: 12px;
  line-height: 1.6;
}

.securepay-input-status.valid {
  color: #0b7c5b;
  font-weight: 750;
}

.pay-pending-panel {
  flex: 1 1 auto;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: 20px;
  padding: 34px;
  text-align: center;
  background: #fff;
  border: 1px solid #dce8e3;
  border-radius: 20px;
}

.pay-pending-panel h2 {
  margin: 5px 0 0;
  color: #16372d;
  font-size: 20px;
}

.pay-pending-panel p {
  max-width: 430px;
  margin: 0 0 6px;
  color: #687a74;
  font-size: 13px;
  line-height: 1.8;
}

.pay-fields {
  margin: 22px 0 0;
  display: grid;
  gap: 12px;
  text-align: start;
}

.pay-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, .55fr);
  gap: 12px;
}

.pay-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 18px;
}

.pay-actions .btn {
  min-height: 45px;
  border-radius: 13px;
}

.pay-full-link,
.securepay-full-link {
  min-height: 45px;
}

.pay-checkout .btn-ghost {
  color: #315249;
  background: #fff;
  border-color: #d4e2dd;
}

.pay-checkout .btn-ghost:hover {
  color: #0a7659;
  border-color: #9fd4c1;
}

.pay-note {
  margin: 14px 0 0;
  color: #71817c;
  font-size: 11.5px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .pay-wrap {
    align-items: start;
    padding: 12px;
  }

  .pay-card {
    min-height: 0;
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .pay-aside {
    border-inline-end: 0;
    border-bottom: 1px solid rgba(148, 209, 188, .16);
  }

  .pay-title-group {
    padding-top: 8px;
  }

  .pay-title-group h1 {
    font-size: 25px;
  }

  .securepay-summary {
    margin-top: 4px;
  }

  .pay-aside-note {
    margin-top: 4px;
  }

  .pay-checkout-nav {
    margin-bottom: 20px;
  }

  .securepay-pixel-box {
    min-height: 410px;
  }

  .securepay-elements {
    min-height: 320px;
  }
}

@media (max-width: 540px) {
  .pay-aside,
  .pay-checkout {
    padding: 20px 17px;
  }

  .pay-aside-top {
    align-items: center;
  }

  .securepay-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pay-checkout-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .pay-checkout-total {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: start;
  }

  .pay-checkout-total b {
    margin-top: 0;
  }

  .securepay-pixel-box {
    margin-inline: -4px;
    padding: 16px 13px;
    border-radius: 17px;
  }

  .securepay-form-title {
    margin-bottom: 15px;
  }

  .pay-row,
  .pay-actions {
    grid-template-columns: 1fr;
  }

  .pay-actions {
    flex-direction: column;
  }

  .pay-actions .btn,
  .pay-actions .securepay-full-link {
    width: 100%;
  }

  .pay-cancel-button {
    order: 2;
  }
}

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 50px 20px;
}

.empty-state .big-ico {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: .8;
}

/* ====================== LIGHT THEME READABILITY =========================== */
html[data-theme="light"] body {
  background: var(--base);
}

html[data-theme="light"] .bg-canvas {
  opacity: .24 !important;
}

html[data-theme="light"] .chat-screen .chat-bg-canvas {
  opacity: .42 !important;
}

html[data-theme="light"] .chat-bg-over {
  background:
    radial-gradient(72% 54% at 50% 20%, rgba(7, 130, 98, .10), transparent 62%),
    linear-gradient(to bottom, rgba(246, 250, 255, .32), rgba(246, 250, 255, .78) 62%, var(--base));
}

html[data-theme="light"] .bg-over {
  background: linear-gradient(to bottom, rgba(246, 250, 255, .44), rgba(246, 250, 255, .92));
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .topbar,
html[data-theme="light"] .bottom-nav {
  box-shadow: 0 10px 32px rgba(25, 41, 61, .08);
}

html[data-theme="light"] .nav-item {
  color: #334155;
}

html[data-theme="light"] .nav-item.active {
  color: #07111F;
  background: linear-gradient(90deg, rgba(34, 211, 165, .23), rgba(49, 185, 230, .16));
  border-color: rgba(7, 130, 98, .28);
}

html[data-theme="light"] .points-chip {
  color: #0B3B31;
  background: rgba(7, 130, 98, .10);
  border-color: rgba(7, 130, 98, .24);
}

html[data-theme="light"] .theme-toggle {
  color: #0C1A12;
  background: rgba(255, 255, 255, .70);
}

html[data-theme="light"] .field,
html[data-theme="light"] .composer textarea,
html[data-theme="light"] select,
html[data-theme="light"] input,
html[data-theme="light"] textarea {
  color: var(--text);
}

html[data-theme="light"] .field::placeholder,
html[data-theme="light"] .composer textarea::placeholder {
  color: #65748B;
  opacity: 1;
}

html[data-theme="light"] .card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .job-card,
html[data-theme="light"] .stat,
html[data-theme="light"] .detail-panel,
html[data-theme="light"] .detail-note,
html[data-theme="light"] .action-pill,
html[data-theme="light"] .history-item,
html[data-theme="light"] .login-card {
  box-shadow: var(--shadow-card);
}

html[data-theme="light"] .dock {
  background: linear-gradient(to bottom, rgba(246, 250, 255, 0), rgba(246, 250, 255, .96) 42%, var(--base));
}

html[data-theme="light"] .composer,
html[data-theme="light"] .product-page .field,
html[data-theme="light"] .uploader {
  border-color: #C5D3E3;
}

html[data-theme="light"] .product-card .poster::after {
  background: linear-gradient(to bottom, rgba(7, 10, 18, .02), rgba(7, 10, 18, .38));
}

html[data-theme="light"] .detail-hero {
  box-shadow: 0 18px 42px rgba(25, 41, 61, .16);
}

html[data-theme="light"] .detail-hero::after {
  background:
    linear-gradient(to top, rgba(7, 10, 18, .86) 0%, rgba(7, 10, 18, .34) 50%, rgba(7, 10, 18, .08) 100%),
    linear-gradient(100deg, rgba(34, 211, 165, .14), rgba(192, 38, 98, .06));
}

html[data-theme="light"] .detail-note {
  color: #3F5447;
}

html[data-theme="light"] .progress-track {
  background: rgba(63, 84, 71, .14);
}

html[data-theme="light"] .status-pending,
html[data-theme="light"] .status-processing {
  background: rgba(161, 92, 4, .13);
}

html[data-theme="light"] .status-completed {
  background: rgba(7, 130, 98, .13);
}

html[data-theme="light"] .status-failed,
html[data-theme="light"] .status-cancelled {
  background: rgba(192, 38, 98, .12);
}

html[data-theme="light"] .login-tag,
html[data-theme="light"] .login-foot,
html[data-theme="light"] .page-sub,
html[data-theme="light"] .muted,
html[data-theme="light"] .product-card p,
html[data-theme="light"] .history-meta,
html[data-theme="light"] .job-card .meta .sub,
html[data-theme="light"] .acct-grid .hint,
html[data-theme="light"] .stat .k {
  color: var(--muted);
}

/* ====================== INTERIOR APP REDESIGN ============================= */
.app-shell {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mint) 5%, transparent), transparent 34%),
    linear-gradient(215deg, color-mix(in srgb, var(--violet) 5%, transparent), transparent 32%),
    var(--shell-bg);
}

.sidebar {
  padding: 18px 14px;
  gap: 10px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border-inline-start: 1px solid var(--border-soft);
}

.sidebar-brand-row {
  justify-content: flex-start;
  padding: 0 8px 6px;
  min-height: 42px;
}

.sidebar .brand img {
  height: 30px;
}

.sidebar-controls {
  grid-template-columns: 40px 40px minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  margin: 0 0 6px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface-soft);
}

.sidebar-controls .points-chip {
  grid-column: 3;
}

.side-nav {
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 0;
}

.nav-section-label {
  margin: 12px 10px 5px;
  color: var(--muted-soft);
  font-size: 10.5px;
  font-weight: 900;
}

.nav-item {
  min-height: 40px;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 13px;
  gap: 10px;
}

.nav-item .ico {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--surface-soft);
}

.nav-item.active {
  color: var(--text);
  background: color-mix(in srgb, var(--mint) 12%, var(--surface-soft));
  border-color: color-mix(in srgb, var(--mint) 34%, transparent);
}

.nav-item.active .ico {
  color: var(--accent-ink);
  background: var(--grad-accent);
}

.content {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--base) 20%, transparent), transparent 240px);
}

.page {
  max-width: var(--content-max);
  padding: 28px clamp(18px, 3vw, 40px) 76px;
}

/* Single-column workspace pages read as a centered column, not a stretched
   dashboard — closer to the app's phone frame while staying desktop-comfortable. */
body[data-page="secretary"] .page,
body[data-page="cfo"] .page,
body[data-page="calling"] .page,
body[data-page="accountant"] .page {
  max-width: 920px;
}

/* Desktop agent workspaces keep a small, balanced gutter on both sides. */
@media (min-width: 861px) {
  body[data-page="travel"] .page.travel-page,
  body[data-page="research"] .page.research-page,
  body[data-page="secretary"] .page.secretary-page,
  body[data-page="cfo"] .page.cfo-page,
  body[data-page="invoices"] .page.invoice-page,
  body[data-page="hr"] .page.hr-page,
  body[data-page="accountant"] .page.accountant-page,
  body[data-page="accounting"] .page.accounting-page,
  body[data-page="products"] .page.products-page,
  body[data-page="jobs"] .page,
  body[data-page="studio"] .page.studio-page,
  body[data-page="notifications"] .page,
  body[data-page="account"] .page.more-page {
    box-sizing: border-box;
    width: calc(100% - clamp(48px, 4vw, 80px)) !important;
    max-width: 1760px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  body[data-page="account"] .page.more-page {
    padding-bottom: 24px;
  }

  body[data-page="jobs"] .page,
  body[data-page="studio"] .page.studio-page,
  body[data-page="notifications"] .page {
    padding-bottom: 24px;
  }
}

.page>.eyebrow:first-child,
.agents-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--mint) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--mint) 22%, transparent);
}

.page-title {
  max-width: 860px;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: 0;
}

.page-sub {
  max-width: 760px;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.card,
.product-card,
.job-card,
.stat,
.pkg-card,
.detail-panel,
.detail-note,
.agent-card,
.cg-card,
.ra-composer,
.ra-detail {
  border-radius: var(--radius-card);
  background: var(--card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}

.product-card:hover,
.job-card:hover,
.pkg-card:hover,
.agent-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: color-mix(in srgb, var(--mint) 32%, var(--border-soft));
}

.card {
  padding: 18px;
}

.btn,
.btn-ghost,
.field {
  border-radius: var(--radius-field);
}

.cat-tab,
.points-chip,
.theme-toggle,
.lang-toggle {
  border-radius: var(--radius-pill);
}

.field {
  background: var(--field-bg-strong);
  border-color: var(--border-soft);
}

/* One filter method for every screen: a single-row, horizontally scrollable
   pill bar (no wrapping). Same on phone and desktop; the active pill is scrolled
   into view by JS. Scrollbar hidden for a clean look. */
.cat-tabs {
  gap: 8px;
  margin: 0 0 18px;
  padding: 0 0 4px;
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 8px;
}
.cat-tabs::-webkit-scrollbar { display: none; }

.cat-tab {
  min-height: 36px;
  padding: 0 15px;
  white-space: nowrap;
  background: var(--surface-soft);
}

.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.product-card .poster {
  height: 164px;
}

.product-card .body {
  padding: 16px;
}

.product-card h3 {
  font-size: 16.5px;
}

body[data-page="products"] .products-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 34px;
}

body[data-page="products"] .prod-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--surface-strong) 96%, transparent));
  box-shadow: var(--shadow-card);
}

body[data-page="products"] .prod-hero-ico,
body[data-page="products"] .prod-hero-refresh,
body[data-page="products"] .pc-arrow {
  display: inline-grid;
  place-items: center;
}

body[data-page="products"] .prod-hero-ico {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: var(--accent-ink);
  background: var(--grad-accent);
  box-shadow: 0 12px 26px var(--accent-shadow);
}

body[data-page="products"] .prod-hero-txt {
  min-width: 0;
}

body[data-page="products"] .prod-hero .page-title {
  margin: 0;
  font-size: clamp(21px, 2vw, 27px);
}

body[data-page="products"] .prod-hero .page-sub {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

body[data-page="products"] .prod-hero-count {
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
}

body[data-page="products"] .prod-hero-refresh {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
}

body[data-page="products"] .prod-hero-refresh:hover {
  background: var(--surface-hover);
  border-color: color-mix(in srgb, var(--mint) 28%, var(--border-soft));
}

body[data-page="products"] .prod-tools {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

body[data-page="products"] .prod-search {
  min-width: 0;
  height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border-radius: var(--radius-field);
  color: var(--muted);
  background: var(--field-bg-strong);
  border: 1px solid var(--border-soft);
}

body[data-page="products"] .prod-search:focus-within {
  color: var(--text);
  border-color: color-mix(in srgb, var(--mint) 40%, var(--border-soft));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 10%, transparent);
}

body[data-page="products"] .prod-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

body[data-page="products"] .prod-search-clear {
  width: 26px;
  height: 26px;
  display: none;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  border: 0;
  font-size: 20px;
  line-height: 1;
}

body[data-page="products"] .prod-search.has-value .prod-search-clear {
  display: grid;
}

body[data-page="products"] .prod-search-clear:hover {
  color: var(--text);
  background: var(--surface-hover);
}

body[data-page="products"] .cat-tabs {
  margin: 0;
  padding-bottom: 2px;
}

body[data-page="products"] .cat-tab {
  height: 36px;
  border-radius: var(--radius-pill);
}

body[data-page="products"] .product-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

body[data-page="products"] .product-card {
  min-height: 286px;
  overflow: hidden;
}

body[data-page="products"] .product-card .poster {
  height: auto;
  aspect-ratio: 1.58 / 1;
  background-color: var(--surface-strong);
}

body[data-page="products"] .product-card .poster.fallback {
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc, var(--mint)) 26%, transparent), color-mix(in srgb, var(--base) 96%, transparent));
}

body[data-page="products"] .product-card .poster.fallback .pico {
  color: var(--acc, var(--mint));
}

body[data-page="products"] .product-card .body {
  min-height: 122px;
}

body[data-page="products"] .product-card h3 {
  display: -webkit-box;
  min-height: 2.5em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-page="products"] .product-card .pc-tag {
  display: -webkit-box;
  min-height: 3.1em;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-page="products"] .pc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

body[data-page="products"] .pc-chip {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  font-size: 11px;
  font-weight: 800;
}

body[data-page="products"] .pc-arrow {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--text);
  background: color-mix(in srgb, var(--acc, var(--mint)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc, var(--mint)) 22%, transparent);
}

body[data-page="products"] .pc-lock {
  position: absolute;
  top: 9px;
  inset-inline-end: 9px;
  z-index: 2;
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 8px;
  color: var(--text);
  background: rgba(7, 10, 18, .56);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 11px;
  font-weight: 900;
}

body[data-page="products"] .pc-locked .poster {
  filter: saturate(.72);
}

body[data-page="products"] .prod-state {
  grid-column: 1 / -1;
  min-height: 230px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
}

body[data-page="products"] .pc-skel {
  pointer-events: none;
  padding: 0;
}

body[data-page="products"] .sk-block {
  display: block;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--surface-soft), var(--surface-hover), var(--surface-soft));
  background-size: 220% 100%;
  animation: shimmer 1.2s linear infinite;
}

body[data-page="products"] .sk-poster {
  border-radius: 0;
  height: auto;
  aspect-ratio: 1.58 / 1;
}

body[data-page="products"] .sk-line {
  height: 14px;
  margin: 14px 14px 0;
}

body[data-page="products"] .sk-line.short {
  width: 62%;
}

body[data-page="products"] .sk-gap {
  height: 16px;
}

@keyframes shimmer {
  to {
    background-position: -220% 0;
  }
}

@media (max-width: 760px) {
  body[data-page="products"] .products-page {
    gap: 12px;
    padding-inline: 12px;
  }

  body[data-page="products"] .prod-hero {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 13px;
    gap: 11px;
  }

  body[data-page="products"] .prod-hero-count {
    display: none;
  }

  body[data-page="products"] .prod-hero-ico {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  body[data-page="products"] .prod-hero .page-title {
    font-size: 18px;
  }

  body[data-page="products"] .prod-hero .page-sub {
    font-size: 12px;
    line-height: 1.45;
  }

  body[data-page="products"] .prod-tools {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-page="products"] .prod-search {
    height: 42px;
  }

  body[data-page="products"] .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-page="products"] .product-card {
    min-height: 218px;
  }

  body[data-page="products"] .product-card .body {
    min-height: 106px;
  }

  body[data-page="products"] .pc-foot {
    padding-top: 6px;
  }

  body[data-page="products"] .pc-chip {
    min-height: 22px;
    padding-inline: 7px;
    font-size: 10px;
  }

  body[data-page="products"] .pc-arrow {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 360px) {
  body[data-page="products"] .product-grid {
    grid-template-columns: 1fr;
  }
}

.job-list {
  gap: 14px;
}

.job-card {
  align-items: flex-start;
  padding: 18px;
}

.job-card .jico {
  border-radius: 8px;
  background: color-mix(in srgb, var(--violet) 16%, transparent);
}

.more-page {
  max-width: 1120px;
}

.more-page .acct-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 14px;
  padding: 18px;
  margin-bottom: 18px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mint) 11%, transparent), transparent 52%),
    color-mix(in srgb, var(--card) 84%, transparent);
  border: 1px solid var(--border-soft);
}

.more-page .acct-avatar {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  color: var(--accent-ink);
  background: var(--grad-accent);
  border: 0;
}

.more-page .acct-head .nm,
.more-page .stat .v,
.more-page .pkg-points,
.more-page .acct-grid h3,
.more-page .topup-head h3,
.more-page .delete-title {
  color: var(--text);
}

.more-page .acct-head .ph,
.more-page .stat .k,
.more-page .acct-grid .hint,
.more-page .pkg-name,
.more-page .pkg-points small,
.more-page .pkg-desc,
.more-page .custom-amt small {
  color: var(--muted);
}

.more-page .acct-logout {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--rose) 10%, transparent);
  border-color: color-mix(in srgb, var(--rose) 24%, transparent);
  color: var(--rose);
}

.stat-grid {
  gap: 14px;
  margin-bottom: 16px;
}

.more-page .stat {
  min-height: 98px;
  padding: 18px;
}

.more-page .stat.accent {
  background: linear-gradient(135deg, color-mix(in srgb, var(--mint) 14%, transparent), color-mix(in srgb, var(--cyan) 8%, transparent));
  border-color: color-mix(in srgb, var(--mint) 28%, transparent);
}

.account-tabs {
  display: flex;
  gap: 8px;
  margin: 6px 0 18px;
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface-soft);
  overflow-x: auto;
  scrollbar-width: none;
}

.account-tabs::-webkit-scrollbar {
  display: none;
}

.account-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--muted);
  background: transparent;
  font-weight: 900;
  font-size: 13px;
}

.account-tabs button.active {
  color: var(--accent-ink);
  background: var(--grad-accent);
}

.acct-panel {
  display: none;
}

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

.more-page .topup-card,
.more-page .acct-panel>.card,
.more-page .delete-card {
  background: color-mix(in srgb, var(--card) 84%, transparent);
  border-color: var(--border-soft);
}

.more-page .topup-head h3,
.more-page .acct-panel h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.more-page .hint {
  color: var(--muted);
  font-size: 13px;
}

.pkg-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 11px;
}

.more-page .pkg-card {
  min-height: 0;
  padding: 14px;
  background: var(--surface-soft);
  border-color: var(--border-soft);
}

.more-page .pkg-card.featured {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--mint) 13%, transparent), color-mix(in srgb, var(--violet) 7%, transparent)),
    var(--surface-soft);
  border-color: color-mix(in srgb, var(--mint) 34%, transparent);
}

.more-page .pkg-tag,
.more-page .btn {
  color: var(--accent-ink);
  background: var(--grad-accent);
}

.more-page .btn-ghost {
  color: var(--text);
  background: var(--surface-soft);
  border-color: var(--border-soft);
}

.more-page .pkg-bonus,
.more-page .custom-amt,
.more-page .txn .amt.pos {
  color: var(--mint);
}

.more-page .txn .amt.neg {
  color: var(--rose);
}

.more-page .delete-card {
  margin-top: 0;
}

.more-page .delete-ico {
  color: var(--rose);
  background: color-mix(in srgb, var(--rose) 10%, transparent);
  border-color: color-mix(in srgb, var(--rose) 25%, transparent);
  border-radius: 8px;
}

.more-page .danger-solid {
  color: #fff;
  background: linear-gradient(135deg, var(--rose), color-mix(in srgb, var(--orange) 72%, var(--rose)));
}

html[data-theme="light"] .app-shell {
  background:
    linear-gradient(135deg, rgba(7, 130, 98, .06), transparent 34%),
    linear-gradient(215deg, rgba(110, 86, 207, .06), transparent 32%),
    var(--shell-bg);
}

html[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(63, 84, 71, .14);
}

html[data-theme="light"] .card,
html[data-theme="light"] .product-card,
html[data-theme="light"] .job-card,
html[data-theme="light"] .stat,
html[data-theme="light"] .pkg-card,
html[data-theme="light"] .detail-panel,
html[data-theme="light"] .detail-note,
html[data-theme="light"] .agent-card {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(63, 84, 71, .16);
  box-shadow: 0 14px 34px rgba(25, 41, 61, .08);
}

html[data-theme="light"] .more-page .acct-head,
html[data-theme="light"] .more-page .topup-card,
html[data-theme="light"] .more-page .acct-panel>.card,
html[data-theme="light"] .more-page .delete-card,
html[data-theme="light"] .more-page .pkg-card,
html[data-theme="light"] .more-page .stat {
  background: rgba(255, 255, 255, .94);
  border-color: rgba(63, 84, 71, .16);
}

html[data-theme="light"] .more-page .acct-head .nm,
html[data-theme="light"] .more-page .stat .v,
html[data-theme="light"] .more-page .pkg-points,
html[data-theme="light"] .more-page .acct-panel h3,
html[data-theme="light"] .more-page .delete-title {
  color: var(--text);
}

html[data-theme="light"] .more-page .acct-head .ph,
html[data-theme="light"] .more-page .stat .k,
html[data-theme="light"] .more-page .hint,
html[data-theme="light"] .more-page .pkg-name,
html[data-theme="light"] .more-page .pkg-desc,
html[data-theme="light"] .more-page .pkg-points small {
  color: var(--muted);
}

html[data-theme="light"] .more-page .btn,
html[data-theme="light"] .more-page .pkg-tag {
  color: var(--accent-ink);
  background: var(--grad-accent);
}

/* ====================== NAV SHELL DIRECTION + POLISH ===================== */
@media (min-width: 861px) {
  html[dir="rtl"] .app-shell {
    direction: ltr;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  }

  html[dir="rtl"] .sidebar {
    grid-column: 2;
    direction: rtl;
    border-inline-start: 1px solid var(--border-soft);
    border-inline-end: 0;
  }

  html[dir="rtl"] .content {
    grid-column: 1;
    direction: rtl;
  }

  html[dir="ltr"] .app-shell {
    direction: ltr;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }

  html[dir="ltr"] .sidebar {
    grid-column: 1;
    direction: ltr;
    border-inline-end: 1px solid var(--border-soft);
    border-inline-start: 0;
  }

  html[dir="ltr"] .content {
    grid-column: 2;
    direction: ltr;
  }
}

.sidebar {
  width: var(--sidebar-w);
}

.side-nav {
  gap: 6px;
}

.nav-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 8px 6px;
  letter-spacing: 0;
}

.nav-section-label::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mint) 55%, transparent);
}

.nav-item {
  position: relative;
  min-height: 42px;
  border-radius: 12px;
  font-weight: 800;
}

.nav-item .ico {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.nav-item:hover .ico,
.nav-group.open > .nav-grp-toggle .ico,
.nav-item.active .ico {
  color: var(--accent-ink);
  background: var(--grad-accent);
}

.nav-item:hover {
  background: color-mix(in srgb, var(--mint) 7%, var(--surface-soft));
  border-color: color-mix(in srgb, var(--mint) 18%, transparent);
}

.nav-item.active,
.nav-group.open > .nav-grp-toggle {
  color: var(--text);
  background: color-mix(in srgb, var(--mint) 11%, var(--surface-soft));
  border-color: color-mix(in srgb, var(--mint) 30%, transparent);
}

.nav-grp-toggle {
  min-height: 44px;
}

.nav-grp-toggle .nav-chev {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  margin-inline-start: auto;
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  transform: rotate(0deg);
}

html[dir="rtl"] .nav-grp-toggle .nav-chev {
  transform: rotate(180deg);
}

.nav-group.open > .nav-grp-toggle .nav-chev,
html[dir="rtl"] .nav-group.open > .nav-grp-toggle .nav-chev {
  transform: rotate(90deg);
}

html[dir="rtl"] .more-chev {
  transform: rotate(180deg);
}

.nav-sub {
  position: relative;
  gap: 4px;
  margin: 6px 8px 8px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 75%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}

.nav-sub::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 9px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mint) 28%, transparent);
}

.nav-subitem {
  position: relative;
  min-height: 34px;
  padding: 7px 12px;
  padding-inline-start: 20px;
  border-radius: 10px;
  font-size: 12.3px;
  font-weight: 800;
}

.nav-subitem::before {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--muted) 45%, transparent);
}

.nav-subitem:hover,
.nav-subitem.active {
  color: var(--text);
  background: color-mix(in srgb, var(--mint) 10%, transparent);
  border-color: color-mix(in srgb, var(--mint) 26%, transparent);
}

.nav-subitem.active::before {
  background: var(--mint);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 13%, transparent);
}

.chat-nav-sub {
  position: relative;
  padding: 0;
  border-inline-start: 0;
}

.chat-nav-sub::before {
  display: none;
}

.chat-nav-sub .chat-history {
  max-height: min(42vh, 350px);
  overflow: hidden;
}

.chat-nav-sub .history-list {
  max-height: 230px;
  overflow-y: auto;
}

/* ====================== RESPONSIVE ======================================== */
@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
    min-height: 100dvh;
  }

  /* The sidebar becomes a slide-in drawer (nav + chat history) on mobile. */
  .sidebar {
    display: flex;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(86vw, 330px);
    max-width: 330px;
    z-index: 130;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.2, .8, .2, 1);
    box-shadow: -14px 0 44px rgba(0, 0, 0, .42);
  }

  html[dir="ltr"] .sidebar {
    transform: translateX(-100%);
  }

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

  .sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 129;
    background: rgba(2, 5, 11, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s;
  }

  .sidebar-scrim.open {
    opacity: 1;
    pointer-events: auto;
  }

  .content {
    grid-column: 1;
  }

  body[data-page="home"] .content {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .topbar {
    display: flex;
    flex: 0 0 var(--topbar-h);
    min-height: var(--topbar-h);
    height: var(--topbar-h);
    gap: 8px;
    padding: 9px 12px;
    border-bottom-color: var(--border-soft);
  }

  .bottom-nav {
    display: block;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    border-top-color: var(--border-soft);
  }

  .bottom-nav .row {
    height: var(--bottom-nav-h);
  }

  .chat-screen {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding-bottom: 0;
  }

  .chat-toolbar {
    --chat-toolbar-h: 54px;
    padding: 8px 12px;
  }

  .chat-toolbar-mark {
    width: 30px;
    height: 30px;
  }

  .chat-toolbar-mark img {
    width: 24px;
    height: 24px;
  }

  .chat-toolbar-kicker,
  .chat-status {
    display: none;
  }

  .chat-toolbar-title strong {
    font-size: 14px;
  }

  .chat-workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .chat-main {
    flex: 1;
    min-height: 0;
  }

  .chat-scroll {
    min-height: 0;
    overscroll-behavior: contain;
    scroll-padding-bottom: calc(var(--bottom-nav-h) + 96px);
    -webkit-overflow-scrolling: touch;
  }

  .chat-inner {
    min-height: 100%;
    padding: 16px 14px 8px;
  }

  .chat-empty {
    min-height: 100%;
    height: auto;
    padding: 38px 0 18px;
  }

  .ce-hero {
    width: min(100%, 460px);
  }

  .ce-brand {
    padding: 0;
    margin-bottom: 14px;
  }

  .ce-logo {
    height: 112px;
  }

  .ce-team {
    width: min(100%, 430px);
    margin-top: -2px;
  }

  .ce-team-title {
    margin-bottom: 10px;
    font-size: 19px;
  }

  .ce-title {
    font-size: clamp(22px, 7vw, 30px);
  }

  .text-size-btn {
    display: none;
  }

  /* Inside the drawer the history gets full room. */
  .chat-history {
    flex: 1 1 auto;
    border-inline-start: none;
    padding: 10px 12px;
    gap: 8px;
    min-height: 0;
  }

  .history-list {
    flex: 1 1 auto;
    max-height: none;
    overflow-y: auto;
  }

  .chat-nav-sub .chat-history {
    flex: 0 1 auto;
    padding: 6px 3px 2px;
    min-height: 0;
    max-height: 40vh;
  }

  .chat-nav-sub .history-list {
    flex: 0 1 auto;
    max-height: 210px;
  }

  .page {
    padding: 22px 16px calc(var(--bottom-nav-h) + 72px);
  }

  .page-title {
    max-width: 100%;
    font-size: clamp(25px, 8vw, 30px);
    line-height: 1.16;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  .page-sub {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 18px;
  }

  .cat-tabs {
    width: 100%;
    flex-wrap: nowrap;
    scrollbar-width: none;
    scroll-padding-inline: 16px;
    padding-inline: 2px;
  }

  .cat-tabs::-webkit-scrollbar {
    display: none;
  }

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

  body[data-page="products"] .product-card {
    border-radius: 13px;
  }

  body[data-page="products"] .product-card .poster {
    height: auto;
    aspect-ratio: 1.08 / .78;
  }

  body[data-page="products"] .product-card .body {
    padding: 9px 10px 10px;
    gap: 3px;
  }

  body[data-page="products"] .product-card h3 {
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 850;
  }

  body[data-page="products"] .product-card p {
    font-size: 10.5px !important;
    line-height: 1.38 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body[data-page="products"] .product-card .cost-badge {
    top: 7px;
    inset-inline-start: 7px;
    height: 22px;
    padding: 0 7px;
    font-size: 10px;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .custom-row {
    flex-direction: column;
    align-items: stretch;
  }

  .custom-amt {
    padding-bottom: 0;
  }

  .topbar {
    min-height: var(--topbar-h);
  }

  .topbar .brand {
    flex: 0 1 132px;
    min-width: 0;
    display: inline-flex;
    justify-content: flex-end;
  }

  .topbar .brand img {
    height: 25px;
    max-width: 132px;
    object-fit: contain;
  }

  .topbar .icon-btn,
  .topbar .theme-toggle.compact {
    width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 13px;
    flex: 0 0 auto;
  }

  .topbar .lang-toggle {
    min-width: 36px;
    height: 36px;
    border-radius: 13px;
  }

  .topbar .points-chip {
    flex: 0 0 auto;
    height: 36px !important;
    padding: 0 10px !important;
  }

  .dock-inner {
    max-width: 100%;
    padding: 6px 12px calc(var(--bottom-nav-h) + max(12px, env(safe-area-inset-bottom)));
  }

  .dock {
    flex: 0 0 auto;
    border-top: 1px solid var(--border-soft);
  }

  .action-rail {
    gap: 8px;
    padding: 5px 0 8px;
    scroll-padding-inline: 12px;
    justify-content: flex-start;
  }

  .action-pill {
    min-width: 104px;
    min-height: 44px;
    padding: 7px 9px;
    border-radius: 13px;
    font-size: 11px;
    line-height: 1.2;
  }

  .action-pill .ico {
    width: 30px;
    height: 30px;
  }

  .composer {
    gap: 6px;
    margin-top: 4px;
    padding: 6px;
    border-radius: 20px;
  }

  .attach-btn,
  .mic-btn,
  .send-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .composer textarea {
    min-height: 42px;
    max-height: 112px;
    padding: 8px 2px;
    font-size: 16px;
    line-height: 1.45;
  }

  .bottom-nav a {
    gap: 3px;
    font-size: 11.5px;
  }

  .bottom-nav a .ico {
    width: 32px;
    height: 27px;
  }
}

@media (max-width: 420px) {
  :root {
    --topbar-h: 58px;
    --bottom-nav-h: 64px;
  }

  .topbar {
    gap: 6px;
    padding-inline: 10px;
  }

  .topbar .brand {
    flex-basis: 112px;
  }

  .topbar .brand img {
    height: 22px;
    max-width: 112px;
  }

  .topbar .icon-btn,
  .topbar .theme-toggle.compact {
    width: 34px;
    height: 34px;
    min-height: 34px;
    border-radius: 12px;
  }

  .topbar .lang-toggle {
    min-width: 34px;
    height: 34px;
    padding: 0 7px;
    border-radius: 12px;
  }

  .topbar .points-chip {
    height: 34px !important;
    padding: 0 9px !important;
  }

  .topbar .plan-chip {
    max-width: 104px;
  }

  .chat-inner {
    padding: 10px 12px 4px;
  }

  .ce-brand {
    padding: 9px 16px;
    margin-bottom: 8px;
  }

  .ce-logo {
    height: 96px;
  }

  .ce-team {
    width: min(106%, 410px);
    margin-bottom: 7px;
  }

  .ce-team-title {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .action-pill {
    width: 108px;
  }

  body:not([data-page="home"]) .page h1,
  body:not([data-page="home"]) .page-title,
  body:not([data-page="home"]) .agents-hero h1,
  body:not([data-page="home"]) .travel-title {
    font-size: clamp(21px, 6.2vw, 25px) !important;
    line-height: 1.16 !important;
  }

  body:not([data-page="home"]) .page h2,
  body:not([data-page="home"]) .page h3,
  body:not([data-page="home"]) .product-card h3,
  body:not([data-page="home"]) .job-card .meta h3,
  body:not([data-page="home"]) .agent-card h3,
  body:not([data-page="home"]) .h-coach-title,
  body:not([data-page="home"]) .cfo-card h3,
  body:not([data-page="home"]) .acx-h,
  body:not([data-page="home"]) .travel-panel h2,
  body:not([data-page="home"]) .travel-panel h3 {
    font-size: clamp(15px, 4.45vw, 19px) !important;
    line-height: 1.24 !important;
  }

  body:not([data-page="home"]) .page-sub,
  body:not([data-page="home"]) .product-card p,
  body:not([data-page="home"]) .job-card .meta .sub,
  body:not([data-page="home"]) .agent-card p,
  body:not([data-page="home"]) .h-note,
  body:not([data-page="home"]) .travel-sub {
    font-size: 12.25px !important;
    line-height: 1.48 !important;
  }

  body:not([data-page="home"]) .btn,
  body:not([data-page="home"]) .cat-tab,
  body:not([data-page="home"]) .account-tabs button,
  body:not([data-page="home"]) .jobs-mode button,
  body:not([data-page="home"]) .cfo-actbtn,
  body:not([data-page="home"]) .cfo-chip,
  body:not([data-page="home"]) .acx-tab,
  body:not([data-page="home"]) .acx-hbtn,
  body:not([data-page="home"]) .travel-btn,
  body:not([data-page="home"]) .travel-chip,
  body:not([data-page="home"]) .travel-mode,
  body:not([data-page="home"]) .hr-nav-tab {
    font-size: 11.5px !important;
  }
}

@media (max-width: 860px) {
  body:not([data-page="home"]) .page h1,
  body:not([data-page="home"]) .page-title,
  body:not([data-page="home"]) .agents-hero h1,
  body:not([data-page="home"]) .travel-title {
    font-size: clamp(22px, 6.6vw, 28px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  body:not([data-page="home"]) .page h2,
  body:not([data-page="home"]) .page h3,
  body:not([data-page="home"]) .product-card h3,
  body:not([data-page="home"]) .job-card .meta h3,
  body:not([data-page="home"]) .agent-card h3,
  body:not([data-page="home"]) .h-coach-title,
  body:not([data-page="home"]) .cfo-card h3,
  body:not([data-page="home"]) .acx-h,
  body:not([data-page="home"]) .travel-panel h2,
  body:not([data-page="home"]) .travel-panel h3 {
    font-size: clamp(16px, 4.8vw, 21px) !important;
    line-height: 1.28 !important;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  body:not([data-page="home"]) .page,
  body:not([data-page="home"]) .page-sub,
  body:not([data-page="home"]) .product-card p,
  body:not([data-page="home"]) .job-card .meta .sub,
  body:not([data-page="home"]) .agent-card p,
  body:not([data-page="home"]) .h-note,
  body:not([data-page="home"]) .cfo-card,
  body:not([data-page="home"]) .acx-card,
  body:not([data-page="home"]) .travel-sub {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  body:not([data-page="home"]) .page-sub,
  body:not([data-page="home"]) .product-card p,
  body:not([data-page="home"]) .job-card .meta .sub,
  body:not([data-page="home"]) .agent-card p,
  body:not([data-page="home"]) .h-note,
  body:not([data-page="home"]) .travel-sub {
    font-size: 13px !important;
    line-height: 1.58 !important;
  }

  body:not([data-page="home"]) .btn,
  body:not([data-page="home"]) .cat-tab,
  body:not([data-page="home"]) .account-tabs button,
  body:not([data-page="home"]) .jobs-mode button,
  body:not([data-page="home"]) .cfo-actbtn,
  body:not([data-page="home"]) .cfo-chip,
  body:not([data-page="home"]) .acx-tab,
  body:not([data-page="home"]) .acx-hbtn,
  body:not([data-page="home"]) .travel-btn,
  body:not([data-page="home"]) .travel-chip,
  body:not([data-page="home"]) .travel-mode,
  body:not([data-page="home"]) .hr-nav-tab {
    font-size: 12px !important;
    line-height: 1.25 !important;
    word-break: keep-all;
    hyphens: none;
  }

  body[data-page="products"] .product-grid .product-card h3 {
    font-size: 12px !important;
    line-height: 1.24 !important;
  }

  body[data-page="products"] .product-grid .product-card p {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 420px) {
  body[data-page="products"] .product-grid .product-card h3 {
    font-size: 11.5px !important;
  }

  body[data-page="products"] .product-grid .product-card p {
    font-size: 10px !important;
  }
}

@media (max-width: 420px) and (max-height: 720px) {
  .chat-inner {
    padding-top: 8px;
  }

  .chat-empty {
    padding-top: 4px;
    padding-bottom: 8px;
  }

  .ce-brand {
    padding: 8px 14px;
    margin-bottom: 6px;
  }

  .ce-logo {
    height: 84px;
  }

  .ce-team {
    width: min(96vw, 350px);
    max-height: 128px;
    object-fit: contain;
  }

  .ce-title {
    font-size: 24px;
  }

  .action-rail {
    padding-bottom: 6px;
  }

  .action-pill {
    width: 104px;
    min-height: 46px;
    padding: 6px 8px;
    font-size: 10.5px;
  }

  .action-pill .ico {
    width: 26px;
    height: 26px;
  }
}

@media (min-width: 861px) {

  /* on desktop the chat screen lives inside content column already */
  .chat-screen {
    height: 100vh;
  }
}

/* ============================================================================
   Shared realtime voice agent (SMILINK.Voice) — animated robot face + overlay.
   Reused by every agent page; theme-var driven so it adapts in light mode.
   ========================================================================== */
.sv-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--base) 78%, transparent);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
}

.sv-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  width: 100%;
  max-width: 420px;
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.sv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.sv-head h3 {
  margin: 0;
  font-size: 16px;
}

.sv-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}

.sv-hint {
  font-size: 12px;
  color: var(--muted);
}

.sv-setup{display:grid;justify-items:center;gap:12px;padding-top:10px}
.sv-setup-character{width:116px;height:116px;display:grid;place-items:end center;overflow:hidden;border:1px solid color-mix(in srgb,var(--mint) 42%,var(--border-soft));border-radius:50%;background:color-mix(in srgb,var(--mint) 8%,var(--surface-soft))}
.sv-setup-character-img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}

/* Voice cost-confirmation card — nothing is charged until the user taps. */
.sv-confirm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1010;
  width: min(92vw, 400px);
  max-height: 86vh;
  overflow-y: auto;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  padding: 20px;
  animation: svCfRise .24s ease both;
}

.sv-cf-head {
  font-weight: 900;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 8px;
}

.sv-cf-brief {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 10px 12px;
}

.sv-cf-cost {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 14px;
}

.sv-cf-cost b {
  color: var(--cyan);
  font-size: 15px;
}

.sv-cf-label {
  margin: 8px 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.sv-cf-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 0 0 10px;
}

.sv-cf-chip {
  min-width: 38px;
  min-height: 36px;
  padding: 7px 11px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.sv-cf-chip.on {
  color: var(--accent-ink);
  background: var(--grad-accent);
  border-color: transparent;
}

.sv-cf-warn {
  margin: 8px 0 12px;
  padding: 9px 11px;
  color: var(--warning, #a16207);
  background: color-mix(in srgb, var(--warning, #f59e0b) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 28%, transparent);
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 1.6;
}

.sv-cf-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sv-cf-go {
  height: 46px;
  border: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  color: var(--accent-ink);
  background: var(--grad-accent);
}

.sv-cf-alt {
  height: 44px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
}

.sv-cf-link {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.sv-cf-cancel {
  height: 40px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-soft);
}

.sv-confirm button[disabled] {
  opacity: .5;
  cursor: default;
}

.sv-cf-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

.sv-action-confirm {
  width: min(94vw, 430px);
  padding: 18px;
}

.sv-ac-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  border-radius: 12px;
  color: var(--accent-ink);
  background: var(--grad-accent);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--mint) 24%, transparent);
}

.sv-ac-details {
  display: grid;
  gap: 7px;
  margin: 0 0 14px;
  text-align: start;
}

.sv-ac-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
}

.sv-ac-row span,
.sv-ac-lines span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.sv-ac-row b,
.sv-ac-lines b {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 900;
  text-align: end;
}

.sv-ac-lines {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 2px 0 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--mint) 18%, var(--border-soft));
  border-radius: 12px;
  background: color-mix(in srgb, var(--mint) 7%, transparent);
}

.sv-ac-lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

select,
.field:is(select),
.acx-fld:is(select) {
  color: var(--text);
  background-color: var(--field-bg-strong, var(--surface-soft));
  border-color: var(--border-soft);
  color-scheme: dark;
}

select option {
  color: var(--text);
  background: var(--card);
}

html[data-theme="light"] select,
html[data-theme="light"] .field:is(select),
html[data-theme="light"] .acx-fld:is(select) {
  color-scheme: light;
  background-color: #fff;
}

@keyframes svCfRise {
  from {
    opacity: 0;
    transform: translate(-50%, -46%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.sv-start {
  width: 100%;
}

/* Reactive sound-wave rings around the speaking robot (mirrors RobotFace). */
.sv-robot {
  position: relative;
}

.sv-robot.speaking::before,
.sv-robot.speaking::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid color-mix(in srgb, var(--mint) 50%, transparent);
  animation: svRing 1.6s ease-out infinite;
  pointer-events: none;
  z-index: 0;
}

.sv-robot.speaking::after {
  animation-delay: .8s;
}

.sv-robot .sv-character {
  position: relative;
  z-index: 1;
}

@keyframes svRing {
  0% {
    width: 90px;
    height: 90px;
    opacity: .55;
  }

  100% {
    width: 240px;
    height: 240px;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .sv-robot.speaking::before,
  .sv-robot.speaking::after {
    display: none;
  }
}

/* Human voice character: transparent portrait only, no synthetic mouth/eye layer. */
.sv-robot {
  width: 150px;
  height: 150px;
  margin: 8px auto 4px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 10px 26px color-mix(in srgb, var(--mint) 22%, transparent));
  transition: filter .3s;
}

.sv-character {
  position: relative;
  display: block;
  width: 150px;
  height: 150px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  transform-origin: 50% 58%;
  animation: svHeadIdle 5.6s ease-in-out infinite;
}

.sv-character::after {
  display: none;
}

.sv-character-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  transform: none;
  transform-origin: 50% 50%;
  user-select: none;
  pointer-events: none;
}

.sv-robot.listening .sv-character {
  animation-duration: 4.2s;
}

.sv-robot.speaking {
  filter: drop-shadow(0 10px 30px color-mix(in srgb, var(--mint) 50%, transparent));
}

.sv-robot.speaking .sv-character {
  animation: svHeadTalk 1.8s ease-in-out infinite;
}

@keyframes svHeadIdle {

  0%,
  100% {
    transform: translateY(0) rotate(-.6deg);
  }

  50% {
    transform: translateY(2px) rotate(.7deg);
  }
}

@keyframes svHeadTalk {

  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  35% {
    transform: translateY(1px) rotate(.9deg);
  }

  70% {
    transform: translateY(-1px) rotate(.25deg);
  }
}

/* Speaking equalizer + hint chips */
.sv-eq {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: flex-end;
  height: 22px;
  margin: 6px 0 2px;
  opacity: .22;
  transition: opacity .25s;
}

.sv-eq.on {
  opacity: 1;
}

.sv-eq i {
  width: 4px;
  height: 6px;
  background: var(--mint);
  border-radius: 2px;
}

.sv-eq.on i {
  animation: svEq .7s ease-in-out infinite;
}

.sv-eq.on i:nth-child(2) {
  animation-delay: .12s;
}

.sv-eq.on i:nth-child(3) {
  animation-delay: .24s;
}

.sv-eq.on i:nth-child(4) {
  animation-delay: .16s;
}

.sv-eq.on i:nth-child(5) {
  animation-delay: .06s;
}

@keyframes svEq {

  0%,
  100% {
    height: 6px;
  }

  50% {
    height: 20px;
  }
}

.sv-hints {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 2;
  margin: 2px 0 10px;
  text-align: center;
}

.sv-hints span {
  display: block;
  color: var(--text);
  font-weight: 700;
  margin-bottom: 4px;
}

.sv-hints em {
  display: inline-block;
  background: var(--base);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 10px;
  margin: 3px;
  font-style: normal;
  color: var(--cyan);
}

.sv-status {
  font-size: 13px;
  color: var(--cyan);
  margin: 6px 0 10px;
  min-height: 18px;
}

.sv-transcript {
  text-align: start;
  max-height: 240px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.sv-vt {
  font-size: 13px;
  line-height: 1.6;
  padding: 8px 11px;
  border-radius: 12px;
  max-width: 90%;
}

.sv-vt.user {
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
  align-self: flex-end;
}

.sv-vt.agent {
  background: var(--base);
  border: 1px solid var(--line);
  align-self: flex-start;
}

.sv-end {
  width: 100%;
}

.sv-live-actions{display:flex;gap:10px;justify-content:center;align-items:center}
.sv-vision-preview{position:absolute;z-index:4;top:62px;left:50%;transform:translateX(-50%);width:min(360px,84vw);height:min(520px,62dvh);min-height:390px;border-radius:28px;overflow:hidden;background:#050807;border:1px solid rgba(42,205,158,.72);box-shadow:0 20px 54px rgba(0,0,0,.34)}
.sv-vision-preview[hidden]{display:none!important}
.sv-vision-video{width:100%;height:100%;display:block;object-fit:cover}
.sv-vision-preview::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.34),transparent 32%,transparent 68%,rgba(0,0,0,.48))}
.sv-vision-controls{position:absolute;z-index:2;top:12px;inset-inline:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;direction:rtl}
.sv-vision-controls button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:8px 11px;border:1px solid rgba(255,255,255,.18);border-radius:13px;background:rgba(4,8,7,.76);color:#fff;font:800 12px/1.1 inherit;box-shadow:0 5px 16px rgba(0,0,0,.18);cursor:pointer;backdrop-filter:blur(8px)}
.sv-vision-controls .sv-vision-stop{background:rgba(196,45,54,.92);border-color:rgba(255,255,255,.16)}
.sv-vision-controls svg{flex:0 0 auto}
.sv-vision-badge{position:absolute;z-index:2;inset:auto auto 12px 12px;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.68);color:#fff;font-size:11px;font-weight:900;direction:rtl}
.sv-overlay.vision-on .sv-robot{display:none!important}
@media(max-width:640px){.sv-vision-preview{top:56px;width:min(340px,88vw);height:min(470px,59dvh);min-height:360px}.sv-vision-controls button{padding-inline:9px;font-size:11px}.sv-live-actions{gap:7px}.sv-live-actions .btn{font-size:12px;padding-inline:12px}}

/* Live mode: robot floats over a full-screen conversation that scrolls behind it */
.sv-overlay.live {
  background: radial-gradient(120% 70% at 50% 8%, color-mix(in srgb, var(--base) 92%, #000) 0%, var(--base) 60%, var(--base-2) 100%);
  backdrop-filter: none;
  padding: 0;
  place-items: stretch;
}

.sv-overlay.live .sv-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.sv-overlay.live .sv-head {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 6;
  padding: 12px 16px;
  margin: 0;
  justify-content: flex-start;
}

.sv-overlay.live .sv-title {
  display: none;
}

.sv-overlay.live .sv-close {
  font-size: 22px;
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.sv-overlay.live .sv-live {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sv-overlay.live .sv-robot {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 116px;
  height: 116px;
  margin: 0;
  pointer-events: none;
}

.sv-overlay.live .sv-character {
  width: 116px;
  height: 116px;
}

.sv-overlay.live .sv-eq {
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  margin: 0;
}

.sv-overlay.live .sv-status {
  position: absolute;
  top: 162px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  margin: 0;
  white-space: nowrap;
  background: color-mix(in srgb, var(--base) 60%, transparent);
  padding: 4px 12px;
  border-radius: 99px;
}

.sv-overlay.live .sv-hints {
  position: absolute;
  top: 196px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 90%;
  max-width: 520px;
}

.sv-overlay.live .sv-transcript {
  flex: 1;
  max-height: none;
  overflow: auto;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 212px 16px 100px;
  gap: 10px;
}

.sv-overlay.live .sv-vt {
  max-width: 86%;
  font-size: 14px;
}

.sv-overlay.live .sv-end {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  width: min(420px, 86%);
  z-index: 6;
}

/* Home chat inline mode: the voice panel lives inside the main conversation. */
.sv-overlay.inline {
  position: relative;
  inset: auto;
  z-index: auto;
  display: block;
  padding: 4px 0 18px;
  background: transparent;
  backdrop-filter: none;
}

.sv-overlay.inline .sv-panel {
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  padding: 0 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.sv-overlay.inline .sv-head {
  position: relative;
  justify-content: center;
  margin: 0 0 4px;
  min-height: 38px;
}

.sv-overlay.inline .sv-close {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
}

.sv-overlay.inline .sv-title {
  font-size: 13px;
  color: var(--muted);
}

.sv-overlay.inline.live {
  padding: 2px 0 18px;
  background: transparent;
  backdrop-filter: none;
}

.sv-overlay.inline.live .sv-panel {
  height: auto;
  min-height: 0;
  display: block;
  padding: 0 12px;
}

.sv-overlay.inline.live .sv-head {
  position: relative;
  inset: auto;
  z-index: auto;
  padding: 0;
  justify-content: center;
}

.sv-overlay.inline.live .sv-close {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
}

.sv-overlay.inline.live .sv-live {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
}

.sv-overlay.inline.live.vision-on .sv-live {
  align-items: center;
}

.sv-overlay.inline.live .sv-vision-preview {
  position: relative;
  inset: auto;
  transform: none;
  order: -1;
  width: min(350px, 88vw);
  height: min(470px, 60dvh);
  min-height: 360px;
  margin: 2px auto 10px;
}

.sv-overlay.inline.live.vision-on .sv-status,
.sv-overlay.inline.live.vision-on .sv-eq {
  position: relative;
  inset: auto;
  transform: none;
}

.sv-overlay.inline.live .sv-robot {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: 0 auto 2px;
  pointer-events: none;
}

.sv-overlay.inline.live .sv-character {
  width: 150px;
  height: 150px;
}

.sv-overlay.inline.live .sv-eq {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 1;
  margin: 2px 0 0;
}

.sv-overlay.inline.live .sv-status {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 1;
  display: table;
  margin: 4px auto 8px;
  white-space: nowrap;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.sv-overlay.inline.live .sv-hints {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 1;
  width: 100%;
  max-width: none;
}

.sv-overlay.inline.live .sv-transcript {
  flex: 0 1 auto;
  max-height: 260px;
  overflow: auto;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 12px;
  padding: 0;
  gap: 8px;
}

.sv-overlay.inline.live .sv-end {
  position: static;
  transform: none;
  display: block;
  width: min(420px, 86%);
  margin: 0 auto;
  z-index: 1;
}

/* Agent pages: voice replaces the chat canvas without changing its geometry. */
.agent-chat-shell{position:relative}
.sv-overlay.inline.embedded,.sv-overlay.inline.embedded.live{box-sizing:border-box;position:absolute;inset:0;z-index:20;display:grid;place-items:stretch;width:100%;height:100%;padding:0;background:var(--card);backdrop-filter:none;overflow:hidden}
.sv-overlay.inline.embedded .sv-panel,.sv-overlay.inline.embedded.live .sv-panel{box-sizing:border-box;width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:0;display:grid;grid-template-rows:58px minmax(0,1fr);border:0;border-radius:0;background:var(--card);box-shadow:none}
.sv-overlay.inline.embedded .sv-head,.sv-overlay.inline.embedded.live .sv-head{position:relative;inset:auto;min-height:58px;margin:0;padding:10px 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-soft)}
.sv-overlay.inline.embedded .sv-title,.sv-overlay.inline.embedded.live .sv-title{display:block;color:var(--text);font-size:14px}
.sv-overlay.inline.embedded .sv-close,.sv-overlay.inline.embedded.live .sv-close{position:static;width:36px;height:36px;padding:0;border:1px solid var(--border-soft);border-radius:7px;background:var(--surface-soft);color:var(--text)}
.sv-overlay.inline.embedded .sv-setup{align-self:center;justify-self:center;width:min(400px,88%);padding:0}
.sv-overlay.inline.embedded .sv-setup .sv-start{width:min(320px,100%);min-height:44px;border-radius:7px}
.sv-overlay.inline.embedded .sv-setup .sv-hint{max-width:340px;margin:0!important;line-height:1.7}
.sv-overlay.inline.embedded.live .sv-live{box-sizing:border-box;position:relative;min-height:0;display:grid!important;grid-template-rows:132px 22px 28px minmax(0,1fr) 44px;gap:6px;align-items:center;padding:12px 18px;overflow:hidden}
.sv-overlay.inline.embedded.live .sv-robot{position:relative;inset:auto;transform:none;align-self:center;justify-self:center;width:124px;height:124px;margin:0}
.sv-overlay.inline.embedded.live .sv-character{width:124px;height:124px}
.sv-overlay.inline.embedded.live .sv-eq,.sv-overlay.inline.embedded.live .sv-status{position:static;transform:none;margin:0 auto}
.sv-overlay.inline.embedded.live .sv-hints{display:none!important}
.sv-overlay.inline.embedded.live .sv-transcript{box-sizing:border-box;align-self:stretch;width:100%;max-width:720px;max-height:none;min-height:0;margin:0 auto;padding:10px 4px;overflow:auto;border-block:1px solid var(--border-soft)}
.sv-overlay.inline.embedded.live .sv-end{position:static;transform:none;align-self:end;justify-self:center;width:min(320px,100%);height:42px;margin:0;border-radius:7px}
.sv-overlay.live .sv-live-actions{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:6;width:min(520px,90%);display:flex;direction:rtl}
.sv-overlay.live .sv-live-actions .sv-end{position:static;left:auto;bottom:auto;transform:none;flex:1;width:auto;margin:0}
.sv-overlay.inline.live .sv-live-actions{position:static;left:auto;bottom:auto;transform:none;width:min(520px,90%);margin:0 auto;z-index:1}
.sv-overlay.inline.embedded.live .sv-live-actions{align-self:end;justify-self:center;width:min(430px,100%);height:42px;margin:0}
.sv-overlay.inline.embedded.live .sv-live-actions .sv-end{height:42px}
.sv-overlay.inline.embedded .sv-confirm{position:absolute}

@media (prefers-reduced-motion: reduce) {

  .sv-character,
  .msg-row.bot.speaking .assistant-character,
  .sv-robot.speaking .sv-character {
    animation: none !important;
  }
}

/* Styled confirm dialog (SMILINK.confirm) — replaces the browser's confirm(). */
.sk-modal-back {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--base) 70%, transparent);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .18s ease;
}

.sk-modal-back.show {
  opacity: 1;
}

.sk-modal {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-card);
  transform: translateY(8px);
  transition: transform .18s ease;
}

.sk-modal-back.show .sk-modal {
  transform: translateY(0);
}

.sk-modal-msg {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-line;
}

.sk-modal-actions {
  display: flex;
  gap: 10px;
}

.sk-modal-actions .btn {
  flex: 1;
}

.sk-modal-ok.danger {
  background: var(--rose);
}

.sk-modal-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

/* ---- Interactive calendar (Gregorian + Hijri) ---- */
.cal-modal {
  max-width: 360px;
}

.cal-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.cal-nav {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--base);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.cal-nav:hover {
  border-color: var(--mint);
}

.cal-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: 0;
  cursor: pointer;
}

.cal-title b {
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}

.cal-title span {
  color: var(--mint);
  font-size: 11.5px;
  font-weight: 700;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-w {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  padding-bottom: 4px;
}

.cal-day {
  aspect-ratio: 1;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.cal-day:hover {
  background: color-mix(in srgb, var(--mint) 14%, transparent);
}

.cal-day.today {
  border: 1px solid color-mix(in srgb, var(--mint) 60%, transparent);
}

.cal-day.sel {
  background: var(--mint);
  color: var(--accent-ink, #04130d);
  font-weight: 900;
}

.cal-years {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  max-height: 280px;
  overflow: auto;
}

.cal-year {
  padding: 12px 0;
  border: 0;
  border-radius: 10px;
  background: var(--base);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.cal-year.sel {
  background: var(--mint);
  color: var(--accent-ink, #04130d);
}

.sk-modal-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12.5px;
  color: var(--muted);
}

.sk-prompt-input {
  width: 100%;
}

/* Account brand-profile chip preview + filled count (web). */
.brand-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.brand-chip {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--mint);
  background: color-mix(in srgb, var(--mint) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--mint) 26%, transparent);
}

.brand-count {
  color: var(--muted);
  font-size: 12px;
}

/* Account inline name edit (web). */
.nm-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nm-edit {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--surface-soft);
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.nm-edit:hover {
  color: var(--mint);
  border-color: color-mix(in srgb, var(--mint) 40%, var(--border-soft));
}

.nm-edit svg {
  width: 14px;
  height: 14px;
}

/* Account wallet hero + typed ledger (web). */
.wallet-hero {
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 14px;
  text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--mint) 22%, transparent), color-mix(in srgb, var(--cyan) 12%, transparent)), var(--card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}

.wallet-hero-label {
  font-size: 12.5px;
  color: var(--muted);
}

.wallet-hero-bal {
  margin: 6px 0 14px;
}

.wallet-hero-bal b {
  font-size: 38px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -1px;
}

.wallet-hero-bal span {
  font-size: 14px;
  color: var(--muted);
}

/* «باقتك الحالية هي ‹الاسم›»: the tier being paid for, stated on the page. */
.wallet-current-plan {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mint) 28%, transparent);
  background: color-mix(in srgb, var(--mint) 12%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.wallet-topup {
  display: inline-block;
  padding: 11px 24px;
  border-radius: var(--radius-field);
  font-weight: 800;
  font-size: 14px;
  color: var(--accent-ink);
  background: var(--grad-accent);
  text-decoration: none;
  box-shadow: 0 8px 22px var(--accent-shadow);
}

.txn-l {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.txn-l small {
  font-size: 10.5px;
  color: var(--muted);
}

/* Account rich activity rows (web). */
.txn-rich {
  display: flex;
  align-items: center;
  gap: 11px;
}

.txn-ico {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.txn-ico.pos {
  color: var(--mint);
  background: color-mix(in srgb, var(--mint) 14%, transparent);
}

.txn-ico.neg {
  color: var(--rose);
  background: color-mix(in srgb, var(--rose) 14%, transparent);
}

.txn-ico svg {
  width: 15px;
  height: 15px;
}

.txn-rich .txn-l {
  flex: 1;
}

.txn-rich .amt.pos {
  color: var(--mint);
}

.txn-rich .amt.neg {
  color: var(--rose);
}

/* Account suggestion card + sheet (web). */
.sug-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.sug-card h3 svg,
.promo-ico svg,
.sess-ico svg {
  width: 18px;
  height: 18px;
}

.promo-ico {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--mint);
}

.sug-ov {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2, 5, 11, .72);
  backdrop-filter: blur(4px);
}

.sug-sheet {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  box-shadow: var(--shadow-card-hover);
  padding: 20px;
}

.sug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sug-head b {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.sug-x {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 20px;
}

.sug-body {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
}

.sug-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text);
  margin: 12px 0 0;
  cursor: pointer;
}

.sug-contact input {
  accent-color: var(--mint);
  width: 17px;
  height: 17px;
}

.sug-fields {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 12px;
}

.sug-fields .field {
  width: 100%;
}

/* Account plan row + session-security card (web). */
.plan-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: var(--radius-card);
  background: var(--card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}

.plan-ico {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--mint);
  background: color-mix(in srgb, var(--mint) 14%, transparent);
}

.plan-ico svg {
  width: 20px;
  height: 20px;
}

.plan-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.plan-txt b {
  font-size: 14px;
  color: var(--text);
}

.plan-txt small {
  font-size: 12px;
  color: var(--muted);
}

.plan-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--mint);
  background: color-mix(in srgb, var(--mint) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--mint) 26%, transparent);
}

.sess-card {
  margin-bottom: 14px;
}

.sess-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sess-ico {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
}

.sess-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sess-txt b {
  font-size: 14px;
  color: var(--text);
}

.sess-txt small {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
/* Full-screen account-suspension notice (shown on ACCOUNT_SUSPENDED). */
.suspend-back {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: color-mix(in srgb, var(--base) 86%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s ease;
}

.suspend-back.show {
  opacity: 1;
}

.suspend-card {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--line));
  border-radius: 22px;
  padding: 30px 26px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.suspend-ico {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 14px;
}

.suspend-title {
  margin: 0 0 12px;
  font-size: 23px;
  font-weight: 900;
  color: var(--text);
}

.suspend-msg {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  white-space: pre-line;
}

.suspend-until {
  display: inline-block;
  margin: 0 auto 18px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
}

.suspend-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.suspend-recheck {
  background: var(--amber);
  color: #1a1205;
  font-weight: 800;
}

/* Chat image attachments open in a full-screen viewer on click. */
.att-msg-img {
  cursor: zoom-in;
}

.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .92);
  opacity: 0;
  transition: opacity .18s ease;
}

.img-lightbox.show {
  opacity: 1;
}

.img-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.img-lightbox-close {
  position: absolute;
  top: 14px;
  inset-inline-start: 16px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

/* Desktop navigation follows the active app hierarchy with denser web spacing. */
@media (min-width: 861px) {
  .sidebar {
    padding: 14px 12px;
    gap: 6px;
  }

  .sidebar-brand-row {
    min-height: 40px;
    padding: 0 6px 4px;
  }

  .sidebar-controls {
    gap: 7px;
    padding: 7px;
    margin-bottom: 4px;
    border-radius: 8px;
  }

  .side-nav {
    gap: 3px;
  }

  .nav-section-label {
    margin: 14px 8px 5px;
  }

  .nav-item,
  .nav-grp-toggle {
    min-height: 40px;
    border-radius: 8px;
  }

  .nav-item .ico,
  .nav-grp-toggle .nav-chev {
    border-radius: 6px;
  }

  .nav-sub {
    gap: 2px;
    margin: 5px 6px 8px;
    padding: 6px;
    border-radius: 8px;
    box-shadow: none;
  }

  .nav-subitem {
    min-height: 32px;
    padding-block: 6px;
    border-radius: 6px;
    font-size: 12px;
  }
}

/* ====================== DESKTOP WORKSPACE NAVIGATION ===================== */
.desktop-shell-header,
.desktop-agent-strip,
.desktop-popover,
.desktop-context-nav {
  display: none;
}

@media (min-width: 861px) {
  :root {
    --desktop-header-h: 68px;
  }

  .app-shell {
    display: block;
    min-height: 100vh;
  }

  .sidebar,
  .sidebar-scrim {
    display: none !important;
  }

  .desktop-shell-header {
    position: sticky;
    top: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    gap: 18px;
    height: var(--desktop-header-h);
    padding: 0 clamp(18px, 2.2vw, 34px);
    color: var(--text);
    background: color-mix(in srgb, var(--base) 88%, transparent);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 8px 28px color-mix(in srgb, #000 12%, transparent);
    backdrop-filter: blur(18px) saturate(130%);
  }

  html[dir="rtl"] .desktop-shell-header {
    direction: rtl;
  }

  html[dir="ltr"] .desktop-shell-header {
    direction: ltr;
  }

  .desktop-header-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 112px;
  }

  .desktop-header-brand .brand,
  .desktop-header-brand img {
    display: block;
  }

  .desktop-header-brand img {
    width: auto;
    height: 28px;
  }

  .desktop-primary-nav {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
  }

  .desktop-primary-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 12px;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    transition: color .16s ease, background .16s ease, border-color .16s ease;
  }

  .desktop-primary-link:hover {
    color: var(--text);
    background: var(--surface-hover);
  }

  .desktop-primary-link.active {
    color: var(--text);
    background: color-mix(in srgb, var(--mint) 10%, var(--surface-soft));
    border-color: color-mix(in srgb, var(--mint) 24%, transparent);
  }

  .desktop-primary-link.active::after {
    content: "";
    position: absolute;
    inset-inline: 12px;
    bottom: -15px;
    height: 2px;
    background: var(--mint);
  }

  .desktop-primary-link .ico,
  .desktop-header-button .ico,
  .desktop-utility-button .ico {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
  }

  .desktop-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
    margin-inline-start: auto;
  }

  .desktop-agent-switcher,
  .desktop-header-button {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    color: var(--text);
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: 7px;
    font-family: inherit;
    cursor: pointer;
  }

  .desktop-header-button {
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    font-weight: 800;
  }

  .desktop-agent-switcher {
    gap: 9px;
    min-width: 178px;
    padding: 5px 10px;
    text-align: start;
  }

  .desktop-agent-switcher:hover,
  .desktop-agent-switcher[aria-expanded="true"],
  .desktop-header-button:hover,
  .desktop-header-button[aria-expanded="true"] {
    background: color-mix(in srgb, var(--mint) 10%, var(--surface-soft));
    border-color: color-mix(in srgb, var(--mint) 34%, transparent);
  }

  .desktop-agent-switcher-icon {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    color: var(--accent-ink);
    background: var(--grad-accent);
    border-radius: 7px;
  }

  .desktop-agent-switcher-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
    flex: 1;
  }

  .desktop-agent-switcher-copy small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
  }

  .desktop-agent-switcher-copy b {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-agent-switcher-chevron {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: var(--muted);
    transform: rotate(90deg);
    transition: transform .16s ease;
  }

  html[dir="rtl"] .desktop-agent-switcher-chevron {
    transform: rotate(90deg);
  }

  .desktop-agent-switcher[aria-expanded="true"] .desktop-agent-switcher-chevron {
    transform: rotate(-90deg);
  }

  .desktop-utility-button {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
  }

  .desktop-utility-button:hover {
    color: var(--text);
    background: var(--surface-hover);
    border-color: var(--border-soft);
  }

  .desktop-utility-button .badge-dot {
    position: absolute;
    top: 7px;
    inset-inline-end: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rose);
  }

  .desktop-points-chip {
    height: 38px;
    border-radius: 7px;
  }

  .desktop-header-actions .lang-toggle,
  .desktop-header-actions .theme-toggle {
    width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 7px;
  }

  .desktop-popover {
    position: fixed;
    top: calc(var(--desktop-header-h) + 10px);
    z-index: 150;
    overflow: hidden;
    color: var(--text);
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
    backdrop-filter: blur(20px);
  }

  .desktop-popover:not([hidden]) {
    display: block;
    animation: desktopPopoverIn .16s ease both;
  }

  @keyframes desktopPopoverIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .desktop-agent-menu {
    width: min(760px, calc(100vw - 36px));
    padding: 18px;
  }

  html[dir="rtl"] .desktop-agent-menu,
  html[dir="rtl"] .desktop-chat-panel {
    right: auto;
    left: clamp(18px, 2.2vw, 34px);
  }

  html[dir="ltr"] .desktop-agent-menu,
  html[dir="ltr"] .desktop-chat-panel {
    right: clamp(18px, 2.2vw, 34px);
    left: auto;
  }

  .desktop-popover-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    padding: 0 2px 14px;
    border-bottom: 1px solid var(--border-soft);
  }

  .desktop-popover-head > div {
    display: grid;
    gap: 3px;
  }

  .desktop-popover-head small {
    color: var(--mint);
    font-size: 10px;
    font-weight: 800;
  }

  .desktop-popover-head strong {
    font-size: 18px;
  }

  .desktop-popover-head > a {
    color: var(--mint);
    font-size: 12px;
    font-weight: 800;
  }

  .desktop-agent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 18px;
    padding-top: 8px;
  }

  .desktop-agent-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 62px;
    padding: 9px 5px;
    color: var(--text);
    border-bottom: 1px solid var(--border-softer);
  }

  .desktop-agent-option:hover,
  .desktop-agent-option.active {
    color: var(--text);
    background: color-mix(in srgb, var(--mint) 7%, transparent);
  }

  .desktop-agent-option-icon {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: var(--mint);
    background: color-mix(in srgb, var(--mint) 10%, var(--surface-soft));
    border: 1px solid color-mix(in srgb, var(--mint) 18%, transparent);
    border-radius: 7px;
  }

  .desktop-agent-option.active .desktop-agent-option-icon {
    color: var(--accent-ink);
    background: var(--grad-accent);
  }

  .desktop-agent-option > span:nth-child(2) {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1;
  }

  .desktop-agent-option b {
    overflow: hidden;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-agent-option small {
    color: var(--muted);
    font-size: 10px;
  }

  .desktop-agent-option-arrow {
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    color: var(--muted);
  }

  html[dir="rtl"] .desktop-agent-option-arrow {
    transform: rotate(180deg);
  }

  .desktop-chat-panel {
    width: min(380px, calc(100vw - 36px));
    max-height: calc(100vh - var(--desktop-header-h) - 24px);
    padding: 16px;
    overflow-y: auto;
  }

  .desktop-chat-new-slot {
    margin-top: 12px;
  }

  .desktop-chat-panel .nav-new-chat {
    min-height: 42px;
    border-radius: 7px;
  }

  .desktop-chat-panel .chat-nav-group > .nav-grp-toggle {
    display: none;
  }

  .desktop-chat-panel .chat-nav-group > .nav-sub {
    display: block;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .desktop-chat-panel .chat-nav-sub .chat-history,
  .desktop-chat-panel .chat-nav-sub .history-list {
    max-height: none;
  }

  .content {
    display: flex;
    grid-column: auto;
    min-height: calc(100vh - var(--desktop-header-h));
  }

  .desktop-context-nav {
    position: sticky;
    top: var(--desktop-header-h);
    z-index: 95;
    align-items: center;
    gap: 18px;
    min-height: 54px;
    padding: 7px clamp(18px, 2.2vw, 34px);
    background: color-mix(in srgb, var(--base) 92%, transparent);
    border-bottom: 1px solid var(--border-soft);
    backdrop-filter: blur(16px);
  }

  .desktop-context-nav:not([hidden]) {
    display: flex;
  }

  .desktop-context-identity {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding-inline-end: 18px;
    border-inline-end: 1px solid var(--border-soft);
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
  }

  .desktop-context-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--mint);
    background: color-mix(in srgb, var(--mint) 9%, var(--surface-soft));
    border-radius: 6px;
  }

  .desktop-context-links {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .desktop-context-scroll {
    display: none;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--muted);
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    cursor: pointer;
  }

  .desktop-context-nav.has-overflow .desktop-context-scroll {
    display: grid;
  }

  .desktop-context-scroll:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--mint) 30%, transparent);
  }

  .desktop-context-scroll .ico {
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
  }

  html[dir="rtl"] .desktop-context-scroll-start .ico,
  html[dir="ltr"] .desktop-context-scroll-end .ico {
    transform: rotate(180deg);
  }

  .desktop-context-links::-webkit-scrollbar {
    display: none;
  }

  .desktop-context-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 11px;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
  }

  .desktop-context-link:hover {
    color: var(--text);
    background: var(--surface-hover);
  }

  .desktop-context-link.active {
    color: var(--text);
    background: color-mix(in srgb, var(--mint) 10%, var(--surface-soft));
    border-color: color-mix(in srgb, var(--mint) 22%, transparent);
  }

  .desktop-context-link.active::after {
    content: "";
    position: absolute;
    inset-inline: 10px;
    bottom: -9px;
    height: 2px;
    background: var(--mint);
  }

  .voice-fab {
    inset-inline-end: 24px;
  }
}

@media (min-width: 861px) and (max-width: 1180px) {
  .desktop-shell-header {
    gap: 10px;
    padding-inline: 16px;
  }

  .desktop-header-brand {
    min-width: auto;
  }

  .desktop-primary-link {
    width: 40px;
    padding: 0;
  }

  .desktop-primary-label,
  .desktop-header-button span:last-child,
  .desktop-points-chip {
    display: none;
  }

  .desktop-agent-switcher {
    min-width: 160px;
  }

  .desktop-agent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Persistent agent row: a predictable second navigation level on desktop. */
@media (min-width: 861px) {
  :root {
    --desktop-agent-strip-h: 52px;
  }

  .desktop-agent-strip {
    position: sticky;
    top: var(--desktop-header-h);
    z-index: 104;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--desktop-agent-strip-h);
    padding: 6px clamp(18px, 2.2vw, 34px);
    direction: inherit;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    border-bottom: 1px solid var(--border-soft);
    backdrop-filter: blur(16px);
  }

  html[dir="rtl"] .desktop-agent-strip {
    direction: rtl;
  }

  html[dir="ltr"] .desktop-agent-strip {
    direction: ltr;
  }

  .desktop-agent-strip-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 11px;
    color: var(--text);
    border-inline-end: 1px solid var(--border-soft);
    font-size: 12px;
    font-weight: 900;
  }

  .desktop-agent-strip-title .ico {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: var(--mint);
  }

  .desktop-agent-strip-links {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .desktop-agent-strip-links::-webkit-scrollbar {
    display: none;
  }

  .desktop-agent-strip-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 10px;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
  }

  .desktop-agent-strip-link:hover {
    color: var(--text);
    background: var(--surface-hover);
  }

  .desktop-agent-strip-link.active {
    color: var(--text);
    background: color-mix(in srgb, var(--mint) 11%, var(--surface-soft));
    border-color: color-mix(in srgb, var(--mint) 26%, transparent);
  }

  .desktop-agent-strip-link.active::after {
    content: "";
    position: absolute;
    inset-inline: 11px;
    bottom: -8px;
    height: 2px;
    background: var(--mint);
  }

  .desktop-agent-strip-icon {
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    color: var(--mint);
  }

  .desktop-agent-strip-scroll {
    display: none;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    color: var(--muted);
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    cursor: pointer;
  }

  .desktop-agent-strip.has-overflow .desktop-agent-strip-scroll {
    display: grid;
  }

  .desktop-agent-strip-scroll .ico {
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
  }

  html[dir="rtl"] .desktop-agent-strip-start .ico,
  html[dir="ltr"] .desktop-agent-strip-end .ico {
    transform: rotate(180deg);
  }

  .desktop-popover {
    top: calc(var(--desktop-header-h) + var(--desktop-agent-strip-h) + 10px);
  }

  .content {
    min-height: calc(100vh - var(--desktop-header-h) - var(--desktop-agent-strip-h));
  }

  .desktop-context-nav {
    top: calc(var(--desktop-header-h) + var(--desktop-agent-strip-h));
  }

  .desktop-chat-panel {
    max-height: calc(100vh - var(--desktop-header-h) - var(--desktop-agent-strip-h) - 24px);
  }
}

@media (min-width: 861px) and (max-width: 1320px) {
  .desktop-primary-label,
  .desktop-header-button span:last-child,
  .desktop-points-chip {
    display: none;
  }

  .desktop-header-button {
    width: 40px;
    padding: 0;
  }
}

/* ====================== COMPACT PACKAGE CATALOG ====================== */
.more-page .topup-card {
  padding: 17px;
}

.more-page .pkg-switcher {
  top: 70px;
  z-index: 12;
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  margin: 0 auto 13px;
  padding: 4px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}

.more-page .pkg-switcher button {
  min-width: 100px;
  min-height: 39px;
  gap: 0;
  padding: 4px 10px;
  border-radius: 8px;
}

.more-page .pkg-switcher button span {
  font-size: 10.5px;
}

.more-page .pkg-switcher button small {
  margin-top: 1px;
  font-size: 8.5px;
}

.more-page .pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(218px, 258px));
  justify-content: center;
  align-items: stretch;
  gap: 11px;
  margin-top: 0;
}

.more-page .pkg-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 18px;
  overflow: hidden;
  border-radius: 17px;
  border-color: var(--border-soft);
  background: color-mix(in srgb, var(--card) 90%, transparent);
  box-shadow: none;
  scroll-margin-top: 130px;
}

.more-page .pkg-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--mint) 38%, var(--line));
  box-shadow: none;
}

.more-page .pkg-card:active {
  transform: translateY(-1px);
}

.more-page .pkg-card.featured {
  border-color: color-mix(in srgb, var(--mint) 48%, var(--line));
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--mint) 9%, transparent), transparent 42%),
    color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--mint) 8%, transparent);
}

.more-page .pkg-card.featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad-accent);
}

.pkg-plan-head {
  min-height: 45px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.pkg-plan-head > div {
  min-width: 0;
}

.pkg-type {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.more-page .pkg-name {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.more-page .pkg-tag {
  position: static;
  flex: none;
  max-width: 90px;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--accent-ink);
  background: var(--grad-accent);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

.pkg-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 13px 0 11px;
}

.pkg-price strong {
  color: var(--text);
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.7px;
}

.pkg-price > span {
  color: var(--text);
  font-size: 11px;
  font-weight: 850;
}

.pkg-price > small {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.pkg-credit {
  min-height: 37px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 8px 0;
  border-block: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.pkg-credit b {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.pkg-credit em {
  flex: none;
  color: var(--mint);
  font-size: 8.5px;
  font-style: normal;
  font-weight: 900;
}

.more-page .pkg-desc {
  min-height: 34px;
  margin: 9px 0 11px;
  overflow: hidden;
  color: var(--muted);
  display: -webkit-box;
  font-size: 10px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.more-page .pkg-buy {
  width: 100%;
  height: 39px;
  margin: 0;
  border-radius: 10px;
  font-size: 11px;
  box-shadow: none;
}

.more-page .pkg-features {
  margin: 16px 0 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
}

.more-page .pkg-features-head {
  min-height: 27px;
  padding: 0 0 7px;
  border: 0;
}

.more-page .pkg-features-head > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.more-page .pkg-features-head strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.more-page .pkg-features-head small {
  color: var(--muted);
  font-size: 8px;
}

.more-page .pkg-features-head > span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}

.more-page .pkg-features ul {
  margin-top: 2px;
}

.more-page .pkg-features li {
  min-height: 30px;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  gap: 7px;
  padding: 5px 0;
  border-bottom-color: color-mix(in srgb, var(--border-soft) 52%, transparent);
}

.more-page .pkg-feature-check {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  font-size: 8px;
}

.more-page .pkg-features li b {
  font-size: 10px;
  line-height: 1.4;
}

.more-page .pkg-features li small {
  margin-top: 1px;
  font-size: 8px;
  line-height: 1.4;
}

.more-page .pkg-features li em {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 7px;
}

.more-page .pkg-features-more {
  margin-top: 4px;
  padding-top: 7px;
}

.more-page .pkg-features-more summary {
  min-height: 26px;
  font-size: 9px;
}

.more-page .pkg-features-more summary span {
  padding: 2px 5px;
  font-size: 7.5px;
}

html[data-theme="light"] .more-page .pkg-card,
html[data-theme="light"] .more-page .pkg-card.featured {
  background: #fff;
  border-color: #D7E3DE;
  box-shadow: none;
}

html[data-theme="light"] .more-page .pkg-card.featured {
  border-color: color-mix(in srgb, var(--mint) 52%, #D7E3DE);
}

@media (max-width: 760px) {
  .more-page .topup-card {
    padding-inline: 14px;
  }

  .more-page .pkg-switcher {
    top: 66px;
    width: calc(100% + 4px);
    max-width: none;
    margin-inline: -2px;
    margin-bottom: 11px;
  }

  .more-page .pkg-switcher button {
    min-width: 94px;
    min-height: 38px;
    padding-inline: 8px;
  }

  .more-page .pkg-grid {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    margin-inline: 0;
    padding: 2px 0 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .more-page .pkg-grid::-webkit-scrollbar {
    display: none;
  }

  .more-page .pkg-card {
    flex: 0 0 100%;
    max-width: none;
    padding: 17px;
    border-radius: 16px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .more-page .pkg-card:hover,
  .more-page .pkg-card:active {
    transform: none;
  }

  .more-page .pkg-desc {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .more-page .pkg-card {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Packages: plan picker (web twin of the mobile packages screen). One row per
   plan, five benefits for the picked one, one buy button. Deliberately quiet:
   no intro copy, no feature descriptions, no struck-through rows.
--------------------------------------------------------------------------- */
.plan-pick {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  text-align: start;
  transition: border-color .15s, background .15s;
}

.plan-opt:hover {
  border-color: color-mix(in srgb, var(--mint) 45%, transparent);
}

.plan-opt.on {
  border-color: var(--mint);
  border-width: 1.5px;
  background: color-mix(in srgb, var(--mint) 9%, transparent);
}

.plan-mark {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.6px solid var(--border-soft);
}

.plan-opt.on .plan-mark {
  border-color: var(--mint);
  background: var(--mint);
  box-shadow: inset 0 0 0 3px var(--card);
}

.plan-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.plan-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}

.plan-name em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: var(--mint);
  border: 1px solid color-mix(in srgb, var(--mint) 30%, transparent);
  background: color-mix(in srgb, var(--mint) 12%, transparent);
  border-radius: 99px;
  padding: 2px 7px;
}

.plan-info small {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

.plan-price {
  flex: none;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.plan-opt.on .plan-price {
  color: var(--mint);
}

.plan-benefits {
  margin-top: 12px;
  padding: 10px 14px 6px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: var(--surface-soft);
}

.feat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.feat-line {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.feat-line.off {
  color: var(--muted);
}

.feat-ico {
  flex: none;
  width: 15px;
  font-size: 12px;
  color: var(--mint);
}

.feat-line.off .feat-ico {
  color: var(--muted);
  filter: grayscale(1);
}

/* A truncated benefit is a hidden benefit: the name wraps instead of ellipsing. */
.feat-name {
  flex: 1;
  min-width: 0;
  line-height: 1.5;
}

.feat-tag {
  flex: none;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  border: 1px solid var(--border-soft);
  border-radius: 99px;
  padding: 2px 7px;
}

.feat-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--mint);
}

.feat-count b {
  padding: 2px 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--mint) 10%, transparent);
  font-size: 10.5px;
}

.plan-buy {
  width: 100%;
  height: 44px;
  margin-top: 12px;
}

.plan-extras {
  margin-top: 10px;
}

.plan-extras > summary {
  cursor: pointer;
  list-style: none;
  padding: 6px 2px;
  font-size: 12px;
  font-weight: 800;
  color: var(--mint);
}

.plan-extras > summary::-webkit-details-marker {
  display: none;
}

.plan-extras .promo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--surface-soft);
}

.plan-extras .promo-row .field {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.plan-extras #promoMsg {
  font-size: 11.5px;
  font-weight: 700;
}

.plan-extras .custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.plan-extras .custom-row .field {
  flex: 1;
}

.plan-extras .custom-row .btn {
  flex: none;
  height: 40px;
}

/* ---------------------------------------------------------------------------
   «من نحن»: the slide used a neon mint on a green-tinted panel, which read as a
   different product next to the neutral artwork. Same brand green as the apps
   (#17A47E) on the neutral card surface, in both themes.
--------------------------------------------------------------------------- */
:root {
  --about-accent: #22B98C;
  --about-btn: #17A47E;
}

html[data-theme="light"] {
  --about-accent: #0B7659;
  --about-btn: #0B7659;
}

.about-slide-card {
  background: color-mix(in srgb, var(--card) 96%, transparent);
  border-color: var(--border-soft);
  box-shadow: 0 20px 56px rgba(0, 0, 0, .30);
}

.about-eyebrow,
.about-skip {
  color: var(--about-accent);
}

.about-copy-ar {
  color: var(--text);
}

.about-copy-en {
  color: var(--muted);
}

.about-points span {
  color: var(--text);
  background: var(--surface-soft);
  border-color: var(--border-soft);
}

.about-product-grid a,
.about-product-grid > * {
  background: var(--surface-soft);
  border-color: var(--border-soft);
}

.about-dot.active {
  background: var(--about-accent);
}

.about-next {
  color: #FFFFFF;
  background: var(--about-btn);
  box-shadow: none;
}

.about-next:hover {
  background: color-mix(in srgb, var(--about-btn) 88%, #000);
}

.about-close:hover {
  border-color: color-mix(in srgb, var(--about-accent) 40%, transparent);
  background: color-mix(in srgb, var(--about-accent) 10%, transparent);
}