/* =========================================================
   Raffs Sync — Global Styles (SINGLE SOURCE OF TRUTH)
   Path: /assets/css/styles.css
   Version: v1.7.27 (Support Console + CSS hygiene + syntax fix)
   Updated: 2026-01-04

   What changed \(v1\.7\.27\):
   - FIXED: Critical missing closing brace in PATCH v1.7.19 block (previously could break parsing)
   - CLEANUP: Removed duplicate/legacy Support Console CSS blocks to prevent conflicts
   - ADDED: New Support Console styles for /sync/dashboard/support.php (.rs-* classes)
   - SAFE: Kept existing theme tokens and global components intact

   - CONSOLIDATED: One canonical theme + layout system (no duplicate patch blocks)
   - FIXED: Long URLs / code blocks overflowing cards (mobile + desktop)
   - FIXED: Grid/card min-width issues that cause horizontal scroll
   - STANDARDISED: Buttons, forms, tables, badges, cards, hero, footer
   - ADDED: Affiliate sub-nav (site-native) styling
   - ADDED: Utility grid classes (.grid.two/.grid.three/.grid.four)
   - KEPT: Existing class names used across /sync, /admin, /dashboard, /affiliate
   - NOTE: Keep this file as the only real stylesheet for Raffs Sync UI.
   
   ========================================================= */


/* =========================================================
   A) Imports (widgets)
   Description:
   - Widgets can be imported, but should not redefine :root theme vars.
   ========================================================= */
@import url("/assets/css/sales-ai-widget.css");
@import url("/assets/css/sales-chat-widget.css");


/* =========================================================
   0) Reset + Theme Variables
   Description:
   - Core palette, spacing, radius, shadows, and semantic colors.
   - All components should reference these vars.
   ========================================================= */
:root{
  /* Layout */
  --wrap: 1120px;
  --gutter: 16px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 60px rgba(0,0,0,.35);

  /* Surfaces */
  --bg: #0b0b0b;
  --bg2: #0f1116;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.04);
  --border: rgba(255,255,255,.12);
  --border2: rgba(255,255,255,.18);

  /* Text */
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.58);

  /* Accent (warm gold/brown) */
  --accent-1: #D8C3A3;
  --accent-2: #C2A27A;
  --accent-3: #9A7B55;
  --accent-glow: rgba(194,162,122,.18);

  /* Semantic */
  --ok: #22c55e;
  --ok-glow: rgba(34,197,94,.18);
  --warn: #f2b233;
  --warn-glow: rgba(242,178,51,.18);
  --bad: #ff5c5c;

  /* Buttons */
  --btn-bg: rgba(255,255,255,.04);
  --btn-bg-h: rgba(255,255,255,.06);
  --btn-bd: rgba(255,255,255,.14);
  --btn-bd-h: rgba(255,255,255,.22);

  /* Primary button tokens */
  --primary-bg-a: rgba(194,162,122,.26);
  --primary-bg-b: rgba(154,123,85,.12);
  --primary-bd: rgba(194,162,122,.38);
  --primary-ring: rgba(194,162,122,.22);

  /* Compatibility mapping (if older rules referenced these) */
  --raffs-text-main: var(--text);
  --raffs-bg-soft: var(--bg2);
  --raffs-radius-lg: var(--radius);
  --raffs-shadow-soft: var(--shadow);

  color-scheme: dark;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(194,162,122,.12), rgba(0,0,0,0)),
    radial-gradient(800px 420px at 90% 12%, rgba(34,197,94,.06), rgba(0,0,0,0)),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
p{ line-height:1.55; }
.muted{ color: var(--muted2); }


/* =========================================================
   1) Layout Helpers
   Description:
   - Wrap width, page padding, section spacing.
   ========================================================= */
.wrap{
  width:min(var(--wrap), calc(100% - (var(--gutter) * 2)));
  margin-inline:auto;
}
main.wrap{ padding: 18px 0 34px; }

