/* ============================================================
   ScaleShield CRM — Premium Dark + Gold Design System
   ------------------------------------------------------------
   Same class names, IDs, and HTML structure as before — so every
   button, table, modal, and JS handler keeps working unchanged.
   What's new: typography, palette, glass surfaces, gold accents,
   subtle motion, and a coherent visual language with the public
   marketing site (scaleshield.pro).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap");

/* ----- DESIGN TOKENS ----- */
:root{
  --gold:#D6B15E;
  --gold2:#F2D27A;
  --gold-soft:rgba(214,177,94,.10);
  --gold-line:rgba(214,177,94,.28);
  --gold-glow:rgba(214,177,94,.35);

  --green:#2cd67c;
  --red:#ff646e;
  --blue:#49b2ff;
  --violet:#a855f7;

  --bg-0:#050507;
  --bg-1:#0a0b10;
  --bg-2:#0f1118;

  --text:#ffffff;
  --muted:rgba(255,255,255,.66);
  --muted2:rgba(255,255,255,.45);
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);

  --surface:rgba(255,255,255,.03);
  --surface-2:rgba(255,255,255,.05);
  --surface-glass:rgba(15,17,24,.72);

  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:22px;

  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
}

/* ----- RESET ----- */
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;min-height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  font-size:14.5px;
  line-height:1.5;
  letter-spacing:-.005em;
  background:
    radial-gradient(900px circle at 8% -8%, rgba(214,177,94,.14), transparent 55%),
    radial-gradient(800px circle at 100% 0%, rgba(73,178,255,.06), transparent 60%),
    radial-gradient(700px circle at 92% 100%, rgba(168,85,247,.05), transparent 60%),
    linear-gradient(135deg,#050507,#0a0c12 55%,#070810);
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(214,177,94,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,177,94,.035) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%, black, transparent 95%);
          mask-image:radial-gradient(70% 70% at 50% 50%, black, transparent 95%);
  z-index:0;
}
body > *{ position:relative; z-index:1; }

h1,h2,h3,h4{ font-family:'Sora','Inter',system-ui,sans-serif; letter-spacing:-.02em; }

/* Selection */
::selection{ background:rgba(214,177,94,.35); color:#fff; }

/* Scrollbars */
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
*::-webkit-scrollbar{ width:8px; height:8px }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:6px }
*::-webkit-scrollbar-thumb:hover{ background:rgba(214,177,94,.35) }

/* ============================================================
   APP SHELL — sidebar + main
   ============================================================ */
.app{
  display:flex;
  min-height:100vh;
  width:100%;
}

.sidebar{
  width:248px;
  min-height:100vh;
  padding:26px 18px;
  display:flex;
  flex-direction:column;
  /* Push the inline quick-nav to the bottom of the sidebar — main nav
     stays at top, quick-nav anchored to the bottom-left below Logout. */
  justify-content:space-between;
  background:
    linear-gradient(180deg, rgba(214,177,94,.05), transparent 18%),
    rgba(8,9,13,.7);
  border-right:1px solid var(--line-soft);
  backdrop-filter:blur(8px);
  position:sticky; top:0;
  align-self:flex-start;
  height:100vh;
  overflow-y:auto;
}

.logo{
  font-family:'Sora',sans-serif;
  font-weight:900;
  font-size:26px;
  letter-spacing:-.025em;
  background:linear-gradient(135deg,var(--gold),var(--gold2),#fff,var(--gold));
  background-size:220% 220%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  margin-bottom:4px;
  animation:logoShift 9s ease-in-out infinite;
}
@keyframes logoShift{
  0%,100%{ background-position:0% 50% }
  50%{ background-position:100% 50% }
}

.sidebar-role{
  color:var(--muted2);
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:26px;
}

.nav{ list-style:none; display:flex; flex-direction:column; gap:6px; }

.nav li{
  position:relative;
  padding:12px 14px;
  border-radius:var(--r-md);
  cursor:pointer;
  color:var(--muted);
  font-size:13.5px;
  font-weight:600;
  transition:.18s var(--ease);
  border:1px solid transparent;
}
.nav li:hover{
  color:#fff;
  background:rgba(255,255,255,.04);
  border-color:var(--line);
}
.nav li.active{
  color:#fff;
  background:linear-gradient(135deg, rgba(214,177,94,.12), rgba(214,177,94,.04));
  border-color:var(--gold-line);
  box-shadow:0 0 24px -8px var(--gold-glow), inset 0 0 0 1px rgba(214,177,94,.05);
}
.nav li.active::before{
  content:"";
  position:absolute; left:-19px; top:50%; transform:translateY(-50%);
  width:3px; height:22px; border-radius:2px;
  background:linear-gradient(180deg,var(--gold),var(--gold2));
  box-shadow:0 0 12px var(--gold-glow);
}

.main{
  flex:1;
  padding:28px 32px 56px;
  min-width:0;
}

/* ============================================================
   TOPBAR / SEARCH
   ============================================================ */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:26px;
}

.topbar input{
  flex:1;
  width:100%;
  max-width:420px;
  height:46px;
  padding:0 16px 0 44px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") 14px center / 18px no-repeat,
    rgba(255,255,255,.03);
  color:#fff;
  font:inherit;
  font-size:14px;
  outline:none;
  transition:.2s var(--ease);
}
.topbar input::placeholder{ color:var(--muted2); }
.topbar input:focus{
  border-color:var(--gold-line);
  background-color:rgba(214,177,94,.04);
  box-shadow:0 0 0 4px rgba(214,177,94,.08);
}

.topbar button{
  height:46px;
  padding:0 20px;
  border:none;
  border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1a140a;
  font-weight:800;
  font-size:13.5px;
  letter-spacing:.02em;
  cursor:pointer;
  white-space:nowrap;
  transition:.18s var(--ease);
  box-shadow:0 8px 24px -8px var(--gold-glow);
}
.topbar button:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 32px -8px var(--gold-glow);
}

/* ============================================================
   STATS / CARDS
   ============================================================ */
.cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(180px,1fr));
  gap:18px;
  margin-bottom:26px;
}

.card{
  position:relative;
  padding:22px 24px;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  transition:.25s var(--ease);
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 0% 0%, rgba(214,177,94,.08), transparent 55%);
  opacity:.6; transition:.25s var(--ease);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-2px);
  border-color:var(--gold-line);
  box-shadow:0 18px 48px -20px rgba(0,0,0,.6), 0 0 24px -10px var(--gold-glow);
}
.card:hover::before{ opacity:1 }
.card span{
  display:block;
  color:var(--muted2);
  font-size:11px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.card strong{
  font-family:'Sora',sans-serif;
  font-size:32px;
  font-weight:900;
  letter-spacing:-.025em;
  color:#fff;
  display:block;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  gap:16px;
}
.page-header h1{
  font-family:'Sora',sans-serif;
  font-size:34px;
  font-weight:900;
  letter-spacing:-.03em;
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.7));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.primary-btn{
  height:44px;
  padding:0 18px;
  border:none;
  border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1a140a;
  font-weight:800;
  font-size:13.5px;
  letter-spacing:.01em;
  cursor:pointer;
  white-space:nowrap;
  transition:.18s var(--ease);
  box-shadow:0 8px 22px -10px var(--gold-glow);
}
.primary-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px -10px var(--gold-glow);
}

.secondary-btn{
  height:44px;
  padding:0 18px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.03);
  color:#fff;
  font-weight:700;
  font-size:13.5px;
  cursor:pointer;
  white-space:nowrap;
  transition:.18s var(--ease);
}
.secondary-btn:hover{
  border-color:var(--gold-line);
  background:rgba(214,177,94,.06);
}

.small-btn{
  height:38px;
  padding:0 14px;
  font-size:12.5px;
}

.table-btn{
  height:34px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.04);
  color:#fff;
  font-weight:700;
  font-size:12.5px;
  cursor:pointer;
  margin-right:6px;
  margin-bottom:6px;
  transition:.16s var(--ease);
}
.table-btn:hover{
  border-color:var(--gold-line);
  background:linear-gradient(135deg, rgba(214,177,94,.14), rgba(214,177,94,.04));
}

