/* ==========================================================
   Perdigon Group — Zoho Desk Help Center Custom CSS
   COMPLETE FILE — upload via Customize → CSS → upload icon
   or paste (replaces entire CSS tab contents)
   ========================================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============================================================
   GLOBAL — nuclear overrides for Zoho's hashed class names
   ============================================================ */
body, html, #root, #app,
div[id^="portal"], div[class*="portal"], div[class*="Portal"] {
  background: #080811 !important;
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
}

p, span, div, li, td, th, label, legend, fieldset,
dt, dd, figcaption, blockquote, cite, small, strong, em, b {
  color: #eae8f0 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif !important;
  color: #eae8f0 !important;
  letter-spacing: -0.02em;
}

[class*="__desc"], [class*="__sub"], [class*="__meta"],
[class*="__info"], [class*="__hint"], [class*="__help"],
[class*="__count"], small {
  color: #8b8d9e !important;
}

a {
  color: #a78bfa !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
a:hover { color: #c4a8ff !important; }

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */
[class*="Header__headerBg"], [class*="Header__bgColor"],
[class*="Header__menuWrapper"], [class*="Header__menuBox"],
[class*="headerBg"], [class*="menuWrapper"] {
  background: #0b0b18 !important;
  border-bottom: 1px solid rgba(124, 92, 191, 0.1) !important;
}

[class*="Header__nav"], ul[class*="nav"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

[class*="Header__nav"] li, ul[class*="nav"] li { padding: 0 12px !important; }

[class*="Header__nav"] a, [class*="Header__nav"] li a,
#portal_tabHome a, #portal_tabCases a, #portal_tabKB a,
ul[class*="nav"] li a {
  color: #8b8d9e !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 8px 4px !important;
  white-space: nowrap !important;
}
[class*="Header__nav"] a:hover, ul[class*="nav"] li a:hover {
  color: #eae8f0 !important;
}
[class*="Header__nav"] .active a, [class*="Header__nav"] .selected a {
  color: #7c5cbf !important;
  border-bottom: 2px solid #7c5cbf !important;
}

[class*="signIn"] a, [class*="SignIn"] a {
  color: #8b8d9e !important;
  font-weight: 500 !important;
}
[class*="signUp"] a, [class*="SignUp"] a {
  background: #7c5cbf !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
}
[class*="signUp"] a:hover, [class*="SignUp"] a:hover {
  background: #6a4daa !important;
}

/* Hide Zoho's default nav + logo — replaced by custom Header HTML */
[class*="Header__nav"], [class*="Header__responsiveMenu"],
[class*="Header__navbtn"], [class*="Header__signIn"],
[class*="Header__signUp"], [class*="Header__menuClose"],
[class*="Header__logoPart"], [class*="Header__logoImg"],
[class*="Header__logoText"] {
  display: none !important;
}

/* ============================================================
   SEARCH BAR (general + custom .pg-search-wrap)
   ============================================================ */
input[type="search"],
input[type="text"][placeholder*="Search"],
input[type="text"][placeholder*="search"],
input[placeholder*="Search"], input[placeholder*="search"],
[class*="SearchBar"] input, [class*="searchBar"] input,
[class*="search__input"], [class*="searchInput"] {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 12px !important;
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
}
input[type="search"]:focus, [class*="SearchBar"] input:focus {
  border-color: #7c5cbf !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.12) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder {
  color: #5c5e70 !important;
}

/* Custom search wrapper (our new Header HTML uses class="pg-search-wrap") */
.pg-search-wrap input,
.pg-search-wrap input[type="search"],
.pg-search-wrap input[type="text"],
.pg-search-wrap > div input,
.pg-search-wrap > div > div input {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.20) !important;
  border-radius: 12px !important;
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  height: 48px !important;
  padding: 12px 20px !important;
  width: 100% !important;
  box-shadow: none !important;
}
.pg-search-wrap input::placeholder { color: #5c5e70 !important; }
.pg-search-wrap input:focus {
  border-color: #7c5cbf !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.20) !important;
  outline: none !important;
  background: #141428 !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
[class*="breadcrumb"], [class*="Breadcrumb"] {
  color: #5c5e70 !important;
  font-size: 13px !important;
}
[class*="breadcrumb"] a, [class*="Breadcrumb"] a { color: #8b8d9e !important; }

/* ============================================================
   MAIN CONTENT — force dark on ALL containers
   ============================================================ */
main, section, article,
[class*="MainContent"], [class*="mainContent"],
[class*="LayoutContent"], [class*="layoutContent"],
[class*="portalContent"],
[class*="content__"], [class*="Content__"],
[class*="wrapper__"], [class*="Wrapper__"],
[class*="container__"], [class*="Container__"],
[class*="body__"], [class*="Body__"],
[class*="layout__"], [class*="Layout__"],
[class*="page__"], [class*="Page__"],
[class*="view__"], [class*="View__"] {
  background-color: #080811 !important;
}

/* ============================================================
   CARDS, PANELS, FORM CONTAINERS
   ============================================================ */
[class*="Card"], [class*="card__"],
[class*="Panel"], [class*="panel__"],
[class*="Module"], [class*="module__"],
[class*="Block"], [class*="block__"],
[class*="Section__"], [class*="section__"],
[class*="ticketForm"], [class*="TicketForm"],
[class*="formContainer"], [class*="FormContainer"],
[class*="newTicket"], [class*="NewTicket"],
[class*="addTicket"], [class*="submitTicket"],
[class*="articleCard"], [class*="ArticleCard"],
[class*="widget"], [class*="Widget"],
.zd-card {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
label, legend,
[class*="fieldLabel"], [class*="FieldLabel"],
[class*="label__"], [class*="Label__"],
.form-label {
  color: #8b8d9e !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea, select,
[class*="formField"] input, [class*="formField"] textarea, [class*="formField"] select,
[class*="input__"], [class*="Input__"],
[class*="textArea"], [class*="TextArea"],
[class*="select__"], [class*="Select__"],
[class*="dropdown__"], [class*="Dropdown__"] {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 10px !important;
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  -webkit-appearance: none !important;
}

input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
textarea:focus, select:focus {
  border-color: #7c5cbf !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.15) !important;
  outline: none !important;
  background: #191930 !important;
}

textarea { min-height: 140px !important; resize: vertical !important; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%238b8d9e'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}

option,
[class*="option__"], [class*="Option__"],
[class*="menuItem"], [class*="MenuItem"],
[class*="listItem"], [class*="ListItem"] {
  background: #141428 !important;
  color: #eae8f0 !important;
}

.required, [class*="required"], [class*="mandatory"],
span[style*="color: red"], span[style*="color:red"] {
  color: #ef4444 !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
button[type="submit"], input[type="submit"],
[class*="submitBtn"], [class*="SubmitBtn"],
[class*="primaryBtn"], [class*="PrimaryBtn"],
.zd-btn-primary,
[class*="primary__"] > button, [class*="Primary__"] > button {
  background: linear-gradient(135deg, #7c5cbf, #6a4daa) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 12px 32px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(124, 92, 191, 0.25) !important;
  transition: all 0.2s ease !important;
}
button[type="submit"]:hover, input[type="submit"]:hover,
[class*="submitBtn"]:hover, .zd-btn-primary:hover {
  background: linear-gradient(135deg, #8b6ccc, #7c5cbf) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(124, 92, 191, 0.35) !important;
}

button:not([type="submit"]):not([type="button"]),
[class*="secondaryBtn"], [class*="SecondaryBtn"],
.zd-btn-secondary {
  background: #141428 !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: all 0.2s ease !important;
}
button:not([type="submit"]):not([type="button"]):hover,
[class*="secondaryBtn"]:hover {
  border-color: rgba(124, 92, 191, 0.3) !important;
  background: #191930 !important;
}

/* Blue Zoho filter/pill button → purple */
button[class*="filter"], button[class*="Filter"],
button[style*="rgb(91"], button[style*="rgb(59"] {
  background: #7c5cbf !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
}
button[class*="filter"]:hover, button[class*="Filter"]:hover {
  background: #8b6ed4 !important;
}

/* ============================================================
   SIDEBAR — Popular Articles + Follow
   ============================================================ */
[class*="Sidebar"], [class*="sidebar"],
[class*="rightSection"], [class*="RightSection"],
[class*="aside"], aside {
  background: transparent !important;
}

aside h2, aside h3, aside h4,
[class*="Sidebar"] h2, [class*="sidebar"] h3,
[class*="rightSection"] h2, [class*="rightSection"] h3,
[class*="sidebarTitle"],
[class*="Popular"] h2, [class*="Popular"] h3,
[class*="popular"] h2, [class*="popular"] h3 {
  font-family: 'Outfit', sans-serif !important;
  color: #eae8f0 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

[class*="Sidebar"] > div, [class*="sidebar"] > div,
aside > div, [class*="rightSection"] > div {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.08) !important;
  border-radius: 16px !important;
}

aside a, aside li a,
[class*="Sidebar"] a, [class*="sidebar"] a,
[class*="articleList"] a, [class*="rightSection"] a,
[class*="Popular"] a, [class*="popular"] a {
  color: #c4bdd4 !important;
  font-size: 14px !important;
  padding: 10px 0 !important;
  display: block !important;
  transition: color 0.15s ease;
  border-bottom: 1px solid rgba(124, 92, 191, 0.05) !important;
}
aside a:hover, [class*="Popular"] a:hover, [class*="popular"] a:hover,
[class*="Sidebar"] a:hover, [class*="rightSection"] a:hover,
[class*="articleList"] a:hover {
  color: #a78bfa !important;
}

aside svg, [class*="Sidebar"] svg, [class*="sidebar"] svg,
[class*="articleList"] svg, [class*="rightSection"] svg {
  fill: #5c5e70 !important;
  color: #5c5e70 !important;
}

aside p, aside span,
[class*="side"] p, [class*="Side"] p {
  color: #8b8d9e !important;
}

aside button,
[class*="Follow"] button, [class*="follow"] button {
  background: transparent !important;
  color: #a78bfa !important;
  border: 1px solid rgba(124, 92, 191, 0.35) !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
}
aside button:hover {
  background: rgba(124, 92, 191, 0.10) !important;
  color: #ffffff !important;
}

aside small, aside [class*="desc"], aside [class*="help"] {
  color: #6c6e80 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* ============================================================
   KNOWLEDGE BASE — category rows & home KB card
   ============================================================ */

/* KB category rows (both home card and category list) */
#root a[href*="/kb/"],
[id*="portal"] a[href*="/kb/"] {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  margin-bottom: 12px !important;
  display: block !important;
  transition: all 0.2s ease !important;
}
#root a[href*="/kb/"]:hover,
[id*="portal"] a[href*="/kb/"]:hover {
  border-color: rgba(124, 92, 191, 0.35) !important;
  background: #141428 !important;
  transform: translateY(-1px) !important;
}

#root a[href*="/kb/"] svg,
[id*="portal"] a[href*="/kb/"] svg {
  fill: #a78bfa !important;
  color: #a78bfa !important;
  opacity: 1 !important;
}

#root a[href*="/kb/"] h2,
#root a[href*="/kb/"] h3,
#root a[href*="/kb/"] h4,
[id*="portal"] a[href*="/kb/"] h2,
[id*="portal"] a[href*="/kb/"] h3,
[id*="portal"] a[href*="/kb/"] h4 {
  color: #c4a8ff !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
}

#root a[href*="/kb/"] span, #root a[href*="/kb/"] small,
[id*="portal"] a[href*="/kb/"] span, [id*="portal"] a[href*="/kb/"] small {
  color: #8b8d9e !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
#root a[href*="/kb/"] > div > span:first-child,
#root a[href*="/kb/"] > span:first-child,
[id*="portal"] a[href*="/kb/"] > div > span:first-child,
[id*="portal"] a[href*="/kb/"] > span:first-child {
  color: #c4a8ff !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}

/* Home KB card specifically ("Perdigon KB and Articles") */
a[href*="/kb/perdigon"] h2,
a[href*="/kb/perdigon"] h3,
a[href*="/kb/perdigon"] > div > span:first-child {
  color: #c4a8ff !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
}
a[href*="/kb/perdigon"] p {
  color: #c4bdd4 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
}
a[href*="/kb/perdigon"] small,
a[href*="/kb/perdigon"] [class*="count"],
a[href*="/kb/perdigon"] [class*="meta"] {
  color: #8b8d9e !important;
}

/* KB category hover (Zoho hashed class fallbacks) */
[class*="KBCategory"], [class*="kbCategory"],
[class*="CategoryCard"], [class*="categoryCard"],
[class*="category__"], [class*="Category__"] {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.08) !important;
  border-radius: 16px !important;
  transition: all 0.25s ease;
}
[class*="KBCategory"]:hover, [class*="categoryCard"]:hover,
[class*="Category__"]:hover {
  border-color: rgba(124, 92, 191, 0.2) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}
[class*="categoryIcon"], [class*="CategoryIcon"] { color: #7c5cbf !important; }

/* KB list grid — full-width single column */
[class*="KBList"], [class*="kbList"],
[class*="categoryGrid"], [class*="CategoryGrid"],
[class*="kbGrid"], [class*="KBGrid"],
[class*="cardGrid"], [class*="CardGrid"],
[class*="grid__"], [class*="Grid__"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}
[class*="KBList"] > div, [class*="kbList"] > div,
[class*="categoryGrid"] > div, [class*="kbGrid"] > div,
[class*="cardGrid"] > div,
[class*="KBList"] > a, [class*="kbList"] > a,
[class*="categoryGrid"] > a, [class*="kbGrid"] > a {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* "Knowledge Base" page heading */
[class*="KBHome"] h1, [class*="kbHome"] h1,
[class*="KBHome"] h2, [class*="kbHome"] h2 {
  font-size: 28px !important;
  font-weight: 700 !important;
  font-family: 'Outfit', sans-serif !important;
  color: #eae8f0 !important;
}

/* Grid/List view toggle icons (top-right of KB list) */
[class*="viewToggle"] svg, [class*="ViewToggle"] svg,
[class*="grid"] svg, [class*="Grid"] svg,
[class*="list"] svg, [class*="List"] svg,
[class*="toggle"] svg, [class*="Toggle"] svg,
[class*="view"] svg, [class*="View"] svg {
  fill: #8b8d9e !important;
  color: #8b8d9e !important;
}
[class*="viewToggle"] [class*="active"] svg,
[class*="ViewToggle"] [class*="active"] svg {
  fill: #a78bfa !important;
  color: #a78bfa !important;
}

/* ============================================================
   ARTICLE PAGES
   ============================================================ */
[class*="ArticleContent"], [class*="articleContent"],
[class*="article-body"], .article-body {
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

[class*="article"] p, [class*="Article"] p,
[class*="article"] li, [class*="Article"] li,
[class*="article"] span, [class*="Article"] span {
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
  line-height: 1.7 !important;
}

[class*="article"] h1, [class*="article"] h2,
[class*="article"] h3, [class*="article"] h4,
[class*="Article"] h1, [class*="Article"] h2, [class*="Article"] h3 {
  color: #eae8f0 !important;
  font-family: 'Outfit', sans-serif !important;
  border-bottom: 1px solid rgba(124, 92, 191, 0.1) !important;
  padding-bottom: 8px !important;
}

[class*="article"] a, [class*="Article"] a { color: #a78bfa !important; }
[class*="article"] img, [class*="Article"] img {
  border-radius: 8px !important;
  max-width: 100% !important;
}

[class*="ArticleContent"] code, [class*="articleContent"] code {
  background: #141428 !important;
  color: #a78bfa !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}
[class*="ArticleContent"] pre, [class*="articleContent"] pre {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.1) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

/* Article action icons */
[class*="action"] svg, [class*="Action"] svg,
[class*="articleAction"] svg {
  fill: #8b8d9e !important;
  color: #8b8d9e !important;
}
[class*="action"] button, [class*="Action"] button {
  background: transparent !important;
  border: none !important;
}

/* Table of contents */
[class*="toc"], [class*="Toc"], [class*="TOC"],
[class*="tableOfContent"], [class*="TableOfContent"],
[class*="onThisPage"], [class*="OnThisPage"],
[class*="articleIndex"], [class*="ArticleIndex"],
[class*="pageIndex"], [class*="PageIndex"] {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.1) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  color: #eae8f0 !important;
}
[class*="toc"] a, [class*="Toc"] a,
[class*="tableOfContent"] a, [class*="onThisPage"] a,
[class*="articleIndex"] a {
  color: #a78bfa !important;
  background: transparent !important;
}
[class*="toc"] a:hover, [class*="tableOfContent"] a:hover {
  color: #c4a8ff !important;
}
[class*="toc"] .active, [class*="toc"] [class*="active"],
[class*="toc"] [class*="selected"], [class*="toc"] [class*="current"],
[class*="tableOfContent"] .active, [class*="tableOfContent"] [class*="active"] {
  background: rgba(124, 92, 191, 0.1) !important;
  color: #a78bfa !important;
  border-left: 2px solid #7c5cbf !important;
}

/* Dashed borders → solid soft purple */
[style*="border-style: dashed"], [style*="border-style:dashed"],
hr[style*="dashed"], [class*="toc"] hr,
[class*="separator"], [class*="Separator"],
[class*="divider"], [class*="Divider"] {
  border-color: rgba(124, 92, 191, 0.12) !important;
  opacity: 0.6 !important;
}
hr {
  border-color: rgba(124, 92, 191, 0.12) !important;
  border-style: solid !important;
}

/* ============================================================
   TABLES
   ============================================================ */
table { border-collapse: collapse !important; width: 100% !important; }
th {
  background: #141428 !important;
  color: #eae8f0 !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid rgba(124, 92, 191, 0.15) !important;
}
td {
  background: #0f0f1e !important;
  color: #8b8d9e !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(124, 92, 191, 0.06) !important;
}
tr:hover td {
  background: #141428 !important;
  color: #eae8f0 !important;
}

/* ============================================================
   TICKET LIST / MY AREA
   ============================================================ */
[class*="ticketRow"], [class*="TicketRow"],
[class*="caseRow"], [class*="CaseRow"],
[class*="listRow"], [class*="ListRow"] {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.06) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  padding: 16px !important;
  transition: all 0.2s ease;
}
[class*="ticketRow"]:hover, [class*="caseRow"]:hover, [class*="listRow"]:hover {
  background: #141428 !important;
  border-color: rgba(124, 92, 191, 0.15) !important;
}

[class*="statusBadge"], [class*="StatusBadge"],
[class*="ticketStatus"],
[class*="status__"], [class*="Status__"] {
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
[class*="Footer"], [class*="footer"], .zd-footer {
  background: #0b0b18 !important;
  border-top: 1px solid rgba(124, 92, 191, 0.08) !important;
  color: #5c5e70 !important;
}
[class*="Footer"] a, [class*="footer"] a { color: #8b8d9e !important; }

/* ============================================================
   FILE UPLOAD / ATTACHMENTS
   ============================================================ */
[class*="fileUpload"], [class*="FileUpload"],
[class*="dropzone"], [class*="Dropzone"],
[class*="attachment"], [class*="Attachment"] {
  background: #141428 !important;
  border: 2px dashed rgba(124, 92, 191, 0.2) !important;
  border-radius: 12px !important;
  color: #8b8d9e !important;
}
[class*="fileUpload"]:hover, [class*="Dropzone"]:hover {
  border-color: rgba(124, 92, 191, 0.4) !important;
}
[class*="file"], [class*="File"],
[class*="upload"], [class*="Upload"],
[class*="attach"], [class*="Attach"],
[class*="drop"], [class*="Drop"] {
  background: #141428 !important;
  border-color: rgba(124, 92, 191, 0.2) !important;
  color: #8b8d9e !important;
}
[class*="upload"] svg, [class*="Upload"] svg,
[class*="attach"] svg, [class*="Attach"] svg {
  fill: #5c5e70 !important;
  color: #5c5e70 !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
[class*="pagination"] a, [class*="Pagination"] a {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.1) !important;
  border-radius: 8px !important;
  color: #eae8f0 !important;
  padding: 8px 14px !important;
}
[class*="pagination"] a:hover, [class*="pagination"] .active,
[class*="Pagination"] a:hover {
  background: #7c5cbf !important;
  color: #fff !important;
}

/* ============================================================
   SCROLLBAR + SELECTION + FOCUS
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #080811; }
::-webkit-scrollbar-thumb { background: #191930; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #7c5cbf; }

::selection {
  background: rgba(124, 92, 191, 0.3) !important;
  color: #eae8f0 !important;
}
*:focus-visible {
  outline: 2px solid rgba(124, 92, 191, 0.5) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   ZOHO BRANDING
   ============================================================ */
[class*="poweredBy"], [class*="PoweredBy"], [class*="zdBrand"] {
  opacity: 0.3 !important;
}

/* ============================================================
   DIALOG / MODAL
   ============================================================ */
[class*="modal"], [class*="Modal"],
[class*="dialog"], [class*="Dialog"],
[class*="overlay"] > div {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.12) !important;
  border-radius: 16px !important;
  color: #eae8f0 !important;
}

/* ============================================================
   RICH TEXT EDITOR
   ============================================================ */
[class*="editor"], [class*="Editor"],
[class*="richText"], [class*="RichText"],
[class*="ql-container"], [class*="ql-editor"],
.mce-container, .mce-panel, .mce-tinymce,
[class*="jodit"], [class*="tox-tinymce"],
[class*="cke_"], [class*="fr-box"],
[class*="ze_area"], [class*="zeditor"],
div[contenteditable="true"] {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 10px !important;
  color: #eae8f0 !important;
}

[class*="toolbar"], [class*="Toolbar"],
[class*="ql-toolbar"], .mce-toolbar,
[class*="tox-toolbar"], [class*="cke_top"],
[class*="fr-toolbar"], [class*="ze_toolbar"] {
  background: #191930 !important;
  border-bottom: 1px solid rgba(124, 92, 191, 0.1) !important;
  border-radius: 10px 10px 0 0 !important;
}

[class*="toolbar"] button, [class*="Toolbar"] button,
[class*="ql-toolbar"] button,
[class*="toolbar"] select, [class*="Toolbar"] select {
  color: #8b8d9e !important;
  background: transparent !important;
  border: none !important;
}
[class*="toolbar"] button:hover, [class*="Toolbar"] button:hover {
  color: #eae8f0 !important;
  background: rgba(124, 92, 191, 0.1) !important;
}

[class*="toolbar"] svg, [class*="Toolbar"] svg {
  fill: #8b8d9e !important;
  color: #8b8d9e !important;
}
[class*="toolbar"] button:hover svg,
[class*="Toolbar"] button:hover svg {
  fill: #eae8f0 !important;
  color: #eae8f0 !important;
}

iframe {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 0 0 10px 10px !important;
}

[class*="editor"] > div, [class*="Editor"] > div,
[class*="richText"] > div, [class*="RichText"] > div {
  background: #141428 !important;
  border-color: rgba(124, 92, 191, 0.15) !important;
}

/* ============================================================
   SIGN IN / SIGN UP / AUTH PAGES
   ============================================================ */
div:has(> form), div:has(> div > form) {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.08) !important;
  border-radius: 16px !important;
}

[class*="signin"], [class*="SignIn"], [class*="signIn"],
[class*="login"], [class*="Login"],
[class*="auth"], [class*="Auth"],
[class*="register"], [class*="Register"],
[class*="signUp"], [class*="SignUp"],
[class*="forgot"], [class*="Forgot"],
[class*="member"], [class*="Member"] {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.08) !important;
  border-radius: 16px !important;
}

[class*="signin"] div, [class*="SignIn"] div,
[class*="login"] div, [class*="Login"] div,
[class*="auth"] div, [class*="Auth"] div {
  background: transparent !important;
  color: #eae8f0 !important;
}

[class*="signin"] h1, [class*="signin"] h2, [class*="signin"] h3,
[class*="login"] h1, [class*="login"] h2,
[class*="auth"] h1, [class*="auth"] h2 {
  color: #eae8f0 !important;
  font-family: 'Outfit', sans-serif !important;
}

[class*="signin"] p, [class*="signin"] span, [class*="signin"] label,
[class*="login"] p, [class*="login"] span, [class*="login"] label {
  color: #8b8d9e !important;
}

[class*="signin"] a, [class*="login"] a, [class*="auth"] a {
  color: #a78bfa !important;
}

[class*="signin"] button, [class*="login"] button,
[class*="auth"] button, form button {
  background: linear-gradient(135deg, #7c5cbf, #6a4daa) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
}

[class*="signin"] [class*="icon"], [class*="login"] [class*="icon"] {
  color: #7c5cbf !important;
  fill: #7c5cbf !important;
}

input[type="email"], input[type="password"],
input[placeholder*="Email"], input[placeholder*="email"],
input[placeholder*="Password"], input[placeholder*="password"],
input[name*="email"], input[name*="login"] {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 10px !important;
  color: #eae8f0 !important;
}

/* ============================================================
   SALESIQ CHAT WIDGET
   ============================================================ */
.zsiq_floatmain .zsiq_flt_rel, .siqaio,
[class*="zsiq_cnt"], [class*="siq_bdy"] {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.12) !important;
  border-radius: 16px !important;
}
[class*="zsiq_hdr"], [class*="siq_hdr"],
.zsiq_floatmain .zsiq_flt_rel .siq_bR {
  background: #0b0b18 !important;
  color: #eae8f0 !important;
  border-bottom: 1px solid rgba(124, 92, 191, 0.1) !important;
}
[class*="zsiq_byline"], [class*="siq_byln"],
.zsiq_byline, .zsiq_unrdcnt {
  color: #8b8d9e !important;
}
.zsiq_float_t, [class*="zsiq_float"], [class*="siq_float"],
.zsiq_fltBR, [class*="zsiq_flt"] > div {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}
.zsiq_float_t .zsiq_flt_h,
[class*="zsiq_flt"] h2, [class*="zsiq_flt"] h3,
[class*="zsiq_flt"] .zsiq_agent {
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
}
.zsiq_float_t .zsiq_flt_p,
[class*="zsiq_flt"] p, [class*="zsiq_flt"] span {
  color: #c4b5d9 !important;
  font-family: 'DM Sans', sans-serif !important;
}
[class*="zsiq"] input, [class*="zsiq"] textarea,
[class*="siq"] input, [class*="siq"] textarea {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  color: #eae8f0 !important;
  border-radius: 8px !important;
}
[class*="zsiq_msgbdy"], [class*="siq_msgbdy"] { color: #eae8f0 !important; }
.zsiq_floatmain .zsiq_flt_rel .zsiq_cnt,
[class*="zsiq_cnt"] {
  background: #7c5cbf !important;
}

/* ============================================================
   SVG ICONS site-wide
   ============================================================ */
svg, svg path, svg circle, svg rect,
svg polygon, svg line, svg polyline,
[class*="icon"] svg, [class*="Icon"] svg {
  fill: #8b8d9e !important;
  color: #8b8d9e !important;
}
[class*="category"] svg, [class*="Category"] svg,
[class*="section"] svg, [class*="Section"] svg,
[class*="folder"] svg, [class*="Folder"] svg {
  fill: #7c5cbf !important;
  color: #7c5cbf !important;
  opacity: 1 !important;
}

/* ============================================================
   NUCLEAR — catch remaining white inline-styled elements
   ============================================================ */
div[style*="background-color: rgb(255"],
div[style*="background: rgb(255"],
div[style*="background-color: white"],
div[style*="background: white"],
div[style*="background:#fff"], div[style*="background-color:#fff"],
div[style*="background: #fff"], div[style*="background-color: #fff"],
div[style*="background: #ffffff"], div[style*="background-color: #ffffff"],
a[style*="background-color: rgb(255"],
a[style*="background: rgb(255"] {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.12) !important;
}
div[style*="background-color: rgb(255"] h1,
div[style*="background-color: rgb(255"] h2,
div[style*="background-color: rgb(255"] h3,
div[style*="background-color: rgb(255"] p,
div[style*="background-color: rgb(255"] span {
  color: #eae8f0 !important;
}

[style*="background"][style*="255"] { background: #0f0f1e !important; }

/* Box-shadow cards (Zoho uses box-shadow on white cards) */
[style*="box-shadow"] {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.08) !important;
}

/* Force dark inline-styled text to light */
*[style*="color: rgb(0"], *[style*="color: rgb(30"],
*[style*="color: rgb(40"], *[style*="color: rgb(50"],
*[style*="color: rgb(60"],
*[style*="color:#111"], *[style*="color:#222"], *[style*="color:#333"],
*[style*="color: black"] {
  color: #eae8f0 !important;
}

/* Required asterisk */
.required, [class*="required"], [class*="mandatory"],
span[style*="color: red"], span[style*="color:red"] {
  color: #ef4444 !important;
}

/* ============================================================
   FORMS — catch-all for ticket submission
   ============================================================ */
form, form > div, form > fieldset, form > section {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
  border-color: rgba(124, 92, 191, 0.08) !important;
}
fieldset {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(124, 92, 191, 0.1) !important;
  padding: 16px 0 !important;
}
legend {
  color: #8b8d9e !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 0 8px !important;
}

[class*="section"] > h2, [class*="section"] > h3, [class*="section"] > h4,
[class*="group"] > h2, [class*="group"] > h3 {
  color: #8b8d9e !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border-bottom: 1px solid rgba(124, 92, 191, 0.08) !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

#root input, #root textarea, #root select,
#app input, #app textarea, #app select,
[id*="portal"] input, [id*="portal"] textarea, [id*="portal"] select,
form input, form textarea, form select {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 10px !important;
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
}
#root input:focus, #root textarea:focus, #root select:focus,
form input:focus, form textarea:focus, form select:focus {
  border-color: #7c5cbf !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.15) !important;
  outline: none !important;
  background: #191930 !important;
}

/* Custom dropdowns */
[class*="dropdown"] > div, [class*="Dropdown"] > div,
[class*="select"] > div, [class*="Select"] > div,
[class*="chosen"] > div {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  color: #eae8f0 !important;
  border-radius: 10px !important;
}
[class*="dropdown"] ul, [class*="Dropdown"] ul,
[class*="select"] ul, [class*="Select"] ul,
[class*="menu"] ul, [class*="Menu"] ul {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 10px !important;
}
[class*="dropdown"] li, [class*="Dropdown"] li,
[class*="menu"] li, [class*="Menu"] li {
  color: #eae8f0 !important;
  background: transparent !important;
}
[class*="dropdown"] li:hover, [class*="Dropdown"] li:hover,
[class*="menu"] li:hover {
  background: #191930 !important;
}

/* Inherit color inside root for links */
#root p, #root span, #root li,
#root td, #root label, #root a {
  color: inherit;
}

/* Visible text on dark-on-dark */
[class*="desc"], [class*="Desc"],
[class*="description"], [class*="Description"],
[class*="subtitle"], [class*="Subtitle"],
[class*="summary"], [class*="Summary"],
[class*="caption"], [class*="Caption"] {
  color: #8b8d9e !important;
}

[class*="heading"], [class*="Heading"],
[class*="title"], [class*="Title"] {
  color: #eae8f0 !important;
}

/* Article count badges */
[class*="count"], [class*="Count"],
[class*="badge"], [class*="Badge"],
[class*="meta"], [class*="Meta"],
[class*="article"] small, [class*="category"] small {
  color: #8b8d9e !important;
}

/* Follow / Subscribe button variants */
[class*="follow"], [class*="Follow"],
[class*="subscribe"], [class*="Subscribe"] {
  color: #8b8d9e !important;
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 8px !important;
}

/* Search wrapper fallback */
[class*="search"], [class*="Search"] { background: transparent !important; }
[class*="search"] input, [class*="Search"] input {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 12px !important;
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
}
[class*="search"] svg, [class*="Search"] svg {
  fill: #5c5e70 !important;
  color: #5c5e70 !important;
}

/* ============================================================
   SIGN IN / AUTH PAGES — surgical fixes
   NOTE: the aggressive white-bg → dark rule was removed because
   it added borders to outer wrappers and caused edge artifacts.
   Auth page theming is incomplete — Zoho's React auth module
   uses hashed classes that need DevTools inspection to target.
   ============================================================ */

input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="number"] {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 10px !important;
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
  padding: 12px 16px !important;
}
input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
  border-color: #7c5cbf !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.20) !important;
  background: #191930 !important;
  outline: none !important;
}

button[style*="rgb(91, 141, 239)"],
button[style*="rgb(59, 130, 246)"],
button[style*="rgb(33, 150, 243)"],
button[style*="rgb(25, 118, 210)"],
button[style*="background: #1976"],
button[style*="background: #2196"],
button[style*="background: #3b82f6"],
button[style*="background-color: rgb(91"],
button[style*="background-color: rgb(59"],
button[style*="background-color: rgb(33"],
button[style*="background-color: #1976"],
button[style*="background-color: #3b82f6"],
div[role="button"][style*="rgb(91"],
div[role="button"][style*="rgb(59"],
div[role="button"][style*="#3b82f6"] {
  background: linear-gradient(135deg, #7c5cbf, #6a4daa) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  padding: 12px 32px !important;
  box-shadow: 0 4px 16px rgba(124, 92, 191, 0.25) !important;
}

button[class*="next"], button[class*="Next"],
button[class*="continue"], button[class*="Continue"],
button[class*="submit"]:not([class*="submitTicket"]),
button[class*="Submit"]:not([class*="SubmitTicket"]),
[class*="signin"] button[type="button"],
[class*="Signin"] button[type="button"],
[class*="SignIn"] button[type="button"],
[class*="login"] button[type="button"],
[class*="Login"] button[type="button"] {
  background: linear-gradient(135deg, #7c5cbf, #6a4daa) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
}

[class*="socialLogin"], [class*="SocialLogin"],
[class*="socialBtn"], [class*="SocialBtn"],
[class*="socialIcon"] {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.12) !important;
  border-radius: 10px !important;
}
[class*="social"] img, [class*="Social"] img {
  background: #ffffff !important;
  border-radius: 6px !important;
  padding: 4px !important;
}

[class*="sign" i] h1, [class*="sign" i] h2, [class*="sign" i] h3,
[class*="login" i] h1, [class*="login" i] h2,
[class*="auth" i] h1, [class*="auth" i] h2 {
  color: #eae8f0 !important;
  font-family: 'Outfit', sans-serif !important;
}
/* ============================================================
   SIGN IN MODAL (triggered by Follow, Subscribe, etc.)
   ============================================================ */

/* Target any ARIA-labeled modal/dialog */
[role="dialog"],
[aria-modal="true"] {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
  max-width: 420px !important;
}

/* Inner wrappers transparent so modal bg shows through */
[role="dialog"] > div,
[role="dialog"] > section,
[role="dialog"] > form,
[aria-modal="true"] > div,
[aria-modal="true"] > section {
  background: transparent !important;
  color: #eae8f0 !important;
}

/* Any container holding an email or password input — kill white bg */
div:has(> input[type="email"]),
div:has(> input[type="password"]),
div:has(> form input[type="email"]),
form:has(input[type="email"]),
form:has(input[type="password"]) {
  background: transparent !important;
  color: #eae8f0 !important;
}

/* Modal backdrop — dark blur overlay */
[class*="backdrop"], [class*="Backdrop"],
[class*="overlay"]:not([class*="fileUpload"]):not([class*="dropzone"]),
[class*="Overlay"]:not([class*="FileUpload"]):not([class*="Dropzone"]) {
  background: rgba(8, 8, 17, 0.85) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

/* Close X button */
[aria-label*="close" i],
[aria-label*="Close" i],
button[title*="Close" i] {
  color: #8b8d9e !important;
  background: transparent !important;
  border: none !important;
}
[aria-label*="close" i]:hover {
  color: #eae8f0 !important;
}

/* Social login buttons (Microsoft, Google) */
button[aria-label*="Microsoft" i],
button[aria-label*="Google" i],
a[aria-label*="Microsoft" i],
a[aria-label*="Google" i] {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.20) !important;
  border-radius: 10px !important;
  padding: 12px !important;
}

/* "Sign in using" section heading */
[class*="socialHeader"], [class*="SocialHeader"],
[class*="signInUsing"], [class*="SignInUsing"] {
  color: #8b8d9e !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
/* ============================================================
   Zoho Accounts Sign-In (exact classes from DevTools)
   ============================================================ */
.signin_container, #signin_container { background: transparent !important; max-width: 440px !important; }

.signin_box, #signin_flow {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 16px !important;
  color: #eae8f0 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
  min-height: auto !important;
  padding: 32px !important;
}

.signin_box .titlename,
.signin_head #headtitle {
  color: #eae8f0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
}

.service_name, .service_name span { color: #8b8d9e !important; }

input.textbox, .textbox_div input, input#login_id, input#password {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.20) !important;
  border-radius: 10px !important;
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
  padding: 12px 16px !important;
}
input.textbox::placeholder { color: #5c5e70 !important; }
input.textbox:focus {
  border-color: #7c5cbf !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.20) !important;
  outline: none !important;
  background: #191930 !important;
}

button.btn.blue, .btn.blue, #nextbtn {
  background: linear-gradient(135deg, #7c5cbf, #6a4daa) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  padding: 12px 32px !important;
  box-shadow: 0 4px 16px rgba(124, 92, 191, 0.25) !important;
}
button.btn.grey {
  background: #141428 !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 10px !important;
}

.bluetext, .bluetext_action, .blue_link, .goToForgotPassword a { color: #a78bfa !important; }
.bluetext:hover, .bluetext_action:hover, .blue_link:hover { color: #c4a8ff !important; }

.signin_fed_text { color: #8b8d9e !important; font-family: 'DM Sans', sans-serif !important; }
.fed_div, .small_box {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.20) !important;
  border-radius: 10px !important;
  padding: 8px !important;
}

.fielderror { color: #ef4444 !important; }
.line { border-color: rgba(124, 92, 191, 0.12) !important; }

.nopassword_container, .password_expiry_container, .terminate_session_container {
  background: transparent !important;
  color: #eae8f0 !important;
}

/* In case the sign-in renders inside its own body/html in an iframe */
html[id="portal_html"] .signin_box,
body.body .signin_box {
  background: #0f0f1e !important;
}
/* ============================================================
   Hide Follow button + Subscribe promo
   Removes the trigger for the broken sign-in popup.
   ============================================================ */
[class*="follow"],
[class*="Follow"],
[class*="subscribe"],
[class*="Subscribe"],
button[class*="follow" i],
a[class*="follow" i],
[aria-label*="follow" i],
[aria-label*="Follow" i] {
  display: none !important;
}

/* Also hide the "Subscribe to receive notifications..." description
   that sits under the Follow button (matches most variants) */
aside p:has-text("Subscribe"),
aside span:has-text("Subscribe") {
  display: none !important;
}

/* ============================================================
   Iframe — constrain to viewport, no overflow, rounded corners
   ============================================================ */
iframe {
  max-width: 100% !important;
  width: 100% !important;
  border: none !important;
  border-radius: 16px !important;
  background: transparent !important;
}

/* If sign-in DOES appear (e.g. via Submit Ticket flow), contain it */
.signin_container,
#signin_container,
div:has(> .signin_box) {
  max-width: 440px !important;
  margin: 40px auto !important;
  padding: 0 !important;
  display: block !important;
}
.signin_box {
  width: 100% !important;
  max-width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  padding: 28px !important;
  float: none !important;
  display: block !important;
}
/* ============================================================
   Article footer: Helpful? + Share bar
   ============================================================ */
[class*="feedback"], [class*="Feedback"],
[class*="helpful"], [class*="Helpful"],
[class*="vote"], [class*="Vote"],
[class*="rating"], [class*="Rating"],
[class*="share"]:not([class*="Sidebar"]),
[class*="Share"]:not([class*="Sidebar"]),
[class*="socialShare"], [class*="SocialShare"],
[class*="articleFooter"], [class*="ArticleFooter"],
[class*="articleBottom"], [class*="ArticleBottom"] {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.08) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
}

/* "Helpful?" and "Share:" labels */
[class*="feedback"] span, [class*="feedback"] label,
[class*="Feedback"] span, [class*="Feedback"] label,
[class*="helpful"] span, [class*="Helpful"] span,
[class*="share"] span:not([class*="Sidebar"] span),
[class*="Share"] span:not([class*="Sidebar"] span),
[class*="articleFooter"] span, [class*="articleFooter"] label {
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Thumbs up/down + vote counts */
[class*="feedback"] svg, [class*="Feedback"] svg,
[class*="helpful"] svg, [class*="Helpful"] svg,
[class*="thumb"] svg, [class*="Thumb"] svg,
[class*="vote"] svg, [class*="Vote"] svg {
  fill: #8b8d9e !important;
  color: #8b8d9e !important;
}
[class*="feedback"] svg:hover, [class*="Feedback"] svg:hover,
[class*="helpful"] svg:hover, [class*="thumb"] svg:hover {
  fill: #a78bfa !important;
  color: #a78bfa !important;
}

/* Vote count numbers (the "0 0" next to thumbs) */
[class*="voteCount"], [class*="VoteCount"],
[class*="thumb"] + span, [class*="feedback"] strong {
  color: #8b8d9e !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Social share buttons (Facebook/X/LinkedIn) — keep brand colors but dark container */
[class*="socialIcon"] a, [class*="SocialIcon"] a,
[class*="share"] a[href*="facebook"],
[class*="share"] a[href*="twitter"],
[class*="share"] a[href*="x.com"],
[class*="share"] a[href*="linkedin"] {
  background: transparent !important;
  border: none !important;
}

/* Nuclear: any direct descendant of article with white bg */
[class*="article"] > div[style*="background: white"],
[class*="article"] > div[style*="background:#fff"],
[class*="Article"] > div[style*="background: white"],
[class*="Article"] > div[style*="background:#fff"] {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
}