.section{ padding: 18px 0; }
.section.alt{
  margin-top: 14px;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
/* =========================================================
   1B) Layout Clamp Fallback (RESTORE NON-FULL-WIDTH PAGES)
   Purpose:
   - If a page forgets to use <main class="wrap">, this prevents full-width layouts.
   - Mobile-safe (uses --gutter)
   - Does NOT affect pages already using .wrap
   ========================================================= */

/* Most pages should be: <main class="wrap"> ... */
/* But if not, clamp main anyway */
main:not(.wrap){
  width: min(var(--wrap), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
  padding: 18px 0 34px; /* matches main.wrap */
  min-width: 0;
}

/* Common alternate containers (if any legacy pages use these) */
.container,
.page-wrap,
.content-wrap{
  width: min(var(--wrap), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
  min-width: 0;
}

/* Safety: never allow accidental horizontal scroll from layout */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}


/* =========================================================
   2) Accessibility: Skip Link
   Description:
   - Keyboard accessibility skip-to-content.
   ========================================================= */
.skip{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px; height:1px;
  overflow:hidden;
}
.skip:focus{
  left:16px; top:12px;
  width:auto; height:auto;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(0,0,0,.8);
  border:1px solid var(--border);
  z-index:99999;
}


/* =========================================================
   3) Topbar + Main Navigation
   Description:
   - Site header/topbar, nav links, mobile toggle support.
   ========================================================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 9001;
  background: rgba(11,11,11,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 12px 0;
}

.brand-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight: 900;
  letter-spacing: .2px;
}
.brand-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.brand-name{ font-size: 15px; }

.nav{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.nav-link{
  text-decoration:none;
  font-weight: 750;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: rgba(255,255,255,.86);
}
.nav-link:hover{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}
.nav-link.active{
  border-color: rgba(194,162,122,.30);
  background: rgba(194,162,122,.10);
  color: rgba(255,255,255,.95);
}

/* =========================================================
   3B) Header/Footer Inner Width Clamp (RESTORE)
   Purpose:
   - Prevent header/footer content stretching full width
   - Mobile-safe via --gutter
   - Works even if markup forgot to add .wrap
   ========================================================= */

.topbar-inner,
.footer-inner{
  width: min(var(--wrap), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
  min-width: 0;
}

/* Optional: if you have any other header shells */
.header-inner,
.site-header-inner,
.nav-inner{
  width: min(var(--wrap), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
  min-width: 0;
}


/* =========================================================
   4) Buttons
   Description:
   - Base button styles + primary + small size.
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  cursor:pointer;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  user-select:none;
}
.btn:hover{
  border-color: var(--btn-bd-h);
  background: var(--btn-bg-h);
}
.btn:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);
}

.btn.primary{
  border-color: var(--primary-bd);
  background: linear-gradient(180deg, var(--primary-bg-a), var(--primary-bg-b));
  box-shadow: 0 0 0 4px rgba(194,162,122,.10);
}
.btn.primary:hover{
  box-shadow: 0 0 0 4px var(--primary-ring);
}

.btn.btn-sm{
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 999px;
}

/* =========================================================
   WhatsApp Button (Global)
   Used in: /sync/dashboard/login.php, /sync/affiliate/login.php, etc.
   ========================================================= */

.btn-whatsapp{
  background:#25D366;
  color:#0b2e13;
  border:1px solid rgba(0,0,0,.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:600;
  text-align:center;
  white-space:nowrap;
}

.btn-whatsapp svg{
  width:18px;
  height:18px;
  fill:#0b2e13;
  flex:0 0 auto;
}

.btn-whatsapp:hover{
  background:#20bd5a;
  color:#0b2e13;
}

.btn-whatsapp:active{
  background:#1ea855;
}

/* Optional: makes full-width CTAs align nicely */
.btn.block{
  width:100%;
}
/* =========================================================
   Login Tabs (Global helper)
   ========================================================= */
.login-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.login-tab{
  flex:1;
  min-width:220px;
}
.login-tab .btn{
  width:100%;
}
.login-pane{
  margin-top:12px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
/* =========================================================
   Raffs Sync — Login Tabs + Panes (Global)
   Used by: /sync/affiliate/login.php (and can be reused)
   ========================================================= */

.login-wrap{
  max-width: 720px;
  margin: 0 auto;
}

.login-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.login-tab{
  flex:1;
  min-width:220px;
}

.login-tab .btn{
  width:100%;
}

.login-pane{
  margin-top:12px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

.btn.block{
  width:100%;
}

/* =========================================================
   WhatsApp Button (Global)
   ========================================================= */

.btn-whatsapp{
  background:#25D366;
  color:#0b2e13;
  border:1px solid rgba(0,0,0,.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:600;
  text-align:center;
  white-space:nowrap;
}

.btn-whatsapp svg{
  width:18px;
  height:18px;
  fill:#0b2e13;
  flex:0 0 auto;
}

.btn-whatsapp:hover{
  background:#20bd5a;
  color:#0b2e13;
}

.btn-whatsapp:active{
  background:#1ea855;
}

/* Utility (optional): smaller muted text */
.muted-small{
  font-size:12.5px;
}
/* =========================================================
   WhatsApp Admin — Inbox (Global)
   Pages: /sync/admin/whatsapp/inbox.php
   ========================================================= */

.wa-inbox-grid{
  grid-template-columns: 360px 1fr;
  align-items: start;
}

@media (max-width: 980px){
  .wa-inbox-grid{ grid-template-columns: 1fr; }
}

.wa-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-height: 70vh;
  overflow:auto;
  padding-right: 4px;
}

.wa-item{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px 12px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.wa-item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}
.wa-item.is-active{
  border-color: rgba(120,180,255,.35);
  background: rgba(120,180,255,.10);
}

.wa-item-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.wa-item-title{
  font-weight: 950;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-thread{
  max-height: 70vh;
  overflow:auto;
  padding-right: 4px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.wa-msg{
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  min-width: 0;
}
.wa-msg-out{
  margin-left:auto;
  border-color: rgba(34,197,94,.22);
  background: rgba(34,197,94,.10);
}
.wa-msg-in{
  border-color: rgba(120,180,255,.22);
  background: rgba(120,180,255,.10);
}
/* =========================================================
   WhatsApp Admin Subnav
   Used by: /sync/admin/whatsapp/_partials/whatsapp_nav.php
   ========================================================= */

.subnav {
  margin-bottom: 16px;
}

.subnav__row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.subnav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background .15s ease, border-color .15s ease;
}

.subnav__link:hover {
  background: rgba(255,255,255,0.08);
}

.subnav__link.is-active {
  background: rgba(99,102,241,0.18);
  border-color: rgba(99,102,241,0.55);
}

/* ---- More dropdown ---- */

.subnav__more {
  position: relative;
}

.subnav__more_btn {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: inherit;
  cursor: pointer;
}

.subnav__more_btn:hover {
  background: rgba(255,255,255,0.08);
}

.subnav__more_menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: #0f1116;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px;
  display: none;
  z-index: 50;
}

.subnav__more_menu.is-open {
  display: block;
}

.subnav__group {
  margin-bottom: 10px;
}

.subnav__group:last-child {
  margin-bottom: 0;
}

.subnav__group_title {
  font-size: 12px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 4px 0 6px;
}

.subnav__menu_link {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}

.subnav__menu_link:hover {
  background: rgba(255,255,255,0.08);
}

.subnav__menu_link.is-active {
  background: rgba(99,102,241,0.18);
}

.subnav__menu_link.is-logout {
  color: #f87171;
}

/* =========================================================
   5) Cards + Surfaces
   Description:
   - Used everywhere: pricing cards, dashboard cards, admin cards, affiliate cards.
   ========================================================= */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  min-width: 0; /* critical: prevents overflow inside grids/flex */
}
.card.full{ width:100%; }

.success{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(34,197,94,.22);
  background: rgba(34,197,94,.10);
  color: rgba(255,255,255,.92);
}


/* =========================================================
   6) Grid System
   Description:
   - Standard grid + utility columns for consistent responsive layouts.
   - Prefer .grid.two/.grid.three etc over inline style.
   ========================================================= */
.grid{
  display:grid;
  gap:14px;
  min-width:0;
}
.grid.two{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px){
  .grid.four{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.three{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .grid.two, .grid.three, .grid.four{ grid-template-columns: 1fr; }
}

/* Back-compat fallback (deprecated):
   If pages still use inline repeat(2,1fr) on .grid, this prevents overflow on mobile.
   Remove once all pages use .grid.two/.grid.three etc.
*/
@media (max-width: 860px){
  .grid[style*="repeat(2,1fr)"],
  .grid[style*="repeat(2, 1fr)"]{
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   7) Hero
   Description:
   - Page hero banner for marketing + dashboard areas.
   ========================================================= */
.hero{
  padding: 18px 0 8px;
}
.hero h1{
  margin: 0 0 6px;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -.02em;
}
.hero p{
  margin: 0;
  color: var(--muted);
}
.hero-cta{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  gap:10px;
}


/* =========================================================
   8) Forms
   Description:
   - Shared inputs, labels, form blocks (subscribe-form is used across your pages).
   ========================================================= */
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-weight: 750;
  color: rgba(255,255,255,.86);
  font-size: 13px;
}
input, select, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font: inherit;
  outline:none;
  min-width: 0;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(194,162,122,.40);
  box-shadow: 0 0 0 4px var(--primary-ring);
}
textarea{ min-height: 120px; resize: vertical; }

.subscribe-form{
  display:block;
}

::placeholder{ color: rgba(255,255,255,.45); }

/* Autofill (Chrome) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,.25) inset;
  transition: background-color 9999s ease-in-out 0s;
}


/* =========================================================
   9) Tables
   Description:
   - Unified .table styling (used by affiliate + admin + dashboard).
   - Responsive: allows horizontal scroll only when needed.
   ========================================================= */
.table{
  width:100%;
  border-collapse: collapse;
  min-width: 740px;
}
.table th, .table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: middle;
}
.table th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .75;
  text-align:left;
}
.table tr:hover{
  background: rgba(255,255,255,.03);
}
.table td:last-child{ font-weight: 800; }

.table-wrap{
  width:100%;
  overflow:auto;
  border-radius: var(--radius);
}

/* If a table sits inside a card, allow scrolling safely */
.card .table{
  min-width: 680px;
}


/* =========================================================
   10) Badges (Status Pills)
   Description:
   - Used for commissions/payouts statuses.
   ========================================================= */
.badge{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

.badge-pending{
  background: rgba(255, 200, 120, 0.15);
  color: #ffc878;
}
.badge-approved{
  background: rgba(120, 180, 255, 0.15);
  color: #78b4ff;
}
.badge-paid{
  background: rgba(120, 255, 170, 0.15);
  color: #78ffaa;
}
.badge-failed{
  background: rgba(255, 92, 92, 0.15);
  color: #ff9a9a;
}


/* =========================================================
   11) Global Overflow Guards (Mobile “No Side Scroll”)
   Description:
   - Prevents long URLs or code blocks from pushing cards wider than viewport.
   ========================================================= */
.grid, .card, .wrap, main, section{ min-width:0; }

code, pre{
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

pre{ white-space: pre-wrap; }

.card *{ min-width: 0; } /* key: prevents children from forcing overflow */


/* =========================================================
   12) Affiliate Sub Navigation (Site-native tabs)
   Description:
   - Horizontal sub-nav under hero for affiliate portal.
   ========================================================= */
.affiliate-subnav{
  display:flex;
  gap: 18px;
  align-items:center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 24px;
  overflow-x: auto;
}
.affiliate-subnav a{
  text-decoration:none;
  padding: 8px 4px;
  font-weight: 800;
  color: inherit;
  opacity: .72;
  white-space: nowrap;
}
.affiliate-subnav a.is-active{
  opacity: 1;
  border-bottom: 2px solid currentColor;
}
.affiliate-subnav a:hover{ opacity: 1; }
.affiliate-subnav-spacer{ flex:1; }
.affiliate-subnav a.logout{ color: #ff9a9a; }


/* =========================================================
   13) Affiliate Tools Helpers (globalised)
   Description:
   - Replaces inline <style> blocks from tools.php.
   ========================================================= */
.tool-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.tool-code{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  max-width:100%;
  overflow-wrap:anywhere;
}

.tool-pre{
  margin-top: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px 12px;
}

@media (max-width: 520px){
  .tool-code, .tool-pre{ padding:10px; }
}
/* =========================================================
   Platform Subnav
   Used by: /sync/platform/_partials/platform_subnav.php
   ========================================================= */

.platform-subnav{
  margin: 10px 0 18px 0;
}

.platform-subnav__inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Pills */
.platform-subnav__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.platform-subnav__link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}

.platform-subnav__link.is-active{
  border-color: rgba(120,180,255,.35);
  background: rgba(120,180,255,.10);
  box-shadow: 0 0 0 3px rgba(120,180,255,.08);
}

/* Mobile ergonomics */
@media (max-width: 860px){
  .platform-subnav__inner{
    gap: 8px;
  }
  .platform-subnav__link{
    width: 100%;
    justify-content: flex-start;
  }
}
/* =========================================================
   How it Works page helpers (global CSS, no inline styles)
   Used by: /sync/platform/how-it-works.php
   ========================================================= */

.howitworks-grid-steps{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.howitworks-cta-spacer{
  margin-top: 12px;
}


/* =========================================================
   14) Pricing Cards (generic)
   Description:
   - Supports pricing layouts used in /sync/pricing and related pages.
   ========================================================= */
.pricing-card{
  position: relative;
}
.pricing-card .price-main{
  font-size: 34px;
  font-weight: 950;
  margin: 8px 0 0;
}
.pricing-card .price-sub{
  color: var(--muted2);
  margin-top: 4px;
}
.pricing-card .bill-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  font-weight: 850;
  font-size: 12px;
}
.pricing-card .bill-btn.is-active{
  border-color: rgba(194,162,122,.30);
  background: rgba(194,162,122,.10);
}


/* =========================================================
   15) Footer (single canonical footer block)
   Description:
   - Consistent footer layout + mobile stacking.
   ========================================================= */
.footer{
  margin-top: 26px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
}
.footer-inner{
  display:grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 18px;
  padding: 22px 0;
}
.footer-title{ font-weight: 950; }
.footer-tagline{ color: var(--muted); margin: 10px 0 0; }
.footer-fine{ color: var(--muted2); margin: 10px 0 0; font-size: 13px; }

.footer-cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.footer-head{
  font-weight: 900;
  margin-bottom: 10px;
  color: rgba(255,255,255,.90);
}
.footer-col a{
  display:block;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  margin-bottom: 8px;
}
.footer-col a:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}

@media (max-width: 980px){
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footer-col a{
  white-space: normal;     /* allow wrapping */
  word-break: break-word; /* safety for long strings */
}
.footer-col a{
  line-height: 1.35;
}

@media (max-width: 340px){
  .footer-cols{ grid-template-columns: 1fr; }
}
.footer-col{ min-width: 0; }

.footer-col a{
  white-space: normal;
  overflow-wrap: anywhere;
}


/* =========================================================
   16) Utility Bits
   Description:
   - Small helpers used around the site.
   ========================================================= */
.dash-dot{ margin: 0 8px; opacity: .6; }
hr{
  border:0;
  height:1px;
  background: rgba(255,255,255,.08);
  margin: 16px 0;
}

/* =========================================================
   PATCH v1.7.1 — Mobile Nav + Footer 2-col + Hero Media sizing
   ========================================================= */

/* -------------------------------
   1) Mobile Hamburger Menu
   Assumes your nav.js toggles a class like .is-open on [data-nav-root]
   and uses [data-nav-toggle] for the button.
   ------------------------------- */

/* The toggle button (hamburger) */
[data-nav-toggle],
.nav-toggle,
.topbar-toggle {
  display: none; /* hidden on desktop */
}

@media (max-width: 860px) {
  [data-nav-toggle],
  .nav-toggle,
  .topbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--btn-bd);
    background: var(--btn-bg);
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
  }
}

/* Default mobile state: hide nav links until opened */
@media (max-width: 860px) {
  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 10px;
  }

  /* When opened (nav.js should add .is-open to [data-nav-root]) */
  [data-nav-root].is-open .nav {
    display: flex;
  }

  /* Make links feel like a menu list */
  .nav-link {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.10);
  }

  .nav-link:hover {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.16);
  }
}
/* --------------------------------
   Hamburger icon lines (3-line)
   -------------------------------- */

@media (max-width: 860px){

  [data-nav-toggle],
  .nav-toggle,
  .topbar-toggle{
    position: relative;
    width: 42px;
    height: 42px;
    padding: 0;
  }

  /* middle line */
  [data-nav-toggle]::after,
  .nav-toggle::after,
  .topbar-toggle::after{
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    top: 50%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: translateY(-50%);
  }

  /* top + bottom lines */
  [data-nav-toggle]::before,
  .nav-toggle::before,
  .topbar-toggle::before{
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    top: 50%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: translateY(-9px);
    box-shadow: 0 9px 0 currentColor;
  }
}

/* -------------------------------
   2) Footer: keep 2 columns on mobile portrait
   Current v1.7.0 drops to 1 col at 520px.
   Change that cutoff to 420px so most phones stay 2 columns.
   ------------------------------- */
@media (max-width: 420px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------
   3) Hero images too small on mobile
   Applies to common hero media patterns:
   - .hero-media wrapper
   - images inside hero
   ------------------------------- */

/* If you use a .hero-media container anywhere */
.hero-media {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* Make hero media larger / more present on mobile */
@media (max-width: 860px) {
  .hero-media {
    min-height: 220px;
  }
}

/* If hero images are plain <img> under hero sections */
.hero img,
.hero-media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Optional: if hero images need consistent crop */
.hero-media img {
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   PATCH v1.7.2 — Admin & Dashboard Layout Restore
   =========================================================
   Restores:
   - Logged-in top status bar (admin/dashboard)
   - In-page sub navigation (tabs under hero)
   - Mobile behaviour
   ========================================================= */


/* =========================================================
   1) Logged-in Top Status Bar (Admin / Dashboard)
   ========================================================= */

.admin-topbar,
.dashboard-topbar {
  position: sticky;
  top: 0;
  z-index: 9100;
  background: rgba(11,11,11,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.admin-topbar-inner,
.dashboard-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
}

/* Left: context (Admin / Dashboard) */
.admin-context,
.dashboard-context {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .2px;
}

.admin-context span,
.dashboard-context span {
  opacity: .7;
  font-weight: 700;
}

/* Right: user status */
.admin-user,
.dashboard-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
}

.admin-user .badge,
.dashboard-user .badge {
  font-size: 11px;
  padding: 4px 8px;
}


/* =========================================================
   2) In-page Sub Navigation (Admin & Dashboard)
   ========================================================= */

.admin-subnav,
.dashboard-subnav {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 12px 0;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow-x: auto;
}

/* Links */
.admin-subnav a,
.dashboard-subnav a {
  text-decoration: none;
  padding: 8px 4px;
  font-weight: 800;
  color: inherit;
  opacity: .72;
  white-space: nowrap;
}

.admin-subnav a:hover,
.dashboard-subnav a:hover {
  opacity: 1;
}

.admin-subnav a.is-active,
.dashboard-subnav a.is-active {
  opacity: 1;
  border-bottom: 2px solid currentColor;
}

/* Push-right utilities */
.admin-subnav-spacer,
.dashboard-subnav-spacer {
  flex: 1;
}


/* =========================================================
   3) Mobile behaviour (Admin / Dashboard)
   ========================================================= */

@media (max-width: 860px) {

  /* Stack topbar content nicely */
  .admin-topbar-inner,
  .dashboard-topbar-inner {
    flex-wrap: wrap;
  }

  /* Subnav stays horizontal scroll */
  .admin-subnav,
  .dashboard-subnav {
    padding-bottom: 10px;
  }

}


/* =========================================================
   4) Safety: keep admin/dashboard isolated
   ========================================================= */
/* These styles do NOT affect:
   - public pages
   - affiliate pages
   - marketing pages
*/
/* =========================================================
   PATCH v1.7.3 — Customer Logged-in Top Bar
   =========================================================
   Adds:
   - Logged-in status bar for customer dashboard
   - Matches admin & dashboard styling exactly
   - Sticky, mobile-safe
   ========================================================= */


/* =========================================================
   1) Customer Top Status Bar
   ========================================================= */

.customer-topbar {
  position: sticky;
  top: 0;
  z-index: 9100;
  background: rgba(11,11,11,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.customer-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
}

/* Left: context */
.customer-context {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .2px;
}

.customer-context span {
  opacity: .7;
  font-weight: 700;
}

/* Right: user info */
.customer-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
}

.customer-user .badge {
  font-size: 11px;
  padding: 4px 8px;
}


/* =========================================================
   2) Mobile behaviour
   ========================================================= */

@media (max-width: 860px) {
  .customer-topbar-inner {
    flex-wrap: wrap;
  }
}
/* =========================================================
   PATCH v1.7.4 — Restore Header/Dashboard/Admin Layout Contracts
   Based on real markup in /sync/partials/header.php and dashboard pages.
   ========================================================= */


/* =========================================================
   1) Modebar (Logged-in as Admin/Customer)
   Markup: .modebar .modebar-inner .role-badge .dot .modebar-right a
   ========================================================= */
.modebar{
  position: sticky;
  top: 0;
  z-index: 9200;
  background: rgba(11,11,11,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.modebar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 8px 0;
}

.modebar-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.modebar-text{
  color: rgba(255,255,255,.70);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}

.role-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}

.role-badge .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(194,162,122,.16);
}

.modebar-admin .role-badge{
  border-color: rgba(194,162,122,.26);
  background: rgba(194,162,122,.10);
}
.modebar-customer .role-badge{
  border-color: rgba(120,180,255,.22);
  background: rgba(120,180,255,.10);
}
.modebar-customer .role-badge .dot{
  background: #78b4ff;
  box-shadow: 0 0 0 4px rgba(120,180,255,.14);
}

.modebar-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.modebar-right a{
  text-decoration:none;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.modebar-right a:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}

@media (max-width: 520px){
  .modebar-inner{ flex-wrap: wrap; }
}
/* =========================================================
   PATCH v1.7.13 — Affiliate Mode Bar
   ========================================================= */

.modebar-affiliate .role-badge {
  border-color: rgba(120, 220, 180, .35);
  background: rgba(120, 220, 180, .12);
}

.modebar-affiliate .role-badge .dot {
  background: #78dcb4; /* lamp green */
  box-shadow: 0 0 0 4px rgba(120, 220, 180, .18);
}

.modebar-affiliate .modebar-text {
  opacity: .75;
}


/* =========================================================
   2) Header nav toggle (hamburger) + backdrop
   Markup: button.nav-toggle .nav-toggle-bars + .nav-backdrop[data-nav-backdrop]
   JS: nav.js toggles [data-nav-root].is-open and aria-expanded
   ========================================================= */
.nav-toggle{
  display:none;
}

.nav-toggle-bars{
  width: 18px;
  height: 12px;
  position: relative;
  display:block;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
}
.nav-toggle-bars::before{ top:0; }
.nav-toggle-bars::after{ bottom:0; }

@media (max-width: 860px){
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: 44px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--btn-bd);
    background: var(--btn-bg);
    color: var(--text);
    cursor:pointer;
  }
  .nav-toggle:hover{
    border-color: var(--btn-bd-h);
    background: var(--btn-bg-h);
  }

  /* Backdrop for off-canvas feeling */
  .nav-backdrop{
    display:none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9000;
  }
  [data-nav-root].is-open .nav-backdrop{ display:block; }

  /* Nav panel */
  .nav{
    display:none;
    position: relative;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 12px;
  }
  [data-nav-root].is-open .nav{ display:flex; }

  .nav-link{
    width: 100%;
    justify-content: flex-start;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.10);
  }
}