.danger,
.danger.table-btn,
.danger.primary-btn,
.danger.secondary-btn{
  background:linear-gradient(135deg,#ff646e,#cc3a44) !important;
  border-color:rgba(255,100,110,.45) !important;
  color:#fff !important;
}
.danger:hover{
  box-shadow:0 8px 24px -10px rgba(255,100,110,.45) !important;
}

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

/* Search-style input that lives inside a .header-actions row
   (e.g. the Ad Accounts page next to the bell + refresh buttons). */
.header-actions input[type="text"],
.header-actions input[type="search"]{
  height:44px;
  min-width:240px;
  padding:0 16px 0 42px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") 14px center / 16px no-repeat,
    rgba(255,255,255,.03);
  color:#fff;
  font:inherit;
  font-size:14px;
  outline:none;
  transition:.2s var(--ease);
}
.header-actions input[type="text"]::placeholder,
.header-actions input[type="search"]::placeholder{ color:var(--muted2); }
.header-actions input[type="text"]:focus,
.header-actions input[type="search"]:focus{
  border-color:var(--gold-line);
  background-color:rgba(214,177,94,.04);
  box-shadow:0 0 0 4px rgba(214,177,94,.08);
}

/* ============================================================
   TABLE / SECTION
   ============================================================ */
.table-section{
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:24px;
  position:relative;
  overflow:hidden;
}
.table-section::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(140% 100% at 100% 0%, rgba(214,177,94,.05), transparent 50%);
  pointer-events:none;
}
.table-section > *{ position:relative; z-index:1; }

.section-space{ margin-top:24px; }

.table-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  gap:16px;
  flex-wrap:wrap;
}
.table-header h2{
  font-family:'Sora',sans-serif;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
}

.table-header select{
  height:40px;
  padding:0 14px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:#fff;
  font:inherit;
  font-size:13px;
  cursor:pointer;
  outline:none;
  transition:.16s var(--ease);
}
.table-header select:hover,
.table-header select:focus{
  border-color:var(--gold-line);
}
.table-header select option,
.table-header select optgroup{
  background:#15161c;
  color:#fff;
}

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

table{
  width:100%;
  border-collapse:collapse;
  min-width:980px;
}

thead th{
  text-align:left;
  font-size:11px;
  color:var(--muted2);
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:14px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.015);
}

tbody td{
  padding:16px 14px;
  border-bottom:1px solid var(--line-soft);
  color:rgba(255,255,255,.92);
  vertical-align:middle;
  font-size:13.5px;
  transition:background .16s ease;
}
tbody tr:hover td{
  background:rgba(214,177,94,.035);
}
tbody tr:last-child td{ border-bottom:none; }

/* IDs / numeric data look better in a mono font */
tbody td:nth-child(2){ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--muted); }

/* Disabled / Unsettled rows stand out — JS-set classes drive simple
   selectors instead of :has(), which forces the browser to re-scan
   the entire row subtree on every style recalc. Killing :has() on a
   1,500-row table is one of the biggest single perf wins in admin. */
tbody tr.row-disabled td{
  background:rgba(255,100,110,.07);
}
tbody tr.row-disabled:hover td{
  background:rgba(255,100,110,.13);
}
tbody tr.row-disabled td:first-child{
  box-shadow:inset 3px 0 0 #ff646e;
}
tbody tr.row-unsettled td{
  background:rgba(245,158,11,.06);
}
tbody tr.row-unsettled:hover td{
  background:rgba(245,158,11,.12);
}
tbody tr.row-unsettled td:first-child{
  box-shadow:inset 3px 0 0 #fbbf24;
}

/* ============================================================
   STATUS PILLS
   ============================================================ */
.status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid transparent;
}
.status::before{
  content:"";
  width:6px; height:6px; border-radius:999px;
  background:currentColor;
  box-shadow:0 0 8px currentColor;
}
.active-status{
  background:rgba(44,214,124,.10);
  color:#2cd67c;
  border-color:rgba(44,214,124,.30);
}
.disabled-status{
  background:rgba(255,100,110,.10);
  color:#ff646e;
  border-color:rgba(255,100,110,.30);
}
.unsettled-status{
  /* Amber — billing review state, not as severe as Disabled */
  background:rgba(245,158,11,.12);
  color:#fbbf24;
  border-color:rgba(245,158,11,.32);
}
.assigned-status{
  background:rgba(73,178,255,.10);
  color:#49b2ff;
  border-color:rgba(73,178,255,.30);
}
.unassigned-status{
  background:rgba(245,158,11,.10);
  color:#fbbf24;
  border-color:rgba(245,158,11,.30);
}
.pending-status{
  background:rgba(168,85,247,.10);
  color:#c084fc;
  border-color:rgba(168,85,247,.30);
}

/* ============================================================
   CARD-ATTACHED PILL — funding source indicator in inventory
   ============================================================ */
.card-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  border:1px solid transparent;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.card-pill-on{
  background:rgba(34,197,94,.10);
  color:#4ade80;
  border-color:rgba(34,197,94,.32);
}
.card-pill-off{
  background:rgba(120,113,108,.10);
  color:#a8a29e;
  border-color:rgba(120,113,108,.28);
  opacity:.85;
}

/* ============================================================
   PAGE PILL — Facebook Page identity associated with ad account
   ============================================================ */
.page-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  border:1px solid transparent;
  white-space:nowrap;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.page-pill-on{
  background:rgba(38,165,228,.10);
  color:#7bcaf0;
  border-color:rgba(38,165,228,.30);
}
.page-pill-off{
  background:rgba(120,113,108,.08);
  color:#78716c;
  border-color:rgba(120,113,108,.22);
  opacity:.7;
}

/* ============================================================
   AUTHORIZED PAGES PANEL — admin-only, powered by pages_show_list
   ============================================================ */
