/* ============================================================
   DropAI v17.0 — Design System
   Al-Mulla Investments · 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Instrument+Serif:wght@400&family=IBM+Plex+Mono:wght@400;500&family=Readex+Pro:wght@400;500;600&display=swap');

:root {
  /* Brand */
  --purple:        #7C3AED;
  --purple-hover:  #6D28D9;
  --purple-light:  #EEEDFE;
  --purple-text:   #534AB7;
  --purple-soft:   #A78BFA;

  --black:         #1A1625;
  --black-hover:   #0F0C18;

  /* Surfaces */
  --bg:            #FFFFFF;
  --surface:       #FAFAFA;
  --surface-2:     #F4F2EE;

  /* Borders */
  --border:        #E8E5DC;
  --border-soft:   #F0EDE5;
  --border-strong: #1A1625;
  --track:         #F1EFE8;

  /* Text */
  --text:          #1A1625;
  --muted:         #6B6B7A;
  --soft:          #9D98AE;

  /* Status */
  --green:         #639922;
  --green-light:   #97C459;
  --green-bg:      #EAF3DE;
  --green-text:    #3B6D11;

  --amber:         #BA7517;
  --amber-bg:      #FAEEDA;
  --amber-text:    #854F0B;

  --red:           #F09595;
  --red-text:      #A32D2D;
  --red-bg:        #FCEBEB;

  --info-bg:       #E6F1FB;
  --info-text:     #185FA5;

  /* Category tags */
  --beauty-bg:  #EEEDFE; --beauty-text:  #534AB7;
  --fitness-bg: #FAEEDA; --fitness-text: #854F0B;
  --home-bg:    #EAF3DE; --home-text:    #3B6D11;
  --tech-bg:    #E6F1FB; --tech-text:    #185FA5;

  /* Fonts */
  --font-body:  'Inter', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace;
  --font-ar:    'Readex Pro', system-ui, sans-serif;

  /* Layout */
  --sidebar-w:    240px;
  --sidebar-w-c:  64px;
  --topbar-h:     56px;

  /* v21.3 (#53) — Unified topbar button sizing */
  --tb-btn-size:    40px;
  --tb-btn-radius:  10px;
  --tb-btn-gap:     8px;

  /* v21.3 (#54) — Section vertical rhythm */
  --section-gap:        20px;
  --section-gap-mobile: 14px;

  /* Transitions */
  --t-fast: 140ms ease;
  --t-base: 220ms ease;
}

html[lang="ar"], html[dir="rtl"] {
  --font-body:  var(--font-ar);
  --font-serif: var(--font-ar);
}

/* ── Reset ─────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden; /* v21 — prevent rogue horizontal overflow that triggers mobile zoom-out */
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; color: inherit; font-size: 16px; /* v21 — prevent iOS auto-zoom on focus */ }
@media (min-width: 769px) {
  input, textarea, select { font-size: inherit; /* restore body 14px on desktop */ }
}
::selection { background: var(--purple); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--soft); }

/* ── Headings ──────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text);
}

/* ── Browser frame for standalone pages ────────────── */

.browser { max-width: 1280px; margin: 0 auto; }

/* ============================================================
   APP LAYOUT — Sidebar + Main
   ============================================================ */

.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns 220ms ease;
}

.app-layout.collapsed {
  grid-template-columns: var(--sidebar-w-c) 1fr;
}

/* Sidebar */
.sidebar {
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 30;
  transition: padding var(--t-base);
}

.sidebar::-webkit-scrollbar { width: 4px; }

/* Logo + Toggle */
.sb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  min-height: 32px;
}

.sb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
}
.sb-logo-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'><defs><radialGradient id='g' cx='30%25' cy='30%25' r='80%25'><stop offset='0%25' stop-color='%23EC4899'/><stop offset='50%25' stop-color='%23A78BFA'/><stop offset='100%25' stop-color='%237C3AED'/></radialGradient></defs><rect width='52' height='52' rx='14' fill='url(%23g)'/><ellipse cx='26' cy='26' rx='20' ry='8' fill='none' stroke='white' stroke-width='1' opacity='0.45' transform='rotate(-20 26 26)'/><path d='M 16,10 L 16,42 L 24,42 C 34,42 40,34 40,26 C 40,18 34,10 24,10 Z' fill='white'/><path d='M 19,13 L 19,39 L 24,39 C 32,39 37,33 37,26 C 37,19 32,13 24,13 Z' fill='url(%23g)'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.sb-logo-text {
  transition: opacity var(--t-fast);
}

.sb-toggle {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--muted);
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.sb-toggle:hover { background: var(--surface); color: var(--text); }
.sb-toggle svg { width: 16px; height: 16px; }

/* Section group */
.sb-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sb-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 10px 6px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--t-fast);
}

/* Nav items */
.sb-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}
.sb-item:hover { background: var(--surface); }

.sb-item-icon {
  width: 18px; height: 18px;
  color: var(--muted);
  flex-shrink: 0;
  display: grid; place-items: center;
  transition: color var(--t-fast);
  margin-top: 1px;
}
.sb-item-icon svg { width: 17px; height: 17px; }

/* v18.7 — body wraps text + subtitle so they stack vertically */
.sb-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: opacity var(--t-fast);
}