/* =========================================================
   3) Header auth area (Customer / Admin / Affiliate chips + login links)
   Markup:
   .nav-auth
     .customer-chip
     .affiliate-chip
     .admin-chip
     .nav-login
   ========================================================= */

.nav-auth{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-left: 10px;
  flex-wrap: wrap;
}

/* --- Role chips --- */

/* Customer (blue) */
.customer-chip{
  border-color: rgba(120,180,255,.22);
  background: rgba(120,180,255,.10);
}

/* Affiliate (slightly deeper blue to differentiate from Customer) */
.affiliate-chip{
  border-color: rgba(90,150,255,.26);
  background: rgba(90,150,255,.12);
}

/* Admin (gold) */
.admin-chip{
  border-color: rgba(194,162,122,.26);
  background: rgba(194,162,122,.10);
}

/* --- Login / action links --- */
.nav-login{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}

/* --- Mobile behaviour --- */
@media (max-width: 860px){
  .nav-auth{
    margin-left: 0;
    gap: 8px;
  }
  .nav-auth .nav-link{
    width: 100%;
  }
}



/* =========================================================
   4) Customer Dashboard layout classes
   Markup: .dash-grid .dash-cardlink .dash-h2 .dash-h3 .dash-p etc
   ========================================================= */
.dash-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.dash-cardlink{
  text-decoration:none;
  transition: transform .12s ease;
}
.dash-cardlink:hover{
  transform: translateY(-1px);
}

.dash-h2{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 950;
}
.dash-h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 950;
}
.dash-p{
  margin: 0;
}
.dash-account-line{
  margin: 0;
}
.dash-subnote{
  margin: 8px 0 0;
}

@media (max-width: 980px){
  .dash-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .dash-grid{ grid-template-columns: 1fr; }
}


/* =========================================================
   5) Admin home quick-links grid
   You currently use inline grid-template-columns in admin/index.php.
   This class lets you remove the inline <style> block safely.
   ========================================================= */
.admin-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .admin-grid{ grid-template-columns: 1fr; }
}
/* =========================================================
   PATCH v1.7.5 — Admin & Customer Sub Navigation (FINAL)
   Matches real markup classes exactly.
   ========================================================= */


/* =========================================================
   1) Admin Sub Navigation
   Markup:
   nav.admin-subnav > .admin-subnav-inner > a.admin-subnav-link
   ========================================================= */

.admin-subnav {
  position: relative;
  margin-top: 12px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow-x: auto;
}

.admin-subnav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
  min-width: max-content;
}

.admin-subnav-link {
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  color: inherit;
  opacity: .65;
  padding: 6px 2px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.admin-subnav-link:hover {
  opacity: 1;
}

.admin-subnav-link.is-active {
  opacity: 1;
  border-bottom-color: currentColor;
}


/* =========================================================
   2) Customer Dashboard Sub Navigation
   Markup:
   nav.cust-subnav > .cust-subnav-inner > a.cust-subnav-link
   ========================================================= */

.cust-subnav {
  position: relative;
  margin-top: 12px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow-x: auto;
}

.cust-subnav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
  min-width: max-content;
}

.cust-subnav-link {
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  color: inherit;
  opacity: .65;
  padding: 6px 2px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.cust-subnav-link:hover {
  opacity: 1;
}

.cust-subnav-link.is-active {
  opacity: 1;
  border-bottom-color: currentColor;
}


/* =========================================================
   3) Mobile behaviour (both)
   - Horizontal scroll
   - No wrapping
   ========================================================= */

@media (max-width: 860px) {
  .admin-subnav,
  .cust-subnav {
    -webkit-overflow-scrolling: touch;
  }
}
/* =========================================================
   PATCH v1.7.6 — Unified Subnav (Admin/Dashboard/Affiliate)
   Goals:
   - Desktop: multi-row wrap (no horizontal scrolling)
   - Mobile: horizontal scroll (no wrap)
   - Consistent look across portals
   ========================================================= */

/* Base wrapper applies to ALL your sub nav shells */
.admin-subnav,
.cust-subnav,
.affiliate-subnav {
  margin-top: 12px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* INNER containers (your real markup differs per portal) */
.admin-subnav-inner,
.cust-subnav-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  flex-wrap: wrap;          /* Desktop wrap */
}

/* Affiliate subnav already uses direct <a> (no inner) */
.affiliate-subnav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  flex-wrap: wrap;          /* Desktop wrap */
  overflow: visible;
}