.authorized-pages-panel{
  margin-top:16px;
  padding:18px 20px;
  background:rgba(38,165,228,.04);
  border:1px solid rgba(38,165,228,.18);
  border-radius:14px;
}
.authorized-pages-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
  margin-bottom:14px;
}
.authorized-pages-head h3{
  font-size:15px;font-weight:700;margin:0 0 4px;
  color:#7bcaf0;
  display:flex;align-items:center;gap:6px;
}
.authorized-pages-head h3::before{
  content:"📘";font-size:14px;
}
.authorized-pages-sub{
  font-size:12.5px;color:rgba(255,255,255,.55);
  margin:0;max-width:640px;line-height:1.5;
}
.authorized-pages-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:8px;
}
.authorized-pages-empty{
  grid-column:1/-1;
  padding:14px;
  text-align:center;
  font-size:12.5px;
  color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.02);
  border:1px dashed rgba(255,255,255,.08);
  border-radius:10px;
}
.authorized-page-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(38,165,228,.14);
  border-radius:10px;
  font-size:12.5px;
}
.authorized-page-icon{
  width:28px;height:28px;border-radius:8px;
  background:rgba(38,165,228,.14);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;flex:0 0 28px;
}
.authorized-page-body{flex:1;min-width:0}
.authorized-page-name{
  font-weight:700;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.authorized-page-meta{
  font-size:11px;color:rgba(255,255,255,.5);
  font-family:monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.authorized-page-role{
  font-size:10px;font-weight:700;
  padding:3px 8px;border-radius:999px;
  background:rgba(34,197,94,.12);color:#4ade80;
  border:1px solid rgba(34,197,94,.3);
  letter-spacing:.04em;
}
.authorized-pages-error{
  grid-column:1/-1;
  padding:12px 14px;
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.22);
  border-radius:10px;
  color:#fca5a5;font-size:12.5px;
}

/* ============================================================
   COMPLIANCE-ONLY ELEMENTS — Hidden in normal use; visible only
   when the page is loaded with ?compliance=1 in the URL.

   Used for Meta App Review surfaces (Page column + Authorized
   Pages panel) that we must keep in the CRM for compliance with
   our App Review submission, but don't want cluttering daily
   admin or client workflows.

   When Meta reviewers test the app, the App Review submission
   provides the compliance URL — they see the features and can
   verify the permission usage matches the description.
   ============================================================ */
th.compliance-only, td.compliance-only{ display:none; }
body.compliance-mode th.compliance-only,
body.compliance-mode td.compliance-only{ display:table-cell; }

div.compliance-only, section.compliance-only{ display:none; }
body.compliance-mode div.compliance-only,
body.compliance-mode section.compliance-only{ display:block; }
body.compliance-mode .authorized-pages-panel{ display:block; }

/* Small banner that appears across the top when compliance mode
   is active, so admins know which view they're in and reviewers
   have a visible signal during their walkthrough. */
.compliance-banner{
  display:none;
  position:sticky;top:0;z-index:9999;
  padding:6px 12px;
  background:linear-gradient(90deg, rgba(214,177,94,.18), rgba(214,177,94,.28), rgba(214,177,94,.18));
  border-bottom:1px solid rgba(214,177,94,.4);
  text-align:center;
  font-size:12px;font-weight:600;color:#0a0708;
  letter-spacing:.04em;
}
body.compliance-mode .compliance-banner{ display:block; }

/* ============================================================
   INVENTORY PAGINATION — only renders when filtered set > 100 rows.
   Cuts admin DOM from 1,500 rows to 100 → huge perf win.
   ============================================================ */
.inv-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:18px 0 4px;
  font-size:13px;
  flex-wrap:wrap;
}
.inv-pagination:empty{ display:none; }
.pag-btn{
  padding:8px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(214,177,94,.2);
  border-radius:8px;
  color:#fff;
  cursor:pointer;
  font-weight:600;
  font-size:13px;
  font-family:inherit;
  font-variant-numeric:tabular-nums;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.pag-btn:hover:not(:disabled):not(.pag-btn-active){
  background:rgba(214,177,94,.1);
  border-color:rgba(214,177,94,.4);
  transform:translateY(-1px);
}
.pag-btn:disabled{
  opacity:.3;
  cursor:not-allowed;
}
.pag-num{
  min-width:38px;
  padding:8px 12px;
  text-align:center;
}
.pag-btn-active{
  background:linear-gradient(135deg, #D6B15E, #F2D27A);
  color:#000;
  border-color:rgba(214,177,94,.6);
  cursor:default;
  box-shadow:0 0 0 1px rgba(214,177,94,.3), 0 4px 14px rgba(214,177,94,.2);
}
.pag-btn-active:hover{ transform:none; }
.pag-arrow{
  /* Visual separation between arrows and the numbered run */
  margin:0 6px;
}
.pag-ellipsis{
  color:rgba(255,255,255,.4);
  padding:0 4px;
  font-weight:700;
  user-select:none;
  letter-spacing:.04em;
}
.pag-info{
  color:rgba(255,255,255,.62);
  font-variant-numeric:tabular-nums;
  margin-left:14px;
  white-space:nowrap;
}
.pag-info b{ color:#F2D27A; font-weight:700; }
@media (max-width:680px){
  .inv-pagination{ gap:4px; padding:14px 0 2px; }
  .pag-btn{ padding:7px 10px; font-size:12.5px; }
  .pag-num{ min-width:34px; padding:7px 8px; }
  .pag-arrow{ margin:0 2px; }
  .pag-info{ width:100%; text-align:center; margin:6px 0 0; }
}

/* CSS containment on inventory rows — each row's paint + layout
   isolated from the rest. Browsers can skip work on rows that
   haven't visually changed. */
.crm-row-account{ contain:layout style; }

/* ============================================================
   SETTINGS GRID
   ============================================================ */
.settings-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(220px,1fr));
  gap:18px;
}

.setting-box{
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:22px;
  transition:.2s var(--ease);
}
.setting-box:hover{
  border-color:var(--gold-line);
  background:linear-gradient(135deg, rgba(214,177,94,.06), rgba(214,177,94,.02));
}
.setting-box h3{
  font-family:'Sora',sans-serif;
  font-size:18px;
  font-weight:800;
  margin-bottom:14px;
  letter-spacing:-.015em;
}
.setting-box p{
  color:var(--muted);
  font-size:13.5px;
  margin-bottom:8px;
}
.setting-box p:last-child{ margin-bottom:0; }

/* ============================================================
   META PANEL (admin tools)
   ============================================================ */
.meta-panel{
  display:grid;
  gap:0;
}
.meta-panel-row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}
.meta-panel-row:last-child{ border-bottom:none; }
.meta-panel-label{
  color:var(--muted2);
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  align-self:center;
}
.meta-panel-value{
  color:rgba(255,255,255,.92);
  font-size:14px;
  line-height:1.5;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page{
  min-height:100vh;
  background:
    radial-gradient(900px circle at 12% 20%, rgba(214,177,94,.18), transparent 55%),
    radial-gradient(800px circle at 88% 80%, rgba(73,178,255,.10), transparent 60%),
    radial-gradient(700px circle at 50% 100%, rgba(168,85,247,.08), transparent 60%),
    linear-gradient(135deg,#050507,#0a0c12 55%,#070810);
  position:relative;
}
.login-page::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(214,177,94,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,177,94,.04) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%, black, transparent);
          mask-image:radial-gradient(70% 70% at 50% 50%, black, transparent);
}

.login-wrapper{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  position:relative;
  z-index:1;
}

.login-left{
  padding:64px 60px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:60px;
}

.login-brand h1{
  font-family:'Sora',sans-serif;
  font-size:72px;
  font-weight:900;
  letter-spacing:-.04em;
  margin-bottom:18px;
  background:linear-gradient(135deg,var(--gold),var(--gold2),#fff,var(--gold));
  background-size:220% 220%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:logoShift 9s ease-in-out infinite;
}
.login-brand p{
  max-width:560px;
  font-size:18px;
  line-height:1.6;
  color:var(--muted);
}

.login-features{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  max-width:620px;
}

.login-feature-box{
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:22px 24px;
  backdrop-filter:blur(10px);
  transition:.22s var(--ease);
}
.login-feature-box:hover{
  border-color:var(--gold-line);
  background:linear-gradient(135deg, rgba(214,177,94,.06), rgba(214,177,94,.02));
  transform:translateY(-2px);
}
.login-feature-box h3{
  font-family:'Sora',sans-serif;
  font-size:18px;
  font-weight:800;
  margin-bottom:8px;
  letter-spacing:-.015em;
}
.login-feature-box p{
  color:var(--muted);
  line-height:1.55;
  font-size:13.5px;
}

.login-right{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}

.login-card{
  width:100%;
  max-width:440px;
  background:rgba(15,17,24,.78);
  border:1px solid var(--line);
  border-radius:24px;
  padding:38px;
  backdrop-filter:blur(12px);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.6),
    0 0 0 1px rgba(214,177,94,.08),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.login-card h2{
  font-family:'Sora',sans-serif;
  font-size:32px;
  font-weight:900;
  letter-spacing:-.02em;
  margin-bottom:6px;
}
.login-subtext{
  color:var(--muted);
  font-size:14px;
  margin-bottom:28px;
}

.form-group{ margin-bottom:18px; }
.form-group label{
  display:block;
  margin-bottom:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted2);
}
.form-group input{
  width:100%;
  height:48px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:#fff;
  padding:0 16px;
  outline:none;
  font:inherit;
  font-size:14px;
  transition:.18s var(--ease);
}
.form-group input::placeholder{ color:var(--muted2); }
.form-group input:focus{
  border-color:var(--gold-line);
  background:rgba(214,177,94,.04);
  box-shadow:0 0 0 4px rgba(214,177,94,.08);
}

.login-btn{ width:100%; margin-top:8px; height:48px; }

.login-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:22px 0;
  color:var(--muted2);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.login-footer-text{
  text-align:center;
  color:var(--muted2);
  font-size:12px;
  margin-top:22px;
  letter-spacing:.04em;
}