.sb-item-text {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* v18.7 — Subtitle line beneath label */
.sb-item-sub {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0;
}
.sb-item.active .sb-item-sub { color: var(--purple); opacity: 0.75; }

.sb-item.active {
  background: var(--purple-light);
  color: var(--purple-text);
}
.sb-item.active .sb-item-icon { color: var(--purple); }

/* Mini badges */
.sb-badge {
  padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  transition: opacity var(--t-fast);
}
.sb-badge-new { background: var(--purple); color: #fff; }
.sb-badge-free { background: var(--green-bg); color: var(--green-text); }
.sb-badge-num { background: var(--surface-2); color: var(--muted); }

/* Plan card */
.sb-plan {
  margin-top: auto;
  background: var(--surface);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity var(--t-fast), padding var(--t-fast);
}
.sb-plan-top { display: flex; justify-content: space-between; align-items: center; }
.sb-plan-name { font-size: 13px; font-weight: 500; }
.sb-plan-pill {
  background: var(--purple);
  color: #fff;
  padding: 2px 7px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.sb-plan-meter-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.sb-plan-meter-label strong { color: var(--text); font-weight: 500; font-feature-settings: 'tnum' 1; }
.sb-plan-track {
  height: 4px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
}
.sb-plan-bar { height: 100%; background: var(--purple); border-radius: inherit; }
.sb-plan-cta {
  display: block;
  text-align: center;
  background: var(--black);
  color: #fff;
  padding: 7px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
}
.sb-plan-cta:hover { background: var(--black-hover); color: #fff; }

/* User row at TOP of sidebar (v17.2.7 — moved from bottom) */
.sb-user-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 12px 8px 14px;
  background: var(--surface);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: background var(--t-fast);
  cursor: pointer;
}
.sb-user-top:hover {
  background: var(--surface-2);
}
.sb-user-arrow {
  color: var(--muted);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: transform var(--t-fast), color var(--t-fast);
}
.sb-user-top:hover .sb-user-arrow {
  color: var(--purple);
  transform: translateX(2px);
}

/* User row (legacy — kept for backwards compat if any pages still use it) */
.sb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 14px;
}
.sb-avatar {
  width: 30px; height: 30px;
  background: var(--purple);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.sb-user-info { flex: 1; min-width: 0; transition: opacity var(--t-fast); }
.sb-user-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-user-email {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-user-menu {
  color: var(--muted);
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 6px;
}
.sb-user-menu:hover { background: var(--surface-2); color: var(--text); }
.sb-user-menu svg { width: 14px; height: 14px; }

/* Collapsed state — hide labels, center icons */
.app-layout.collapsed .sb-logo-text,
.app-layout.collapsed .sb-section-label,
.app-layout.collapsed .sb-item-body,
.app-layout.collapsed .sb-badge,
.app-layout.collapsed .sb-plan,
.app-layout.collapsed .sb-user-info,
.app-layout.collapsed .sb-user-arrow,
.app-layout.collapsed .sb-user-menu {
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.app-layout.collapsed .sidebar { padding: 18px 8px; }
.app-layout.collapsed .sb-item { justify-content: center; padding: 8px; }
.app-layout.collapsed .sb-section-label { display: none; }
.app-layout.collapsed .sb-plan { display: none; }
.app-layout.collapsed .sb-top { flex-direction: column; gap: 12px; align-items: center; justify-content: center; }
.app-layout.collapsed .sb-logo { gap: 0; }
.app-layout.collapsed .sb-user { justify-content: center; padding: 14px 8px; }

/* Tooltip on collapsed items */
.app-layout.collapsed .sb-item { position: relative; }
.app-layout.collapsed .sb-item:hover::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--black);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
}
/* v18.7.4 — Tooltip arrow pointing to the icon */
.app-layout.collapsed .sb-item:hover::before {
  content: '';
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--black);
  z-index: 1000;
  pointer-events: none;
}

/* v18.7.4 — Auto-compact sidebar at intermediate desktop widths (901-1280px).
   Eliminates the awkward "narrow desktop" zone where there's no visible sidebar
   on touch but desktop chrome.
   The `.collapsed-auto` class is added by sidebar.js when window width is in this range
   and removed when it exits the range (preserving user's manual collapse choice for wide screens). */
@media (min-width: 901px) and (max-width: 1280px) {
  .app-layout.collapsed-auto { grid-template-columns: var(--sidebar-w-collapsed, 64px) 1fr; }
  /* Hide the manual collapse toggle button — auto-collapse handles it */
  .app-layout.collapsed-auto .sb-collapse-btn { display: none; }
  .app-layout.collapsed-auto .sb-toggle { display: none; }
}

/* Main content area */
.app-main {
  background: var(--bg);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-main-content {
  padding: 32px 36px 48px;
  flex: 1;
}

/* Mobile sidebar */
.sb-mobile-toggle {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 60;
  width: 40px; height: 40px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.sb-mobile-toggle svg { width: 18px; height: 18px; }
.sb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26,22,37,0.4);
  backdrop-filter: blur(4px);
  z-index: 25;
}

@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform var(--t-base);
    box-shadow: 0 0 40px rgba(0,0,0,0.1);
    z-index: 60; /* v18.7.2 — must sit above .dropai-topbar (z-index:50) */
  }
  /* v21 i18n — in RTL (Arabic), sidebar lives on the right and slides in from the right */
  [dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  .sidebar.open { transform: translateX(0); }
  [dir="rtl"] .sidebar.open { transform: translateX(0); }
  /* v18.7.2 — overlay sits above topbar but below sidebar */
  .sb-overlay { z-index: 55; }
  .sb-overlay.show { display: block; }
  /* v18.7.3 — DEFINITIVE FIX: hide topbar entirely when sidebar is open on mobile,
     eliminates any chance of visual overlap. body class set by sidebar.js. */
  body.sidebar-open .dropai-topbar { display: none !important; }
  .sb-mobile-toggle { display: inline-flex; }
  .app-main-content { padding: 60px 18px 32px; }
  .app-layout.collapsed { grid-template-columns: 1fr; }
  .app-layout.collapsed .sidebar { padding: 18px 14px; }
  .app-layout.collapsed .sb-logo-text,
  .app-layout.collapsed .sb-section-label,
  .app-layout.collapsed .sb-item-body,
  .app-layout.collapsed .sb-badge,
  .app-layout.collapsed .sb-plan,
  .app-layout.collapsed .sb-user-info,
  .app-layout.collapsed .sb-user-menu { opacity: 1; pointer-events: auto; width: auto; height: auto; }
  .app-layout.collapsed .sb-plan { display: flex; }
  .app-layout.collapsed .sb-item { justify-content: flex-start; padding: 8px 10px; }
  .app-layout.collapsed .sb-top { flex-direction: row; justify-content: space-between; }
  .app-layout.collapsed .sb-logo { gap: 10px; }
  .app-layout.collapsed .sb-user { justify-content: flex-start; padding: 14px 10px 10px; }
  .sb-toggle { display: none; }
}

/* ============================================================
   PUBLIC LAYOUT — Top nav + content (no sidebar)
   ============================================================ */

.public-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 36px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 40;
}
.public-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.public-logo-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'><defs><radialGradient id='g' cx='30%25' cy='30%25' r='80%25'><stop offset='0%25' stop-color='%23EC4899'/><stop offset='50%25' stop-color='%23A78BFA'/><stop offset='100%25' stop-color='%237C3AED'/></radialGradient></defs><rect width='52' height='52' rx='14' fill='url(%23g)'/><ellipse cx='26' cy='26' rx='20' ry='8' fill='none' stroke='white' stroke-width='1' opacity='0.45' transform='rotate(-20 26 26)'/><path d='M 16,10 L 16,42 L 24,42 C 34,42 40,34 40,26 C 40,18 34,10 24,10 Z' fill='white'/><path d='M 19,13 L 19,39 L 24,39 C 32,39 37,33 37,26 C 37,19 32,13 24,13 Z' fill='url(%23g)'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.public-nav-links { display: flex; gap: 28px; }
.public-nav-links a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  transition: color var(--t-fast);
}
.public-nav-links a:hover, .public-nav-links a.active { color: var(--text); }
.public-nav-actions { display: flex; gap: 10px; align-items: center; }

@media (max-width: 800px) {
  .public-nav { padding: 14px 18px; }
  .public-nav-links { display: none; }
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ── Buttons ───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast), transform 80ms ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 14px; height: 14px; }

.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover { background: var(--purple-hover); color: #fff; }

.btn-dark { background: var(--black); color: #fff; }
.btn-dark:hover { background: var(--black-hover); color: #fff; }

.btn-ghost { background: var(--bg); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--black); }

.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-lg { padding: 13px 22px; font-size: 14.5px; }
.btn-block { width: 100%; }

/* ── Badges ────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.badge-new { background: var(--purple); color: #fff; }
.badge-free { background: var(--green-bg); color: var(--green-text); }
.badge-pro { background: var(--purple-light); color: var(--purple-text); }
.badge-trending { background: var(--info-bg); color: var(--info-text); }
.badge-hot { background: var(--green-bg); color: var(--green-text); }
.badge-rising { background: var(--info-bg); color: var(--info-text); }
.badge-grey { background: var(--surface); color: var(--muted); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
}
.pill-purple { background: var(--purple-light); color: var(--purple-text); }
.pill-green  { background: var(--green-bg); color: var(--green-text); }
.pill-amber  { background: var(--amber-bg); color: var(--amber-text); }
.pill-live::before {
  content: ''; width: 6px; height: 6px;
  background: var(--green); border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Cards ─────────────────────────────────────────── */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
}
.card-soft {
  background: var(--surface);
  border: none;
}
.card-tight { padding: 16px; }
.card-loose { padding: 28px; }
.card-hover { transition: border-color var(--t-fast); }
.card-hover:hover { border-color: var(--black); }

/* ── Forms ─────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.input, .textarea, .select {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  transition: border-color var(--t-fast);
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--purple); }
.textarea { min-height: 80px; resize: vertical; line-height: 1.55; }

.input::placeholder, .textarea::placeholder { color: var(--soft); }

/* ── Page header ───────────────────────────────────── */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 16px;
}
.page-head-left { flex: 1; min-width: 0; }
.page-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.page-title-icon {
  color: var(--purple);
  flex-shrink: 0;
}
.page-title-icon svg { width: 26px; height: 26px; }
.page-title {
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.page-subtitle { font-size: 13.5px; color: var(--muted); }

/* ── Section titles ────────────────────────────────── */
.section-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 14px;
  color: var(--text);
}