/* Links — unify style */
.admin-subnav-link,
.cust-subnav-link,
.affiliate-subnav a {
  text-decoration: none;
  font-weight: 850;
  font-size: 13px;
  color: inherit;
  opacity: .72;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  white-space: nowrap;
}

/* Hover/active */
.admin-subnav-link:hover,
.cust-subnav-link:hover,
.affiliate-subnav a:hover {
  opacity: 1;
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}

.admin-subnav-link.is-active,
.cust-subnav-link.is-active,
.affiliate-subnav a.is-active {
  opacity: 1;
  border-color: rgba(194,162,122,.30);
  background: rgba(194,162,122,.10);
}

/* Optional: make "Logout" feel different if you add class logout */
.admin-subnav-link.logout,
.cust-subnav-link.logout,
.affiliate-subnav a.logout {
  border-color: rgba(255,92,92,.25);
  background: rgba(255,92,92,.10);
  color: rgba(255,255,255,.92);
}

/* ---------- Mobile behaviour: stay single row + scroll ---------- */
@media (max-width: 860px) {

  .admin-subnav,
  .cust-subnav,
  .affiliate-subnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .admin-subnav-inner,
  .cust-subnav-inner,
  .affiliate-subnav {
    flex-wrap: nowrap;        /* No wrap on mobile */
    min-width: max-content;
  }
}
/* =========================================================
   PATCH v1.7.7 — Grouped Subnav + "More" Dropdown (No JS)
   Works for Admin/Customer/Affiliate via shared .subnav classes.
   ========================================================= */