/* ============================================================
   ACTIVITY LOG
   ============================================================ */
.activity-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.activity-item{
  display:grid;
  grid-template-columns:120px 1fr 180px;
  gap:18px;
  align-items:center;
  padding:18px 22px;
  background:linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  transition:.18s var(--ease);
}
.activity-item:hover{
  border-color:var(--gold-line);
  background:linear-gradient(135deg, rgba(214,177,94,.05), rgba(214,177,94,.015));
  transform:translateX(2px);
}
.activity-item h3{
  font-size:14px;
  font-weight:700;
  margin-bottom:3px;
  text-transform:capitalize;
}
.activity-item p{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.activity-time{
  font-family:'JetBrains Mono',monospace;
  color:var(--muted2);
  font-size:12px;
  text-align:right;
}

.activity-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  border:1px solid transparent;
  width:fit-content;
}

.log-replace{
  background:rgba(73,178,255,.08);
  color:#49b2ff;
  border-color:rgba(73,178,255,.30);
}
.log-assign{
  background:rgba(44,214,124,.08);
  color:#2cd67c;
  border-color:rgba(44,214,124,.30);
}
.log-sync{
  background:rgba(245,158,11,.08);
  color:#fbbf24;
  border-color:rgba(245,158,11,.30);
}
.log-request{
  background:rgba(168,85,247,.08);
  color:#c084fc;
  border-color:rgba(168,85,247,.30);
}

/* ============================================================
   MODAL
   ============================================================ */
.modal{
  position:fixed;
  inset:0;
  display:none;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:24px;
  animation:modalFadeIn .2s var(--ease);
}
@keyframes modalFadeIn{
  from{ opacity:0 }
  to{ opacity:1 }
}

.modal-content{
  background:linear-gradient(135deg, rgba(20,22,30,.96), rgba(13,14,20,.96));
  border:1px solid var(--line);
  padding:28px;
  border-radius:20px;
  width:380px;
  max-width:100%;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,.7),
    0 0 0 1px rgba(214,177,94,.10),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(14px);
  animation:modalSlideIn .3s var(--ease-back);
}
@keyframes modalSlideIn{
  from{ opacity:0; transform:translateY(20px) scale(.96) }
  to{ opacity:1; transform:translateY(0) scale(1) }
}
.modal-content h2,
.modal-content h3{
  font-family:'Sora',sans-serif;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.015em;
  margin-bottom:6px;
}
.modal-content p{
  color:var(--muted);
  font-size:13.5px;
  margin-bottom:14px;
}
.modal-wide{ width:460px; }

.modal-content input,
.modal-content select,
.modal-content textarea{
  width:100%;
  margin-bottom:12px;
  height:44px;
  padding:0 14px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:#fff;
  font:inherit;
  font-size:14px;
  outline:none;
  transition:.18s var(--ease);
}
.modal-content textarea{ height:auto; padding:12px 14px; min-height:80px; resize:vertical; }
.modal-content input::placeholder,
.modal-content textarea::placeholder{ color:var(--muted2); }
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus{
  border-color:var(--gold-line);
  background:rgba(214,177,94,.04);
  box-shadow:0 0 0 4px rgba(214,177,94,.08);
}
.modal-content select option,
.modal-content select optgroup{
  background:#15161c;
  color:#fff;
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:8px;
}
.modal-actions button{
  height:44px;
  padding:0 18px;
  border-radius:var(--r-md);
  font-weight:800;
  font-size:13.5px;
  cursor:pointer;
  transition:.18s var(--ease);
  border:1px solid transparent;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .activity-item{ grid-template-columns:90px 1fr; }
  .activity-time{ grid-column:2; text-align:left; }
}

@media (max-width:980px){
  .cards{ grid-template-columns:1fr; }
  .topbar{ flex-direction:column; align-items:stretch; }
  .topbar input{ max-width:100%; }
  .topbar button,
  .primary-btn,
  .secondary-btn{ width:100%; }
  .settings-grid{ grid-template-columns:1fr; }
  .page-header{ flex-direction:column; align-items:stretch; }
  .login-wrapper{ grid-template-columns:1fr; }
  .login-left{ padding:36px 24px 12px; gap:32px; }
  .login-brand h1{ font-size:48px; }
  .login-brand p{ font-size:16px; }
  .login-right{ padding:24px; }
  .header-actions{ width:100%; flex-direction:column; }
  .meta-panel-row{ grid-template-columns:1fr; gap:6px; }
  .modal-wide{ width:100%; }
}

@media (max-width:760px){
  .app{ flex-direction:column; }
  .sidebar{
    width:100%;
    min-height:auto;
    height:auto;
    position:static;
    border-right:none;
    border-bottom:1px solid var(--line-soft);
    padding:18px;
  }
  .nav{ flex-direction:row; flex-wrap:wrap; gap:6px; }
  .nav li{ flex:1; min-width:120px; text-align:center; }
  .nav li.active::before{ display:none; }
  .main{ padding:20px; }
  .logo{ font-size:22px; }
  .page-header h1{ font-size:26px; }
  .table-section{ padding:16px; }
  table{ min-width:680px; }
}

/* ============================================================
   ===== NEW SHARED CRM UI COMPONENTS (script.js powered) =====
   ============================================================ */

/* ---------- Top progress bar ---------- */
.crm-progress{
  position:fixed; top:0; left:0; right:0;
  height:2px; z-index:10000; pointer-events:none;
  opacity:0; transition:opacity .25s var(--ease);
}
.crm-progress.active{ opacity:1; }
.crm-progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#D6B15E,#F2D27A,#fff);
  box-shadow:0 0 14px rgba(214,177,94,.55);
}