/* ── Eyebrow ───────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Numerals ──────────────────────────────────────── */
.numeral {
  font-family: var(--font-serif);
  font-weight: 400;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.numeral-lg { font-size: 44px; line-height: 1; }
.numeral-md { font-size: 32px; line-height: 1; }
.numeral-sm { font-size: 22px; line-height: 1; }

/* ── Progress ──────────────────────────────────────── */
.progress {
  width: 100%;
  height: 6px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar { height: 100%; background: var(--purple); border-radius: inherit; transition: width 400ms ease; }
.progress-bar.success { background: var(--green); }
.progress-bar.warning { background: var(--amber); }
.progress-bar.danger { background: var(--red-text); }

/* ── Tabs (sub-nav) ────────────────────────────────── */
.tabs-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.tab-pill {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.tab-pill.active { background: var(--black); color: #fff; border-color: var(--black); }
.tab-pill:hover:not(.active) { border-color: var(--black); }

/* ── Alert / Info banner ───────────────────────────── */
.alert {
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 13.5px;
}
.alert-title { font-weight: 500; margin-bottom: 3px; }
.alert-info { background: var(--info-bg); color: var(--info-text); }
.alert-success { background: var(--green-bg); color: var(--green-text); }
.alert-warning { background: var(--amber-bg); color: var(--amber-text); }
.alert-danger { background: var(--red-bg); color: var(--red-text); }

/* ── Container utility ─────────────────────────────── */
.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 32px; }

@media (max-width: 800px) {
  .container, .container-narrow { padding: 0 18px; }
}

/* ── Utilities ─────────────────────────────────────── */
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.text-muted { color: var(--muted); }
.text-soft { color: var(--soft); }
.text-purple { color: var(--purple); }
.text-center { text-align: center; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.hidden { display: none !important; }

/* ── RTL support ───────────────────────────────────── */
[dir="rtl"] .sb-mobile-toggle { left: auto; right: 16px; }
[dir="rtl"] .sidebar { border-right: 0; border-left: 1px solid var(--border); }
[dir="rtl"] .app-layout.collapsed .sb-item:hover::after {
  left: auto; right: calc(100% + 12px);
}

/* v21.1 (#9, #34) — Arabic ligature protection.
   letter-spacing and text-transform:uppercase break Arabic letter joining,
   producing disconnected glyphs. These two rules reset both for any Arabic content. */
:lang(ar), [dir="rtl"], :lang(ar) * , [dir="rtl"] * {
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* ============================================================
   v25.0.1 — Arabic typography pass (site-wide RTL fix)
   ============================================================
   Problem: 14 classes site-wide use var(--font-mono) which is
   Latin-only (IBM Plex Mono). In Arabic mode they fall back to
   system mono fonts — illegible and broken-looking.
   Also: many label classes use 7.5–11px font-size, too small
   for Arabic which needs ~10–15% more visual weight.
   Solution: swap --font-mono for Arabic font when RTL/AR, and
   bump tiny labels to readable 12px.
   ------------------------------------------------------------ */
[dir="rtl"], :lang(ar) {
  --font-mono: 'Readex Pro', 'IBM Plex Mono', ui-monospace, monospace;
}

[dir="rtl"] .field-label,
[dir="rtl"] .eyebrow,
[dir="rtl"] .sb-section-label,
[dir="rtl"] .sb-badge,
[dir="rtl"] .sb-mini-badge,
[dir="rtl"] .sb-user-email,
[dir="rtl"] .sb-plan-meter-label,
[dir="rtl"] .activity-row .a-time,
[dir="rtl"] .r-aside-title,
[dir="rtl"] .r-aside-reset,
[dir="rtl"] .r-counter-lbl {
  font-size: 12px;
  font-weight: 500;
  color: #4B4754;
}

/* daily-tag stays smaller — it's just a marker badge */
[dir="rtl"] .r-counter-lbl .daily-tag {
  font-size: 10px;
}

/* ============================================================
   v25.0.1 — Skeleton loading animation (reusable site-wide)
   ============================================================
   Generic loading skeleton classes used while AI generates
   content. Reusable across Section 5 tools (ad-copy, reply-bot,
   brand-name, hashtag-gen, seo-optimizer) and beyond.
   ------------------------------------------------------------ */
.skeleton-pulse {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--surface) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton-line { height: 12px; margin-bottom: 6px; }
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 80%; }
.skeleton-pill { width: 44px; height: 18px; border-radius: 4px; }
.skeleton-label-block { width: 50px; height: 8px; margin-bottom: 7px; border-radius: 3px; }
.skeleton-btn { width: 100%; height: 38px; margin-top: 12px; border-radius: 8px; }

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* RTL: reverse shimmer direction so it flows right-to-left */
[dir="rtl"] .skeleton-pulse {
  animation-direction: reverse;
}

/* Loading state container with pulsing label */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 16px;
  grid-column: 1 / -1;
}
.loading-state-text {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.loading-state-dots {
  display: inline-flex;
  gap: 4px;
}
.loading-state-dots span {
  width: 5px; height: 5px;
  background: var(--purple);
  border-radius: 50%;
  animation: loading-dot 1.2s ease-in-out infinite;
}
.loading-state-dots span:nth-child(2) { animation-delay: 0.15s; }
.loading-state-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes loading-dot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* v25.4.1 — reusable spinner + indeterminate progress bar (loading enhancement) */
.loading-spinner {
  width: 42px; height: 42px;
  border: 3px solid var(--border);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: loading-spin 0.85s linear infinite;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }
.loading-progress {
  height: 4px;
  width: 100%;
  max-width: 240px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
}
.loading-progress-fill {
  height: 100%;
  width: 40%;
  background: var(--purple);
  border-radius: 99px;
  animation: loading-indet 1.4s ease-in-out infinite;
}
@keyframes loading-indet {
  0% { margin-left: -40%; }
  100% { margin-left: 100%; }
}
[dir="rtl"] .loading-progress-fill { animation-direction: reverse; }

/* ── Print ─────────────────────────────────────────── */
@media print {
  .sidebar, .sb-mobile-toggle, .sb-overlay { display: none; }
  .app-main-content { padding: 0; }
}

/* ── Reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   v17.1 ADDITIONS — No underlines, tooltips, language switcher
   ============================================================ */

/* Remove ALL underlines globally (Ahmed's request) */
a, a:hover, a:focus, a:visited { text-decoration: none !important; }
.crumbs a, .crumbs a:hover { text-decoration: none !important; }
u { text-decoration: none; }

/* Tooltip system — info icons next to complex terms */
.tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 10px;
  font-weight: 600;
  margin-left: 5px;
  cursor: help;
  position: relative;
  vertical-align: middle;
  transition: background var(--t-fast), color var(--t-fast);
}
.tip:hover { background: var(--purple-light); color: var(--purple); }
.tip::before { content: 'i'; font-style: italic; }
.tip:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  /* v24.1 — Removed conflicting white-space:nowrap, kept normal */
  white-space: normal;
  width: max-content;
  max-width: 240px;
  z-index: 9999; /* v24.1 — Raised to 9999 (was 1000) to beat overlay scenarios */
  pointer-events: none;
  line-height: 1.45;
  /* v24.1 — Use logical 'start' instead of 'left' so RTL aligns correctly */
  text-align: start;
  /* v24.1 — Keep tooltip text direction matching the page so AR reads right-to-left inside it */
  direction: inherit;
  /* v24.1 — Drop shadow makes tooltip clearly visible over any background */
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.tip:hover::before { content: 'i'; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--muted);
}
.empty-state-icon {
  width: 56px; height: 56px;
  background: var(--purple-light);
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  color: var(--purple);
}
.empty-state-icon svg { width: 26px; height: 26px; }
.empty-state h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 6px;
}
.empty-state p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 20px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,22,37,0.5);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--bg);
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.modal-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.modal-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--muted);
  cursor: pointer;
}
.modal-close:hover { background: var(--surface); color: var(--text); }
.modal-close svg { width: 16px; height: 16px; }