.subnav{
  margin-top: 12px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.subnav-inner{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 0;
  flex-wrap: wrap;          /* desktop wraps nicely */
}

.subnav-link{
  text-decoration:none;
  font-weight: 850;
  font-size: 13px;
  color: inherit;
  opacity: .72;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  white-space: nowrap;
  cursor: pointer;
}

.subnav-link:hover{
  opacity: 1;
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}

.subnav-link.is-active{
  opacity: 1;
  border-color: rgba(194,162,122,.30);
  background: rgba(194,162,122,.10);
}

/* Details dropdown */
.subnav-more{
  position: relative;
}

.subnav-more > summary{
  list-style: none;
}
.subnav-more > summary::-webkit-details-marker{
  display:none;
}

/* Panel */
.subnav-panel{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(760px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(11,11,11,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  z-index: 9999;
}

.subnav-group{
  min-width: 0;
}

.subnav-head{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .70;
  margin-bottom: 10px;
}

.subnav-item{
  display:block;
  text-decoration:none;
  font-weight: 850;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  opacity: .90;
  margin-bottom: 8px;
}

.subnav-item:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}

.subnav-item.is-active{
  border-color: rgba(194,162,122,.30);
  background: rgba(194,162,122,.10);
}

.subnav-item.logout{
  border-color: rgba(255,92,92,.25);
  background: rgba(255,92,92,.10);
}

/* Responsive dropdown columns */
@media (max-width: 980px){
  .subnav-panel{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .subnav-panel{ grid-template-columns: 1fr; }
}

/* Mobile: keep subnav single-row scroll (no wrap) */
@media (max-width: 860px){
  .subnav{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .subnav-inner{
    flex-wrap: nowrap;
    min-width: max-content;
  }
  /* On small screens, dropdown panel anchors left to avoid off-screen */
  .subnav-panel{
    left: 0;
    right: auto;
  }
}
/* =========================================================
   PATCH v1.7.8 — Subnav "More" dropdown refinement
   - Smaller panel
   - Right-aligned with Logout
   - Cleaner visual weight
   ========================================================= */


/* ---------------------------------------------------------
   1) Push "More" to the far right of the subnav row
   --------------------------------------------------------- */
.subnav-more {
  margin-left: auto; /* key: pushes it to the right */
}


/* ---------------------------------------------------------
   2) Make dropdown panel narrower & right-aligned
   --------------------------------------------------------- */
.subnav-panel {
  right: 0;
  left: auto;

  width: min(520px, calc(100vw - 32px)); /* was 760px */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* tighter */
  gap: 12px;
  padding: 12px;
}


/* ---------------------------------------------------------
   3) Reduce visual weight inside the panel
   --------------------------------------------------------- */
.subnav-head {
  font-size: 11px;
  margin-bottom: 8px;
  opacity: .65;
}

.subnav-item {
  padding: 8px 10px;
  font-size: 12.5px;
  border-radius: 12px;
  margin-bottom: 6px;
}


/* ---------------------------------------------------------
   4) Logout emphasis (still inside dropdown)
   --------------------------------------------------------- */
.subnav-item.logout {
  border-color: rgba(255,92,92,.30);
  background: rgba(255,92,92,.12);
}


/* ---------------------------------------------------------
   5) Mobile behaviour — full-width dropdown
   --------------------------------------------------------- */
@media (max-width: 860px) {
  .subnav-panel {
    left: 0;
    right: 0;
    width: auto;
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   PATCH v1.7.9 — Logout styling everywhere
   ========================================================= */

/* Logout in primary row */
.subnav-link.logout {
  border-color: rgba(255,92,92,.30);
  background: rgba(255,92,92,.12);
  color: rgba(255,255,255,.95);
  opacity: 1;
}

/* Hover state */
.subnav-link.logout:hover {
  background: rgba(255,92,92,.18);
  border-color: rgba(255,92,92,.45);
}

/* Keep dropdown logout consistent */
.subnav-item.logout {
  border-color: rgba(255,92,92,.30);
  background: rgba(255,92,92,.12);
  color: rgba(255,255,255,.95);
}
/* PATCH v1.7.10 — Logout always red (even when active) */
.subnav-link.logout,
.subnav-link.logout.is-active {
  border-color: rgba(255,92,92,.45);
  background: rgba(255,92,92,.14);
  color: rgba(255,255,255,.96);
  opacity: 1;
}

.subnav-link.logout:hover {
  background: rgba(255,92,92,.20);
  border-color: rgba(255,92,92,.60);
}

.subnav-item.logout,
.subnav-item.logout.is-active {
  border-color: rgba(255,92,92,.45);
  background: rgba(255,92,92,.14);
  color: rgba(255,255,255,.96);
}
/* =========================================================
   Raffs Sync — Pricing page layout fixes (DROP-IN)
   Targets: /sync/pricing.php
   Version: v1.0.0 (2026-01-01)
   Purpose:
   - Restore pricing card grid, badges, toggles, and comparison table
   - Wins against global styles.css overrides by being last in file
   ========================================================= */

/* ---------- Badges row (fix span.badge layout collisions) ---------- */
.badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.badges .badge,
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius:999px;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
}

/* If global .badge is used in other places and looks too chunky,
   keep this scoped “pricing” feel mainly through .badges container */
.hero .badges .badge{
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* ---------- Pricing grid & cards ---------- */
.pricing-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items:stretch;
}

/* Responsive */
@media (max-width: 980px){
  .pricing-grid{ grid-template-columns: 1fr; }
}

.pricing-card{
  position:relative;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  border-radius: 18px;
  padding:16px;
  display:flex;
  flex-direction:column;
  min-height: 340px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

/* Clickable “card selection” affordance */
.pricing-card:hover{
  transform: translateY(-2px);
  border-color: rgba(120,180,255,.28);
  background: rgba(120,180,255,.06);
}

/* Selected state (from JS) */
.pricing-card.is-selected{
  border-color: rgba(120,180,255,.40);
  background: rgba(120,180,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.20);
}

/* Popular highlight */
.pricing-card.is-popular{
  border-color: rgba(194,162,122,.40);
  background: rgba(194,162,122,.10);
}

.pricing-card.is-popular.is-selected{
  border-color: rgba(194,162,122,.55);
  background: rgba(194,162,122,.14);
}

/* “Most Popular” pill */
.popular-pill{
  position:absolute;
  top:14px;
  right:14px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(194,162,122,.40);
  background: rgba(194,162,122,.14);
}

/* Header area */
.pricing-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.pricing-head h3{
  margin:0;
  font-size:18px;
  letter-spacing:.2px;
}

/* ---------- Billing toggle ---------- */
.billing-toggle{
  display:inline-flex;
  gap:6px;
  padding:4px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}

.bill-btn{
  appearance:none;
  border:0;
  background:transparent;
  color: inherit;
  padding:6px 10px;
  font-size:12px;
  border-radius:999px;
  cursor:pointer;
  opacity:.82;
  transition: background .12s ease, opacity .12s ease, transform .12s ease;
}

.bill-btn:hover{
  opacity:1;
  transform: translateY(-1px);
}

.bill-btn.is-active{
  opacity:1;
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

/* ---------- Price block ---------- */
.price{
  margin-top:6px;
  margin-bottom:12px;
}

.price-main{
  font-size:26px;
  font-weight:700;
  letter-spacing:.2px;
}

.price-sub{
  opacity:.75;
  margin-top:2px;
  font-size:13px;
}

/* ---------- Bullets ---------- */
.feature-list{
  margin: 10px 0 14px 0;
  padding-left: 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex: 1; /* pushes CTA to bottom */
}

.feature-list li{
  opacity:.92;
}

/* CTA stays at bottom */
.pricing-card .cta{
  margin-top:auto;
}

.pricing-card .mini-muted{
  margin-top:10px;
  font-size:12px;
  opacity:.70;
}

/* ---------- Comparison table ---------- */
.table-wrap{
  width:100%;
  overflow:auto;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
}

.compare-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px; /* allows horizontal scroll on mobile */
  background: rgba(255,255,255,.03);
}

.compare-table th,
.compare-table td{
  padding: 12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align: top;
}

.compare-table thead th{
  position: sticky;
  top: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  z-index: 2;
  font-size: 13px;
}

.compare-table tbody tr:hover td{
  background: rgba(255,255,255,.04);
}

.compare-table .category td{
  background: rgba(255,255,255,.06);
  font-weight:700;
  letter-spacing:.2px;
}

.compare-table td.tick{
  font-size: 14px;
  width: 120px;
}

.compare-table td.tick.no{
  opacity: .55;
}
/* =========================================================
   Badges with icons (pricing + solutions)
   Version: v1.0.0
   ========================================================= */

.badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  line-height:1;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  white-space:nowrap;
}

/* icon inside badge */
.badge-icon{
  width:14px;
  height:14px;
  flex:0 0 14px;
  opacity:.85;
  fill: currentColor;
}

/* hero badges get a bit more presence */
.hero .badge{
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

/* optional hover polish */
.badge:hover{
  background: rgba(120,180,255,.10);
  border-color: rgba(120,180,255,.30);
}
/* =========================================================
   Badge icon styling (inline SVG via raffs_icon_svg)
   Version: v1.0.0
   ========================================================= */

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.badge-ico{
  width:14px;
  height:14px;
  flex:0 0 14px;
  display:block;
  opacity:.9;
}

/* lucide is forced to currentColor by your helper,
   custom can be full-colour, so we don't override fills here */
   
/* =========================================================
   Pricing: toggle alignment + half-out "Most Popular" pill
   Version: v1.0.5 (2026-01-01)
   ========================================================= */

/* Card context for absolute pill */
.pricing-card{
  position: relative;
}

/* Let title sit higher, toggle sits slightly lower (aligned across all cards) */
.pricing-card .pricing-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

/* Drop ALL toggles down the same amount so they align perfectly */
.pricing-card .billing-toggle{
  margin-left:auto;
  margin-top: 10px;   /* tweak 8–14px if you want */
}

/* Half-in / half-out pill on top-right for the popular card only */
.pricing-card.is-popular .popular-pill{
  position:absolute;
  top:-12px;          /* half outside */
  right:18px;
  left:auto;
  z-index:10;
  pointer-events:none;

  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(194,162,122,.45);
  background: rgba(194,162,122,.22);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

/* Give the popular card a tiny bit of extra top room so the pill never collides */
.pricing-card.is-popular{
  padding-top: 20px;
}

/* Mobile tidy */
@media (max-width: 520px){
  .pricing-card .billing-toggle{ margin-top: 8px; }
  .pricing-card.is-popular .popular-pill{
    top:-10px;
    right:14px;
  }
}
/* =========================================================
   Pricing: polished header alignment + corner ribbon pill
   Version: v1.0.6 (2026-01-01)
   ========================================================= */

.pricing-card{
  position: relative;
}

/* Make header feel like one clean block */
.pricing-card .pricing-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

/* Drop toggles slightly, but keep them visually anchored */
.pricing-card .billing-toggle{
  margin-left:auto;
  margin-top: 8px;          /* less “saggy” */
}

/* "Most Popular" as a proper corner ribbon, half-out */
.pricing-card.is-popular .popular-pill{
  position:absolute;
  top: -14px;               /* more half-out */
  right: 14px;
  z-index: 20;
  pointer-events:none;

  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;

  border: 1px solid rgba(194,162,122,.55);
  background: rgba(194,162,122,.28);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

/* Give just enough room so the pill never touches the header */
.pricing-card.is-popular{
  padding-top: 24px;
}

/* Optional: make Professional feel “featured” without looking loud */
.pricing-card.is-popular{
  box-shadow: 0 22px 55px rgba(0,0,0,.28);
}

/* Mobile tidy */
@media (max-width: 520px){
  .pricing-card .billing-toggle{ margin-top: 6px; }
  .pricing-card.is-popular .popular-pill{
    top: -12px;
    right: 12px;
  }
}
/* =========================================================
   Feature comparison — mobile friendly table styling
   Version: v1.0.0 (2026-01-01)
   Applies to: .table-wrap .compare-table
   ========================================================= */

/* Wrapper: make scrolling feel intentional */
.table-wrap{
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}

/* Subtle “scroll hint” fades */
.table-wrap::before,
.table-wrap::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 22px;
  pointer-events:none;
  z-index: 5;
}
.table-wrap::before{
  left:0;
  background: linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,0));
  opacity: .0; /* hidden by default */
}
.table-wrap::after{
  right:0;
  background: linear-gradient(to left, rgba(0,0,0,.55), rgba(0,0,0,0));
  opacity: .9;
}

/* Table base */
.compare-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px; /* allows swipe on mobile */
}

/* Cells */
.compare-table th,
.compare-table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
}

/* Header row */
.compare-table thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(6px);
  font-size: 13px;
  letter-spacing: .2px;
}

/* Sticky first column: Feature */
.compare-table th:first-child,
.compare-table td:first-child{
  position: sticky;
  left: 0;
  z-index: 2;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
  min-width: 260px; /* readable on mobile */
}

/* Keep header Feature cell above the rest */
.compare-table thead th:first-child{
  z-index: 4;
  background: rgba(0,0,0,.48);
}

/* Row hover for desktop */
@media (hover:hover){
  .compare-table tbody tr:hover td{
    background: rgba(255,255,255,.04);
  }
}

/* Category rows */
.compare-table .category td{
  background: rgba(255,255,255,.06) !important;
  font-weight: 700;
  letter-spacing: .2px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Ticks */
.compare-table td.tick{
  width: 120px;
  text-align:center;
  font-size: 14px;
}
.compare-table td.tick.no{
  opacity: .55;
}

/* Make the feature description look tidy */
.compare-table td:first-child strong{
  display:block;
  font-weight: 700;
}
.compare-table td:first-child .muted{
  margin-top: 4px;
  font-size: 12px;
  opacity: .75;
  line-height: 1.35;
}

/* ---------- Mobile tuning ---------- */
@media (max-width: 680px){

  /* bigger tap comfort, less dense */
  .compare-table th,
  .compare-table td{
    padding: 12px 10px;
  }

  /* slightly narrower sticky feature col */
  .compare-table th:first-child,
  .compare-table td:first-child{
    min-width: 220px;
  }

  /* make plan headers feel like chips */
  .compare-table thead th{
    font-size: 12px;
  }
}

/* Ultra small: reduce min table width so swipe isn't insane */
@media (max-width: 420px){
  .compare-table{ min-width: 680px; }
  .compare-table th:first-child,
  .compare-table td:first-child{ min-width: 200px; }
}
/* =========================================================
   Feature comparison: mobile swipe in front (no sticky first col)
   Scope: .compare-card
   Version: v1.0.1 (2026-01-01)
   ========================================================= */

@media (max-width: 680px){

  /* Stop the first column being sticky on mobile */
  .compare-card .compare-table th:first-child,
  .compare-card .compare-table td:first-child{
    position: static;
    left: auto;
    z-index: auto;
    background: transparent; /* let row styling handle it */
    backdrop-filter: none;
    min-width: 220px;
  }

  /* Keep header sticky (this part is still useful) */
  .compare-card .compare-table thead th{
    position: sticky;
    top: 0;
    z-index: 3;
  }

  /* Slightly reduce the table min-width so swipe feels smoother */
  .compare-card .compare-table{
    min-width: 720px;
  }
}
/* =========================================================
   Mobile nav: dropdown overlay (no header push) + clickable
   Version: v1.0.0 (2026-01-01)
   ========================================================= */

@media (max-width: 860px){

  /* Ensure header/nav root is a positioning context */
  [data-nav-root]{
    position: relative;
    z-index: 50; /* above page content */
  }

  /* Make the nav an overlay panel instead of pushing layout */
  .nav{
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;              /* sits directly under header row */
    margin-top: 10px;
    padding: 10px;
    border-radius: 16px;

    background: rgba(0,0,0,.92);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);

    z-index: 60;            /* above everything in header */
  }

  /* Open state */
  [data-nav-root].is-open .nav{
    display: flex;
  }

  /* Make links fully tappable */
  .nav-link{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding: 12px 12px;
    border-radius: 14px;

    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);

    position: relative;
    z-index: 61;            /* ensure links are clickable */
    pointer-events: auto;
  }

  /* If you have a header backdrop/overlay elsewhere, prevent it blocking clicks */
  .header,
  .topbar,
  .nav-auth,
  .wrap{
    pointer-events: auto;
  }
}
/* =========================================================
   Mobile nav overlay + clickable links (works with nav.js)
   Version: v1.0.1 (2026-01-01)
   Selectors: [data-nav-root] [data-nav] [data-nav-backdrop]
   ========================================================= */

@media (max-width: 860px){

  /* Make root a stacking context */
  [data-nav-root]{
    position: relative;
    z-index: 200;
  }

  /* Dropdown panel: overlay (doesn't push header) */
  [data-nav]{
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 10px;

    flex-direction: column;
    gap: 8px;
    padding: 10px;

    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.92);
    box-shadow: 0 18px 55px rgba(0,0,0,.55);

    z-index: 220;
  }

  /* Open state (nav.js adds .is-open to root) */
  [data-nav-root].is-open [data-nav]{
    display: flex;
  }

  /* Backdrop: sits BEHIND the dropdown so it doesn't block clicks */
  [data-nav-backdrop]{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 210; /* below dropdown (220), above page */
  }

  [data-nav-root].is-open [data-nav-backdrop]{
    display: block;
  }

  /* Ensure links are clickable and fill width */
  [data-nav] a,
  [data-nav] .nav-link{
    position: relative;
    z-index: 221;
    pointer-events: auto;

    display: flex;
    width: 100%;
    justify-content: flex-start;

    padding: 12px 12px;
    border-radius: 14px;

    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
  }
}
/* =========================================================
   Admin subnav "More" dropdown — mobile clickable fix
   Works with: <details class="subnav-more"> ... <div class="subnav-panel">
   Version: v1.0.0 (2026-01-01)
   ========================================================= */

.subnav.subnav-admin .subnav-inner{
  overflow: visible; /* critical: don't clip the dropdown */
}

.subnav.subnav-admin .subnav-more{
  position: relative; /* anchor for the absolute dropdown */
}

.subnav.subnav-admin .subnav-panel{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 280px;
  max-width: min(92vw, 520px);

  z-index: 9999;          /* sit above sticky bars, tables, etc */
  pointer-events: auto;   /* ensure taps register */

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.92);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  padding: 10px;
}