/* ---------- Toast ---------- */
.crm-toast-host{
  position:fixed; right:18px; bottom:18px;
  display:flex; flex-direction:column; gap:10px;
  z-index:10001; pointer-events:none;
  max-width:380px;
}
.crm-toast{
  pointer-events:auto;
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:flex-start;
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(20,22,30,.96), rgba(13,14,20,.96));
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  box-shadow:0 18px 48px -20px rgba(0,0,0,.7);
  font-size:13.5px; font-weight:600;
  opacity:0; transform:translateY(10px) scale(.97);
  transition:opacity .22s var(--ease), transform .28s var(--ease-back);
}
.crm-toast.in{ opacity:1; transform:translateY(0) scale(1); }
.crm-toast.leaving{ opacity:0; transform:translateY(-6px) scale(.97); }
.crm-toast-body{ line-height:1.45; padding-top:1px; }
.crm-toast-x{
  background:transparent; border:none; color:var(--muted2);
  font-size:18px; font-weight:700; cursor:pointer; line-height:1;
  width:24px; height:24px; border-radius:6px;
}
.crm-toast-x:hover{ color:#fff; background:rgba(255,255,255,.06); }
.crm-toast-icon{
  width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center;
  border:1px solid transparent;
}
.crm-toast-success .crm-toast-icon{ background:rgba(44,214,124,.10); color:#2cd67c; border-color:rgba(44,214,124,.30); }
.crm-toast-error   .crm-toast-icon{ background:rgba(255,100,110,.10); color:#ff646e; border-color:rgba(255,100,110,.30); }
.crm-toast-info    .crm-toast-icon{ background:rgba(73,178,255,.10); color:#49b2ff; border-color:rgba(73,178,255,.30); }
.crm-toast-warn    .crm-toast-icon{ background:rgba(245,158,11,.10); color:#fbbf24; border-color:rgba(245,158,11,.30); }
.crm-toast-success{ border-color:rgba(44,214,124,.20); }
.crm-toast-error{ border-color:rgba(255,100,110,.25); }
.crm-toast-info{ border-color:rgba(73,178,255,.20); }
.crm-toast-warn{ border-color:rgba(245,158,11,.25); }

/* ---------- Skeleton shimmer ---------- */
@keyframes crmSkelShimmer{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}
.crm-skel{
  display:inline-block;
  height:14px; min-width:60px; border-radius:6px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.04) 0%,
      rgba(214,177,94,.10) 50%,
      rgba(255,255,255,.04) 100%);
  background-size:200% 100%;
  animation:crmSkelShimmer 1.4s linear infinite;
}
.crm-skel-row td{ padding:18px 14px; }
.crm-skel-card{
  padding:22px 24px; border-radius:var(--r-lg);
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
}
.crm-skel-line{
  padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.crm-skel-line:last-child{ border-bottom:none; }

/* ---------- Empty state ---------- */
.crm-empty{
  text-align:center;
  padding:48px 24px 36px;
  color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.crm-empty-icon{
  width:80px; height:80px; border-radius:24px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(214,177,94,.10), rgba(214,177,94,.02));
  border:1px solid var(--gold-line);
  color:var(--gold);
  margin-bottom:6px;
  box-shadow:0 0 30px -10px var(--gold-glow);
}
.crm-empty h3{
  font-family:'Sora',sans-serif;
  font-size:17px; font-weight:800;
  color:#fff; letter-spacing:-.015em;
}
.crm-empty p{ font-size:13.5px; color:var(--muted); max-width:380px; }

/* ---------- Sparkline (mostly handled by SVG itself) ---------- */
.crm-spark{ display:block; margin-top:10px; opacity:.95; }

/* ---------- Area chart ---------- */
.crm-area-chart-wrap{
  position:relative;
  margin-top:14px;
}
.crm-area-chart{ display:block; }
.crm-area-tip{
  position:absolute;
  pointer-events:none;
  transform:translate(-50%, -100%);
  background:rgba(15,17,24,.92);
  border:1px solid var(--gold-line);
  border-radius:10px;
  padding:8px 12px;
  font-size:12px;
  color:#fff;
  white-space:nowrap;
  box-shadow:0 12px 32px -10px rgba(0,0,0,.6);
  opacity:0; transition:opacity .14s ease;
}
.crm-area-tip.show{ opacity:1; }
.crm-area-tip strong{
  display:block; font-family:'Sora',sans-serif;
  font-size:13.5px; font-weight:900;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.crm-area-tip span{ color:var(--muted2); font-size:11px; letter-spacing:.04em; }

/* ---------- Account drawer ---------- */
.crm-drawer-host{
  position:fixed; inset:0; z-index:9998;
  pointer-events:none;
}
.crm-drawer-host .crm-drawer-back{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  opacity:0; transition:opacity .25s var(--ease);
}
.crm-drawer{
  position:absolute; right:0; top:0; bottom:0;
  width:min(520px, 92vw);
  background:linear-gradient(135deg, rgba(15,17,24,.96), rgba(8,9,13,.96));
  border-left:1px solid var(--line);
  box-shadow:-30px 0 80px -20px rgba(0,0,0,.7);
  transform:translateX(100%);
  transition:transform .35s var(--ease-out);
  display:flex; flex-direction:column;
  pointer-events:auto;
}
.crm-drawer-host.open{ pointer-events:auto; }
.crm-drawer-host.open .crm-drawer-back{ opacity:1; }
.crm-drawer-host.open .crm-drawer{ transform:translateX(0); }
.crm-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(214,177,94,.06), transparent);
}
.crm-drawer-title strong{
  display:block;
  font-family:'Sora',sans-serif;
  font-size:18px; font-weight:800; letter-spacing:-.015em;
}
.crm-drawer-title small{
  font-family:'JetBrains Mono',monospace;
  color:var(--muted2); font-size:12px;
}
.crm-drawer-x{
  background:transparent; border:1px solid var(--line);
  border-radius:10px; color:#fff; cursor:pointer;
  width:36px; height:36px; font-size:20px; line-height:1;
  transition:.15s var(--ease);
}
.crm-drawer-x:hover{ border-color:var(--gold-line); background:rgba(214,177,94,.06); }
.crm-drawer-body{
  flex:1; overflow-y:auto;
  padding:22px 24px 32px;
}
.crm-drawer-section{ margin-bottom:24px; }
.crm-drawer-section h4{
  font-family:'Sora',sans-serif;
  font-size:11px; font-weight:900; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted2);
  margin-bottom:12px;
}
.crm-drawer-grid{
  display:flex; flex-direction:column;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.02);
}
.crm-drawer-row{
  display:grid; grid-template-columns:160px 1fr; gap:14px;
  padding:11px 14px;
  border-bottom:1px solid var(--line-soft);
  font-size:13.5px;
}
.crm-drawer-row:last-child{ border-bottom:none; }
.crm-drawer-k{ color:var(--muted2); font-size:12px; font-weight:700; letter-spacing:.04em; }
.crm-drawer-v{ color:#fff; }
.crm-drawer-v.mono{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:rgba(255,255,255,.85); }
.crm-drawer-logs{ display:flex; flex-direction:column; gap:10px; }
.crm-drawer-log{
  display:grid; grid-template-columns:120px 1fr; gap:14px;
  padding:12px 14px;
  border:1px solid var(--line-soft);
  border-radius:12px;
  background:rgba(255,255,255,.015);
}
.crm-drawer-log-time{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; color:var(--muted2);
  letter-spacing:.04em;
}
.crm-drawer-log-body strong{
  font-family:'Sora',sans-serif;
  font-size:13px; font-weight:800;
  text-transform:capitalize;
}
.crm-drawer-log-body p{
  margin-top:3px;
  font-size:13px; color:var(--muted); line-height:1.5;
}
.crm-drawer-empty{
  text-align:center;
  padding:24px;
  color:var(--muted2);
  font-size:13px;
  border:1px dashed var(--line);
  border-radius:12px;
}

/* ---------- Health badge ---------- */
.crm-health{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px;
  border-radius:999px;
  font-size:10.5px; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid transparent;
}
.crm-health::before{
  content:""; width:5px; height:5px; border-radius:999px;
  background:currentColor;
  box-shadow:0 0 8px currentColor;
  animation:healthPulse 1.6s ease-in-out infinite;
}
@keyframes healthPulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(.8); opacity:.6; }
}
.crm-health-good{ background:rgba(44,214,124,.10); color:#2cd67c; border-color:rgba(44,214,124,.30); }
.crm-health-warn{ background:rgba(245,158,11,.10); color:#fbbf24; border-color:rgba(245,158,11,.30); }
.crm-health-bad{  background:rgba(255,100,110,.10); color:#ff646e; border-color:rgba(255,100,110,.30); }

/* ---------- Live ticker ---------- */
.crm-ticker{
  position:relative;
  margin-bottom:18px;
  padding:10px 0;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(214,177,94,.06), rgba(255,255,255,.02));
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
}
.crm-ticker-track{
  display:inline-flex;
  white-space:nowrap;
  animation:tickerScroll 60s linear infinite;
  padding-left:16px;
}
@keyframes tickerScroll{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); }
}
.crm-ticker:hover .crm-ticker-track{ animation-play-state:paused; }
.crm-tick{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px;
  margin-right:14px;
  border-right:1px solid var(--line-soft);
  font-size:13px;
}
.crm-tick strong{ font-family:'Sora',sans-serif; font-weight:800; }
.crm-tick em{
  font-style:normal;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  color:#fff;
}
.crm-tick-delta{
  font-size:11px; font-weight:800; font-style:normal;
  padding:2px 8px; border-radius:999px;
  letter-spacing:.04em;
}
.crm-tick-delta.up{ background:rgba(44,214,124,.10); color:#2cd67c; border:1px solid rgba(44,214,124,.30); }
.crm-tick-delta.down{ background:rgba(255,100,110,.10); color:#ff646e; border:1px solid rgba(255,100,110,.30); }

/* ---------- Last-synced indicator ---------- */
.crm-lastsync{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--gold-line);
  background:rgba(214,177,94,.06);
  font-size:11.5px; font-weight:700;
  letter-spacing:.04em;
  color:var(--muted);
}
.crm-lastsync-pulse{
  width:7px; height:7px; border-radius:999px;
  background:#2cd67c;
  box-shadow:0 0 0 0 rgba(44,214,124,.5);
  animation:lastsyncPulse 1.8s ease-out infinite;
}
@keyframes lastsyncPulse{
  0%{ box-shadow:0 0 0 0 rgba(44,214,124,.5); }
  70%{ box-shadow:0 0 0 8px rgba(44,214,124,0); }
  100%{ box-shadow:0 0 0 0 rgba(44,214,124,0); }
}
.crm-lastsync.crm-lastsync-stale .crm-lastsync-pulse{
  background:#fbbf24;
  box-shadow:0 0 0 0 rgba(245,158,11,.5);
}
.crm-lastsync.crm-lastsync-stale{ border-color:rgba(245,158,11,.30); background:rgba(245,158,11,.06); }

/* ---------- Keyboard shortcuts cheat sheet ---------- */
.crm-cheat{
  position:fixed; inset:0; z-index:9999;
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.crm-cheat.open{ display:flex; animation:modalFadeIn .2s var(--ease); }
.crm-cheat-back{
  position:absolute; inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(6px);
}
.crm-cheat-card{
  position:relative;
  width:100%; max-width:480px;
  background:linear-gradient(135deg, rgba(20,22,30,.96), rgba(13,14,20,.96));
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  animation:modalSlideIn .3s var(--ease-back);
}
.crm-cheat-card header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--line-soft);
}
.crm-cheat-card header strong{
  font-family:'Sora',sans-serif;
  font-size:16px; font-weight:800; letter-spacing:-.015em;
}
.crm-cheat-x{
  background:transparent; border:none; color:var(--muted2);
  font-size:22px; cursor:pointer; line-height:1;
}
.crm-cheat-x:hover{ color:#fff; }
.crm-cheat-card ul{
  list-style:none; padding:14px 22px 22px;
}
.crm-cheat-card li{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:13.5px;
}
.crm-cheat-card li:last-child{ border-bottom:none; }
.crm-cheat-card kbd,
.crm-palette kbd{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px; font-weight:700;
  padding:3px 8px;
  border-radius:6px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:#fff;
  letter-spacing:.04em;
}

/* ---------- Command palette ---------- */
.crm-palette{
  position:fixed; inset:0; z-index:10000;
  display:none; align-items:flex-start; justify-content:center;
  padding:80px 24px 24px;
}
.crm-palette.open{ display:flex; animation:modalFadeIn .2s var(--ease); }
.crm-palette-back{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(8px);
}
.crm-palette-card{
  position:relative;
  width:100%; max-width:560px;
  background:linear-gradient(135deg, rgba(20,22,30,.97), rgba(13,14,20,.97));
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.75),
    0 0 0 1px rgba(214,177,94,.10),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  animation:modalSlideIn .25s var(--ease-back);
}
.crm-palette-input{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(214,177,94,.04), transparent);
}
.crm-palette-input svg{ color:var(--muted2); flex-shrink:0; }
.crm-palette-input input{
  flex:1; background:transparent; border:none; outline:none;
  font:inherit; font-size:15px;
  color:#fff;
}
.crm-palette-input input::placeholder{ color:var(--muted2); }
.crm-palette-list{
  max-height:50vh;
  overflow-y:auto;
  padding:6px;
}
.crm-palette-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px;
  border-radius:10px;
  cursor:pointer;
  transition:background .12s ease;
}
.crm-palette-item.active{ background:rgba(214,177,94,.10); border:1px solid var(--gold-line); padding:10px 11px; }
.crm-palette-item:not(.active){ border:1px solid transparent; }
.crm-palette-k{
  flex-shrink:0;
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  font-size:14px;
}
.crm-palette-l{ flex:1; min-width:0; }
.crm-palette-l strong{
  display:block;
  font-size:13.5px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.crm-palette-l small{
  display:block;
  margin-top:2px;
  font-size:11.5px;
  color:var(--muted2);
}
.crm-palette-tag{
  flex-shrink:0;
  font-size:10px; font-weight:900;
  letter-spacing:.16em; text-transform:uppercase;
  padding:3px 8px; border-radius:6px;
  background:rgba(214,177,94,.10);
  color:var(--gold);
  border:1px solid var(--gold-line);
}
.crm-palette-empty{
  padding:30px;
  text-align:center;
  color:var(--muted2);
  font-size:13px;
}
.crm-palette-foot{
  display:flex; gap:14px;
  padding:10px 18px;
  border-top:1px solid var(--line-soft);
  background:rgba(255,255,255,.015);
  font-size:11px;
  color:var(--muted2);
}
.crm-palette-foot kbd{ margin:0 3px; }

/* ---------- CRM Tour button ---------- */
.crm-tour-btn{
  display:inline-flex; align-items:center;
  background:linear-gradient(135deg, rgba(214,177,94,.16), rgba(214,177,94,.04)) !important;
  border-color:var(--gold-line) !important;
  color:var(--gold2) !important;
}
.crm-tour-btn:hover{
  background:linear-gradient(135deg, rgba(214,177,94,.26), rgba(214,177,94,.08)) !important;
  box-shadow:0 0 20px -6px var(--gold-glow);
}

/* ---------- Bulk actions row + checkbox column ---------- */
.crm-bulkbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px;
  margin-bottom:14px;
  border:1px solid var(--gold-line);
  background:linear-gradient(135deg, rgba(214,177,94,.10), rgba(214,177,94,.02));
  border-radius:14px;
  font-size:13px;
  animation:bulkbarIn .3s var(--ease-back);
}
@keyframes bulkbarIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}
.crm-bulkbar strong{ font-family:'Sora',sans-serif; font-weight:800; color:var(--gold2); }
.crm-bulkbar .crm-bulkbar-spacer{ flex:1; }
.crm-row-check{
  width:16px; height:16px;
  accent-color:var(--gold);
  cursor:pointer;
}
tbody tr.crm-row-selected td{
  background:rgba(214,177,94,.08) !important;
}
tbody tr.crm-row-selected td:first-child{
  box-shadow:inset 3px 0 0 var(--gold) !important;
}