/* Language switcher */
.lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
  width: 100%;
}
.lang-btn:hover { border-color: var(--black); }
.lang-btn.selected { border-color: var(--purple); background: var(--purple-light); }
.lang-flag { font-size: 18px; }
.lang-info { flex: 1; }
.lang-name-en {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.lang-name-native {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* Toast container styling (match v17 design) */
.dropai-toast {
  background: var(--black) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
  font-family: var(--font-body) !important;
}
.dropai-toast.success { background: var(--green-text) !important; }
.dropai-toast.danger, .dropai-toast.error { background: var(--red-text) !important; }
.dropai-toast.warning { background: var(--amber-text) !important; }

/* Stale data banner */
.stale-banner {
  background: var(--amber-bg);
  color: var(--amber-text);
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stale-banner::before {
  content: '⚠';
  font-size: 14px;
}

/* ═══════════════════════════════════════════════
   v17.3.7 — Plan Badges (inspired by Logo C)
   Each plan has its own squircle icon + color theme
   ═══════════════════════════════════════════════ */

.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
  vertical-align: middle;
}
.plan-badge-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex-shrink: 0;
  display: inline-block;
}
/* Larger version for pricing pages / subscription */
.plan-badge-lg {
  padding: 8px 14px 8px 8px;
  font-size: 13px;
  border-radius: 10px;
}
.plan-badge-lg .plan-badge-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

/* FREE — Subdued gray */
.plan-badge-free {
  background: #F3F4F6;
  color: #6B7280;
  border: 1px solid #E5E7EB;
}
.plan-badge-free .plan-badge-icon {
  background: linear-gradient(135deg, #D1D5DB, #9CA3AF);
}

/* STARTER — Light purple */
.plan-badge-starter {
  background: #EEEDFE;
  color: #534AB7;
  border: 1px solid #CECBF6;
}
.plan-badge-starter .plan-badge-icon {
  background: linear-gradient(135deg, #C4B5FD, #8B7AE8);
}

/* PRO — Mesh gradient (matches Logo C) */
.plan-badge-pro {
  background: linear-gradient(135deg, rgba(236,72,153,0.08), rgba(124,58,237,0.08));
  color: #7C3AED;
  border: 1px solid rgba(124,58,237,0.25);
}
.plan-badge-pro .plan-badge-icon {
  background: radial-gradient(circle at 30% 30%, #EC4899, #A78BFA 50%, #7C3AED);
}

/* BUSINESS — Deep purple solid */
.plan-badge-business {
  background: #2D1B4E;
  color: #FFF;
  border: 1px solid #2D1B4E;
}
.plan-badge-business .plan-badge-icon {
  background: linear-gradient(135deg, #A78BFA, #7C3AED);
}

/* ENTERPRISE — Black with gold */
.plan-badge-enterprise {
  background: #000;
  color: #FCD34D;
  border: 1px solid #1F1F1F;
}
.plan-badge-enterprise .plan-badge-icon {
  background: radial-gradient(circle at 30% 30%, #FCD34D, #D97706 50%, #92400E);
}

/* ADMIN badge */
.plan-badge-admin {
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(236,72,153,0.12));
  color: #7C3AED;
  border: 1px solid rgba(124,58,237,0.3);
}
.plan-badge-admin .plan-badge-icon {
  background: radial-gradient(circle at 30% 30%, #EC4899, #7C3AED);
}

/* ═══════════════════════════════════════════════
   v17.3.9 — Top Bar (Header)
   - Sits inside .app-main as first sibling of .app-main-content
   - Spans full width, no negative margins
   - Page content padding moves into the inner container
   ═══════════════════════════════════════════════ */

.dropai-topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 50;
  width: 100%;
}
.dropai-topbar-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 36px;
  min-height: 56px;
  box-sizing: border-box;
  max-width: 100%;
}

/* v21 — In-topbar hamburger (replaces floating fixed button) */
/* v21.3 (#53) — Uses unified --tb-btn-* variables */
.topbar-hamburger {
  display: none; /* Hidden by default on desktop */
  width: var(--tb-btn-size);
  height: var(--tb-btn-size);
  align-items: center;
  justify-content: center;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e5eb);
  border-radius: var(--tb-btn-radius);
  cursor: pointer;
  color: var(--text, #1a1625);
  flex-shrink: 0;
  padding: 0;
  transition: background 140ms;
}
.topbar-hamburger:hover { background: var(--soft, #f5f3ff); }
.topbar-hamburger svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .topbar-hamburger { display: inline-flex; }
}

/* v21 — When the in-topbar hamburger exists on the page, hide the legacy floating one entirely */
body:has(.topbar-hamburger) .sb-mobile-toggle { display: none !important; }

/* v21.2 — Topbar bell button (v21.3 #53: unified sizing) */
.topbar-bell {
  position: relative;
  width: var(--tb-btn-size);
  height: var(--tb-btn-size);
  min-width: var(--tb-btn-size);
  border-radius: var(--tb-btn-radius);
  border: 1px solid var(--border, #e5e5eb);
  background: var(--surface, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text, #1a1625);
  flex-shrink: 0;
  padding: 0;
  transition: all 140ms;
}
.topbar-bell:hover { background: var(--soft, #f5f3ff); border-color: #c4b5fd; }
.topbar-bell.active { background: var(--soft, #f5f3ff); border-color: #7c3aed; }
.topbar-bell svg { width: 18px; height: 18px; }
.topbar-bell-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  pointer-events: none;
  font-family: var(--font-body);
}
.topbar-bell-badge.hidden { display: none; }

/* v21.2 — Inbox panel (dropdown from bell) */
.inbox-panel {
  position: fixed;
  top: 60px;
  right: 20px;
  width: 380px;
  max-height: 540px;
  background: #fff;
  border: 1px solid var(--border, #e5e5eb);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  display: none;
  z-index: 220;
  overflow: hidden;
  flex-direction: column;
}
.inbox-panel.open { display: flex; animation: ip-slide 180ms ease; }
@keyframes ip-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.inbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: none;
  background: transparent;
}
.inbox-backdrop.show { display: block; }

.ip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #f0eff5;
}
.ip-title {
  font-family: 'Instrument Serif', serif;
  font-size: 20px;
  margin: 0;
  font-weight: 400;
  color: #1a1625;
}
.ip-mark {
  background: none;
  border: none;
  color: #7c3aed;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  padding: 0;
}
.ip-mark:hover { text-decoration: underline; }

.ip-tabs {
  display: flex;
  padding: 0 16px;
  gap: 4px;
  border-bottom: 1px solid #f0eff5;
}
.ip-tab {
  padding: 10px 12px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: #6b6776;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ip-tab.active { color: #7c3aed; border-bottom-color: #7c3aed; }

.ip-body { flex: 1; overflow-y: auto; }
.ip-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #f5f4f9;
  cursor: pointer;
  transition: background 140ms;
  position: relative;
}
.ip-item:hover { background: #fafafa; }
.ip-item.unread::before {
  content: '';
  position: absolute;
  top: 18px;
  inset-inline-start: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7c3aed;
}
.ip-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 18px;
}
.ip-item-icon.green { background: linear-gradient(135deg, #16a34a, #22c55e); }
.ip-item-icon.amber { background: linear-gradient(135deg, #d97706, #f59e0b); }
.ip-item-icon.red { background: linear-gradient(135deg, #dc2626, #ef4444); }
.ip-item-icon.purple { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.ip-item-icon.blue { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.ip-item-body { flex: 1; min-width: 0; }
.ip-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1625;
  margin: 0 0 2px;
}
.ip-item-text {
  font-size: 12px;
  color: #6b6776;
  margin: 0 0 4px;
  line-height: 1.5;
}
.ip-item-time {
  font-size: 11px;
  color: #9ca3af;
}

/* v21.2 — Smart Greeting Strip */
/* v21.3 (#52, #54) — Spacing tightened, consistent across breakpoints.
   Margins use variables so Desktop and Mobile share the same rhythm. */
.greeting-strip {
  margin: 0 24px var(--section-gap);
  padding: 16px 20px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  border: 1px solid transparent;
}

/* v21.3 (#54) — Vertical rhythm: every direct child of .app-main-content gets
   consistent spacing. Greeting strip is always first, sets the rhythm. */
.app-main-content > * + * { margin-top: var(--section-gap); }

/* v21.3 (#51) — When the Greeting Strip is injected above the welcome H1/P,
   hide the welcome duplicates. CSS-only — no JS required. The :has() selector
   targets .app-main-content that contains a #greeting-strip and hides the
   fallback welcome elements within it. */
.app-main-content:has(#greeting-strip) .welcome-h1-fallback,
.app-main-content:has(#greeting-strip) .welcome-p-fallback {
  display: none !important;
}
.gs-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
}
.gs-icon svg { width: 20px; height: 20px; }
.gs-body { flex: 1; min-width: 0; }
.gs-title { font-weight: 700; font-size: 13.5px; margin: 0 0 2px; color: #1a1625; }
.gs-text { font-size: 12.5px; color: #4a4658; margin: 0; line-height: 1.5; }
.gs-cta {
  padding: 8px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  display: inline-block;
}
.gs-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(0,0,0,0.05);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #6b6776;
  flex-shrink: 0;
}
.gs-close:hover { background: rgba(0,0,0,0.1); }
.gs-close svg { width: 14px; height: 14px; }
.gs-critical { background: linear-gradient(135deg, #fee2e2, #fecaca); border-color: #fca5a5; }
.gs-critical .gs-icon, .gs-critical .gs-cta { background: linear-gradient(135deg, #dc2626, #ef4444); }
.gs-warning { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #fcd34d; }
.gs-warning .gs-icon, .gs-warning .gs-cta { background: linear-gradient(135deg, #d97706, #f59e0b); }
.gs-onboarding { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border-color: #c4b5fd; }
.gs-onboarding .gs-icon, .gs-onboarding .gs-cta { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.gs-feature { background: linear-gradient(135deg, #dbeafe, #bfdbfe); border-color: #93c5fd; }
.gs-feature .gs-icon, .gs-feature .gs-cta { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.gs-trend { background: linear-gradient(135deg, #dcfce7, #bbf7d0); border-color: #86efac; }
.gs-trend .gs-icon, .gs-trend .gs-cta { background: linear-gradient(135deg, #16a34a, #22c55e); }
.gs-default {
  background: linear-gradient(135deg, #ede9fe, #f5f3ff);
  border-color: #c4b5fd;
}
.gs-default .gs-icon { background: linear-gradient(135deg, #1a1625, #2a1f3d); }
.gs-default .gs-cta { background: linear-gradient(135deg, #7c3aed, #a78bfa); color: #fff; }
.gs-progress {
  margin-top: 8px;
  background: rgba(255,255,255,0.6);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}
.gs-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  border-radius: 99px;
  transition: width 400ms ease;
}
@media (max-width: 700px) {
  .greeting-strip { margin: 0 12px var(--section-gap-mobile); gap: 10px; padding: 12px 14px; }
  .gs-icon { width: 36px; height: 36px; }
  .gs-icon svg { width: 18px; height: 18px; }
  .gs-cta { display: none; } /* hide CTA on mobile; tap the strip itself */
  .greeting-strip { cursor: pointer; }
  /* v21.3 (#54) — Tighter rhythm on mobile */
  .app-main-content > * + * { margin-top: var(--section-gap-mobile); }
}

/* When topbar is present, app-main-content gets reduced top padding */
.dropai-topbar + .app-main-content {
  padding-top: 22px;
}

/* Search */
.topbar-search {
  flex: 1;
  max-width: 460px;
  position: relative;
}
.topbar-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: #9CA3AF;
  pointer-events: none;
}
.topbar-search input {
  width: 100%;
  height: var(--tb-btn-size);
  padding: 0 14px 0 36px;
  background: #F9FAFB;
  border: 1px solid var(--border);
  border-radius: var(--tb-btn-radius);
  font-size: 13px;
  color: var(--text);
  box-sizing: border-box;
  font-family: inherit;
  transition: all 140ms ease;
}
.topbar-search input:focus {
  outline: none;
  border-color: #C4B5FD;
  background: #fff;
}
.topbar-search input::placeholder { color: #9CA3AF; }
.topbar-search-kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  color: #6B7280;
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-family: var(--font-mono, ui-monospace, monospace);
  pointer-events: none;
}

/* Search results dropdown */
.topbar-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04);
  padding: 8px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 51;
}
.tsr-section {
  font-size: 9.5px;
  color: #9CA3AF;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 10px 4px;
}
.tsr-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.tsr-item:hover { background: #F9FAFB; }
.tsr-icon {
  width: 28px; height: 28px;
  background: #F3F4F6;
  border-radius: 6px;
  display: grid; place-items: center;
  color: #6B7280;
  flex-shrink: 0;
}
.tsr-icon-purple { background: #F3F0FF; color: var(--purple); }
.tsr-icon svg { width: 14px; height: 14px; }
.tsr-meta { flex: 1; min-width: 0; }
.tsr-title {
  font-weight: 500;
  display: block;
}
.tsr-title strong { color: var(--purple); font-weight: 600; }
.tsr-sub {
  font-size: 11px;
  color: #9CA3AF;
  margin-top: 1px;
  display: block;
}
.tsr-kbd {
  margin-left: auto;
  font-size: 10px;
  color: #9CA3AF;
  background: #F3F4F6;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono, ui-monospace, monospace);
  flex-shrink: 0;
}

/* Spacer to push actions to the logical END of the row (right in LTR, left in RTL).
   v18.7.7 — was margin-left:auto (physical) → margin-inline-start:auto (logical, RTL-aware)
   v21.3 (#53) — gap unified with --tb-btn-gap */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--tb-btn-gap);
  margin-inline-start: auto;
  position: relative;
}

/* Icon button */
.topbar-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: none;
  display: grid;
  place-items: center;
  color: #6B7280;
  cursor: pointer;
  position: relative;
  transition: all 140ms ease;
}
.topbar-icon-btn:hover {
  background: #F3F4F6;
  color: var(--text);
}
.topbar-icon-btn svg { width: 17px; height: 17px; }
.topbar-notif-dot {
  position: absolute;
  top: 8px; right: 9px;
  width: 7px; height: 7px;
  background: #EF4444;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* Avatar button */
.topbar-avatar-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e5eb);
  border-radius: var(--tb-btn-radius);
  padding: 3px 10px 3px 3px;
  margin-left: 0;
  cursor: pointer;
  height: var(--tb-btn-size);
  font-family: inherit;
  transition: all 140ms ease;
}
.topbar-avatar-btn:hover {
  background: #F9FAFB;
  border-color: var(--border);
}
.topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EC4899, #7C3AED);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 12.5px;
}
.topbar-avatar-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
  align-items: flex-start;
}
.topbar-avatar-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.topbar-avatar-plan {
  font-size: 10px;
  color: var(--purple);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.topbar-avatar-chevron {
  width: 11px;
  height: 11px;
  color: #9CA3AF;
  margin-left: 2px;
}

/* Dropdown menu */
.topbar-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04);
  width: 240px;
  padding: 6px;
  z-index: 100;
}
.topbar-dropdown-head {
  padding: 12px 12px 11px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.topbar-dropdown-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.topbar-dropdown-email {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  font-size: 12.5px;
  border-radius: 6px;
  cursor: pointer;
  color: #374151;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  box-sizing: border-box;
}
.topbar-dropdown-item:hover { background: #F9FAFB; }
.topbar-dropdown-item svg { width: 15px; height: 15px; opacity: 0.7; flex-shrink: 0; }
.topbar-dropdown-danger { color: #DC2626; }
.topbar-dropdown-danger:hover { background: #FEF2F2; color: #B91C1C; }
.topbar-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px -2px;
}

/* v21 — Mobile + Tablet responsive (was: max-width 700) */
@media (max-width: 900px) {
  .dropai-topbar-inner {
    padding: 10px 16px;
    gap: 8px;
  }
  .topbar-search {
    max-width: 100%;
  }
}
@media (max-width: 700px) {
  .topbar-avatar-meta { display: none; }
  .topbar-avatar-chevron { display: none; }
  .topbar-avatar-btn { padding: 4px; }
  .topbar-lang-code { display: none; } /* v21 — keep just the globe icon on phone */
  .topbar-lang-chevron { display: none; }
}

/* ═══════════════════════════════════════════════
   v17.3.8 — Admin Quick Links
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   v18.5 — Admin Quick Links (Option B: small pills)
   Was: 60px square cards · Now: 28px pills with name + icon
   ═══════════════════════════════════════════════ */

.quick-links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ql-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
  transition: border-color 140ms, color 140ms, background 140ms;
}
.ql-card:hover {
  border-color: #C4B5FD;
  color: var(--primary);
  background: #FAFAFE;
}
.ql-card .ql-name {
  line-height: 1;
}
.ql-card .ql-arrow {
  font-size: 10px;
  color: var(--muted);
  margin-left: 2px;
  font-weight: 400;
}
.ql-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ql-icon svg {
  display: block;
  width: 10px;
  height: 10px;
}

@media (max-width: 500px) {
  .ql-card { font-size: 11.5px; padding: 5px 9px; gap: 6px; }
  .ql-icon { width: 14px; height: 14px; }
  .ql-icon svg { width: 9px; height: 9px; }
}

/* ═══════════════════════════════════════════════
   v17.3.8 — Plan Filter Pills (Admin)
   ═══════════════════════════════════════════════ */

.plan-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--muted);
  user-select: none;
  transition: all 140ms ease;
}
.plan-filter-pill:hover { border-color: #C4B5FD; }
.plan-filter-pill.active {
  background: var(--black, #1A1625);
  color: #fff;
  border-color: var(--black, #1A1625);
}
.plan-filter-count {
  background: #F3F4F6;
  color: var(--muted);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.plan-filter-pill.active .plan-filter-count {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* ──────────────────────────────────────────────────────
   v18.1 — Arabic typography fixes
   Latin fonts are tightly tracked; Arabic letters connect
   and need different spacing rules to avoid overlap.
   These rules ONLY apply when dir="rtl".
   ────────────────────────────────────────────────────── */
html[dir="rtl"] {
  word-spacing: 0.05em;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
  letter-spacing: 0;
  line-height: 1.45;
}

html[dir="rtl"] .hero h1 em,
html[dir="rtl"] .page-title em,
html[dir="rtl"] h2 em {
  margin-top: 6px;
  font-weight: 700;
}

html[dir="rtl"] .lead,
html[dir="rtl"] p,
html[dir="rtl"] .section-desc,
html[dir="rtl"] .feature p {
  letter-spacing: 0;
  line-height: 1.75;
}

html[dir="rtl"] .btn,
html[dir="rtl"] .card-title,
html[dir="rtl"] .feature h3 {
  letter-spacing: 0;
}

/* ──────────────────────────────────────────────────────
   v18.1 — Mobile polish for tighter, more professional feel
   ────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* Public nav: prevent horizontal scroll, allow wrapping */
  .public-nav {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px 14px;
  }
  .public-nav-links {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .public-nav-links::-webkit-scrollbar { display: none; }
  .public-nav-actions { gap: 6px; flex-shrink: 0; }
  .public-nav-actions .btn { padding: 7px 10px; font-size: 12.5px; }
  #lang-toggle-btn { padding: 7px 8px !important; }

  /* Hero h1: tighter on mobile so it doesn't overflow */
  .hero h1 { font-size: 36px; line-height: 1.05; }
  .hero .lead { font-size: 14.5px; line-height: 1.5; }
  .hero-ctas { flex-direction: column; gap: 8px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }

  /* Feature cards: full width with comfortable padding */
  .features { gap: 12px; }
  .feature { padding: 18px; }

  /* Footer: stack columns, keep tagline first */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; padding: 18px 14px; }

  /* Page wrap pages (about, faq, contact) — better mobile padding */
  .page-wrap { padding: 32px 18px 48px; }
  .page-h1 { font-size: 30px; line-height: 1.15; }

  /* Stats row → 2x2 instead of 4 cramped columns */
  .stats-row { grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; }
  .stat-i-num { font-size: 26px; }

  /* Buttons: bigger touch targets on mobile (min 44px) */
  .btn-sm { min-height: 38px; }
  .btn { min-height: 42px; }
}

/* RTL-specific mobile adjustments */
@media (max-width: 700px) {
  html[dir="rtl"] .public-nav-links {
    justify-content: flex-end;
  }
  html[dir="rtl"] .hero h1 { line-height: 1.4; }
  html[dir="rtl"] .page-h1 { line-height: 1.4; }
}

/* ──────────────────────────────────────────────────────
   v18.2 — Topbar language toggle button
   ────────────────────────────────────────────────────── */
.topbar-lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: var(--tb-btn-size);
  min-width: var(--tb-btn-size);
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, #E8E5DC);
  border-radius: var(--tb-btn-radius);
  font-size: 12px;
  font-weight: 500;
  color: var(--text, #1A1625);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
  flex-shrink: 0;
}
.topbar-lang-btn:hover { border-color: var(--purple, #7C3AED); background: #FAF8FF; }
/* v18.7.5 — Globe icon (replaced flag emoji) */
.topbar-lang-icon { width: 14px; height: 14px; color: var(--muted, #6B6B7A); flex-shrink: 0; }
.topbar-lang-btn:hover .topbar-lang-icon { color: var(--purple, #7C3AED); }
.topbar-lang-chevron { width: 10px; height: 10px; color: var(--muted, #6B6B7A); opacity: 0.6; flex-shrink: 0; }
.topbar-lang-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text, #1A1625);
  font-weight: 500;
}
@media (max-width: 700px) {
  .topbar-lang-btn { padding: 6px 7px; }
  .topbar-lang-code { display: none; }
  .topbar-lang-chevron { display: none; }
}

/* ═══════════════════════════════════════════════
   v18.5 — Animated Mesh Gradient Background
   Used ONLY on marketing pages: home, about, login, signup, 404.
   NEVER on workspace (dashboard, magic-search, admin, etc).
   Pure CSS, 0 JS, ~3 KB. Respects prefers-reduced-motion.
   ═══════════════════════════════════════════════ */

body.mesh-bg {
  background:
    radial-gradient(at 27% 37%, hsla(265, 90%, 60%, 0.18) 0px, transparent 50%),
    radial-gradient(at 97% 21%, hsla(280, 80%, 70%, 0.16) 0px, transparent 50%),
    radial-gradient(at 52% 99%, hsla(269, 90%, 65%, 0.16) 0px, transparent 50%),
    radial-gradient(at 10% 29%, hsla(255, 90%, 75%, 0.13) 0px, transparent 50%),
    radial-gradient(at 97% 96%, hsla(238, 80%, 70%, 0.13) 0px, transparent 50%),
    #FAF8FF;
  background-size: 200% 200%;
  background-attachment: fixed;
  animation: dropai-mesh-shift 22s ease-in-out infinite;
}
@keyframes dropai-mesh-shift {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.mesh-bg {
    animation: none;
    background-position: 50% 50%;
  }
}

/* ═══════════════════════════════════════════════
   v18.5 — 5 micro-animations
   ═══════════════════════════════════════════════ */

/* (1) Loading skeletons — used on dashboard/magic-search/trend-radar */
.skeleton {
  background: linear-gradient(90deg, var(--bg-soft, #F4F2EE) 25%, #E8E5DC 50%, var(--bg-soft, #F4F2EE) 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: dropai-shimmer 1.4s ease-in-out infinite;
}
@keyframes dropai-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; opacity: 0.7; }
}

/* (2) Counter up — applied via JS class .count-up */
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* (3) Pulse "Live" indicator — for Trend Radar header etc. */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #3B6D11;
  border-radius: 99px;
  margin-right: 6px;
  vertical-align: middle;
  animation: dropai-pulse 2s ease-in-out infinite;
}
@keyframes dropai-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(59, 109, 17, 0.4); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 6px rgba(59, 109, 17, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; }
}

/* (4) Hover lift — applied to .lift-on-hover */
.lift-on-hover {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 200ms ease;
}
.lift-on-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -10px rgba(124, 58, 237, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .lift-on-hover { transition: none; }
  .lift-on-hover:hover { transform: none; }
}

/* (5) Empty state SVG container */
.empty-state {
  text-align: center;
  padding: 48px 24px;
}
.empty-state svg {
  width: 80px;
  height: 80px;
  margin: 0 auto 12px;
  opacity: 0.5;
  display: block;
}
.empty-state-title {
  font-family: var(--font-serif, 'Instrument Serif', serif);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 6px;
}
.empty-state-text {
  font-size: 14px;
  color: var(--muted, #6B6B7A);
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════
   v18.5 — Activity Feed (admin) — scrollable + compact
   ═══════════════════════════════════════════════ */

.activity-feed-container {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 0;
  max-height: 380px;
  overflow-y: auto;
  position: relative;
  /* Subtle inner shadow indicates scroll on mobile */
  scrollbar-width: thin;
  scrollbar-color: #C4B5FD transparent;
}
.activity-feed-container::-webkit-scrollbar {
  width: 6px;
}
.activity-feed-container::-webkit-scrollbar-track {
  background: transparent;
  margin: 6px 0;
}
.activity-feed-container::-webkit-scrollbar-thumb {
  background: #DDD6FE;
  border-radius: 99px;
}
.activity-feed-container::-webkit-scrollbar-thumb:hover {
  background: #A78BFA;
}

.activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 120ms ease;
}
.activity-row:last-child {
  border-bottom: 0;
}
.activity-row:hover {
  background: rgba(124, 58, 237, 0.03);
}
.activity-row .a-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.activity-row .a-icon svg {
  width: 13px;
  height: 13px;
}
.activity-row .a-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.activity-row .a-name {
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 1px;
  color: var(--text);
}
.activity-row .a-detail {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-row .a-time {
  font-size: 10.5px;
  color: var(--muted);
  font-family: var(--font-mono);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════
   v18.7.6 — Cycle Countdown Chip
   Compact "18d" / detailed "18d, 14h, 32m, 08s" toggle.
   Used in dashboard counters, subscription-manage Renews,
   and Trend Radar last-refresh.
   ─────────────────────────────────────────────────────────── */
.dropai-countdown-chip {
  font-size: 12px;
  color: var(--purple, #7C3AED);
  font-weight: 500;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F5F0FF;
  padding: 2px 9px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 140ms ease;
  border: 1px dashed transparent;
  user-select: none;
  white-space: nowrap;
}
.dropai-countdown-chip:hover {
  background: #EBE2FF;
  border-color: var(--purple, #7C3AED);
}
.dropai-countdown-chip svg,
.dropai-countdown-chip i {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  font-size: 12px;
}
/* Expanded — black chip with purple text + ticking seconds */
.dropai-countdown-chip.cd-expanded {
  background: var(--black, #1A1625);
  color: #C4B5FD;
  border-color: transparent;
}
.dropai-countdown-chip.cd-expanded:hover {
  background: #2A2335;
}
/* Urgent (< 1 hour remaining) — red emphasis */
.dropai-countdown-chip.cd-urgent {
  background: #FEEBEB;
  color: #C2410C;
}
.dropai-countdown-chip.cd-urgent:hover {
  background: #FAC4C4;
  border-color: #C2410C;
}
.dropai-countdown-chip.cd-urgent.cd-expanded {
  background: var(--black, #1A1625);
  color: #FCA5A5;
}

/* ═══════════════════════════════════════════════════════════
   v23.4 — Sidebar workspace footer (Privacy · Terms · ©)
   Closes audit P0 #15 for all workspace pages via shared sidebar
   ═══════════════════════════════════════════════════════════ */
.sb-footer {
  padding: 12px 16px 14px;
  margin-top: 4px;
  border-top: 1px solid var(--border, #E5E5EB);
  text-align: center;
  font-size: 11px;
  color: var(--muted, #6B6B7A);
  line-height: 1.6;
}
.sb-footer-link {
  color: var(--muted, #6B6B7A);
  text-decoration: none;
  transition: color 140ms ease;
}
.sb-footer-link:hover {
  color: var(--purple, #7C3AED);
  text-decoration: underline;
}
.sb-footer-sep {
  color: #d4d2dc;
  margin: 0 6px;
}
.sb-footer-copy {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  opacity: 0.85;
}
/* Hide in collapsed sidebar (icon-only mode) */
.app-layout.collapsed .sb-footer {
  display: none;
}

/* ============================================================
   v24.5.3 — Right Sidebar (Usage panel)
   Mirror of left sidebar: same widths, same collapse mechanic.
   Only mounts when <body> has class="has-right-aside".
   Hides the floating quota-widget since the right sidebar
   replaces it with a richer per-quota view.
   ============================================================ */

/* 3-column grid when right sidebar is present */
body.has-right-aside .app-layout {
  grid-template-columns: var(--sidebar-w) 1fr var(--sidebar-w);
}
body.has-right-aside .app-layout.collapsed {
  grid-template-columns: var(--sidebar-w-c) 1fr var(--sidebar-w);
}
body.has-right-aside .app-layout.r-collapsed {
  grid-template-columns: var(--sidebar-w) 1fr var(--sidebar-w-c);
}
body.has-right-aside .app-layout.collapsed.r-collapsed {
  grid-template-columns: var(--sidebar-w-c) 1fr var(--sidebar-w-c);
}

/* Hide the global quota-widget strip on dashboard — right sidebar replaces it */
body.has-right-aside #quota-widget-wrap { display: none !important; }

/* Right sidebar shell — matches .sidebar styling exactly */
.r-aside {
  background: var(--bg);
  border-left: 1px solid var(--border);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: padding 220ms ease;
  scrollbar-width: thin;
}
[dir="rtl"] .r-aside {
  border-left: none;
  border-right: 1px solid var(--border);
}

/* Header — title + reset chip + collapse toggle */
.r-aside-h {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.r-aside-title {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  margin: 0;
}
.r-aside-reset {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--purple);
  background: var(--purple-light, #EEEDFE);
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  direction: ltr;
}
.r-aside-reset svg { width: 9px; height: 9px; }
.r-aside-toggle {
  order: -1;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 140ms ease;
}
.r-aside-toggle:hover { background: var(--surface); color: var(--text); border-color: var(--text); }
.r-aside-toggle svg { width: 11px; height: 11px; transition: transform 220ms ease; }
[dir="rtl"] .r-aside-toggle svg { transform: rotate(180deg); }

/* Counter rows */
.r-aside-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
}
/* v28.4 — icon + status-bar rows (replaces donut rings) */
.r-counter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 7px;
  transition: background 140ms ease;
}
.r-counter:hover { background: var(--surface); }
.r-counter-top { display: flex; align-items: center; gap: 9px; }
.r-ico { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }
.r-bar { height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.r-bar-fill { height: 100%; width: 0; border-radius: 3px; background: #065F46; transition: width 420ms ease, background 220ms ease; }
.r-dot { display: none; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.r-sec { font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 600; opacity: .75; margin: 9px 4px 4px; }
.r-sec:first-child { margin-top: 2px; }
.r-counter-lbl {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r-counter-lbl .daily-tag {
  font-family: var(--font-mono);
  font-size: 7.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--purple-light, #EEEDFE);
  color: var(--purple);
  letter-spacing: 0.04em;
  margin-inline-start: 4px;
  vertical-align: 1px;
}
.r-counter-num {
  font-size: 12px;
  line-height: 1.2;
  direction: ltr;
  flex-shrink: 0;
  white-space: nowrap;
}
.r-counter-num .num {
  font-weight: 500;
  font-feature-settings: 'tnum' 1;
  color: var(--text);
  font-size: 13px;
}
.r-counter-num .of {
  color: var(--muted);
  font-size: 12px;
}
.r-counter-num .unlim { color: var(--green-text); font-size: 11px; font-style: italic; }

/* Plan footer card */
.r-aside-foot {
  margin-top: auto;
  padding: 14px 12px 12px;
  background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
  border: 1px solid #c4b5fd;
  border-radius: 10px;
  text-align: center;
  flex-shrink: 0;
}
.r-plan-name {
  font-size: 11.5px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 2px;
}
.r-plan-name .plan-price {
  color: var(--muted);
  font-weight: 400;
  font-family: var(--font-serif);
  direction: ltr;
  display: inline-block;
}
.r-plan-sub {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 8px;
}
.r-plan-cta {
  display: inline-block;
  background: var(--purple);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-body);
}
.r-plan-cta:hover { background: var(--purple-hover, #6D28D9); }

/* ── Collapsed state ── */
.app-layout.r-collapsed .r-aside { padding: 18px 8px; gap: 6px; }
.app-layout.r-collapsed .r-aside-title,
.app-layout.r-collapsed .r-aside-reset,
.app-layout.r-collapsed .r-counter-lbl,
.app-layout.r-collapsed .r-counter-num,
.app-layout.r-collapsed .r-bar,
.app-layout.r-collapsed .r-plan-name,
.app-layout.r-collapsed .r-plan-sub,
.app-layout.r-collapsed .r-plan-cta { display: none; }
.app-layout.r-collapsed .r-aside-h {
  justify-content: center;
  padding-bottom: 10px;
}
.app-layout.r-collapsed .r-counter {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 7px 2px;
}
.app-layout.r-collapsed .r-counter-top { flex-direction: column; gap: 0; justify-content: center; }
.app-layout.r-collapsed .r-ico { width: 18px; height: 18px; }
.app-layout.r-collapsed .r-dot { display: block; }
.app-layout.r-collapsed .r-sec {
  font-size: 0; margin: 6px auto; padding: 0;
  width: 18px; height: 0; border-top: 1px solid var(--border);
}
.app-layout.r-collapsed .r-aside-foot {
  background: var(--purple);
  padding: 10px 4px;
  border-radius: 8px;
}
.app-layout.r-collapsed .r-aside-foot::before {
  content: '★';
  display: block;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

/* ── Responsive ── */
@media (max-width: 1280px) {
  /* Auto-collapse right sidebar in tight viewports */
  body.has-right-aside .app-layout { grid-template-columns: var(--sidebar-w) 1fr var(--sidebar-w-c); }
  body.has-right-aside .app-layout.collapsed { grid-template-columns: var(--sidebar-w-c) 1fr var(--sidebar-w-c); }
  body.has-right-aside .app-layout .r-aside { padding: 18px 8px; gap: 10px; }
  body.has-right-aside .r-aside-title,
  body.has-right-aside .r-aside-reset,
  body.has-right-aside .r-counter-body,
  body.has-right-aside .r-plan-name,
  body.has-right-aside .r-plan-sub,
  body.has-right-aside .r-plan-cta { display: none; }
  body.has-right-aside .r-aside-h { justify-content: center; padding-bottom: 10px; }
  body.has-right-aside .r-counter { justify-content: center; padding: 8px 2px; gap: 0; }
  body.has-right-aside .r-aside-foot {
    background: var(--purple);
    padding: 10px 4px;
    border-radius: 8px;
  }
  body.has-right-aside .r-aside-foot::before {
    content: '★';
    display: block;
    color: #fff;
    font-size: 14px;
    text-align: center;
  }
}

@media (max-width: 900px) {
  /* On mobile: stack right sidebar at TOP of main content as a horizontal strip */
  body.has-right-aside .app-layout,
  body.has-right-aside .app-layout.collapsed,
  body.has-right-aside .app-layout.r-collapsed,
  body.has-right-aside .app-layout.collapsed.r-collapsed {
    grid-template-columns: 1fr;
  }
  body.has-right-aside .r-aside {
    position: static;
    height: auto;
    padding: 14px;
    border-left: none;
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: 10px;
    order: 0; /* show before main on mobile */
  }
  [dir="rtl"] body.has-right-aside .r-aside {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  body.has-right-aside .r-aside-toggle { display: none; }
  body.has-right-aside .r-aside-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
  }
  body.has-right-aside .r-counter {
    background: var(--surface);
    border-radius: 8px;
    padding: 8px;
    border-top: none !important;
    margin-top: 0 !important;
  }
  body.has-right-aside .r-aside-foot { display: none; }
}