/* Make summary feel tappable on mobile */
.subnav.subnav-admin details.subnav-more > summary{
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.subnav.subnav-admin details.subnav-more > summary::-webkit-details-marker{
  display: none;
}

/* If you previously had any overflow-x auto on the admin subnav, keep it,
   but don't allow it to clip the panel. */
@media (max-width: 860px){
  .subnav.subnav-admin{
    overflow: visible;
  }
}
/* =========================================================
   Subnav "More" panel — open LEFT + 2 columns on mobile
   Applies to: Admin / Customer / Affiliate subnavs
   Markup: <details class="subnav-more"><summary>More</summary><div class="subnav-panel">...</div></details>
   Version: v1.0.1 (2026-01-01)
   ========================================================= */

@media (max-width: 860px){

  /* Don’t clip dropdowns */
  .subnav,
  .subnav .subnav-inner{
    overflow: visible;
  }

  /* Anchor */
  .subnav details.subnav-more{
    position: relative;
  }

  /* Panel: pin to RIGHT edge of the More button so it grows LEFT (stays on screen) */
  .subnav details.subnav-more > .subnav-panel{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;

    /* Keep inside viewport */
    max-width: calc(100vw - 20px);
    width: min(520px, calc(100vw - 20px));

    z-index: 9999;
    pointer-events: auto;

    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.92);
    box-shadow: 0 18px 55px rgba(0,0,0,.55);
    padding: 10px;

    /* 2-column layout */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
  }

  /* Groups behave nicely in columns */
  .subnav .subnav-group{
    min-width: 0;
  }

  /* Prevent long labels forcing single column / overflow */
  .subnav .subnav-item{
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Optional: tighten group headings a touch */
  .subnav .subnav-head{
    font-size: 12px;
    letter-spacing: .18em;
    opacity: .8;
    margin: 2px 0 8px;
  }
}

/* Ultra-small phones: fall back to 1 column */
@media (max-width: 380px){
  .subnav details.subnav-more > .subnav-panel{
    grid-template-columns: 1fr;
  }
}
.success, .error{
  border-radius: 10px;
  padding: 10px 12px;
  margin: 12px 0;
  font-size: 14px;
}
.success{ background: rgba(80,200,160,.10); border: 1px solid rgba(80,200,160,.25); }
.error{ background: rgba(255,90,90,.10); border: 1px solid rgba(255,90,90,.25); }
.input{ width:100%; }
.label{ display:block; margin-top:12px; margin-bottom:6px; }
/* =========================================================
   PATCH v1.7.17 — Home Hero Image “WOW” (docs-figure pattern)
   Targets: .card.full > .docs-figure > img (your /sync/index.php)
   Goals:
   - Desktop: image fills more of the card/grid (less “polite” margins)
   - Mobile: image spans available width, no side-crop (no zoom)
   ========================================================= */

/* 1) Make the figure stop behaving like a shy little thumbnail */
.card.full .docs-figure{
  margin: 0;                 /* kill default figure margins */
}

/* 2) Let the image go full-bleed inside the full card */
.card.full:has(.docs-figure){
  padding: 0;                /* remove card padding so image fills it */
  overflow: hidden;
}

/* 3) Big, crisp, responsive image (no cropping) */
.card.full .docs-figure > img{
  display: block;
  width: 100%;
  height: auto;              /* KEY: prevents any cropping */
  max-width: 100%;
  border-radius: 0;          /* full-bleed look */
}

/* 4) Caption gets its own padding so it doesn’t hug the edge */
.card.full .docs-figure > figcaption{
  padding: 14px 16px 16px;
}

/* 5) Desktop “wow”: slightly taller visual presence */
@media (min-width: 861px){
  .card.full .docs-figure > img{
    /* keep aspect correct, but give it more “hero weight” */
    max-height: 520px;
    object-fit: contain;     /* stays uncropped even if max-height hits */
    background: rgba(255,255,255,.02);
  }
}

/* 6) Mobile: edge-to-edge feel without cropping */
@media (max-width: 860px){
  /* Reduce main wrap padding a touch so it feels full width */
  main.wrap{
    padding-left: 12px;
    padding-right: 12px;
  }

  .card.full .docs-figure > figcaption{
    padding: 12px 12px 14px;
  }

  .card.full .docs-figure > img{
    max-height: none;        /* let it breathe */
  }
}
/* =========================================================
   PATCH v1.7.23 — Bind hero card width to .grid width
   Goal:
   - Hero image card EXACT width = grid cards below
   - No narrower, no wider, no guessing
   ========================================================= */

/* The grid is the single source of truth for content width */
.section{
  --grid-content-width: min(100%, calc(100% - 0px));
}

/* Read the grid's actual max-width */
.section > .grid{
  max-width: var(--grid-max-width, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* FORCE the hero card to use the same width as the grid */
.section:has(.card.full .docs-figure) .card.full{
  max-width: var(--grid-max-width, 100%);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* =========================================================
   PATCH v1.7.18 — Desktop Hero Framing Polish
   Goal:
   - Image is wider & dominant
   - Thin, EVEN gap around image
   - Not full-bleed, not cramped
   ========================================================= */

/* Apply only to the homepage hero image card */
@media (min-width: 861px){

  /* Reintroduce a refined frame */
  .card.full:has(.docs-figure){
    padding: 14px;                 /* thin, professional frame */
  }

  /* Image fills the frame evenly */
  .card.full .docs-figure > img{
    width: 100%;
    height: auto;
    display: block;

    /* Visual polish */
    border-radius: calc(var(--radius) - 2px);
  }

  /* Caption aligns with the image frame */
  .card.full .docs-figure > figcaption{
    padding: 12px 6px 2px;
  }
}
/* =========================================================
   PATCH v1.7.19 — Make docs-figure images truly full width (desktop)
   Issue: docs-figure likely has max-width + auto margins, so image can't expand
   Goal: image fills the card width with a thin even frame
   ========================================================= */

@media (min-width: 861px){

  /* Ensure the "full" card can actually be full */
  .section .card.full{
    width: 100%;
    max-width: none;
  }

  /* Kill any max-width boxing on the figure */
  .section .card.full .docs-figure{
    width: 100%;
    max-width: none;
    margin: 0;                 /* removes centered/narrow look */
  }

  /* Image fills available space */
  .section .card.full .docs-figure > img{
    width: 100%;
    max-width: none;
    display: block;
  }

  /* Keep your professional thin frame */
  .section .card.full:has(.docs-figure){
    padding: 12px;             /* thin, even frame */
  }

  .section .card.full .docs-figure > figcaption{
    padding: 10px 6px 2px;
  }

}
/* =========================================================
   PATCH v1.7.21 — Hero Card Alignment with Grid Cards
   Goal:
   - Hero outer border EXACTLY matches grid cards below
   - Inner image fills the lighter panel fully
   ========================================================= */

/* 1) Force hero card to use the SAME outer geometry as all cards */
.section .card.full{
  padding: var(--card-pad, 16px);   /* same padding as normal cards */
  border-radius: var(--radius);
  box-sizing: border-box;
}

/* 2) Inner panel (lighter area) */
.section .card.full .docs-figure{
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;

  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;
}

/* 3) Image fills the inner panel edge-to-edge */
.section .card.full .docs-figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 4) Caption spacing stays consistent */
.section .card.full .docs-figure > figcaption{
  padding: 12px 14px 14px;
}
/* =========================================================
   PATCH v1.7.22 — Clamp hero image card to same width as page cards
   Goal:
   - Hero image card outer edge aligns with cards below (same width)
   - Keep the current nice inner image fill
   ========================================================= */

/* Make "full" cards behave like normal cards in width */
.section .card.full{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* If your standard content width is controlled by .wrap,
   ensure the hero section isn't extending beyond it */
main.wrap > .section:has(.card.full){
  width: 100%;
  max-width: 100%;
}

/* IMPORTANT: if .card has an internal max-width via a variable,
   match it here. This makes the hero card exactly the same as others. */
:root{
  /* If you already have a content width variable, keep yours and remove this */
  /* --content-max: 1100px; */
}

.section .card.full{
  /* Use your existing variable if present; otherwise this does nothing */
  max-width: var(--content-max, 100%);
  margin-left: auto;
  margin-right: auto;
}
/* =========================================================
   PATCH v1.7.22B — Force hero image card to match .grid width
   (Guaranteed alignment even if grid is narrower than wrap)
   ========================================================= */

.section:has(.card.full .docs-figure){
  /* same left/right spacing as your grid cards */
  padding-left: 0;
  padding-right: 0;
}

.section:has(.card.full .docs-figure) .card.full{
  /* match the grid's max width by using the same layout constraints */
  max-width: var(--grid-max, 980px);
  margin-left: auto;
  margin-right: auto;
}

/* If you already have .grid width defined, you can set this to that value */
:root{
  /* Tune once, applies everywhere */
  --grid-max: 980px;
}
.section:has(.card.full .docs-figure) .card.full{
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
/* =========================================================
   PATCH v1.7.24 — Center + align hero image card to Executive overview grid
   Goal:
   - Hero image card width == .section > .grid width
   - Both centered identically
   - No more “hero hugs the left”
   ========================================================= */

/* 1) Single source of truth for page content width */
:root{
  --sync-content-max: 1120px; /* adjust once if you ever want wider/narrower */
}

/* 2) Executive overview grid uses the same width + centered */
.section > .grid{
  max-width: var(--sync-content-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* 3) The hero-image section’s FULL card matches the same width + centered */
.section:has(.card.full .docs-figure) .card.full{
  max-width: var(--sync-content-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* 4) Safety: if anything inside tries to set a smaller max-width, kill it */
.section:has(.card.full .docs-figure) .docs-figure{
  max-width: none;
  width: 100%;
}
/* =========================================================
   PATCH v1.7.25 — TRUE centering of hero image card
   Fixes:
   - Hero card offset to the left
   - Section padding mismatch vs grid
   ========================================================= */

/* 1) Reset the hero SECTION so it does not offset content */
.section:has(.card.full .docs-figure){
  padding-left: 0;
  padding-right: 0;
}

/* 2) Use the GRID as the centering reference */
.section:has(.card.full .docs-figure)::before{
  content: "";
  display: block;
}

/* 3) Center hero card exactly like grid */
.section:has(.card.full .docs-figure) .card.full{
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  position: relative;
}

/* 4) Absolute safety: kill any transform or offset */
.section:has(.card.full .docs-figure) .card.full{
  transform: none !important;
}
/* ======================================================
   GRID LAYOUT (CARDS)
====================================================== */

.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

/* Tablet & up */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Full-width cards opt out cleanly */
.grid .card.full {
  grid-column: 1 / -1;
}
/* ======================================================
   Clickable / hoverable cards (industry cards)
====================================================== */

.card.link-card{
  cursor: pointer;
  position: relative;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.card.link-card:hover,
.card.link-card:focus-within{
  transform: translateY(-3px);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.06);
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.01)
  );
}

/* Make entire card clickable without breaking semantics */
.card.link-card a.card-link{
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
}

/* Subtle arrow hint (optional but nice) */
.card.link-card::after{
  content: "→";
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 1.1rem;
  opacity: .35;
  transition: transform .2s ease, opacity .2s ease;
}

.card.link-card:hover::after{
  transform: translateX(4px);
  opacity: .7;
}
/* Raffs Sync — Footer meta block (v1.0.0) */
.footer .footer-brand-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.footer .footer-meta{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  gap:4px;
}

.footer .footer-meta-line{
  line-height: 1.3;
}

/* Mobile: keep columns readable, meta stays inside Company column */
@media (max-width: 860px){
  .footer .footer-meta{
    margin-top: 10px;
    padding-top: 10px;
  }
}
/* Raffs Sync — Footer chip + meta (v1.0.1) */
.footer .footer-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  width: fit-content;
  max-width: 100%;
}

/* Make sure footer nav always wins the click layer */
.footer .footer-cols{
  position: relative;
  z-index: 2;
}
.footer .footer-branding{
  position: relative;
  z-index: 1;
}

.footer .footer-meta{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.footer .footer-meta-line{ line-height: 1.3; }

/* =========================================================
   Support Console (Dashboard) — rs-* classes (SINGLE BLOCK)
   Path: /sync/dashboard/support.php
   Version: v1.0.0 (2026-01-04)
   Purpose:
   - Clean, modern support chat layout + tickets panel
   - Matches Raffs Sync theme tokens
   - No inline/page CSS required
   ========================================================= */

/* Page wrapper (safe, does not affect other pages) */
.rs-support{
  padding: 0;
  overflow: hidden;
}

.rs-support__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.rs-support__title{ min-width: 0; }
.rs-support__h1{
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 950;
}
.rs-support__sub{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 72ch;
}

/* Main grid: chat + tickets */
.rs-support__grid{
  display:grid;
  grid-template-columns: 1fr 320px; /* tickets right */
  gap: 0;
  min-width: 0;
}

/* Make tickets ~10% narrower vs a 360px default */
@media (min-width: 980px){
  .rs-support__grid{ grid-template-columns: 1fr 320px; }
}
@media (max-width: 980px){
  .rs-support__grid{ grid-template-columns: 1fr; }
}

/* Chat area */
.rs-chat{
  min-width: 0;
  display:flex;
  flex-direction:column;
  height: min(72vh, 780px);
}

.rs-transcript{
  flex: 1;
  overflow: auto;
  padding: 16px;
  background: rgba(0,0,0,.10);
}

/* Message rows + bubbles */
.rs-row{ display:flex; margin: 10px 0; }
.rs-row--me{ justify-content:flex-end; }
.rs-row--ai{ justify-content:flex-start; }
.rs-row--system{ justify-content:center; }

.rs-msg{
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

.rs-msg--me{
  border-color: rgba(120,180,255,.22);
  background: rgba(120,180,255,.10);
}
.rs-msg--ai{
  border-color: rgba(194,162,122,.20);
  background: rgba(194,162,122,.08);
}
.rs-msg--system{
  max-width: 92%;
  border-style: dashed;
  background: rgba(255,255,255,.03);
  opacity: .92;
}

.rs-meta{
  margin-top: 6px;
  font-size: 11px;
  opacity: .65;
}

/* Composer */
.rs-input-wrap{
  padding: 14px 16px 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.rs-label{
  display:block;
  font-weight: 850;
  font-size: 12px;
  opacity: .82;
  margin-bottom: 8px;
}

.rs-input{
  width: 100%;
  min-height: 96px;
  resize: vertical;
  font-size: 16px; /* mobile-friendly */
  line-height: 1.45;
}

@media (min-width: 900px){
  .rs-input{ font-size: 16.5px; }
}

.rs-hint{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted2);
}

.rs-actions{
  padding: 0 16px 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rs-actions .btn{ white-space: nowrap; }

.rs-footnote{
  padding: 12px 16px 16px;
  color: var(--muted2);
  font-size: 12.5px;
  background: rgba(255,255,255,.02);
}

/* Right panel: tickets */
.rs-side{
  border-left: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  min-width: 0;
}
@media (max-width: 980px){
  .rs-side{ border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
}

.rs-side__card{
  padding: 14px;
}

.rs-side__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.rs-side__title{
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .02em;
}
.rs-side__meta{
  font-size: 12px;
  color: var(--muted2);
}

.rs-tickets{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.rs-ticket{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 0;
}
.rs-ticket__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.rs-ticket__title{
  margin-top: 6px;
  color: rgba(255,255,255,.86);
  overflow-wrap: anywhere;
}
.rs-ticket__meta{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted2);
}

.rs-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  white-space: nowrap;
}

.rs-muted{
  color: var(--muted2);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.rs-side__note{
  margin-top: 12px;
}

/* Status chip (uses same “pill” language) */
.rs-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}
.rs-chip__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--warn);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06) inset;
}

.rs-chip--ok{
  border-color: rgba(34,197,94,.22);
  background: rgba(34,197,94,.10);
}
.rs-chip--ok .rs-chip__dot{ background: var(--ok); }

.rs-chip--warn{
  border-color: rgba(242,178,51,.22);
  background: rgba(242,178,51,.10);
}
.rs-chip--warn .rs-chip__dot{ background: var(--warn); }

.rs-chip--bad{
  border-color: rgba(255,92,92,.22);
  background: rgba(255,92,92,.10);
}
.rs-chip--bad .rs-chip__dot{ background: var(--bad); }

/* Mobile ergonomics */
@media (max-width: 720px){
  .rs-support__sub{ display:none; }

  .rs-chat{ height: min(76vh, 920px); }
  .rs-msg{ max-width: 92%; }

  /* Buttons should be big and easy to tap */
  .rs-actions{
    flex-direction: column;
  }
  .rs-actions .btn{
    width: 100%;
  }

  /* Let the composer + tickets feel full width */
  .rs-input-wrap{ padding: 12px; }
  .rs-actions{ padding: 0 12px 12px; }
  .rs-footnote{ padding: 10px 12px 12px; }
  .rs-transcript{ padding: 12px; }
  .rs-side__card{ padding: 12px; }
}

/* =========================================================
   Header Auth UI (site-native + mobile-safe)
   Targets: header.php v3.3.7+ (Login dropdown + role chip + FAB)
   Notes:
   - Header role chip stays in .nav-auth
   - Login dropdown appears either in header OR as FAB (logged-out)
   - FAB is bottom-left to avoid AI chat overlay (usually bottom-right)
========================================================= */

/* ---------------------------
   Auth row (header, right side)
--------------------------- */
.nav-auth{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

/* ---------------------------
   Details dropdown base
--------------------------- */
.auth-dd{
  position:relative;
  display:inline-flex;
  align-items:center;
}

/* Summary: button-like, compact, “belongs here” */
.auth-dd > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;

  display:inline-flex;
  align-items:center;
  gap:10px;

  padding: 8px 12px;
  border-radius: 999px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .1px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);

  transition: background .16s ease, border-color .16s ease, transform .08s ease;
}
.auth-dd > summary::-webkit-details-marker{ display:none; }

.auth-dd > summary:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}

.auth-dd[open] > summary{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}

/* Chevron: crisp, intentional */
.auth-dd > summary::after{
  content:"";
  width: 10px;
  height: 10px;
  display:inline-block;

  border-right: 2px solid rgba(255,255,255,.72);
  border-bottom: 2px solid rgba(255,255,255,.72);
  transform: rotate(45deg) translateY(-1px);
  margin-left: 2px;
  opacity:.9;

  transition: transform .14s ease, opacity .14s ease;
}
.auth-dd[open] > summary::after{
  transform: rotate(-135deg) translateY(-1px);
  opacity: 1;
}

/* ---------------------------
   Panel (dropdown)
--------------------------- */
.auth-dd-panel{
  position:absolute;
  right:0;
  top: calc(100% + 10px);

  min-width: 220px;
  padding: 8px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(14,14,18,.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  z-index: 90;
}

/* Dropdown items */
.auth-dd-item{
  display:flex;
  align-items:center;
  gap:10px;

  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;

  color: rgba(255,255,255,.92);
  background: transparent;

  transition: background .14s ease, transform .08s ease;
}
.auth-dd-item:hover{ background: rgba(255,255,255,.06); }
.auth-dd-item:active{ transform: translateY(1px); }

/* ---------------------------
   Role chip dot (header indicator)
--------------------------- */
.auth-chip-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: 0 0 9px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.30);
}

/* Role colours (hardened: affiliate was being overridden) */
.auth-chip-dot.dot-admin{ background:#ef4444 !important; }
.auth-chip-dot.dot-client{ background:#3b82f6 !important; }
.auth-chip-dot.dot-affiliate{ background:#f59e0b !important; }

/* Compatibility aliases (in case markup differs anywhere) */
.auth-chip-dot.dot-affil{ background:#f59e0b !important; }
.auth-chip-dot.dot-partner{ background:#f59e0b !important; }

/* ---------------------------
   Floating Login FAB (logged-out only)
   Positioned bottom-left to avoid AI chat overlay
--------------------------- */
.auth-fab{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 95;
}

/* FAB trigger */
.auth-dd.auth-dd-fab > summary.auth-dd-trigger{
  padding: 11px 14px;
  border-radius: 999px;
  font-weight: 800;

  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.94);

  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

/* Hover: subtle lift */
.auth-dd.auth-dd-fab > summary.auth-dd-trigger:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}

/* FAB dropdown opens upward */
.auth-dd.auth-dd-fab .auth-dd-panel{
  left: 0;
  right: auto;
  top: auto;
  bottom: calc(100% + 10px);
}

/* ---------------------------
   Mobile touch targets
--------------------------- */
@media (max-width: 720px){
  .auth-dd-panel{ min-width: 240px; }
  .auth-dd-item{ padding: 12px 12px; }
}

@media (max-width: 420px){
  .auth-fab{ left: 12px; bottom: 12px; }
}



/* =========================================================
   Raffs Sync — Support Tickets Panel Enhancements
   Version: v1.0.0
   Date: 2026-01-04
   ========================================================= */

.rs-tickets {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;
}

.rs-ticket {
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.rs-ticket:hover {
  background: rgba(255,255,255,0.04);
  transform: translateY(-1px);
}

.rs-ticket__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  gap: 8px;
}

.rs-ticket__close {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: #fff;
  cursor: pointer;
}

.rs-ticket__close:hover {
  background: rgba(255,80,80,0.15);
  border-color: rgba(255,80,80,0.35);
  color: #ffb3b3;
}
/* =========================================================
   Raffs Sync Admin — Form/Grid tidy utilities (2026-01-07)
   Safe additive styles for ai_personas.php + ai_controls.php
   ========================================================= */

.rs-toolbar { padding: 12px; }
.rs-toolbar-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rs-toolbar-spacer { flex: 1 1 auto; }

.rs-card-head { margin-bottom: 12px; }
.rs-card-head h2 { margin: 0 0 4px 0; }
.rs-card-head .muted { margin: 0; }

.rs-form { padding: 14px; }
.rs-form-section { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.rs-form-section:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

.rs-subhead { margin: 10px 0 8px 0; font-size: 14px; }
.rs-key code { font-size: 12px; opacity: 0.9; }

.rs-grid { display: grid; gap: 12px; }
.rs-grid-1 { grid-template-columns: 1fr; }
.rs-grid-2 { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
.rs-grid-3 { grid-template-columns: repeat(3, minmax(220px, 1fr)); }

.rs-field { display: block; }
.rs-label { display: block; font-size: 12px; opacity: 0.85; margin-bottom: 6px; }

.rs-inline { display: flex; gap: 10px; align-items: end; }
.rs-inline-wrap { flex-wrap: wrap; align-items: center; }

.rs-actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.rs-pill { display: inline-block; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,0.04); }

.rs-check { display: flex; gap: 10px; align-items: flex-start; }
.rs-check input[type="checkbox"] { margin-top: 3px; }
.rs-check-body { display: block; }

@media (max-width: 980px) {
  .rs-grid-3 { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 720px) {
  .rs-grid-2, .rs-grid-3 { grid-template-columns: 1fr; }
  .rs-toolbar-row { gap: 8px; }
  .rs-form { padding: 12px; }
}
/* =========================================================
   Raffs Sync — Admin Form/Grid tidy utilities (AI Controls/Personas)
   Added: 2026-01-07
   Notes:
   - Uses existing theme tokens (panel/border/radius/muted)
   - Avoids collisions with Support Console .rs-* by using .rs-admin-* namespace
   ========================================================= */

/* Optional: if your admin header sets body class, this adds an extra safety scope */
body.admin .rs-admin-only {}

/* Toolbar */
.rs-admin-toolbar{
  padding: 12px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.rs-admin-toolbar-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.rs-admin-toolbar-spacer{ flex:1 1 auto; }

/* Card headers */
.rs-admin-card-head{ margin-bottom: 12px; }
.rs-admin-card-head h2{ margin:0 0 4px 0; }
.rs-admin-card-head .muted{ margin:0; }

/* Form wrapper + sections */
.rs-admin-form{ padding: 14px; }
.rs-admin-section{
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.rs-admin-section:last-child{
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.rs-admin-subhead{
  margin: 10px 0 8px 0;
  font-size: 14px;
  color: var(--text);
}

/* Grid helpers (admin-only) */
.rs-admin-grid{ display:grid; gap:12px; }
.rs-admin-grid-1{ grid-template-columns: 1fr; }
.rs-admin-grid-2{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
.rs-admin-grid-3{ grid-template-columns: repeat(3, minmax(220px, 1fr)); }

/* Fields */
.rs-admin-field{ display:block; }
.rs-admin-label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.rs-admin-key code{
  font-size: 12px;
  color: var(--muted2);
  word-break: break-word;
}

/* Inline controls */
.rs-admin-inline{
  display:flex;
  gap:10px;
  align-items:end;
}
.rs-admin-inline-wrap{
  flex-wrap:wrap;
  align-items:center;
}

/* Actions row */
.rs-admin-actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Pills */
.rs-admin-pill{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--muted);
}

/* Checkbox blocks (styled like mini-cards) */
.rs-admin-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.rs-admin-check input[type="checkbox"]{ margin-top: 3px; }
.rs-admin-check-body{ display:block; }

/* When we used "label.card" wrappers in the PHP, ensure they look consistent */
.rs-admin-mini-card{
  padding: 12px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Make textareas behave nicely in your dark theme */
.rs-admin-form textarea,
.rs-admin-form input[type="text"],
.rs-admin-form select{
  width: 100%;
}

/* Responsive */
@media (max-width: 980px){
  .rs-admin-grid-3{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 720px){
  .rs-admin-grid-2,
  .rs-admin-grid-3{ grid-template-columns: 1fr; }
  .rs-admin-form{ padding: 12px; }
  .rs-admin-toolbar-row{ gap: 8px; }
}
/* =========================================================
   Raffs Sync — Admin UI helpers (AI Controls / AI Personas)
   Path: /sync/assets/css/styles.css
   Added: 2026-01-07
   Purpose:
   - Styles for rs-toolbar / rs-form / rs-grid / rs-field / rs-check etc
   - Token-based; blends into existing theme
   ========================================================= */

/* Toolbar */
.rs-toolbar{
  padding: 12px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.rs-toolbar-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.rs-toolbar-spacer{ flex: 1 1 auto; }

/* Card header */
.rs-card-head{ margin-bottom: 12px; }
.rs-card-head h2{ margin: 0 0 4px 0; }
.rs-card-head .muted{ margin: 0; }

/* Form wrapper */
.rs-form{
  padding: 14px;
}

/* Form sections (stacked inside a card) */
.rs-form-section{
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.rs-form-section:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.rs-subhead{
  margin: 10px 0 8px 0;
  font-size: 14px;
  color: var(--text);
}

/* Grid helpers */
.rs-grid{ display:grid; gap:12px; }
.rs-grid-1{ grid-template-columns: 1fr; }
.rs-grid-2{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
.rs-grid-3{ grid-template-columns: repeat(3, minmax(220px, 1fr)); }

/* Fields */
.rs-field{ display:block; }
.rs-label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.rs-key code{
  font-size: 12px;
  color: var(--muted2);
  word-break: break-word;
}

/* Inline rows */
.rs-inline{
  display:flex;
  gap:10px;
  align-items:end;
  flex-wrap:wrap;
}
.rs-inline-wrap{
  flex-wrap:wrap;
  align-items:center;
}

/* Actions */
.rs-actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Pills */
.rs-pill{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--muted);
}

/* Checkbox blocks */
.rs-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.rs-check input[type="checkbox"]{ margin-top: 3px; }
.rs-check-body{ display:block; }

/* When you combine rs-check + card (you do in ai_personas.php) */
label.rs-check.card{
  cursor: pointer;
}
label.rs-check.card:hover{
  border-color: var(--border2);
  background: var(--panel);
}

/* Ensure admin textareas/inputs behave nicely (most of this may already exist globally) */
.rs-form textarea,
.rs-form input[type="text"],
.rs-form select{
  width: 100%;
}

/* Responsive */
@media (max-width: 980px){
  .rs-grid-3{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 720px){
  .rs-grid-2,
  .rs-grid-3{ grid-template-columns: 1fr; }
  .rs-form{ padding: 12px; }
  .rs-toolbar-row{ gap: 8px; }
}

/* =========================================================
   PATCH v1.7.28 — Global Unification Hotfix
   Date: 2026-01-09
   Purpose:
   - Restore canonical .grid utility system (prevents global 3-col override)
   - Prevent rs-* admin utility collisions with Support Console rs-* classes
   - Keep behaviour without requiring page-by-page edits
   ========================================================= */

/* ---------------------------
   1) Canonical Grid Utilities WIN (site-wide)
   --------------------------- */

/* Restore your intended utility grid behaviour */
.grid{
  display:grid;
  gap:14px;
  min-width:0;
  /* IMPORTANT: do NOT set default columns here (let .two/.three/.four decide) */
}

.grid.two{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px){
  .grid.four{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.three{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .grid.two, .grid.three, .grid.four{ grid-template-columns: 1fr; }
}

/* Keep “full width card spans all columns” behaviour without nuking grids */
.grid .card.full{ grid-column: 1 / -1; }

/* If you need the “homepage 3-col grid by default”, scope it like this:
   .home-grid.grid{ grid-template-columns: 1fr; gap:24px; }
   @media (min-width:768px){ .home-grid.grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
*/


/* ---------------------------
   2) Support Console: hard-scope key helpers
   (prevents admin utility blocks from changing support chat)
   --------------------------- */
.rs-support .rs-actions{ padding: 0 16px 16px; } /* keep support contract */
.rs-support .rs-label{ display:block; font-weight: 850; font-size:12px; margin-bottom: 8px; }
.rs-support .rs-pill{ display:inline-flex; }

/* ---------------------------
   3) Admin utilities: scope the older rs-* utility blocks
   WITHOUT markup changes
   --------------------------- */
/* If your admin pages can set body class "admin", this will work perfectly.
   If not, it’s still safe — it just won’t apply. */
body.admin .rs-toolbar,
body.admin .rs-form,
body.admin .rs-grid,
body.admin .rs-field,
body.admin .rs-check,
body.admin .rs-actions,
body.admin .rs-pill,
body.admin .rs-label{
  /* No visual reset needed; this block exists to isolate scope */
}

/* If your admin pages DO NOT have body.admin, use a wrapper class on admin pages later:
   <main class="wrap rs-admin-page"> ... and then switch body.admin -> .rs-admin-page
*/

/* ---------------------------
   4) Button contract: ensure btn-secondary exists (support.php uses it)
   --------------------------- */
.btn-secondary{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.btn-secondary:hover{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}
/* =========================================================
   PATCH: Mobile hamburger + dropdown right alignment
   Target: /sync/partials/header.php (topbar/nav/nav-toggle/nav-link)
   Date: 2026-01-10
   Notes:
   - Hamburger sits top-right
   - Dropdown panel anchors right (not full screen width)
   - Links right-aligned inside their boxes
========================================================= */

@media (max-width: 820px) {

  /* Make sure the header row lays out correctly */
  .topbar .topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; /* helps if nav/backdrop uses absolute */
    gap: 10px;
  }

  /* Hamburger: push to the right */
  .topbar .nav-toggle {
    margin-left: auto;
  }

  /* If your role chip/logout is present, keep it snug and prevent wrapping chaos */
  .topbar .nav-auth {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }

  /* Dropdown panel: anchor to the right and stop it taking the whole screen */
  .topbar .nav {
    left: auto !important;
    right: 12px !important;
    width: min(86vw, 320px) !important;
    max-width: 320px;
    text-align: right;
  }

  /* Each item: right-align text and avoid “full device width” vibe */
  .topbar .nav .nav-link {
    display: flex;
    justify-content: flex-end;
    text-align: right;
    width: 100%;
  }
}
@media (max-width: 820px) {

  /* Make the dropdown feel lighter and less dominant */
  .topbar .nav {
    right: 12px !important;
    width: 240px !important;     /* ← KEY CHANGE */
    max-width: 240px;
    padding: 6px 0;              /* tighter vertical rhythm */
  }

  /* Slightly slimmer menu items */
  .topbar .nav .nav-link {
    padding: 10px 14px;          /* less chunky */
    border-radius: 14px;
  }
}
/* =========================================================
   PATCH: Login FAB role indicator dots
   Location: Floating login dropdown (bottom-left)
   Date: 2026-01-10
========================================================= */

.auth-dd-panel .auth-dd-item {
  position: relative;
  padding-right: 36px; /* space for the dot */
}

/* Base dot */
.auth-dd-panel .auth-dd-item::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.9;
}

/* Client → blue */
.auth-dd-panel .auth-dd-item[href*="/dashboard"]::after {
  background: #4da3ff;
}

/* Affiliate → orange */
.auth-dd-panel .auth-dd-item[href*="/affiliate"]::after {
  background: #f4a340;
}

/* Admin → red */
.auth-dd-panel .auth-dd-item[href*="/admin"]::after {
  background: #e85c5c;
}