/* ---------- Stat card sparkline footer ---------- */
.card .crm-card-foot{
  display:flex; align-items:center; gap:10px;
  margin-top:8px;
  font-size:11px;
  color:var(--muted2);
}
.card .crm-card-foot .crm-spark{ flex:1; min-width:60px; max-height:30px; }
.card .crm-card-delta{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  padding:2px 7px; border-radius:6px;
}
.card .crm-card-delta.up{ background:rgba(44,214,124,.10); color:#2cd67c; }
.card .crm-card-delta.down{ background:rgba(255,100,110,.10); color:#ff646e; }
.card .crm-card-delta.flat{ background:rgba(255,255,255,.04); color:var(--muted); }

/* ---------- Big chart wrapper (used on dashboard) ---------- */
.crm-chart-section{
  margin-top:24px;
  padding:24px;
  border-radius:var(--r-xl);
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.crm-chart-section::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(140% 100% at 100% 0%, rgba(214,177,94,.05), transparent 50%);
  pointer-events:none;
}
.crm-chart-section > *{ position:relative; z-index:1; }
.crm-chart-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  margin-bottom:14px; flex-wrap:wrap;
}
.crm-chart-head h2{
  font-family:'Sora',sans-serif;
  font-size:20px; font-weight:800; letter-spacing:-.015em;
}
.crm-chart-sub{
  color:var(--muted2);
  font-size:12px; letter-spacing:.04em;
}
.crm-chart-total{
  font-family:'Sora',sans-serif;
  font-size:24px; font-weight:900;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===== ADMIN QUICK-NAV (lives inside the sidebar) ===========
   Sits at the bottom of .sidebar, below the Logout nav item.
   Section anchors styled like nav-list items so they feel like a
   second tier of navigation. Each link jumps to a section in the
   admin main column; current section highlights gold via
   IntersectionObserver (wired in admin.html). */
.crm-quicknav{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.crm-quicknav-label{
  font-size:10px; font-weight:900;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted2);
  margin-bottom:6px;
  padding:0 14px;
}
.crm-quicknav a{
  display:block;
  padding:8px 14px;
  border-radius:10px;
  font-size:12.5px; font-weight:700;
  letter-spacing:.02em;
  color:var(--muted);
  text-decoration:none;
  border:1px solid transparent;
  transition:.15s var(--ease);
  white-space:nowrap;
}
.crm-quicknav a:hover{
  color:#fff;
  background:rgba(255,255,255,.04);
  border-color:var(--line);
}
.crm-quicknav a.active{
  color:#fff;
  background:linear-gradient(135deg, rgba(214,177,94,.12), rgba(214,177,94,.04));
  border-color:var(--gold-line);
  box-shadow:0 0 18px -8px var(--gold-glow), inset 0 0 0 1px rgba(214,177,94,.05);
}
@media (max-width:760px){ .crm-quicknav{ display:none; } }

/* ===== CLICK-TO-COPY CELLS ==================================
   Visual hint that a cell value is copyable on click. Subtle
   dotted underline; gold tint on hover. */
.cell-copy{
  cursor:pointer;
  border-bottom:1px dotted rgba(214,177,94,.35);
  padding-bottom:1px;
  transition:.12s var(--ease);
}
.cell-copy:hover{
  color:var(--gold2);
  border-bottom-color:var(--gold);
}

/* ===== SHARE TO BM MODAL ================================== */
.share-list{
  margin:10px 0 6px;
  max-height:280px;
  overflow-y:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.02);
}
.share-list-row{
  display:grid;
  grid-template-columns:24px 1fr auto;
  gap:10px;
  align-items:center;
  padding:8px 14px;
  border-bottom:1px solid var(--line-soft);
  cursor:pointer;
  transition:.12s var(--ease);
}
.share-list-row:last-child{ border-bottom:none; }
.share-list-row:hover{ background:rgba(214,177,94,.04); }
.share-list-row.sel{ background:rgba(214,177,94,.08); border-color:var(--gold-line); }
.share-list-row input[type="checkbox"]{ accent-color:var(--gold); width:16px; height:16px; cursor:pointer; }
.share-list-row .name{
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.share-list-row .id{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--muted2);
  margin-top:1px;
}
.share-list-row .meta{
  font-size:11px;
  color:var(--muted);
  font-family:'JetBrains Mono',monospace;
  white-space:nowrap;
}
.share-meta{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  font-size:12px;
}
.share-meta .share-sp{ flex:1; }

.share-progress-bar{
  height:6px;
  background:rgba(255,255,255,.05);
  border-radius:99px;
  overflow:hidden;
}
.share-progress-bar > div{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  transition:width .25s var(--ease);
}

#shareResults{
  max-height:240px;
  overflow-y:auto;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
  font-size:12px;
}
#shareResults .share-r{
  display:flex; align-items:center; gap:8px;
  padding:5px 0;
  border-bottom:1px solid var(--line-soft);
}
#shareResults .share-r:last-child{ border-bottom:none; }
#shareResults .share-r .dot{
  width:8px; height:8px; border-radius:99px; flex-shrink:0;
}
#shareResults .share-r.ok .dot{ background:#2cd67c; box-shadow:0 0 6px #2cd67c; }
#shareResults .share-r.fail .dot{ background:#ff646e; box-shadow:0 0 6px #ff646e; }
#shareResults .share-r .id{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  color:var(--muted);
}
#shareResults .share-r .err{
  flex:1; min-width:0;
  font-size:11.5px; color:#ff646e;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ===== LANGUAGE SWITCHER (sidebar pill row) =============== */
.crm-langswitch{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.crm-langswitch-label{
  font-size:10px; font-weight:900;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted2);
  margin-bottom:8px; padding:0 4px;
}
.crm-langswitch-pills{
  display:flex; gap:4px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:10px;
  padding:3px;
}
.crm-langswitch-pills button{
  flex:1;
  background:transparent; border:none;
  color:var(--muted);
  font:inherit; font-size:11px; font-weight:800;
  letter-spacing:.04em;
  padding:6px 0; border-radius:7px;
  cursor:pointer; transition:.15s var(--ease);
}
.crm-langswitch-pills button:hover{ color:#fff; }
.crm-langswitch-pills button.active{
  color:#1a140a;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 4px 14px -6px var(--gold-glow);
}
/* Login-page placement: appears in .login-left below the brand boxes */
.crm-langswitch-login{
  margin-top:24px; padding-top:0; border-top:none;
  max-width:240px;
}

/* ===== AI CHAT FLOATING PANEL ============================
   Persistent multi-turn AI assistant. Floating gold FAB
   bottom-right; click → slide-in chat panel from the right.
   Ctrl/⌘+J toggles. Conversation persists in sessionStorage. */
.crm-ai-host{ position:fixed; inset:0 0 0 auto; pointer-events:none; z-index:9997; }

.crm-ai-fab{
  position:fixed;
  right:20px; bottom:20px;
  pointer-events:auto;
  display:inline-flex; align-items:center; gap:8px;
  height:54px; padding:0 18px 0 16px;
  border-radius:99px;
  border:none;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1a140a;
  font-family:'Sora','Inter',system-ui,sans-serif;
  font-size:14px; font-weight:900;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 16px 40px -8px rgba(214,177,94,.55), 0 0 0 1px rgba(255,255,255,.1) inset;
  transition:.18s var(--ease);
}
.crm-ai-fab:hover{ transform:translateY(-2px); box-shadow:0 22px 56px -8px rgba(214,177,94,.7), 0 0 0 1px rgba(255,255,255,.12) inset; }
.crm-ai-fab svg{ display:block; }
.crm-ai-fab-label{ display:inline-block; }

/* Unread-message badge on the floating chat bubble. */
.crm-ai-fab.has-unread{
  animation: crmFabPulse 1.4s ease-in-out infinite;
}
@keyframes crmFabPulse {
  0%, 100% { box-shadow:0 16px 40px -8px rgba(214,177,94,.55), 0 0 0 1px rgba(255,255,255,.1) inset, 0 0 0 0 rgba(255,77,87,.55); }
  50%      { box-shadow:0 16px 40px -8px rgba(214,177,94,.55), 0 0 0 1px rgba(255,255,255,.1) inset, 0 0 0 12px rgba(255,77,87,0); }
}
.crm-ai-fab-dot{
  position:absolute;
  top:-2px; right:-2px;
  width:14px; height:14px;
  border-radius:50%;
  background:#ff4d57;
  border:2px solid #0c0c10;
  box-shadow:0 0 10px rgba(255,77,87,.7);
  pointer-events:none;
}
.crm-ai-fab{ position:fixed; }
/* re-anchor so the absolute dot positions relative to the FAB */

@media (max-width:560px){
  .crm-ai-fab{ padding:0; width:54px; }
  .crm-ai-fab-label{ display:none; }
}

.crm-ai-panel{
  position:fixed;
  right:20px; bottom:20px; top:auto;
  /* Bigger by default so the chat feels comfortable, not cramped. */
  width:min(480px, calc(100vw - 32px));
  height:min(640px, calc(100vh - 100px));
  pointer-events:auto;
  display:flex; flex-direction:column;
  background:linear-gradient(135deg, rgba(15,17,24,.97), rgba(8,9,13,.97));
  border:1px solid var(--gold-line);
  border-radius:20px;
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.7),
    0 0 0 1px rgba(214,177,94,.10),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(12px);
  transform:translateY(8px) scale(.98);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s var(--ease), transform .26s var(--ease-back);
  overflow:hidden;
}
@media (max-width: 560px){
  .crm-ai-panel{
    /* On narrow screens, fill the viewport with sensible margins. */
    width:calc(100vw - 16px);
    right:8px;
    height:calc(100vh - 70px);
  }
}
.crm-ai-host.open .crm-ai-panel{
  transform:translateY(0) scale(1);
  opacity:1; pointer-events:auto;
}
.crm-ai-host.open .crm-ai-fab{ display:none; }

.crm-ai-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(214,177,94,.06), transparent);
  border-radius:20px 20px 0 0;
}
.crm-ai-panel-head strong{
  display:block;
  font-family:'Sora',sans-serif;
  font-size:15px; font-weight:900; letter-spacing:-.015em;
}
.crm-ai-panel-head small{
  display:block;
  font-size:11px;
  color:var(--muted2);
}
.crm-ai-panel-actions{ display:flex; gap:6px; }
.crm-ai-clear,
.crm-ai-close{
  background:transparent; border:1px solid var(--line);
  width:32px; height:32px; border-radius:8px;
  color:var(--muted); cursor:pointer;
  font-size:16px; line-height:1;
  transition:.15s var(--ease);
}
.crm-ai-close{ font-size:20px; }
.crm-ai-clear:hover, .crm-ai-close:hover{
  border-color:var(--gold-line);
  color:#fff;
  background:rgba(214,177,94,.06);
}

.crm-ai-msgs{
  flex:1; overflow-y:auto;
  padding:16px 18px;
  display:flex; flex-direction:column; gap:10px;
}
.crm-ai-msgs::-webkit-scrollbar{ width:6px; }
.crm-ai-msgs::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:3px; }

.crm-ai-welcome{
  text-align:center;
  padding:28px 12px;
  color:var(--muted);
}
.crm-ai-welcome-icon{
  font-size:44px;
  margin-bottom:10px;
}
.crm-ai-welcome h4{
  font-family:'Sora',sans-serif;
  font-size:16px; font-weight:900;
  margin-bottom:6px; color:#fff;
  letter-spacing:-.015em;
}
.crm-ai-welcome p{
  font-size:13px; line-height:1.55;
  color:var(--muted);
  max-width:340px; margin:0 auto;
}

.crm-ai-bubble{
  max-width:90%;
  padding:10px 14px;
  border-radius:14px;
  font-size:13.5px;
  line-height:1.55;
  word-wrap:break-word;
  animation:aiBubbleIn .25s var(--ease-out);
}
@keyframes aiBubbleIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
.crm-ai-bubble.user{
  align-self:flex-end;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1a140a;
  font-weight:600;
  border-bottom-right-radius:6px;
}
.crm-ai-bubble.ai{
  align-self:flex-start;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:rgba(255,255,255,.92);
  border-bottom-left-radius:6px;
}
.crm-ai-bubble.ai strong{ color:var(--gold2); }
.crm-ai-bubble.ai code{
  background:rgba(214,177,94,.10);
  padding:1px 6px; border-radius:4px;
  font-family:'JetBrains Mono',monospace; font-size:12px;
  color:var(--gold2);
}
.crm-ai-bubble.ai ul{
  margin:6px 0 6px 18px;
  padding:0;
}
.crm-ai-bubble.ai li{
  margin:3px 0;
  font-size:13px;
}

.crm-ai-suggest{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:0 18px 10px;
}
.crm-ai-chip{
  background:rgba(214,177,94,.08);
  border:1px solid var(--gold-line);
  color:var(--gold2);
  font:inherit; font-size:11.5px; font-weight:600;
  padding:6px 10px;
  border-radius:99px;
  cursor:pointer;
  transition:.15s var(--ease);
}
.crm-ai-chip:hover{
  background:rgba(214,177,94,.16);
  transform:translateY(-1px);
}

.crm-ai-input{
  display:flex; gap:8px; align-items:flex-end;
  padding:12px 14px 14px;
  border-top:1px solid var(--line-soft);
}
.crm-ai-input textarea{
  flex:1;
  resize:none;
  height:38px; max-height:140px;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:#fff;
  font:inherit; font-size:13.5px; line-height:1.4;
  outline:none;
  transition:.15s var(--ease);
}
.crm-ai-input textarea::placeholder{ color:var(--muted2); }
.crm-ai-input textarea:focus{
  border-color:var(--gold-line);
  background:rgba(214,177,94,.04);
  box-shadow:0 0 0 3px rgba(214,177,94,.08);
}
.crm-ai-send{
  width:38px; height:38px; flex-shrink:0;
  border-radius:10px; border:none;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#1a140a;
  cursor:pointer;
  display:grid; place-items:center;
  transition:.15s var(--ease);
}
.crm-ai-send:hover{ transform:translateY(-1px); }
.crm-ai-send:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ===== AI ASSISTANT (inside command palette) ============== */
.crm-ai-pane{
  padding:18px 20px 16px;
  max-height:70vh; overflow-y:auto;
}
.crm-ai-question{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 14px; margin-bottom:14px;
  border-radius:10px;
  border:1px solid var(--gold-line);
  background:rgba(214,177,94,.06);
  font-size:13.5px;
}
.crm-ai-question em{ font-style:normal; color:#fff; font-weight:600; line-height:1.5; }
.crm-ai-icon{ font-size:18px; flex-shrink:0; }
.crm-ai-answer{
  font-size:14px; line-height:1.6;
  color:rgba(255,255,255,.92);
  padding:6px 4px 12px;
}
.crm-ai-answer p{ margin-bottom:10px; }
.crm-ai-answer p:last-child{ margin-bottom:0; }
.crm-ai-answer strong{ color:var(--gold2); font-weight:700; }
.crm-ai-err{
  color:#ff646e;
  background:rgba(255,100,110,.06);
  border:1px solid rgba(255,100,110,.30);
  border-radius:10px;
  padding:10px 14px;
  font-size:13px;
}
.crm-ai-actions{
  display:flex; justify-content:flex-end;
  padding-top:10px; margin-top:6px;
  border-top:1px solid var(--line-soft);
}
.crm-ai-back{
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted);
  font:inherit; font-size:12px; font-weight:700;
  padding:6px 12px; border-radius:8px;
  cursor:pointer; transition:.15s var(--ease);
}
.crm-ai-back:hover{ border-color:var(--gold-line); color:#fff; }

/* Bouncing-dots loading */
.crm-ai-loading{
  display:flex; gap:6px; align-items:center;
  padding:18px 4px;
}
.crm-ai-loading span{
  width:8px; height:8px; border-radius:99px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  opacity:.4;
  animation:aiPulse 1.2s ease-in-out infinite;
}
.crm-ai-loading span:nth-child(2){ animation-delay:.18s }
.crm-ai-loading span:nth-child(3){ animation-delay:.36s }
@keyframes aiPulse{
  0%,100%{ transform:scale(.7); opacity:.35 }
  50%{    transform:scale(1.1); opacity:1 }
}

/* ─── TASK GLOW + BADGE (sidebar Tasks link) ───────────────────────
   Applied by script.js' pollTaskBadge() whenever the worker has at
   least one incomplete task. Pulses a gold glow + shows a numeric
   pill so they notice new assignments from any page. */
.nav li.has-new-tasks{
  position:relative;
  background:linear-gradient(135deg, rgba(214,177,94,.10), rgba(242,210,122,.04));
  border-radius:10px;
  animation: taskGlow 2.2s ease-in-out infinite;
}
.nav li.has-new-tasks::before{
  content:"";
  position:absolute;
  left:0; top:50%; transform:translateY(-50%);
  width:3px; height:60%; border-radius:3px;
  background:linear-gradient(180deg, var(--gold), var(--gold2));
  box-shadow:0 0 12px rgba(214,177,94,.7);
}
@keyframes taskGlow{
  0%, 100%{ box-shadow:0 0 0 rgba(214,177,94,0), inset 0 0 0 rgba(214,177,94,0); }
  50%{ box-shadow:0 0 22px rgba(214,177,94,.25), inset 0 0 12px rgba(214,177,94,.06); }
}
.task-count-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 7px;
  margin-left:8px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--gold), var(--gold2));
  color:#111; font-weight:950; font-size:11px;
  box-shadow:0 0 14px rgba(214,177,94,.45);
  animation: badgeBob 1.6s ease-in-out infinite;
  vertical-align:middle;
}
@keyframes badgeBob{
  0%, 100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-2px) scale(1.07); }
}