/* =========================================================
   ASC Portal — Premium App Shell (Consolidated)
   Scope: body.asc-portal-page + .asc-portal.asc-eco
   Supports: loader overlay, sticky appbar, tabs, hero, panel,
             card hover icon, forms/notices, reduced motion.
========================================================= */

/* ---------- Theme shell overrides (Kadence) ---------- */
body.asc-portal-page {
  background: linear-gradient(180deg, #0b2a14 0%, #081e10 100%) !important;
}

body.asc-portal-page .content-container,
body.asc-portal-page .site-container,
body.asc-portal-page .content-wrap,
body.asc-portal-page .entry-content-wrap {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.asc-portal-page .entry-content {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Theme should handle header/footer (Kadence) */
body.asc-portal-page .site-header,
body.asc-portal-page .site-footer {
  display: block !important;
}


body.asc-portal-page #page {
  padding-top: 0 !important;
}
/* Per-staff KPI blocks (inside each staff card) */
.asc-mgrcard__kpis{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.asc-mgrcard__kpi{
  flex:1 1 140px;
  min-width:140px;
  padding:12px 12px;
  border:1px solid rgba(15,23,42,0.10);
  border-radius:14px;
  background: rgba(255,255,255,0.75);
}

.asc-mgrcard__kpiLabel{
  font-size:12px;
  font-weight:800;
  opacity:.65;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.asc-mgrcard__kpiVal{
  margin-top:6px;
  font-size:22px;
  font-weight:900;
  line-height:1.1;
}

.asc-mgrcard__kpi--danger .asc-mgrcard__kpiVal{ color:#991b1b; }
.asc-mgrcard__kpi--good   .asc-mgrcard__kpiVal{ color:#166534; }

/* =========================================================
   1) TOKENS + BASE
========================================================= */
body.asc-portal-page .asc-portal.asc-eco {
  /* Frame */
  --frame: 1180px;
  --pad: clamp(16px, 2.2vw, 28px);

  /* Brand */
  --g1: #b7f53b;
  --g2: #39d353;
  --g3: #16a34a;

  --m1: #6c2a22;
  --m2: #541e16;

  /* Ink */
  --ink: #071427;
  --ink-2: rgba(7, 20, 39, 0.78);
  --ink-3: rgba(7, 20, 39, 0.58);

  /* Glass / strokes */
  --glass-1: rgba(255, 255, 255, 0.90);
  --glass-2: rgba(255, 255, 255, 0.78);
  --glass-3: rgba(255, 255, 255, 0.66);

  --stroke: rgba(7, 20, 39, 0.10);
  --stroke-2: rgba(7, 20, 39, 0.06);

  /* Shadow stack (premium, not heavy) */
  --sh-xl: 0 60px 160px rgba(7, 20, 39, 0.18);
  --sh-lg: 0 28px 78px rgba(7, 20, 39, 0.14);
  --sh-md: 0 16px 46px rgba(7, 20, 39, 0.10);
  --sh-sm: 0 10px 26px rgba(7, 20, 39, 0.08);

  /* Radius */
  --r-xl: 32px;
  --r-lg: 22px;
  --r-md: 16px;

  /* Motion */
  --ease: cubic-bezier(.2, .85, .2, 1);

  color: var(--ink);
  min-height: 70vh;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.asc-portal-page .asc-portal.asc-eco,
body.asc-portal-page .asc-portal.asc-eco * {
  box-sizing: border-box;
}

body.asc-portal-page .asc-portal__container {
  max-width: var(--frame) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
}

/* =========================================================
   2) LOADER OVERLAY (matches new PHP)
========================================================= */
body.asc-portal-page .asc-eco__loader {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(900px 520px at 16% 14%, rgba(183,245,59,0.16), transparent 62%),
    radial-gradient(900px 620px at 86% 18%, rgba(57,211,83,0.12), transparent 66%),
    radial-gradient(900px 620px at 68% 120%, rgba(108,42,34,0.14), transparent 66%),
    rgba(8, 20, 12, 0.72);

  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

body.asc-portal-page .asc-eco__loader.is-active {
  display: flex;
}

body.asc-portal-page .asc-eco__loader-inner {
  width: min(520px, calc(100% - 40px));
  border-radius: var(--r-xl);
  padding: 18px 18px;

  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  border: 1px solid rgba(255,255,255,0.50);
  box-shadow: var(--sh-lg);

  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
}

body.asc-portal-page .asc-eco__loader-mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background:
    radial-gradient(18px 18px at 30% 28%, rgba(255,255,255,0.65), transparent 60%),
    linear-gradient(180deg, var(--g1), var(--g2));
  box-shadow: 0 18px 42px rgba(22,163,74,0.22);
  position: relative;
  overflow: hidden;
}

body.asc-portal-page .asc-eco__loader-mark::after {
  content: "";
  position: absolute;
  inset: -60% -60%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.55), transparent 70%);
  animation: asc_loader_sheen 1.2s var(--ease) infinite;
  opacity: 0.65;
}

@keyframes asc_loader_sheen {
  0%   { transform: translate3d(-28px, -18px, 0); }
  100% { transform: translate3d(28px, 18px, 0); }
}

body.asc-portal-page .asc-eco__loader-title {
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(7,20,39,0.92);
  line-height: 1.15;
}

body.asc-portal-page .asc-eco__loader-sub {
  font-size: 13px;
  color: rgba(7,20,39,0.62);
  margin-top: 3px;
}

/* Reduced motion: stop the shimmer */
@media (prefers-reduced-motion: reduce) {
  body.asc-portal-page .asc-eco__loader-mark::after { animation: none; }
}

/* =========================================================
   3) APP BAR (sticky + “merge into one bar” hooks)
========================================================= */
body.asc-portal-page .asc-eco__appbar {
  position: sticky;
  top: 0;
  z-index: 50;

  background: rgba(8, 20, 12, 0.32);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  transition: background 240ms var(--ease), border-color 240ms var(--ease);
}

body.asc-portal-page .asc-eco__appbar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

body.asc-portal-page .asc-eco__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 950;
  letter-spacing: -0.02em;
}

body.asc-portal-page .asc-eco__logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,0.60), transparent 60%),
    linear-gradient(180deg, var(--g1), var(--g2));
  box-shadow: 0 16px 32px rgba(22,163,74,0.20);
}

body.asc-portal-page .asc-eco__tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.asc-portal-page .asc-eco__tab {
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none !important;
  font-weight: 900;
  letter-spacing: -0.01em;

  color: rgba(255,255,255,0.90) !important;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);

  transition: transform 220ms var(--ease), background 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}

body.asc-portal-page .asc-eco__tab:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
}

body.asc-portal-page .asc-eco__tab.is-active,
body.asc-portal-page .asc-eco__tab[aria-current="page"] {
  background: rgba(0,0,0,0.20);
  border-color: rgba(183,245,59,0.26);
  box-shadow: 0 18px 52px rgba(0,0,0,0.18);
}

body.asc-portal-page .asc-eco__appbar-actions {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

/* Collapsible title row (shown when appbar condenses) */
body.asc-portal-page .asc-eco__appbar-title {
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms var(--ease);
  border-top: 1px solid rgba(255,255,255,0.08);
}

body.asc-portal-page .asc-eco__appbar-title-inner {
  padding-top: 10px;
  padding-bottom: 10px;
}

body.asc-portal-page .asc-eco__appbar-h1 {
  font-weight: 1000;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.92);
}

/* JS will toggle .is-condensed on the root or appbar */
body.asc-portal-page .asc-portal.asc-eco.is-condensed .asc-eco__appbar {
  background: rgba(8, 20, 12, 0.50);
  border-color: rgba(255,255,255,0.14);
}

body.asc-portal-page .asc-portal.asc-eco.is-condensed .asc-eco__appbar-title {
  max-height: 64px;
}

/* Appbar responsive */
@media (max-width: 820px) {
  body.asc-portal-page .asc-eco__appbar-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
  }

  body.asc-portal-page .asc-eco__appbar-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* =========================================================
   4) HERO
========================================================= */
body.asc-portal-page .asc-eco__hero {
  position: relative;
  padding: clamp(34px, 4.8vw, 86px) 0;
  overflow: hidden;

  background:
    radial-gradient(900px 420px at 18% 10%, rgba(183,245,59,0.28), transparent 60%),
    radial-gradient(700px 380px at 78% 25%, rgba(57,211,83,0.22), transparent 55%),
    radial-gradient(900px 520px at 70% 110%, rgba(108,42,34,0.24), transparent 60%),
    linear-gradient(180deg, #1fb64e 0%, #15803d 50%, #0d3b1c 100%);
}

body.asc-portal-page .asc-eco__hero::before {
  content: "";
  position: absolute;
  inset: -35% -18% auto -18%;
  height: 260px;
  transform: rotate(-6deg);
  background: linear-gradient(90deg, rgba(255,255,255,0.20), rgba(255,255,255,0.02));
  filter: blur(0.35px);
  pointer-events: none;
}

body.asc-portal-page .asc-eco__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.10;
  pointer-events: none;
}

body.asc-portal-page .asc-eco__hero-inner {
  position: relative;
  z-index: 1;
  color: #fff;
}

/* Brand line + badges */
body.asc-portal-page .asc-eco__brandline {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

body.asc-portal-page .asc-eco__badge {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.22);

  box-shadow: 0 10px 22px rgba(0,0,0,0.18);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.asc-portal-page .asc-eco__badge--soft {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}

/* Title + subtitle */
body.asc-portal-page .asc-eco__title {
  margin: 0 0 12px !important;
  font-size: clamp(34px, 4.8vw, 66px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.06em;
  font-weight: 1000;
  color: #fff !important;
  text-shadow: 0 14px 36px rgba(0,0,0,0.28);
  max-width: 22ch;
}

body.asc-portal-page .asc-eco__subtitle {
  margin: 0 !important;
  max-width: 72ch;
  font-size: 15.5px !important;
  line-height: 1.85 !important;
  color: rgba(255,255,255,0.86) !important;
  
}

/* Quick nav pills */
body.asc-portal-page .asc-eco__quick {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

body.asc-portal-page .asc-eco__quickbtn {
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 900;

  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff !important;

  box-shadow: 0 10px 22px rgba(0,0,0,0.16);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition: transform 220ms var(--ease), background 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}

body.asc-portal-page .asc-eco__quickbtn:hover {
  transform: translateY(-1.5px);
  background: rgba(255,255,255,0.18);
  border-color: rgba(183,245,59,0.26);
  box-shadow: 0 16px 44px rgba(0,0,0,0.18);
}

body.asc-portal-page .asc-eco__quickbtn.is-active,
body.asc-portal-page .asc-eco__quickbtn[aria-current="page"] {
  background: rgba(0,0,0,0.20);
  border-color: rgba(183,245,59,0.30);
  box-shadow: 0 20px 56px rgba(0,0,0,0.20);
  transform: translateY(-1px);
}

/* =========================================================
   5) MAIN + PANEL
========================================================= */
body.asc-portal-page .asc-eco__main {
  margin-top: -44px;
  padding-bottom: clamp(30px, 3.6vw, 74px);
}

body.asc-portal-page .asc-eco__panel {
  position: relative;
  overflow: hidden;

  border-radius: var(--r-xl);
  padding: clamp(20px, 3.0vw, 40px);

  background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow: var(--sh-xl);

  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  outline: 1px solid rgba(7,20,39,0.04);
  outline-offset: -1px;
}




body.asc-portal-page .asc-eco__panel > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   6) TOOLBAR + PILL
========================================================= */
body.asc-portal-page .asc-eco__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0 18px;
}

body.asc-portal-page .asc-eco__pill {
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;

  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(108,42,34,0.14);
  box-shadow: var(--sh-sm);

  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}

/* =========================================================
   7) GRID + CARDS (with hover icon slot)
========================================================= */
body.asc-portal-page .asc-eco__grid {
  display: grid;
  gap: 16px;
  align-items: stretch;
}

@media (min-width: 860px) {
  body.asc-portal-page .asc-eco__grid {
    grid-template-columns: 1fr 1fr;
  }
}



body.asc-portal-page .asc-eco__card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  opacity: 0.95;
  background: linear-gradient(180deg, var(--g1), var(--g2), rgba(108,42,34,0.52));
}

body.asc-portal-page .asc-eco__card::after {
  /* sheen layer driven by JS via --mx/--my */
  content: "";
  position: absolute;
  inset: -60% -60%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.42), transparent 70%);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  opacity: 0;
  transition: opacity 240ms var(--ease);
  pointer-events: none;
}

body.asc-portal-page .asc-eco__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: rgba(22,163,74,0.18);
  filter: saturate(1.03);
}

body.asc-portal-page .asc-eco__card:hover::after {
  opacity: 1;
}

/* Card body */
body.asc-portal-page .asc-eco__cardbody {
  min-width: 0;
}

body.asc-portal-page .asc-eco__cardtitle {
  margin: 0 0 6px;
  font-weight: 1000;
  letter-spacing: -0.02em;
  color: rgba(7,20,39,0.94);
  font-size: 16px;
  line-height: 1.25;
}

body.asc-portal-page .asc-eco__meta {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* Hover icon slot */
body.asc-portal-page .asc-eco__cardicon {
  margin-top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(7,20,39,0.05);
  border: 1px solid rgba(7,20,39,0.08);
  color: rgba(7,20,39,0.56);

  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
}

body.asc-portal-page .asc-eco__card:hover .asc-eco__cardicon {
  opacity: 1;
  transform: translateY(0);
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.20);
  color: rgba(6,32,18,0.72);
}

body.asc-portal-page .asc-eco__card.is-empty .asc-eco__cardicon {
  display: none;
}

/* =========================================================
   8) BUTTONS
========================================================= */
body.asc-portal-page .asc-eco__btn {
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 950;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  user-select: none;
  cursor: pointer;

  border: 1px solid transparent;
  line-height: 1;

  will-change: transform;
  transition:
    transform 240ms var(--ease),
    box-shadow 260ms var(--ease),
    border-color 260ms var(--ease),
    filter 260ms var(--ease),
    background 260ms var(--ease);
}

body.asc-portal-page .asc-eco__btn:active {
  transform: translateY(0px) scale(0.99);
  filter: brightness(0.99);
}

body.asc-portal-page .asc-eco__btn--primary {
  color: #061f10 !important;
  background:
    radial-gradient(120px 80px at 30% 20%, rgba(255,255,255,0.55), transparent 60%),
    linear-gradient(180deg, var(--g1), var(--g2));
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 22px 58px rgba(22,163,74,0.22);
}

body.asc-portal-page .asc-eco__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 80px rgba(22,163,74,0.26);
  filter: brightness(1.02) saturate(1.03);
}

body.asc-portal-page .asc-eco__btn--ghost {
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(7,20,39,0.10);
  color: rgba(7,20,39,0.82) !important;
  box-shadow: var(--sh-sm);
}

body.asc-portal-page .asc-eco__btn--ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(108,42,34,0.18);
  box-shadow: 0 18px 58px rgba(7,20,39,0.14);
}

/* Optional maroon button variant */
body.asc-portal-page .asc-eco__btn--maroon {
  color: #fff !important;
  background: linear-gradient(180deg, var(--m1), var(--m2));
  border: 1px solid rgba(0,0,0,0.14);
  box-shadow: 0 18px 36px rgba(108,42,34,0.22);
}

body.asc-portal-page .asc-eco__btn--maroon:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(108,42,34,0.28);
}

/* Focus */
body.asc-portal-page .asc-eco__btn:focus-visible,
body.asc-portal-page .asc-eco__quickbtn:focus-visible,
body.asc-portal-page .asc-eco__tab:focus-visible,
body.asc-portal-page .asc-eco__card:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 4px rgba(183,245,59,0.18),
    0 0 0 7px rgba(108,42,34,0.10) !important;
}

/* =========================================================
   9) FOOTER ACTIONS
========================================================= */
body.asc-portal-page .asc-eco__footer-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================================================
   10) MOBILE
========================================================= */
@media (max-width: 560px) {
  body.asc-portal-page .asc-eco__card {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.asc-portal-page .asc-eco__btn {
    width: 100%;
    justify-content: center;
  }

  body.asc-portal-page .asc-eco__quickbtn,
  body.asc-portal-page .asc-eco__tab {
    width: 100%;
  }
}

/* =========================================================
   11) FORMS + NOTICES (portal-wide utility styles)
========================================================= */
body.asc-portal-page .asc-portal__notice {
  border-radius: 18px;
  padding: 14px 16px;
  margin: 10px 0 18px;

  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 12px 30px rgba(15,23,42,0.08);
  color: rgba(15,23,42,0.86);
}

body.asc-portal-page .asc-portal__notice.is-success {
  border-color: rgba(34,197,94,0.25);
  background: linear-gradient(180deg, rgba(183,245,59,0.18), rgba(255,255,255,0.78));
}

body.asc-portal-page .asc-portal__notice.is-error {
  border-color: rgba(108,42,34,0.25);
  background: linear-gradient(180deg, rgba(108,42,34,0.10), rgba(255,255,255,0.78));
}

body.asc-portal-page .asc-portal__form {
  display: grid;
  gap: 14px;
  margin-top: 6px;
}

body.asc-portal-page .asc-portal__field {
  display: grid;
  gap: 8px;
}

body.asc-portal-page .asc-portal__field label {
  font-weight: 850;
  letter-spacing: -0.01em;
  color: rgba(15,23,42,0.82);
}

body.asc-portal-page .asc-portal__field input[type="text"],
body.asc-portal-page .asc-portal__field input[type="email"],
body.asc-portal-page .asc-portal__field input[type="password"],
body.asc-portal-page .asc-portal__field input[type="tel"],
body.asc-portal-page .asc-portal__field select,
body.asc-portal-page .asc-portal__field textarea {
  width: 100%;
  height: 46px;
  padding: 0 14px;

  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.92);

  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 12px 26px rgba(15,23,42,0.06);

  color: rgba(15,23,42,0.88);
  outline: none;

  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body.asc-portal-page .asc-portal__field textarea {
  min-height: 120px;
  height: auto;
  padding: 12px 14px;
}

body.asc-portal-page .asc-portal__field input:focus,
body.asc-portal-page .asc-portal__field select:focus,
body.asc-portal-page .asc-portal__field textarea:focus {
  border-color: rgba(34,197,94,0.32);
  box-shadow:
    0 0 0 4px rgba(183,245,59,0.16),
    0 0 0 7px rgba(108,42,34,0.10),
    0 18px 44px rgba(15,23,42,0.08);
}

body.asc-portal-page .asc-portal__help {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(15,23,42,0.62);
}

body.asc-portal-page .asc-portal__link {
  color: rgba(108,42,34,0.92);
  text-decoration: none;
  font-weight: 850;
}

body.asc-portal-page .asc-portal__link:hover {
  text-decoration: underline;
}

body.asc-portal-page .asc-portal__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}

@media (max-width: 560px) {
  body.asc-portal-page .asc-portal__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* WP core login notices in portal */
body.asc-portal-page #login_error,
body.asc-portal-page .message,
body.asc-portal-page .error {
  border-radius: 18px !important;
  padding: 14px 16px !important;
  margin: 10px 0 18px !important;
}

/* =========================================================
   12) REDUCED MOTION SAFETY (global)
========================================================= */
@media (prefers-reduced-motion: reduce) {
  body.asc-portal-page .asc-eco__card,
  body.asc-portal-page .asc-eco__btn,
  body.asc-portal-page .asc-eco__quickbtn,
  body.asc-portal-page .asc-eco__tab,
  body.asc-portal-page .asc-eco__cardicon,
  body.asc-portal-page .asc-eco__appbar,
  body.asc-portal-page .asc-eco__appbar-title {
    transition: none !important;
  }
}

/* --------------------------------------------
   1) Make the “middle wording” readable
   - Your premium card uses .asc-eco__title inside the card
   - That currently clashes with the hero title styling
-------------------------------------------- */

body.asc-portal-page .asc-eco__card--premium .asc-eco__kicker{
  color: rgba(7, 20, 39, 0.58);
  font-weight: 900;
}

body.asc-portal-page .asc-eco__card--premium .asc-eco__title{
  /* Force premium-card title to be dark + crisp */
  color: rgba(7, 20, 39, 0.96) !important;
  text-shadow: none !important;

  font-size: 22px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  font-weight: 1000 !important;

  /* Improves readability on busy thumbnails */
  max-width: 22ch;
}

body.asc-portal-page .asc-eco__card--premium .asc-eco__sub{
  color: rgba(7, 20, 39, 0.72);
  font-weight: 750;
}

/* Optional: give the header text a subtle “readability plate” */
body.asc-portal-page .asc-eco__card--premium .asc-eco__header{
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(7,20,39,0.06);
  box-shadow: 0 10px 26px rgba(7,20,39,0.06);
}

/* --------------------------------------------
   2) Unify ALL buttons so they match the page
   Targets:
   - Tabs: .asc-eco__tab
   - Ghost button: .asc-eco__btn--ghost (Log out)
   - CTA: .asc-eco__cta (Open Toolkit)
-------------------------------------------- */

/* Tabs: more “pill premium”, clearer active state */
body.asc-portal-page .asc-eco__tab{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 12px 28px rgba(0,0,0,0.18);

  transition: transform 180ms var(--ease),
              background 200ms var(--ease),
              border-color 200ms var(--ease),
              box-shadow 200ms var(--ease);
}

body.asc-portal-page .asc-eco__tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(183,245,59,0.26);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 18px 44px rgba(0,0,0,0.22);
}

body.asc-portal-page .asc-eco__tab.is-active,
body.asc-portal-page .asc-eco__tab[aria-current="page"]{
  background: rgba(0,0,0,0.28);
  border-color: rgba(183,245,59,0.38);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 22px 60px rgba(0,0,0,0.24);
}

/* Log out (ghost): make it look deliberate + match glass */
body.asc-portal-page .asc-eco__btn.asc-eco__btn--ghost{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--btn-ink) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.70) inset,
    0 14px 32px rgba(0,0,0,0.18);

  transition: transform 180ms var(--ease),
              filter 180ms var(--ease),
              box-shadow 200ms var(--ease),
              border-color 200ms var(--ease),
              background 200ms var(--ease);
}

body.asc-portal-page .asc-eco__btn.asc-eco__btn--ghost:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.98);
  border-color: rgba(183,245,59,0.30);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.70) inset,
    0 18px 44px rgba(0,0,0,0.20);
}

/* Open Toolkit CTA: premium green, readable label */
body.asc-portal-page .asc-eco__card--premium .asc-eco__cta{
  min-height: 46px;
  padding: 12px 18px;

  color: rgba(6, 24, 14, 0.92);
  border: 1px solid rgba(0,0,0,0.10);

  background:
    radial-gradient(140px 90px at 28% 22%, rgba(255,255,255,0.72), transparent 62%),
    linear-gradient(180deg, #b7f53b 0%, #39d353 100%);

  box-shadow:
    0 1px 0 rgba(255,255,255,0.78) inset,
    0 18px 44px rgba(22,163,74,0.22);

  transition: transform 170ms var(--ease),
              filter 170ms var(--ease),
              box-shadow 220ms var(--ease);
}

body.asc-portal-page .asc-eco__card--premium .asc-eco__cta:hover{
  transform: translateY(-2px);
  filter: saturate(1.06) contrast(1.02);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.78) inset,
    0 26px 70px rgba(22,163,74,0.26);
}

body.asc-portal-page .asc-eco__card--premium .asc-eco__cta:active{
  transform: translateY(-1px) scale(0.99);
  filter: brightness(0.99);
}

/* Focus: consistent across tabs + buttons + CTA */
body.asc-portal-page .asc-eco__btn:focus-visible,
body.asc-portal-page .asc-eco__tab:focus-visible,
body.asc-portal-page .asc-eco__card--premium .asc-eco__cta:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 4px var(--btn-ring),
    0 0 0 7px rgba(108,42,34,0.14) !important;
}


/* --------------------------------------------
   1) Base style shared by tabs + buttons + CTA
-------------------------------------------- */

/* Tabs */
body.asc-portal-page .asc-eco__tab,
body.asc-portal-page .asc-eco__tab:visited{
  color: var(--btn-text) !important;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, var(--btn-shadow);

  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);

  transition: transform 180ms var(--btn-ease),
              background 200ms var(--btn-ease),
              border-color 200ms var(--btn-ease),
              box-shadow 220ms var(--btn-ease),
              filter 220ms var(--btn-ease);
}

body.asc-portal-page .asc-eco__tab:hover{
  transform: translateY(-2px);
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, var(--btn-shadow-hover);
  filter: saturate(1.05);
}

/* Active tab: “selected” glass + green edge */
body.asc-portal-page .asc-eco__tab.is-active,
body.asc-portal-page .asc-eco__tab[aria-current="page"]{
  background: rgba(0,0,0,0.28);
  border-color: rgba(183,245,59,0.42);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 22px 70px rgba(0,0,0,0.28);
}

/* Buttons (Log out etc.) */
body.asc-portal-page .asc-eco__btn{
  border-radius: 999px;
  color: var(--btn-text) !important;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, var(--btn-shadow);

  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);

  transition: transform 180ms var(--btn-ease),
              background 200ms var(--btn-ease),
              border-color 200ms var(--btn-ease),
              box-shadow 220ms var(--btn-ease),
              filter 220ms var(--btn-ease);
}

body.asc-portal-page .asc-eco__btn:hover{
  transform: translateY(-2px);
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, var(--btn-shadow-hover);
  filter: saturate(1.05);
}

body.asc-portal-page .asc-eco__btn:active{
  transform: translateY(-1px) scale(0.99);
  filter: brightness(0.98);
}

/* Make "ghost" not look like a different species */
body.asc-portal-page .asc-eco__btn--ghost{
  /* Keep same base; just slightly softer text */
  color: var(--btn-text-soft) !important;
}

/* --------------------------------------------
   2) Primary CTA (“Open Toolkit”) — standout but cohesive
   - Same dark-glass family
   - Green neon edge + subtle internal gradient
-------------------------------------------- */
body.asc-portal-page .asc-eco__card--premium .asc-eco__cta{
  color: rgba(255,255,255,0.94) !important;
  border: 1px solid rgba(183,245,59,0.38);

  background:
    radial-gradient(140px 90px at 30% 25%, rgba(183,245,59,0.22), transparent 62%),
    radial-gradient(220px 140px at 80% 10%, rgba(57,211,83,0.16), transparent 60%),
    linear-gradient(180deg, rgba(8,20,12,0.62), rgba(8,20,12,0.44));

  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 18px 54px rgba(22,163,74,0.20);

  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);

  transition: transform 180ms var(--btn-ease),
              box-shadow 240ms var(--btn-ease),
              border-color 220ms var(--btn-ease),
              filter 220ms var(--btn-ease);
}

body.asc-portal-page .asc-eco__card--premium .asc-eco__cta:hover{
  transform: translateY(-2px);
  border-color: rgba(183,245,59,0.58);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 26px 80px rgba(22,163,74,0.24);
  filter: saturate(1.08) contrast(1.02);
}

body.asc-portal-page .asc-eco__card--premium .asc-eco__cta:active{
  transform: translateY(-1px) scale(0.99);
}

/* --------------------------------------------
   3) Focus states — consistent and premium
-------------------------------------------- */
body.asc-portal-page .asc-eco__btn:focus-visible,
body.asc-portal-page .asc-eco__tab:focus-visible,
body.asc-portal-page .asc-eco__card--premium .asc-eco__cta:focus-visible{
  outline: none !important;
  box-shadow: var(--btn-glow), var(--btn-glow-2), var(--btn-shadow-hover) !important;
}

/* --------------------------------------------
   4) Optional: make button text slightly tighter
-------------------------------------------- */
body.asc-portal-page .asc-eco__btnlabel,
body.asc-portal-page .asc-eco__tablabel,
body.asc-portal-page .asc-eco__ctaLabel{
  font-weight: 950;
  letter-spacing: -0.01em;
}


/* =========================================================
   ASC Portal — FINAL: Panel Bar Colors + Centering + Fit
   Paste at VERY END of stylesheet
========================================================= */

body.asc-portal-page .asc-portal.asc-eco{
  --asc-lime: #b7f53b;
  --asc-green: #39d353;
  --asc-green-deep: #16a34a;
  --asc-maroon: #6c2a22;

  /* Groove behind the bar */
  --bar-track: rgba(7, 20, 39, 0.10);
  --bar-track-hi: rgba(255,255,255,0.30);
  --bar-track-lo: rgba(0,0,0,0.10);

  /* Colored bar gradient (theme-consistent) */
  --bar-grad: linear-gradient(90deg,
    rgba(108,42,34,0.85) 0%,
    rgba(108,42,34,0.18) 16%,
    var(--asc-lime) 44%,
    var(--asc-green) 72%,
    var(--asc-green-deep) 100%
  );
}


/* Track (one of the “two lines”) */




/* =========================================================
   ASC Portal — FINAL: Glassy Maroon Double-Bar Animation
   Targets the two panel bars: ::after (track) + ::before (accent)
   Paste at VERY END of stylesheet
========================================================= */

body.asc-portal-page .asc-portal.asc-eco{
  /* Maroon family */
  --maroon-1: #6c2a22; /* main */
  --maroon-2: #541e16; /* deep */
  --maroon-3: #8a3a2e; /* highlight */

  /* Secondary “motion” colors (subtle but visible) */
  --glass-black: rgba(0,0,0,0.38);
  --glass-black-2: rgba(0,0,0,0.22);

  /* Tiny accent so motion reads (keep LOW so it’s premium, not neon) */
  --motion-accent: rgba(183,245,59,0.8); /* ASC lime, low opacity */
}



/* ---------------------------
   BAR 1 (BACK / TRACK) — ::after
   - Maroon glass “rail”
   - Subtle animated shadow band + soft sheen
---------------------------- */



/* ---------------------------
   BAR 2 (FRONT / ACCENT) — ::before
   - Maroon glass “cap”
   - Moving specular highlight + tiny lime edge so it reads
---------------------------- */


@keyframes asc_bar_accent_move{
  0%   { background-position: -140% 0, -120% 0, 0 0, 0 0; }
  100% { background-position:  140% 0,  120% 0, 0 0, 0 0; }
}

/* Reduced motion: keep the glass look, stop movement */
@media (prefers-reduced-motion: reduce){


}

/* =========================================================
   FINAL: Double panel bars (maroon + glass + readable motion)
========================================================= */

body.asc-portal-page .asc-portal.asc-eco{
  --maroon-1: #6c2a22;
  --maroon-2: #541e16;
  --maroon-3: #8a3a2e;

  --glass-black: rgba(0,0,0,0.38);
  --motion-accent: rgba(183,245,59,0.18); /* subtle lime so motion reads */
}


/* BAR 2 (front accent) */




@keyframes asc_bar_accent_move{
  0%   { background-position: -140% 0, -120% 0, 0 0; }
  100% { background-position:  140% 0,  120% 0, 0 0; }
}





/* =========================================================
   FINAL: Make email + logout match the tab buttons
========================================================= */

/* Keep the actions aligned */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar-actions{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Shared “tab-like” look for email + logout */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__pill,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn--ghost{
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.92) !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 12px 28px rgba(0,0,0,0.18) !important;

  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;

  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

/* Hover to match the tabs */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn--ghost:hover{
  transform: translateY(-2px) !important;
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(183,245,59,0.26) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 18px 44px rgba(0,0,0,0.22) !important;
}

/* Email pill: prevent it from getting comically wide */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__pill{
  max-width: 360px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Ensure the logout button label matches tab typography */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn--ghost .asc-eco__btnlabel{
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

/* Focus ring consistency */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__pill:focus-visible,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn--ghost:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 4px rgba(183,245,59,0.18),
    0 0 0 7px rgba(108,42,34,0.14),
    0 18px 44px rgba(0,0,0,0.22) !important;
}

/* =========================================================
   3) Panel offset: intentionally NOT centered
========================================================= */

/* Keep normal on small screens */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__main{
  display: block !important;
}

/* On larger screens, shift the white panel left a bit */
@media (min-width: 980px){
  body.asc-portal-page .asc-portal.asc-eco .asc-eco__panel{
    transform: translateX(-60px) !important; /* adjust to taste */
  }
}

/* Optional: if you want it even less centered on very large screens */
@media (min-width: 1280px){
  body.asc-portal-page .asc-portal.asc-eco .asc-eco__panel{
    transform: translateX(-90px) !important;
  }
}

/* =========================================================
   2) Premium card layout: better spacing + alignment
========================================================= */

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium{
  width: 100% !important;
  max-width: 820px !important;

  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  grid-template-areas:
    "header media"
    "footer media" !important;

  gap: 18px !important;
  align-items: start !important;
  padding: 20px !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__header{
  grid-area: header !important;
  margin: 0 !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__media{
  grid-area: media !important;
  height: 280px !important;
  align-self: stretch !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__footer{
  grid-area: footer !important;
  justify-content: flex-start !important; /* keeps CTA under the text */
  gap: 12px !important;
}

/* Make CTA feel aligned with the layout */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__cta{
  min-width: 200px !important;
}

/* Mobile: stack nicely */
@media (max-width: 760px){
  body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "header"
      "media"
      "footer" !important;
  }

  body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__media{
    height: 200px !important;
  }

  body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__cta{
    width: 100% !important;
  }
}


/* ============================================
   Appbar actions should match the tabs exactly
============================================ */

body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar-actions{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Let .asc-eco__tab work on <span> as well as <a> */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab.asc-eco__tab--static{
  cursor: default !important;
  user-select: text !important;
}

/* Prevent the email from stretching the whole header */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab.asc-eco__tab--static{
  max-width: 320px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Optional: make Log out feel like an action, not a nav destination (still identical style) */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab.asc-eco__tab--logout{
  /* no visual changes needed; this hook is here if you want later */
}
/* =========================================================
   FINAL — Make "Open Toolkit" match top-bar tabs exactly
   Paste at VERY END
========================================================= */

body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab.asc-eco__tab--cta{
  /* NO visual overrides — inherits the same look as top tabs */
  gap: 10px;
  white-space: nowrap;
}

/* Optional: give it a slightly wider “CTA” presence without changing style */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab.asc-eco__tab--cta{
  min-width: 180px;
}

/* Make sure SVG sits cleanly like the tab label */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tabicon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   FINAL — Bigger, more readable ASC logo in the top bar
   Paste at VERY END
========================================================= */

/* 1) Give the top bar a bit more vertical room */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar{
  min-height: 74px !important;   /* was likely ~56–64 */
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* 2) Ensure the left logo area can actually grow */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__brand{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0;
}

/* 3) Set a clear, readable logo size */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__logo-img{
  height: 46px !important;   /* bump to 46px (try 50–54 if you want bolder) */
  width: auto !important;
  max-width: 260px !important;
  object-fit: contain !important;
  image-rendering: auto;
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,0.45)) !important;
}

/* 4) Mobile: don’t let it dominate */
@media (max-width: 520px){
  body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar{
    min-height: 66px !important;
  }
  body.asc-portal-page .asc-portal.asc-eco .asc-eco__logo-img{
    height: 40px !important;
    max-width: 210px !important;
  }
}
/* =========================================================
   FINAL — Make the thin divider line BRICK RED
   Paste at VERY END
========================================================= */

body.asc-portal-page .asc-portal.asc-eco{
  /* Brick red (adjust if needed) */
  --asc-divider-red: #8B2D2A;
}

/* 1) Most common: appbar/header bottom border */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar{
  border-bottom: 1px solid var(--asc-divider-red) !important;
  box-shadow: 0 1px 0 var(--asc-divider-red) !important; /* in case it was a shadow-line */
}

/* 2) If the line is drawn with a pseudo element */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar::after{
  background: var(--asc-divider-red) !important;
  border-color: var(--asc-divider-red) !important;
}

/* 3) If the line is actually a panel separator just below the header */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__panel{
  border-top-color: var(--asc-divider-red) !important;
}

/* =========================================================
   FINAL — Fix spacing: remove all "move up" offsets
   so the block can move DOWN
========================================================= */

/* 1) STOP pulling the main panel upward */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__main{
  margin-top: 0 !important;        /* was -44px */
  padding-top: 26px !important;    /* add space above panel */
}

/* 2) STOP pulling the premium card upward */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium{
  margin-top: 0 !important;        /* was -70px */
}

/* 3) If the card is inside hero, keep extra breathing room */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero{
  padding-top: 90px !important;    /* increase to move everything down */
  padding-bottom: 90px !important;
}
@media (max-width: 700px){
  body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero{
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

/* =========================================================
   FINAL — Backgrounds: hero stays LIGHT, rest stays DARK
========================================================= */

/* Dark background token */
body.asc-portal-page .asc-portal.asc-eco{
  --asc-dark-green-bg: radial-gradient(1200px 380px at 50% -40px,
    rgba(30, 120, 70, 0.45) 0%,
    rgba(4, 20, 12, 0.95) 58%,
    rgba(2, 12, 8, 1) 100%);
}

/* Apply dark background everywhere except hero */
body.asc-portal-page,
body.asc-portal-page .asc-portal.asc-eco,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__page,
body.asc-portal-page .asc-portal.asc-eco main,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__main{
  background: var(--asc-dark-green-bg) !important;
}

/* Hero (My Toolkits) stays the light green gradient */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero{
  background:
    radial-gradient(900px 420px at 18% 10%, rgba(183,245,59,0.28), transparent 60%),
    radial-gradient(700px 380px at 78% 25%, rgba(57,211,83,0.22), transparent 55%),
    radial-gradient(900px 520px at 70% 110%, rgba(108,42,34,0.24), transparent 60%),
    linear-gradient(180deg, #1fb64e 0%, #15803d 50%, #0d3b1c 100%) !important;
}

/* Prevent wrappers from painting over the dark bg */
body.asc-portal-page .asc-portal.asc-eco section,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__section,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__content,
body.asc-portal-page .asc-portal.asc-eco .container,
body.asc-portal-page .asc-portal.asc-eco .wrapper,
body.asc-portal-page .asc-portal.asc-eco .content-wrapper{
  background: transparent !important;
}
/* =========================================================
   FINAL — Top section (Appbar + Hero) = DARK GREEN
   Paste at VERY END
========================================================= */

body.asc-portal-page .asc-portal.asc-eco{
  --asc-top-dark: radial-gradient(1200px 380px at 50% -40px,
      rgba(30, 120, 70, 0.45) 0%,
      rgba(4, 20, 12, 0.95) 58%,
      rgba(2, 12, 8, 1) 100%);
}

/* Appbar = dark */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar{
  background: var(--asc-top-dark) !important;
}

/* Hero (My Toolkits block) = dark */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero{
  background: var(--asc-top-dark) !important;
}

/* Optional: ensure the diagonal sheen doesn't brighten it too much */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero::before{
  opacity: 0.10 !important;
}
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero::after{
  opacity: 0.06 !important;
}

/* Keep hero text crisp on the darker background */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__title,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__subtitle{
  color: rgba(255,255,255,0.92) !important;
}

/* =========================================================
   PREMIUM WHITE BOTTOM — Keep it white, make it look luxe
   Paste at VERY END
========================================================= */

body.asc-portal-page .asc-portal.asc-eco{
  /* Bottom background (behind the panel): soft warm ivory, not pure white */
  --asc-bottom-canvas:
    radial-gradient(900px 520px at 18% 8%, rgba(31,182,78,0.08), transparent 62%),
    radial-gradient(900px 520px at 82% 0%, rgba(108,42,34,0.06), transparent 60%),
    linear-gradient(180deg, #f7f7f3 0%, #f1f2ed 55%, #eceee8 100%);

  /* Panel + cards */
  --asc-surface: rgba(255,255,255,0.92);      /* panel */
  --asc-surface-2: rgba(255,255,255,0.86);    /* subtle depth areas */
  --asc-border: rgba(15, 23, 42, 0.10);

  /* Premium shadow stack */
  --asc-shadow-luxe:
    0 40px 120px rgba(2, 8, 6, 0.18),
    0 12px 38px rgba(2, 8, 6, 0.10);

  --asc-shadow-card:
    0 20px 70px rgba(2, 8, 6, 0.14),
    0 8px 22px rgba(2, 8, 6, 0.08);
}

/* -----------------------------
   1) Bottom area background = ivory/white
------------------------------ */
body.asc-portal-page,
body.asc-portal-page .asc-portal.asc-eco,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__page,
body.asc-portal-page .asc-portal.asc-eco main,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__main{
  background: var(--asc-bottom-canvas) !important;
}

/* Prevent inner wrappers from painting random colors */
body.asc-portal-page .asc-portal.asc-eco section,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__section,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__content,
body.asc-portal-page .asc-portal.asc-eco .container,
body.asc-portal-page .asc-portal.asc-eco .wrapper,
body.asc-portal-page .asc-portal.asc-eco .content-wrapper{
  background: transparent !important;
  background-image: none !important;
}

/* -----------------------------
   2) Main panel = premium white “glass” (not harsh #fff)
------------------------------ */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__panel{
  background: linear-gradient(180deg, var(--asc-surface), var(--asc-surface-2)) !important;
  border: 1px solid var(--asc-border) !important;
  box-shadow: var(--asc-shadow-luxe) !important;

  /* Slight rounding feels more premium */
  border-radius: 18px !important;
}

/* Keep your maroon rails crisp and expensive-looking */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__panel::before,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__panel::after{
  opacity: 0.95 !important;
  filter: saturate(105%) contrast(105%) !important;
}

/* -----------------------------
   3) Cards inside = clean white with softer shadow
------------------------------ */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium{
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: var(--asc-shadow-card) !important;
  border-radius: 16px !important;
}

/* Button style to match white theme */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn{
  background: rgba(15, 23, 42, 0.08) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  color: rgba(15, 23, 42, 0.88) !important;
}
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn:hover{
  background: rgba(15, 23, 42, 0.12) !important;
  border-color: rgba(108,42,34,0.22) !important; /* subtle tie-in to the maroon accent */
}

/* -----------------------------
   4) Layout sanity: stop old “pull up” rules affecting the white section
------------------------------ */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__main{
  margin-top: 0 !important;
  padding-top: 22px !important;
}
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium{
  margin-top: 0 !important;
}

/* =========================================================
   HERO TEXT CONTRAST FIX — make wording readable on dark hero
   Paste at VERY END
========================================================= */

/* Ensure all hero text is bright enough */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero *{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Title */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero .asc-eco__title,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero h1{
  color: rgba(255,255,255,0.96) !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

/* Subtitle / description ("Access your document toolkits...") */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero .asc-eco__subtitle,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero p{
  color: rgba(255,255,255,0.82) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55) !important;
  font-weight: 500 !important;
}

/* If your hero has extra dark overlay layers, soften them a bit */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero::before{
  opacity: 0.08 !important;
}
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero::after{
  opacity: 0.05 !important;
}

/* =========================================================
   FIX: Toolkit title visibility in the card
========================================================= */

/* Common title selectors inside cards (covers most builds) */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card h1,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card h2,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card h3,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card h4,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium h1,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium h2,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium h3,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium h4,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card .title,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card .heading,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card .name{
  color: rgba(15, 23, 42, 0.92) !important;   /* deep slate */
  opacity: 1 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* If it’s marked “muted”, neutralize that */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card .muted,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card [class*="muted"],
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card [class*="secondary"],
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card [class*="subtle"]{
  opacity: 1 !important;
  color: rgba(15, 23, 42, 0.78) !important;
}

/* =========================================================
   DARK GLOSSY GRAY CONTROLS:
   Open Toolkit + Toolkits/Billing/Account + email + logout
========================================================= */

body.asc-portal-page .asc-portal.asc-eco{
  --asc-gloss: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 42%);
  --asc-dark-btn: linear-gradient(180deg, #2b3136 0%, #161a1e 100%);
  --asc-dark-btn-border: rgba(255,255,255,0.14);
  --asc-dark-btn-text: rgba(255,255,255,0.92);
  --asc-dark-btn-text-dim: rgba(255,255,255,0.82);
}

/* Core pill/button styling (covers nav + chips + Open Toolkit in most cases) */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar a,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar button,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__pill{
  background:
    var(--asc-gloss),
    var(--asc-dark-btn) !important;

  border: 1px solid var(--asc-dark-btn-border) !important;
  color: var(--asc-dark-btn-text) !important;

  box-shadow:
    0 10px 22px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;

  border-radius: 999px !important;
}

/* Slightly dim non-active pills if your UI marks them */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar a:not(.is-active),
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar button:not(.is-active){
  color: var(--asc-dark-btn-text-dim) !important;
}

/* Hover/active polish */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar a:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar button:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__pill:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 44%),
    linear-gradient(180deg, #343c43 0%, #1a1f24 100%) !important;

  border-color: rgba(255,255,255,0.18) !important;
  transform: translateY(-1px);
}

/* Make sure icons inside buttons stay visible */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar a svg,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar button svg,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn svg{
  fill: currentColor !important;
  color: currentColor !important;
}

/* =========================================================
   COHESIVE PREMIUM POLISH — paste at VERY END
========================================================= */

body.asc-portal-page .asc-portal.asc-eco{
  /* Global tokens (keeps everything consistent) */
  --ink: rgba(15, 23, 42, 0.92);
  --ink-2: rgba(15, 23, 42, 0.72);
  --line: rgba(15, 23, 42, 0.10);

  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-pill: 999px;

  /* Graphite (nav, chips, buttons) */
  --graphite-0: #3a424a;
  --graphite-1: #252b31;
  --graphite-2: #14181c;

  --graphite-bg: linear-gradient(180deg, var(--graphite-0) 0%, var(--graphite-1) 55%, var(--graphite-2) 100%);
  --graphite-gloss: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 42%);
  --graphite-border: rgba(255,255,255,0.16);

  /* Ivory bottom (premium “white”) */
  --ivory-bg:
    radial-gradient(900px 520px at 18% 8%, rgba(31,182,78,0.06), transparent 62%),
    radial-gradient(900px 520px at 82% 0%, rgba(108,42,34,0.05), transparent 60%),
    linear-gradient(180deg, #f7f7f3 0%, #f1f2ed 55%, #eceee8 100%);

  /* Shadows (one consistent system) */
  --shadow-panel:
    0 40px 120px rgba(2, 8, 6, 0.16),
    0 12px 38px rgba(2, 8, 6, 0.10);
  --shadow-card:
    0 22px 70px rgba(2, 8, 6, 0.14),
    0 8px 22px rgba(2, 8, 6, 0.08);
  --shadow-pill:
    0 10px 22px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

/* -----------------------------
   A) Hero / header refinement
------------------------------ */

/* Keep hero dark, but ensure it stays smooth and premium */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero{
  background: var(--asc-top-dark) !important;
}

/* Hero typography polish */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero .asc-eco__title,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero h1{
  color: rgba(255,255,255,0.96) !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero .asc-eco__subtitle,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero p{
  color: rgba(255,255,255,0.84) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55) !important;
  max-width: 62ch;
}

/* -----------------------------
   B) Appbar pills / email chip / logout = glossy graphite
------------------------------ */

body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar a,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar button,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__pill{
  background: var(--graphite-gloss), var(--graphite-bg) !important;
  border: 1px solid var(--graphite-border) !important;
  color: rgba(255,255,255,0.92) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-pill) !important;

  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* Hover: slightly brighter, still graphite */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar a:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar button:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__pill:hover{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 44%),
    linear-gradient(180deg, #454f58 0%, #1b2026 100%) !important;
  border-color: rgba(255,255,255,0.20) !important;
  transform: translateY(-1px);
}

/* -----------------------------
   C) Bottom area = luxe ivory canvas
------------------------------ */

body.asc-portal-page,
body.asc-portal-page .asc-portal.asc-eco,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__page,
body.asc-portal-page .asc-portal.asc-eco main,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__main{
  background: var(--ivory-bg) !important;
}

/* Keep nested wrappers from painting bands */
body.asc-portal-page .asc-portal.asc-eco section,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__section,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__content,
body.asc-portal-page .asc-portal.asc-eco .container,
body.asc-portal-page .asc-portal.asc-eco .wrapper,
body.asc-portal-page .asc-portal.asc-eco .content-wrapper{
  background: transparent !important;
  background-image: none !important;
}

/* -----------------------------
   D) Main white panel: improve “big empty box” feel
------------------------------ */

body.asc-portal-page .asc-portal.asc-eco .asc-eco__panel{
  /* Subtle top tint so it feels intentional under the maroon rail */
  background:
    linear-gradient(180deg, rgba(108,42,34,0.06) 0%, rgba(255,255,255,0.92) 18%, rgba(255,255,255,0.88) 100%) !important;

  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-panel) !important;

  padding: 26px !important;
}

/* If your panel has a big empty right side, give it a faint “surface” */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__panel::after{
  content: "" !important;
  position: absolute !important;
  inset: 18px 18px 18px 52% !important;  /* right half only */
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(15,23,42,0.035), rgba(15,23,42,0.015)) !important;
  pointer-events: none !important;
}

/* Ensure panel pseudo-elements don’t fight each other (keeps your maroon rail crisp) */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__panel{
  position: relative !important;
  overflow: hidden !important;
}

/* -----------------------------
   E) Toolkit card: sharper hierarchy + readability
------------------------------ */

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium{
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Make sure the toolkit name never fades */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card h1,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card h2,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card h3,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card h4,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card .title,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card .heading,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card .name{
  color: var(--ink) !important;
  opacity: 1 !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em;
}

/* Subtext inside the card */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card p,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card .desc{
  color: var(--ink-2) !important;
  opacity: 1 !important;
}

/* -----------------------------
   F) “Open Toolkit” button: make it match the premium graphite system
   (even if it's inside a card)
------------------------------ */

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card .asc-eco__btn,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card button,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card a[role="button"]{
  background: var(--graphite-gloss), var(--graphite-bg) !important;
  border: 1px solid var(--graphite-border) !important;
  color: rgba(255,255,255,0.92) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-pill) !important;
}

/* Slightly tighter vertical rhythm under hero */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__main{
  padding-top: 18px !important;
}


/* =========================================================
   MAROON DIVIDER between HERO (green) and MAIN (white)
   Paste at VERY END
========================================================= */

body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero{
  position: relative !important;
}

/* Thin maroon rule at the bottom edge of the hero */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

 height: 3px !important;
background: rgba(108,42,34,0.92) !important;

  box-shadow: 0 1px 0 rgba(0,0,0,0.28) !important;
  z-index: 50 !important;
  pointer-events: none !important;
}


/* =========================================================
   FINAL FIX #1 — Full-bleed divider (red) between hero and main
   Paste at VERY END (last wins)
========================================================= */

html, body{
  overflow-x: hidden !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__main{
  position: relative !important;
}

/* Full viewport width divider, not limited by container */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__main::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;

  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 100vw !important;
  height: 3px !important;

  background: rgba(108,42,34,0.92) !important; /* maroon/red */
  box-shadow: 0 1px 0 rgba(0,0,0,0.30) !important;

  z-index: 9999 !important;
  pointer-events: none !important;
}

/* =========================================================
   PREMIUM APPBAR TABS (Graphite Glass) — FINAL
   Paste at VERY END of stylesheet
========================================================= */

/* 0) Tokens (consistent “premium” material) */
body.asc-portal-page .asc-portal.asc-eco{
  --tab-bg: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.00) 52%),
            linear-gradient(180deg, #3a424a 0%, #22282e 55%, #13171b 100%);
  --tab-bg-hover: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.00) 52%),
                  linear-gradient(180deg, #46515a 0%, #252c33 55%, #151a1f 100%);

  --tab-border: rgba(255,255,255,0.16);
  --tab-border-hover: rgba(255,255,255,0.22);

  --tab-text: rgba(255,255,255,0.92);
  --tab-text-dim: rgba(255,255,255,0.82);

  --tab-shadow: 0 10px 22px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10);
  --tab-shadow-hover: 0 16px 36px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.12);

  --tab-ring: 0 0 0 4px rgba(183,245,59,0.18), 0 0 0 7px rgba(108,42,34,0.14);

  --tab-active-edge: rgba(183,245,59,0.55);  /* lime edge */
  --tab-active-glow: 0 18px 50px rgba(57,211,83,0.16);

  --tab-ease: cubic-bezier(.2,.85,.2,1);
}

/* 1) Tabs row spacing (helps it feel “designed”, not cramped) */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tabs{
  gap: 12px !important;
}

/* 2) Base style: ONLY tabs (don’t target all appbar <a>) */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab{
  height: 42px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;

  background: var(--tab-bg) !important;
  border: 1px solid var(--tab-border) !important;

  color: var(--tab-text) !important;
  text-decoration: none !important;

  box-shadow: var(--tab-shadow) !important;

  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;

  transform: translateZ(0);
  transition:
    transform 180ms var(--tab-ease),
    box-shadow 220ms var(--tab-ease),
    border-color 220ms var(--tab-ease),
    filter 220ms var(--tab-ease),
    background 220ms var(--tab-ease) !important;
}

/* Typography (premium = tighter + slightly heavier) */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tablabel{
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  font-size: 13px !important;
}

/* 3) Hover (lift + richer highlight) */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab:hover{
  transform: translateY(-2px) !important;
  background: var(--tab-bg-hover) !important;
  border-color: var(--tab-border-hover) !important;
  box-shadow: var(--tab-shadow-hover) !important;
  filter: saturate(1.08) contrast(1.02) !important;
}

/* 4) Active tab (clear “selected” state) */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab.is-active,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab[aria-current="page"]{
  border-color: var(--tab-active-edge) !important;
  box-shadow: var(--tab-shadow-hover), var(--tab-active-glow) !important;
  filter: saturate(1.10) !important;
  position: relative !important;
}

/* Active: subtle top sheen strip (tiny detail = premium) */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab.is-active::after,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab[aria-current="page"]::after{
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  top: 6px !important;
  height: 2px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent) !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
}

/* 5) Focus accessibility */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab:focus-visible{
  outline: none !important;
  box-shadow: var(--tab-shadow-hover), var(--tab-ring) !important;
}

/* 6) Email + Logout should match the tabs exactly */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab--static{
  cursor: default !important;
  user-select: text !important;
  color: var(--tab-text-dim) !important;
  max-width: 320px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab--logout{
  color: var(--tab-text) !important;
}

/* 7) Mobile: make pills breathe (less “stuck together”) */
@media (max-width: 820px){
  body.asc-portal-page .asc-portal.asc-eco .asc-eco__tabs{
    gap: 10px !important;
  }
  body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab{
    height: 44px !important;
  }
}
/* =========================================================
   ASC Toolkit Browser — Premium style (matches portal)
   Paste at VERY END of stylesheet
========================================================= */

body.asc-portal-page .asc-toolkit-browser{
  --tk-ink: rgba(15,23,42,0.92);
  --tk-ink-2: rgba(15,23,42,0.68);
  --tk-border: rgba(15,23,42,0.10);

  --tk-graphite: linear-gradient(180deg, #3a424a 0%, #22282e 55%, #13171b 100%);
  --tk-gloss: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.00) 52%);
  --tk-pill-border: rgba(255,255,255,0.16);

  --tk-shadow-pill: 0 10px 22px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10);
  --tk-shadow-panel: 0 40px 120px rgba(2, 8, 6, 0.16), 0 12px 38px rgba(2, 8, 6, 0.10);
  --tk-shadow-row: 0 14px 32px rgba(2,8,6,0.08);

  --tk-radius-lg: 18px;
  --tk-radius-md: 14px;
  --tk-radius-pill: 999px;

  --tk-ease: cubic-bezier(.2,.85,.2,1);
}

/* Hero */
body.asc-portal-page .asc-toolkit-browser .asc-tk-hero{
  background: radial-gradient(1200px 380px at 50% -40px,
      rgba(30, 120, 70, 0.45) 0%,
      rgba(4, 20, 12, 0.95) 58%,
      rgba(2, 12, 8, 1) 100%);
  padding: 54px 0 28px;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-hero__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 2.2vw, 28px);
  color: rgba(255,255,255,0.92);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-hero__kicker{
  display: inline-flex;
  padding: 6px 10px;
  border-radius: var(--tk-radius-pill);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 850;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.18);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-hero__title{
  margin: 12px 0 8px !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em;
  font-weight: 900 !important;
  color: rgba(255,255,255,0.96) !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-hero__sub{
  margin: 0 !important;
  color: rgba(255,255,255,0.82) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  max-width: 72ch;
}

/* Main canvas */
body.asc-portal-page .asc-toolkit-browser .asc-tk-main{
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(31,182,78,0.06), transparent 62%),
    radial-gradient(900px 520px at 82% 0%, rgba(108,42,34,0.05), transparent 60%),
    linear-gradient(180deg, #f7f7f3 0%, #f1f2ed 55%, #eceee8 100%);
  padding: 18px 0 64px;
  position: relative;
}

/* Full-bleed divider line (matches portal) */
body.asc-portal-page .asc-toolkit-browser .asc-tk-main::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 3px;
  background: rgba(108,42,34,0.92);
  box-shadow: 0 1px 0 rgba(0,0,0,0.30);
}

/* Panel */
body.asc-portal-page .asc-toolkit-browser .asc-tk-panel{
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px clamp(16px, 2.2vw, 28px);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.86));
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-lg);
  box-shadow: var(--tk-shadow-panel);
}

/* Tabs */









/* Breadcrumb */
body.asc-portal-page .asc-toolkit-browser .asc-tk-breadcrumb{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 6px 0 18px;
  color: var(--tk-ink-2);
  font-weight: 650;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-breadcrumb__link{
  color: rgba(108,42,34,0.92);
  text-decoration: none;
  font-weight: 800;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-breadcrumb__link:hover{
  text-decoration: underline;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-breadcrumb__sep{
  opacity: 0.45;
}

/* List rows */
body.asc-portal-page .asc-toolkit-browser .asc-tk-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-item__row{
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  gap: 12px;
  align-items: center;

  padding: 14px 14px;
  border-radius: var(--tk-radius-md);

  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: var(--tk-shadow-row);

  text-decoration: none;
  color: var(--tk-ink);

  transition: transform 180ms var(--tk-ease), box-shadow 220ms var(--tk-ease), border-color 220ms var(--tk-ease);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-item__row:hover{
  transform: translateY(-1px);
  border-color: rgba(57,211,83,0.18);
  box-shadow: 0 22px 58px rgba(2,8,6,0.12);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-item__icon{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(15,23,42,0.06);
  border: 1px solid rgba(15,23,42,0.08);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-item__name{
  font-weight: 850;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-item__meta{
  color: var(--tk-ink-2);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* Actions */
body.asc-portal-page .asc-toolkit-browser .asc-tk-actions{
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn{
  height: 40px;
  padding: 0 14px;
  border-radius: var(--tk-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none !important;
  font-weight: 850;
  letter-spacing: -0.01em;

  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.06);
  color: rgba(15,23,42,0.90);

  transition: transform 160ms var(--tk-ease), filter 160ms var(--tk-ease), background 160ms var(--tk-ease), border-color 160ms var(--tk-ease);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn:hover{
  transform: translateY(-1px);
  background: rgba(15,23,42,0.10);
  border-color: rgba(108,42,34,0.20);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn--primary{
  background: linear-gradient(180deg, rgba(183,245,59,1), rgba(57,211,83,1));
  border-color: rgba(0,0,0,0.10);
  color: rgba(6,24,14,0.92);
  box-shadow: 0 14px 32px rgba(22,163,74,0.18);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn--primary:hover{
  filter: saturate(1.06) contrast(1.02);
}

/* Empty state */
body.asc-portal-page .asc-toolkit-browser .asc-tk-empty{
  padding: 18px;
  border-radius: var(--tk-radius-md);
  border: 1px dashed rgba(15,23,42,0.18);
  background: rgba(255,255,255,0.86);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-empty__title{
  font-weight: 900;
  color: var(--tk-ink);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-empty__sub{
  margin-top: 6px;
  color: var(--tk-ink-2);
}

/* Mobile */
@media (max-width: 760px){
  body.asc-portal-page .asc-toolkit-browser .asc-tk-item__row{
    grid-template-columns: 34px 1fr;
    grid-auto-rows: auto;
  }
  body.asc-portal-page .asc-toolkit-browser .asc-tk-item__meta{
    grid-column: 1 / -1;
  }
  body.asc-portal-page .asc-toolkit-browser .asc-tk-actions{
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  body.asc-portal-page .asc-toolkit-browser .asc-tk-btn{
    width: 100%;
  }
}



/* ---------------------------
   B) Row action buttons (Download / Make a copy)
---------------------------- */
body.asc-portal-page .asc-toolkit-browser .asc-tk-btn{
  height: 42px !important;
  padding: 0 16px !important;
  border-radius: var(--ctl-radius) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-decoration: none !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;

  transition: transform 160ms var(--ctl-ease),
              box-shadow 220ms var(--ctl-ease),
              border-color 220ms var(--ctl-ease),
              filter 220ms var(--ctl-ease),
              background 220ms var(--ctl-ease) !important;
}

/* Download = premium “ghost” (clean, not dull) */
body.asc-portal-page .asc-toolkit-browser .asc-tk-btn--ghost{
  background: rgba(255,255,255,0.86) !important;
  border: 1px solid rgba(15,23,42,0.12) !important;
  color: rgba(15,23,42,0.88) !important;
  box-shadow: 0 10px 22px rgba(2,8,6,0.10), inset 0 1px 0 rgba(255,255,255,0.70) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn--ghost:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(108,42,34,0.20) !important;
  box-shadow: 0 16px 36px rgba(2,8,6,0.14), inset 0 1px 0 rgba(255,255,255,0.78) !important;
}

/* Make a copy = premium green CTA */
body.asc-portal-page .asc-toolkit-browser .asc-tk-btn--primary{
  background: var(--cta-grad) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  color: var(--cta-ink) !important;

  box-shadow: 0 16px 40px rgba(22,163,74,0.18), inset 0 1px 0 rgba(255,255,255,0.66) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn--primary:hover{
  transform: translateY(-2px) !important;
  filter: saturate(1.06) contrast(1.02) !important;
  box-shadow: 0 22px 60px rgba(22,163,74,0.22), inset 0 1px 0 rgba(255,255,255,0.70) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn:active{
  transform: translateY(-1px) scale(0.99) !important;
  filter: brightness(0.99) !important;
}

/* ---------------------------
   C) Icon badge (folder/file) — now matches the UI
---------------------------- */
body.asc-portal-page .asc-toolkit-browser .asc-tk-item__icon{
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;

  background: var(--icon-bg) !important;
  border: 1px solid var(--icon-border) !important;

  color: var(--icon-ink) !important; /* SVG uses currentColor */
  box-shadow: 0 12px 26px rgba(2,8,6,0.08), inset 0 1px 0 rgba(255,255,255,0.65) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-item__row:hover .asc-tk-item__icon{
  border-color: rgba(57,211,83,0.22) !important;
  color: rgba(10, 60, 32, 0.72) !important;
}

/* =========================================================
   TOOLKIT PAGE — Premium Neutral (Ivory + Maroon), NO green/black
   Paste at VERY END of stylesheet
========================================================= */

body.asc-portal-page .asc-toolkit-browser{
  /* Surfaces */
  --tk-canvas:
    radial-gradient(900px 520px at 18% 8%, rgba(31,182,78,0.05), transparent 62%),
    radial-gradient(900px 520px at 82% 0%, rgba(108,42,34,0.06), transparent 60%),
    linear-gradient(180deg, #f7f7f3 0%, #f1f2ed 55%, #eceee8 100%);

  --tk-panel: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.86));
  --tk-row: rgba(255,255,255,0.96);

  /* Ink */
  --tk-ink: rgba(15,23,42,0.92);
  --tk-ink-2: rgba(15,23,42,0.66);

  /* Brand accent (maroon) */
  --tk-maroon: rgba(108,42,34,0.92);
  --tk-maroon-soft: rgba(108,42,34,0.14);

  /* Borders + shadows */
  --tk-border: rgba(15,23,42,0.10);
  --tk-border-soft: rgba(15,23,42,0.08);

  --tk-shadow-panel:
    0 40px 120px rgba(2, 8, 6, 0.14),
    0 12px 38px rgba(2, 8, 6, 0.10);

  --tk-shadow-row:
    0 18px 60px rgba(2,8,6,0.10),
    0 6px 18px rgba(2,8,6,0.06);

  /* Controls */
  --ctl-radius: 999px;
  --ctl-ease: cubic-bezier(.2,.85,.2,1);

  /* Soft “stone” pill (default) */
  --ctl-stone: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  --ctl-stone-border: rgba(15,23,42,0.12);
  --ctl-stone-shadow: 0 10px 22px rgba(2,8,6,0.10), inset 0 1px 0 rgba(255,255,255,0.70);

  /* Active pill */
  --ctl-active: linear-gradient(180deg, rgba(108,42,34,0.10), rgba(255,255,255,0.86));
  --ctl-active-border: rgba(108,42,34,0.28);
  --ctl-active-glow: 0 18px 50px rgba(108,42,34,0.12);
}

/* Canvas + panel stay premium ivory */
body.asc-portal-page .asc-toolkit-browser .asc-tk-main{
  background: var(--tk-canvas) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-panel{
  background: var(--tk-panel) !important;
  border: 1px solid var(--tk-border) !important;
  box-shadow: var(--tk-shadow-panel) !important;
  border-radius: 18px !important;
}

/* Divider between hero and main stays maroon */
body.asc-portal-page .asc-toolkit-browser .asc-tk-main::before{
  background: var(--tk-maroon) !important;
}

/* =========================================================
   A) Tabs (Master Files / My Drafts) — stone, not black
========================================================= */
body.asc-portal-page .asc-toolkit-browser .asc-tk-tabs{
  gap: 10px !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-tab{
  height: 42px !important;
  padding: 0 16px !important;
  border-radius: var(--ctl-radius) !important;

  background: var(--ctl-stone) !important;
  border: 1px solid var(--ctl-stone-border) !important;
  color: var(--tk-ink) !important;

  box-shadow: var(--ctl-stone-shadow) !important;
  text-decoration: none !important;

  transition: transform 160ms var(--ctl-ease),
              box-shadow 220ms var(--ctl-ease),
              border-color 220ms var(--ctl-ease),
              filter 220ms var(--ctl-ease),
              background 220ms var(--ctl-ease) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-tab:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(108,42,34,0.20) !important;
  box-shadow: 0 16px 36px rgba(2,8,6,0.12), inset 0 1px 0 rgba(255,255,255,0.76) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-tab.is-active,
body.asc-portal-page .asc-toolkit-browser .asc-tk-tab[aria-current="page"]{
  background: var(--ctl-active) !important;
  border-color: var(--ctl-active-border) !important;
  box-shadow: var(--ctl-stone-shadow), var(--ctl-active-glow) !important;
}

/* Remove the glossy “active strip” from the black theme (if still present somewhere) */
body.asc-portal-page .asc-toolkit-browser .asc-tk-tab.is-active::after,
body.asc-portal-page .asc-toolkit-browser .asc-tk-tab[aria-current="page"]::after{
  content: none !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-tab__label{
  font-weight: 850 !important;
  font-size: 13px !important;
  letter-spacing: -0.01em !important;
}

/* =========================================================
   B) Row + Actions — Download + Make a copy should belong
========================================================= */

/* Row container polish */
body.asc-portal-page .asc-toolkit-browser .asc-tk-item__row{
  background: var(--tk-row) !important;
  border: 1px solid var(--tk-border-soft) !important;
  box-shadow: var(--tk-shadow-row) !important;
  border-radius: 16px !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-item__row:hover{
  border-color: rgba(108,42,34,0.16) !important;
  box-shadow: 0 24px 70px rgba(2,8,6,0.12), 0 8px 22px rgba(2,8,6,0.08) !important;
}

/* Shared button base */
body.asc-portal-page .asc-toolkit-browser .asc-tk-btn{
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: var(--ctl-radius) !important;

  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;

  transition: transform 160ms var(--ctl-ease),
              box-shadow 220ms var(--ctl-ease),
              border-color 220ms var(--ctl-ease),
              filter 220ms var(--ctl-ease),
              background 220ms var(--ctl-ease) !important;
}

/* Download: stone */
body.asc-portal-page .asc-toolkit-browser .asc-tk-btn--ghost{
  background: var(--ctl-stone) !important;
  border: 1px solid var(--ctl-stone-border) !important;
  color: var(--tk-ink) !important;
  box-shadow: var(--ctl-stone-shadow) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn--ghost:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(108,42,34,0.18) !important;
  box-shadow: 0 16px 36px rgba(2,8,6,0.12), inset 0 1px 0 rgba(255,255,255,0.78) !important;
}

/* Make a copy: maroon-accent premium (NOT solid red, not neon green) */
body.asc-portal-page .asc-toolkit-browser .asc-tk-btn--primary{
  background:
    radial-gradient(160px 90px at 30% 25%, rgba(255,255,255,0.65), transparent 62%),
    linear-gradient(180deg, rgba(108,42,34,0.14), rgba(108,42,34,0.08)) !important;

  border: 1px solid rgba(108,42,34,0.24) !important;
  color: rgba(108,42,34,0.92) !important;

  box-shadow:
    0 12px 30px rgba(108,42,34,0.10),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn--primary:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(108,42,34,0.32) !important;
  box-shadow:
    0 18px 44px rgba(108,42,34,0.14),
    inset 0 1px 0 rgba(255,255,255,0.78) !important;
  filter: saturate(1.03) contrast(1.02) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn:active{
  transform: translateY(0px) scale(0.99) !important;
}

/* =========================================================
   C) Icons — match premium stone system (no “app sticker” feel)
========================================================= */
body.asc-portal-page .asc-toolkit-browser .asc-tk-item__icon{
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;

  background:
    radial-gradient(140px 90px at 30% 25%, rgba(255,255,255,0.70), transparent 62%),
    linear-gradient(180deg, rgba(108,42,34,0.06), rgba(15,23,42,0.03)) !important;

  border: 1px solid rgba(15,23,42,0.10) !important;
  color: rgba(108,42,34,0.70) !important;

  box-shadow: 0 12px 26px rgba(2,8,6,0.08), inset 0 1px 0 rgba(255,255,255,0.70) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-item__row:hover .asc-tk-item__icon{
  border-color: rgba(108,42,34,0.18) !important;
  color: rgba(108,42,34,0.86) !important;
}

/* Breadcrumb links tie into maroon nicely */
body.asc-portal-page .asc-toolkit-browser .asc-tk-breadcrumb__link{
  color: rgba(108,42,34,0.92) !important;
}




/* ---------- 1) Header background + divider ---------- */
body.asc-portal-page .site-header{
  background: var(--asc-top-dark) !important;
  border-bottom: 2px solid var(--asc-divider) !important;

  /* “premium glass” without looking like buttons */
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* If Kadence adds inner wrappers, keep them transparent */
body.asc-portal-page .site-header,
body.asc-portal-page .site-header *{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Header spacing */
body.asc-portal-page .site-header .site-header-inner-wrap,
body.asc-portal-page .site-header .site-header-wrap{
  background: transparent !important;
}

body.asc-portal-page .site-header .site-header-inner-wrap{
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Optional: sticky header */
body.asc-portal-page .site-header-wrap{
  position: sticky;
  top: 0;
  z-index: 999;
}

/* ---------- 2) Logo sizing (clean + readable) ---------- */
body.asc-portal-page .site-header .custom-logo{
  max-height: 46px !important;
  width: auto !important;
}

/* Site title (if you use it) */
body.asc-portal-page .site-header .site-title,
body.asc-portal-page .site-header .site-title a{
  color: var(--asc-text) !important;
}

/* ---------- 3) Navigation: make it "header-like" (NO pills) ---------- */
/* Ensure the menu lays out nicely */
body.asc-portal-page .kadence-navigation .menu,
body.asc-portal-page .primary-menu-container .menu{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  align-items: center !important;
}

/* Base link look: simple, premium, not button */
body.asc-portal-page .kadence-navigation .menu > li > a,
body.asc-portal-page .primary-menu-container .menu > li > a{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: var(--asc-text-dim) !important;
  text-decoration: none !important;

  padding: 8px 2px !important;      /* small click padding */
  border-radius: 0 !important;      /* kill pills */
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: -0.01em !important;

  position: relative !important;
  transition: color 180ms ease, opacity 180ms ease !important;
}

/* Hover: brighten + subtle underline glow */
body.asc-portal-page .kadence-navigation .menu > li > a:hover,
body.asc-portal-page .primary-menu-container .menu > li > a:hover{
  color: var(--asc-text) !important;
}

body.asc-portal-page .kadence-navigation .menu > li > a::after,
body.asc-portal-page .primary-menu-container .menu > li > a::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -6px !important;
  height: 2px !important;
  border-radius: 99px !important;

  background: linear-gradient(90deg, transparent, var(--asc-hover), transparent) !important;
  opacity: 0 !important;
  transform: translateY(2px) !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
  pointer-events: none !important;
}

body.asc-portal-page .kadence-navigation .menu > li > a:hover::after,
body.asc-portal-page .primary-menu-container .menu > li > a:hover::after{
  opacity: 0.9 !important;
  transform: translateY(0) !important;
}

/* Active/current page: solid underline + slightly brighter */
body.asc-portal-page .kadence-navigation .menu > li.current-menu-item > a,
body.asc-portal-page .kadence-navigation .menu > li.current_page_item > a,
body.asc-portal-page .primary-menu-container .menu > li.current-menu-item > a,
body.asc-portal-page .primary-menu-container .menu > li.current_page_item > a{
  color: var(--asc-text) !important;
}

body.asc-portal-page .kadence-navigation .menu > li.current-menu-item > a::after,
body.asc-portal-page .kadence-navigation .menu > li.current_page_item > a::after,
body.asc-portal-page .primary-menu-container .menu > li.current-menu-item > a::after,
body.asc-portal-page .primary-menu-container .menu > li.current_page_item > a::after{
  opacity: 1 !important;
  transform: translateY(0) !important;
  background: linear-gradient(90deg, transparent, rgba(183,245,59,0.95), transparent) !important;
}

/* Keyboard focus */
body.asc-portal-page .kadence-navigation .menu > li > a:focus-visible,
body.asc-portal-page .primary-menu-container .menu > li > a:focus-visible{
  outline: none !important;
  box-shadow: var(--asc-focus-ring) !important;
  border-radius: 10px !important; /* focus ring needs a shape */
  padding: 8px 10px !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
}

/* ---------- 4) Dropdowns (keep them clean) ---------- */
body.asc-portal-page .kadence-navigation .sub-menu{
  background: rgba(4, 20, 12, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.42) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

body.asc-portal-page .kadence-navigation .sub-menu a{
  color: rgba(255,255,255,0.86) !important;
  background: transparent !important;
}

body.asc-portal-page .kadence-navigation .sub-menu a:hover{
  color: rgba(255,255,255,0.96) !important;
  background: rgba(183,245,59,0.10) !important;
}

/* ---------- 5) Mobile: ensure it doesn’t turn into ugly wrap chaos ---------- */
/* Let Kadence mobile toggle handle small screens */
@media (max-width: 960px){
  body.asc-portal-page .kadence-navigation .menu{
    gap: 12px !important;
  }
}

/* Extra small: hide desktop menu if it crowds; Kadence mobile menu should be used */
@media (max-width: 768px){
  body.asc-portal-page .kadence-navigation .menu{
    display: none !important;
  }
}

/* ---------- 6) (Optional) Make the page hero sit flush under header ---------- */
body.asc-portal-page .entry-hero,
body.asc-portal-page .entry-header{
  background: transparent !important;
}


/* 4) Make header text/icons readable */
.site-header, .site-header a, .site-header .site-title a {
  color: rgba(255,255,255,0.92) !important;
}

/* 5) Logo sizing (optional) */
.site-header .custom-logo {
  max-height: 46px !important;
  width: auto !important;
}


/* ---------- 0) Tokens (easy tweaks) ---------- */
body.asc-portal-page{
  --asc-top-dark:
    radial-gradient(1200px 380px at 50% -40px,
      rgba(30, 120, 70, 0.45) 0%,
      rgba(4, 20, 12, 0.95) 58%,
      rgba(2, 12, 8, 1) 100%);

  --asc-divider: rgba(108, 42, 34, 0.92); /* maroon line */

  --asc-text: rgba(255,255,255,0.92);
  --asc-text-dim: rgba(255,255,255,0.78);

  --asc-hover: rgba(183,245,59,0.85); /* lime accent */
  --asc-hover-soft: rgba(183,245,59,0.18);

  --asc-focus-ring: 0 0 0 3px rgba(183,245,59,0.22), 0 0 0 6px rgba(108,42,34,0.18);
}

/* ---------- 1) Header background + divider ---------- */
body.asc-portal-page .site-header{
  background: var(--asc-top-dark) !important;
  border-bottom: 2px solid var(--asc-divider) !important;

  /* “premium glass” without looking like buttons */
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* If Kadence adds inner wrappers, keep them transparent */
body.asc-portal-page .site-header,
body.asc-portal-page .site-header *{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Header spacing */
body.asc-portal-page .site-header .site-header-inner-wrap,
body.asc-portal-page .site-header .site-header-wrap{
  background: transparent !important;
}

body.asc-portal-page .site-header .site-header-inner-wrap{
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Optional: sticky header */
body.asc-portal-page .site-header-wrap{
  position: sticky;
  top: 0;
  z-index: 999;
}

/* ---------- 2) Logo sizing (clean + readable) ---------- */
body.asc-portal-page .site-header .custom-logo{
  max-height: 46px !important;
  width: auto !important;
}

/* Site title (if you use it) */
body.asc-portal-page .site-header .site-title,
body.asc-portal-page .site-header .site-title a{
  color: var(--asc-text) !important;
}

/* ---------- 3) Navigation: make it "header-like" (NO pills) ---------- */
/* Ensure the menu lays out nicely */
body.asc-portal-page .kadence-navigation .menu,
body.asc-portal-page .primary-menu-container .menu{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px !important;
  align-items: center !important;
}

/* Base link look: simple, premium, not button */
body.asc-portal-page .kadence-navigation .menu > li > a,
body.asc-portal-page .primary-menu-container .menu > li > a{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: var(--asc-text-dim) !important;
  text-decoration: none !important;

  padding: 8px 2px !important;      /* small click padding */
  border-radius: 0 !important;      /* kill pills */
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: -0.01em !important;

  position: relative !important;
  transition: color 180ms ease, opacity 180ms ease !important;
}

/* Hover: brighten + subtle underline glow */
body.asc-portal-page .kadence-navigation .menu > li > a:hover,
body.asc-portal-page .primary-menu-container .menu > li > a:hover{
  color: var(--asc-text) !important;
}

body.asc-portal-page .kadence-navigation .menu > li > a::after,
body.asc-portal-page .primary-menu-container .menu > li > a::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -6px !important;
  height: 2px !important;
  border-radius: 99px !important;

  background: linear-gradient(90deg, transparent, var(--asc-hover), transparent) !important;
  opacity: 0 !important;
  transform: translateY(2px) !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
  pointer-events: none !important;
}

body.asc-portal-page .kadence-navigation .menu > li > a:hover::after,
body.asc-portal-page .primary-menu-container .menu > li > a:hover::after{
  opacity: 0.9 !important;
  transform: translateY(0) !important;
}

/* Active/current page: solid underline + slightly brighter */
body.asc-portal-page .kadence-navigation .menu > li.current-menu-item > a,
body.asc-portal-page .kadence-navigation .menu > li.current_page_item > a,
body.asc-portal-page .primary-menu-container .menu > li.current-menu-item > a,
body.asc-portal-page .primary-menu-container .menu > li.current_page_item > a{
  color: var(--asc-text) !important;
}

body.asc-portal-page .kadence-navigation .menu > li.current-menu-item > a::after,
body.asc-portal-page .kadence-navigation .menu > li.current_page_item > a::after,
body.asc-portal-page .primary-menu-container .menu > li.current-menu-item > a::after,
body.asc-portal-page .primary-menu-container .menu > li.current_page_item > a::after{
  opacity: 1 !important;
  transform: translateY(0) !important;
  background: linear-gradient(90deg, transparent, rgba(183,245,59,0.95), transparent) !important;
}

/* Keyboard focus */
body.asc-portal-page .kadence-navigation .menu > li > a:focus-visible,
body.asc-portal-page .primary-menu-container .menu > li > a:focus-visible{
  outline: none !important;
  box-shadow: var(--asc-focus-ring) !important;
  border-radius: 10px !important; /* focus ring needs a shape */
  padding: 8px 10px !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
}

/* ---------- 4) Dropdowns (keep them clean) ---------- */
body.asc-portal-page .kadence-navigation .sub-menu{
  background: rgba(4, 20, 12, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.42) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

body.asc-portal-page .kadence-navigation .sub-menu a{
  color: rgba(255,255,255,0.86) !important;
  background: transparent !important;
}

body.asc-portal-page .kadence-navigation .sub-menu a:hover{
  color: rgba(255,255,255,0.96) !important;
  background: rgba(183,245,59,0.10) !important;
}

/* ---------- 5) Mobile: ensure it doesn’t turn into ugly wrap chaos ---------- */
/* Let Kadence mobile toggle handle small screens */
@media (max-width: 960px){
  body.asc-portal-page .kadence-navigation .menu{
    gap: 12px !important;
  }
}

/* Extra small: hide desktop menu if it crowds; Kadence mobile menu should be used */
@media (max-width: 768px){
  body.asc-portal-page .kadence-navigation .menu{
    display: none !important;
  }
}

/* ---------- 6) (Optional) Make the page hero sit flush under header ---------- */
body.asc-portal-page .entry-hero,
body.asc-portal-page .entry-header{
  background: transparent !important;
}


/* Prevent any ancestor from clipping the full-bleed header */
body.asc-portal-page,
body.asc-portal-page #page,
body.asc-portal-page .site,
body.asc-portal-page .site-wrap{
  overflow-x: visible !important;
}

/* Make the header itself full-bleed */
body.asc-portal-page .site-header,
body.asc-portal-page .site-header-wrap{
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
}

/* Ensure all header inner wrappers can expand */
body.asc-portal-page .site-header .site-header-inner-wrap,
body.asc-portal-page .site-header .site-main-header-wrap,
body.asc-portal-page .site-header .site-top-header-wrap,
body.asc-portal-page .site-header .site-bottom-header-wrap,
body.asc-portal-page .site-header .site-header-row,
body.asc-portal-page .site-header .site-header-row-container,
body.asc-portal-page .site-header .kadence-header-row,
body.asc-portal-page .site-header .kadence-header-row-inner,
body.asc-portal-page .site-header .content-wrap,
body.asc-portal-page .site-header .container{
  width: 100% !important;
  max-width: 100% !important;
}

/* Keep content nicely padded while background is edge-to-edge */
body.asc-portal-page .site-header .site-header-row-container,
body.asc-portal-page .site-header .kadence-header-row-inner{
  padding-left: 24px !important;
  padding-right: 24px !important;
}

@media (max-width: 768px){
  body.asc-portal-page .site-header .site-header-row-container,
  body.asc-portal-page .site-header .kadence-header-row-inner{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


body.asc-portal-page{
  --asc-bg-0: rgba(2,12,8,1);
  --asc-bg-1: rgba(4,20,12,0.96);
  --asc-glow: rgba(30,120,70,0.42);

  --asc-divider: rgba(108,42,34,0.92);     /* maroon */
  --asc-accent: rgba(183,245,59,0.92);     /* lime */
  --asc-text: rgba(255,255,255,0.92);
  --asc-dim: rgba(255,255,255,0.70);
  --asc-dimmer: rgba(255,255,255,0.55);

  --asc-card: rgba(255,255,255,0.06);
  --asc-card-border: rgba(255,255,255,0.10);
  --asc-shadow: 0 20px 60px rgba(0,0,0,0.40);
}

/* ---------- 1) Full footer canvas (depth + structure) ---------- */
body.asc-portal-page .site-footer{
  position: relative !important;
  background:
    radial-gradient(1200px 420px at 50% -120px, var(--asc-glow) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, var(--asc-bg-1) 0%, var(--asc-bg-0) 100%) !important;

  color: var(--asc-text) !important;
  border-top: 2px solid var(--asc-divider) !important;

  padding-top: 44px !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

body.asc-portal-page .site-footer::before{
  /* subtle top sheen line */
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.14), transparent) !important;
  pointer-events: none !important;
}

/* Make common inner wraps transparent (Kadence varies by layout) */
body.asc-portal-page .site-footer .site-footer-inner-wrap,
body.asc-portal-page .site-footer .site-footer-wrap,
body.asc-portal-page .site-footer .footer-inner-wrap,
body.asc-portal-page .site-footer .footer-wrap,
body.asc-portal-page .site-footer .content-wrap,
body.asc-portal-page .site-footer .container{
  background: transparent !important;
}

/* ---------- 2) Typography hierarchy (this is where "premium" lives) ---------- */
body.asc-portal-page .site-footer,
body.asc-portal-page .site-footer p,
body.asc-portal-page .site-footer li{
  font-size: 14px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.asc-portal-page .site-footer .widget-title,
body.asc-portal-page .site-footer h1,
body.asc-portal-page .site-footer h2,
body.asc-portal-page .site-footer h3{
  color: var(--asc-text) !important;
  font-weight: 850 !important;
  letter-spacing: -0.012em !important;
  margin: 0 0 12px 0 !important;
}

body.asc-portal-page .site-footer p{
  color: var(--asc-dim) !important;
  margin: 0 0 12px 0 !important;
}

/* ---------- 3) Link styling (clean, product-like) ---------- */
body.asc-portal-page .site-footer a{
  color: rgba(255,255,255,0.86) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

body.asc-portal-page .site-footer a:hover{
  color: var(--asc-accent) !important;
  border-bottom-color: rgba(183,245,59,0.55);
}

/* Remove default list bullets and tighten spacing */
body.asc-portal-page .site-footer ul{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
body.asc-portal-page .site-footer li{
  margin: 9px 0 !important;
}

/* ---------- 4) Make widget areas look like intentional sections ---------- */
/* Works on Kadence widget footer and many block-based footers */
body.asc-portal-page .site-footer .widget,
body.asc-portal-page .site-footer .wp-block-group,
body.asc-portal-page .site-footer .wp-block-columns{
  margin-bottom: 18px !important;
}

/* Add a "panel" feel to footer columns (subtle, not boxy) */
body.asc-portal-page .site-footer .footer-widget-area,
body.asc-portal-page .site-footer .footer-widget,
body.asc-portal-page .site-footer .wp-block-column{
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;

  padding: 18px 18px !important;
}


body.asc-portal-page .site-footer .wp-block-social-links .wp-social-link a,
body.asc-portal-page .site-footer .kadence-social-style .social-item a{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 140ms ease, border-color 160ms ease;
}
body.asc-portal-page .site-footer .wp-block-social-links .wp-social-link a:hover,
body.asc-portal-page .site-footer .kadence-social-style .social-item a:hover{
  transform: translateY(-1px);
  border-color: rgba(183,245,59,0.40) !important;
}

/* ---------- 6) Premium "bottom bar" (copyright row look) ---------- */
body.asc-portal-page .site-footer .site-info,
body.asc-portal-page .site-footer .footer-bottom,
body.asc-portal-page .site-footer .footer-bottom-area{
  margin-top: 26px !important;
  padding: 14px 0 18px 0 !important;

  border-top: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);

  color: var(--asc-dimmer) !important;
  font-size: 13px !important;
}

/* If Kadence puts bottom content inside a container, give it nicer spacing */
body.asc-portal-page .site-footer .site-info,
body.asc-portal-page .site-footer .footer-bottom-area{
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ---------- 7) Mobile polish ---------- */
@media (max-width: 768px){
  body.asc-portal-page .site-footer{
    padding-top: 32px !important;
  }

  body.asc-portal-page .site-footer .footer-widget-area,
  body.asc-portal-page .site-footer .footer-widget,
  body.asc-portal-page .site-footer .wp-block-column{
    border-radius: 14px !important;
    padding: 16px !important;
  }

  body.asc-portal-page .site-footer .site-info,
  body.asc-portal-page .site-footer .footer-bottom-area{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


.asc-portal.asc-eco{
  --asc-surface: rgba(255,255,255,0.86);
  --asc-surface-2: rgba(255,255,255,0.72);
  --asc-border: rgba(15, 23, 42, 0.10);
  --asc-ink: rgba(15, 23, 42, 0.92);
  --asc-muted: rgba(15, 23, 42, 0.62);

  --asc-brand-1: #0b2a1b;      /* deep green */
  --asc-brand-2: #0f3d26;      /* green */
  --asc-lime: #b7f53b;         /* accent */
  --asc-maroon: #6c2a22;       /* divider */

  --asc-shadow: 0 18px 50px rgba(2, 12, 8, 0.18);
  --asc-shadow-hover: 0 28px 80px rgba(2, 12, 8, 0.26);
}

/* ---- 1) Panel: less “boxy”, cleaner stage ---- */
.asc-portal.asc-eco .asc-eco__panel{
  border-radius: 18px !important;
  background:
    radial-gradient(900px 420px at 15% 0%,
      rgba(183,245,59,0.10) 0%,
      rgba(255,255,255,0.0) 55%),
    linear-gradient(180deg,
      rgba(255,255,255,0.76) 0%,
      rgba(255,255,255,0.60) 100%) !important;

  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 24px 70px rgba(2, 12, 8, 0.16) !important;
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  padding: 22px !important;
}

/* ---- 2) Grid: consistent spacing + responsive columns ---- */
.asc-portal.asc-eco .asc-eco__grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

@media (max-width: 980px){
  .asc-portal.asc-eco .asc-eco__grid{
    grid-template-columns: 1fr !important;
  }
}

/* ---- 3) Card: premium composition ---- */
.asc-portal.asc-eco .asc-eco__card.asc-eco__card--premium{
  position: relative !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.86) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow: var(--asc-shadow) !important;

  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  min-height: 240px !important;

  overflow: hidden !important;
  transform-style: preserve-3d;
}

/* subtle top accent line */
.asc-portal.asc-eco .asc-eco__card.asc-eco__card--premium::before{
  content: "" !important;
  position: absolute !important;
  left: 0; right: 0; top: 0;
  height: 2px !important;
  background: linear-gradient(90deg, var(--asc-maroon), rgba(183,245,59,0.0)) !important;
  opacity: 0.9 !important;
}

/* hover/focus polish */
@media (hover:hover){
  .asc-portal.asc-eco .asc-eco__card.asc-eco__card--premium:hover{
    box-shadow: var(--asc-shadow-hover) !important;
  }
}
.asc-portal.asc-eco .asc-eco__card.asc-eco__card--premium:focus-within{
  outline: 3px solid rgba(183,245,59,0.35) !important;
  outline-offset: 2px !important;
}

/* ---- 4) Header: real “status pill” + title hierarchy ---- */
.asc-portal.asc-eco .asc-eco__header{
  padding: 16px 16px 10px 16px !important;
}

.asc-portal.asc-eco .asc-eco__sub{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: rgba(15, 23, 42, 0.72) !important;

  background: rgba(183,245,59,0.18) !important;
  border: 1px solid rgba(183,245,59,0.35) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
}

.asc-portal.asc-eco .asc-eco__sub::before{
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(34, 197, 94, 0.95) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}

.asc-portal.asc-eco .asc-eco__header .asc-eco__title{
  margin: 10px 0 0 0 !important;
  color: var(--asc-ink) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  font-size: 18px !important;
  line-height: 1.15 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ---- 5) Media: force a consistent cover frame (fixes cropping/scale weirdness) ---- */
.asc-portal.asc-eco .asc-eco__media{
  margin: 8px 16px 14px 16px !important;

  border-radius: 14px !important;
  background:
    radial-gradient(800px 240px at 50% 0%,
      rgba(11,42,27,0.12) 0%,
      rgba(255,255,255,0.0) 55%),
    linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.55)) !important;

  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  overflow: hidden !important;

  /* consistent presentation area */
  aspect-ratio: 16 / 9;
  display: grid !important;
  place-items: center !important;
}

.asc-portal.asc-eco .asc-eco__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* makes covers look “intentional” */
  padding: 10px !important;
  filter: saturate(1.02) contrast(1.02);
}

/* ---- 6) Footer CTA: turn “Open Toolkit” into a premium action bar ---- */
.asc-portal.asc-eco .asc-eco__footer{
  padding: 0 16px 16px 16px !important;
}

.asc-portal.asc-eco .asc-eco__tab.asc-eco__tab--cta{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  width: 100% !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;

  color: rgba(255,255,255,0.92) !important;
  background: linear-gradient(135deg, var(--asc-brand-2), var(--asc-brand-1)) !important;

  border: 1px solid rgba(183,245,59,0.22) !important;
  box-shadow:
    0 10px 26px rgba(2,12,8,0.18),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;

  text-decoration: none !important;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.asc-portal.asc-eco .asc-eco__tab.asc-eco__tab--cta .asc-eco__tablabel{
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}

.asc-portal.asc-eco .asc-eco__tab.asc-eco__tab--cta .asc-eco__tabicon{
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: rgba(183,245,59,0.14) !important;
  border: 1px solid rgba(183,245,59,0.26) !important;
}

@media (hover:hover){
  .asc-portal.asc-eco .asc-eco__tab.asc-eco__tab--cta:hover{
    transform: translateY(-1px) !important;
    border-color: rgba(183,245,59,0.38) !important;
    box-shadow:
      0 16px 34px rgba(2,12,8,0.22),
      inset 0 1px 0 rgba(255,255,255,0.12) !important;
  }
}

.asc-portal.asc-eco .asc-eco__tab.asc-eco__tab--cta:focus-visible{
  outline: 3px solid rgba(183,245,59,0.35) !important;
  outline-offset: 2px !important;
}


@media (prefers-reduced-motion: reduce){
  .asc-portal.asc-eco .asc-eco__card,
  .asc-portal.asc-eco .asc-eco__tab{
    transition: none !important;
  }
}


body.asc-portal-page .asc-portal.asc-eco{

  --p-ink: rgba(15,23,42,.92);
  --p-ink-2: rgba(15,23,42,.70);
  --p-border: rgba(15,23,42,.10);

  --p-ivory:
    radial-gradient(900px 520px at 18% 8%, rgba(31,182,78,0.06), transparent 62%),
    radial-gradient(900px 520px at 82% 0%, rgba(108,42,34,0.05), transparent 60%),
    linear-gradient(180deg, #f7f7f3 0%, #f1f2ed 55%, #eceee8 100%);

  --p-g0: #3a424a;
  --p-g1: #22282e;
  --p-g2: #13171b;
  --p-graphite: linear-gradient(180deg, var(--p-g0) 0%, var(--p-g1) 55%, var(--p-g2) 100%);
  --p-gloss: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 52%);
  --p-pill-border: rgba(255,255,255,0.16);

  --p-shadow-pill: 0 10px 22px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10);
  --p-shadow-pill-h: 0 16px 36px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);

  --p-shadow-panel:
    0 40px 120px rgba(2, 8, 6, 0.16),
    0 12px 38px rgba(2, 8, 6, 0.10);

  --p-shadow-card:
    0 22px 70px rgba(2, 8, 6, 0.14),
    0 8px 22px rgba(2, 8, 6, 0.08);

  --p-ring: 0 0 0 4px rgba(183,245,59,0.16), 0 0 0 7px rgba(108,42,34,0.14);

  --p-r-lg: 18px;
  --p-r-md: 16px;
  --p-r-pill: 999px;
}



body.asc-portal-page,
body.asc-portal-page .asc-portal.asc-eco,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__main{
  background: var(--p-ivory) !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__main{
  margin-top: 0 !important;
  padding-top: 22px !important;
  padding-bottom: 70px !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__panel{
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86)) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: var(--p-r-lg) !important;
  box-shadow: var(--p-shadow-panel) !important;


  padding: 24px !important;
  padding-top: calc(var(--rail-top, 16px) + var(--rail-height, 12px) + var(--rail-gap, 18px)) !important;
}



body.asc-portal-page .asc-portal.asc-eco .asc-eco__grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
}

@media (max-width: 980px){
  body.asc-portal-page .asc-portal.asc-eco .asc-eco__grid{
    grid-template-columns: 1fr !important;
  }
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium{
  width: 100% !important;
  max-width: none !important;

  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: var(--p-r-md) !important;
  box-shadow: var(--p-shadow-card) !important;

  overflow: hidden !important;

  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  grid-template-areas:
    "header media"
    "footer media" !important;
  gap: 16px !important;

  padding: 18px !important;
  transform: none !important;
}

@media (max-width: 760px){
  body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "header"
      "media"
      "footer" !important;
  }
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__header{
  grid-area: header !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 10px 26px rgba(2,8,6,.06) !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__title{
  color: var(--p-ink) !important;
  text-shadow: none !important;
  margin: 10px 0 0 0 !important;
  font-size: 18px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  font-weight: 900 !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__sub{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  width: fit-content !important;
  padding: 8px 12px !important;
  border-radius: var(--p-r-pill) !important;

  background: rgba(15,23,42,.06) !important;
  border: 1px solid rgba(15,23,42,.10) !important;

  color: rgba(15,23,42,.82) !important;
  font-weight: 850 !important;
  font-size: 12.5px !important;
}


body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__sub span{
  opacity: .75;
  font-weight: 850;
}
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__sub strong{
  font-weight: 950;
}



body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__media{
  grid-area: media !important;

  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  overflow: hidden !important;

  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  background: linear-gradient(180deg, rgba(15,23,42,.035), rgba(15,23,42,.015)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65) !important;

  display: grid !important;
  place-items: center !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; 
  object-position: center !important;
  padding: 10px !important;       
  background: transparent !important;
}


body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__pill{
  background: var(--p-gloss), var(--p-graphite) !important;
  border: 1px solid var(--p-pill-border) !important;
  color: rgba(255,255,255,.92) !important;

  border-radius: var(--p-r-pill) !important;
  box-shadow: var(--p-shadow-pill) !important;

  backdrop-filter: blur(12px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%) !important;

  transform: translateZ(0);
  transition: transform 180ms cubic-bezier(.2,.85,.2,1),
              box-shadow 220ms cubic-bezier(.2,.85,.2,1),
              border-color 220ms cubic-bezier(.2,.85,.2,1),
              filter 220ms cubic-bezier(.2,.85,.2,1),
              background 220ms cubic-bezier(.2,.85,.2,1) !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__pill:hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--p-shadow-pill-h) !important;
  border-color: rgba(255,255,255,.22) !important;
  filter: saturate(1.06) contrast(1.02) !important;
}


body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab--cta{
  min-height: 44px !important;
  padding: 0 16px !important;
  border-color: rgba(183,245,59,.28) !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab:focus-visible,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn:focus-visible,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__pill:focus-visible{
  outline: none !important;
  box-shadow: var(--p-shadow-pill-h), var(--p-ring) !important;
}


body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__footer{
  grid-area: footer !important;
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}


body.asc-portal-page .asc-portal.asc-eco .asc-eco__card{
  grid-template-columns: unset !important;
}
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__media{
  width: 100% !important;
  margin: 10px 0 0 0 !important; 
  aspect-ratio: 16 / 10 !important;
  min-height: 170px !important;   
  border-radius: 14px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__media img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;     
  max-height: none !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__media{
  overflow: hidden !important;   
  display: grid !important;
  place-items: center !important;

  aspect-ratio: 16 / 10 !important;
  min-height: 190px !important;

  padding: 12px !important;       
  background: rgba(15,23,42,0.03) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  border-radius: 14px !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__media img{
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important; 
  object-position: center !important;

  padding: 0 !important;         
  transform: none !important;     
  filter: none !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card::after{
  opacity: 0 !important;
  background: none !important;
}


body.asc-portal-page .asc-portal.asc-eco .asc-eco__card,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium{
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium:hover{
  filter: none !important;
  transform: translateY(-2px) !important;
  border-color: rgba(15,23,42,0.12) !important;

  box-shadow:
    0 18px 60px rgba(2, 8, 6, 0.12),
    0 6px 18px rgba(2, 8, 6, 0.08) !important;
}


body.asc-portal-page .asc-portal.asc-eco .asc-eco__card:focus-within{
  outline: none !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card{
  transform-style: flat !important;
}
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card:hover{
  transform: translateY(-2px) !important; 
}


/* ------------------------------
   2) Image: NO CROP, EVER
   (Also stops “weird sizing” by killing theme max-width/max-height)
------------------------------ */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__media{
  width: 100% !important;
  margin: 0 !important;

  aspect-ratio: 16 / 10 !important;
  min-height: 190px !important;

  padding: 12px !important;
  border-radius: 14px !important;
  overflow: hidden !important;

  display: grid !important;
  place-items: center !important;

  background: rgba(15,23,42,0.03) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65) !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__media img{
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important;     /* <-- NO CROP */
  object-position: center !important;

  padding: 0 !important;
  margin: 0 !important;

  transform: none !important;         /* kills any zoom rules */
  filter: none !important;            /* kills image “glow” tweaks */
}

/* ------------------------------
   3) Remove the ugly hover glow + sheen overlay
   (You had a hover sheen via ::after + heavy hover shadows/filters.)
------------------------------ */

/* Kill the sheen layer globally on portal cards */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card::after{
  content: none !important;
  opacity: 0 !important;
  background: none !important;
}

/* Calm premium hover (no green halo) */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium{
  filter: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium:hover{
  filter: none !important;
  border-color: rgba(15,23,42,0.12) !important;

  box-shadow:
    0 18px 60px rgba(2, 8, 6, 0.12),
    0 6px 18px rgba(2, 8, 6, 0.08) !important;
}

/* Remove focus outline glow on card (you can keep button focus rings) */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card:focus-within{
  outline: none !important;
}

/* ------------------------------
   4) Disable the JS “tilt” effect (it writes inline transforms)
   This override beats inline styles because of !important.
------------------------------ */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card{
  transform: none !important;
  transform-style: flat !important;
  will-change: auto !important;
}
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card:hover{
  transform: translateY(-2px) !important;
}

/* ------------------------------
   5) Button sanity: keep your look, remove “extra” effects
   (Stops button glow/filters from other blocks.)
------------------------------ */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__pill{
  filter: none !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__pill:hover{
  filter: none !important;
}
/* =========================================================
ASC Portal — PREMIUM POLISH PASS (final overrides)
Paste RAW at end of Additional CSS (no backticks)
========================================================= */

body.asc-portal-page .asc-portal.asc-eco{
--pp-ink: rgba(15,23,42,.92);
--pp-ink2: rgba(15,23,42,.72);
--pp-line: rgba(15,23,42,.10);

--pp-card: rgba(255,255,255,.94);
--pp-card2: rgba(255,255,255,.88);

--pp-shadow-card: 0 18px 55px rgba(2,8,6,.10), 0 6px 18px rgba(2,8,6,.06);
--pp-shadow-card-h: 0 24px 80px rgba(2,8,6,.12), 0 8px 22px rgba(2,8,6,.08);

--pp-shadow-soft-inset: inset 0 1px 0 rgba(255,255,255,.70);

--pp-pill: rgba(15,23,42,.06);
--pp-pill-border: rgba(15,23,42,.10);

--pp-radius: 16px;
--pp-radius-sm: 14px;
--pp-radius-pill: 999px;

--pp-graphite: linear-gradient(180deg, #3a424a 0%, #22282e 55%, #13171b 100%);
--pp-graphite-gloss: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 52%);
--pp-graphite-border: rgba(255,255,255,0.16);
--pp-shadow-pill: 0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
--pp-shadow-pill-h: 0 14px 30px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.12);
}

/* ---------- Panel: less “big box”, more premium stage ---------- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__panel{
border-radius: 18px !important;
padding: 22px !important;
box-shadow: 0 34px 110px rgba(2,8,6,.14), 0 10px 30px rgba(2,8,6,.08) !important;
}

/* ---------- Grid spacing: breathe but not cavernous ---------- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__grid{
gap: 16px !important;
}

/* ---------- Card: calmer shadows + better composition ---------- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium{
background: linear-gradient(180deg, var(--pp-card), var(--pp-card2)) !important;
border: 1px solid rgba(15,23,42,.08) !important;
border-radius: var(--pp-radius) !important;
box-shadow: var(--pp-shadow-card) !important;

padding: 16px !important;
gap: 14px !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium:hover{
transform: translateY(-2px) !important;
box-shadow: var(--pp-shadow-card-h) !important;
border-color: rgba(15,23,42,.12) !important;
}

/* Kill any top “accent bar” you had (it cheapens the card) */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium::before{
content: none !important;
}

/* ---------- Header: clean hierarchy ---------- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__header{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;

display: grid !important;
gap: 10px !important;
}

/* Status pill: smaller, calmer, consistent */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__sub{
background: rgba(15,23,42,.06) !important;
border: 1px solid rgba(15,23,42,.10) !important;
border-radius: var(--pp-radius-pill) !important;

padding: 7px 10px !important;
font-size: 12px !important;
font-weight: 850 !important;
color: rgba(15,23,42,.78) !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__sub::before{
/* softer dot, less “neon” */
width: 9px !important;
height: 9px !important;
box-shadow: 0 0 0 3px rgba(34,197,94,.10) !important;
}

/* Title: more “product” */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__title{
margin: 0 !important;
color: var(--pp-ink) !important;
font-weight: 950 !important;
font-size: 18px !important;
letter-spacing: -0.02em !important;
line-height: 1.15 !important;
}

/* ---------- Media frame: consistent, clean, no crop ---------- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__media{
border-radius: var(--pp-radius-sm) !important;
border: 1px solid rgba(15,23,42,.10) !important;
background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.015)) !important;
box-shadow: var(--pp-shadow-soft-inset) !important;

aspect-ratio: 16 / 10 !important;
min-height: 180px !important;
padding: 12px !important;
overflow: hidden !important;

display: grid !important;
place-items: center !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__media img{
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;

object-fit: contain !important;   /* no cropping */
object-position: center !important;

padding: 0 !important;
margin: 0 !important;
transform: none !important;
filter: none !important;
}

/* ---------- Footer + CTA: make it look like a premium control ---------- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__footer{
padding: 0 !important;
justify-content: flex-start !important;
}

/* Button: slimmer, crisper, less “blob” */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab.asc-eco__tab--cta{
width: auto !important;
min-width: 170px !important;
height: 42px !important;

padding: 0 14px !important;
border-radius: var(--pp-radius-pill) !important;

background: var(--pp-graphite-gloss), var(--pp-graphite) !important;
border: 1px solid var(--pp-graphite-border) !important;

box-shadow: var(--pp-shadow-pill) !important;
text-decoration: none !important;

display: inline-flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab.asc-eco__tab--cta:hover{
transform: translateY(-1px) !important;
box-shadow: var(--pp-shadow-pill-h) !important;
border-color: rgba(255,255,255,0.22) !important;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab.asc-eco__tab--cta .asc-eco__tablabel{
font-weight: 850 !important;
letter-spacing: -0.01em !important;
font-size: 13px !important;
}

/* Icon bubble: smaller + tighter */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab.asc-eco__tab--cta .asc-eco__tabicon{
width: 30px !important;
height: 30px !important;
border-radius: 999px !important;
background: rgba(183,245,59,0.10) !important;
border: 1px solid rgba(183,245,59,0.18) !important;
}

/* ---------- Remove any remaining “sheen overlay” glow ---------- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card::after{
content: none !important;
}

/* ---------- Typography smoothing (small, but it helps) ---------- */
body.asc-portal-page .asc-portal.asc-eco,
body.asc-portal-page .asc-portal.asc-eco *{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* ---------- Mobile: make button full width for a “native app” feel ---------- */
@media (max-width: 760px){
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab.asc-eco__tab--cta{
width: 100% !important;
justify-content: space-between !important;
}
}

/* =========================================================
   ASC PORTAL — SINGLE SOURCE OF TRUTH (Premium + Stable)
   Paste at VERY END (after disabling the conflicting blocks)
========================================================= */

body.asc-portal-page .asc-portal.asc-eco{
  --ink: rgba(15,23,42,.92);
  --ink2: rgba(15,23,42,.72);
  --line: rgba(15,23,42,.10);

  --ivory:
    radial-gradient(900px 520px at 18% 8%, rgba(31,182,78,0.06), transparent 62%),
    radial-gradient(900px 520px at 82% 0%, rgba(108,42,34,0.05), transparent 60%),
    linear-gradient(180deg, #f7f7f3 0%, #f1f2ed 55%, #eceee8 100%);

  --top-dark: radial-gradient(1200px 380px at 50% -40px,
    rgba(30,120,70,0.45) 0%,
    rgba(4,20,12,0.95) 58%,
    rgba(2,12,8,1) 100%);

  --graphite: linear-gradient(180deg, #3a424a 0%, #22282e 55%, #13171b 100%);
  --gloss: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 52%);
  --pill-border: rgba(255,255,255,0.16);

  --sh-panel: 0 40px 120px rgba(2,8,6,0.16), 0 12px 38px rgba(2,8,6,0.10);
  --sh-card: 0 22px 70px rgba(2,8,6,0.14), 0 8px 22px rgba(2,8,6,0.08);
  --sh-pill: 0 10px 22px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10);
  --sh-pill-h: 0 16px 36px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.12);

  --r-lg: 18px;
  --r-md: 16px;
  --r-sm: 14px;
  --r-pill: 999px;

  --ease: cubic-bezier(.2,.85,.2,1);
}

/* --- Top section (appbar + hero) stays dark --- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__appbar,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__hero{
  background: var(--top-dark) !important;
}

/* --- Bottom canvas stays premium ivory --- */
body.asc-portal-page,
body.asc-portal-page .asc-portal.asc-eco,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__page,
body.asc-portal-page .asc-portal.asc-eco main,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__main{
  background: var(--ivory) !important;
}

/* --- Main spacing (stop “pull-up” conflicts) --- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__main{
  margin-top: 0 !important;
  padding-top: 18px !important;
  padding-bottom: 70px !important;
}

/* --- Panel: clean glass, centered --- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__panel{
  position: relative !important;
  overflow: hidden !important;

  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.86)) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-panel) !important;

  padding: 24px !important;
  padding-top: calc(16px + 12px + 18px) !important; /* rail-top + rail-height + rail-gap */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Single black animated rail (ONLY rail system) --- */
body.asc-portal-page .asc-portal.asc-eco{
  --barA: -160%;
  --barB: -220%;
}
body.asc-portal-page .asc-portal.asc-eco .asc-eco__panel::after{
  content: "" !important;
  position: absolute !important;
  left: 22px !important;
  right: 22px !important;
  top: 16px !important;
  height: 12px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  z-index: 0 !important;

  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 18%, transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 55%, rgba(0,0,0,0.40)),
    linear-gradient(90deg, #07090c, #0f1216, #07090c) !important;

  background-size: 220% 100%, 100% 100%, 100% 100% !important;
  background-position: var(--barA) 0, 0 0, 0 0 !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 rgba(0,0,0,0.45) inset,
    0 10px 22px rgba(0,0,0,0.22) !important;
}
body.asc-portal-page .asc-portal.asc-eco .asc-eco__panel::before{
  content: "" !important;
  position: absolute !important;
  left: 22px !important;
  right: 22px !important;
  top: 16px !important;
  height: 12px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  z-index: 0 !important;

  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.38) 22%, transparent 48%),
    linear-gradient(90deg, transparent 0%, rgba(183,245,59,0.18) 28%, transparent 52%, rgba(57,211,83,0.12) 76%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.00) 60%) !important;

  background-size: 240% 100%, 220% 100%, 100% 100% !important;
  background-position: var(--barB) 0, var(--barB) 0, 0 0 !important;

  opacity: 0.95 !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.14));
}
body.asc-portal-page .asc-portal.asc-eco .asc-eco__panel > *{
  position: relative !important;
  z-index: 1 !important;
}

/* --- Grid --- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}
@media (max-width: 980px){
  body.asc-portal-page .asc-portal.asc-eco .asc-eco__grid{ grid-template-columns: 1fr !important; }
}

/* --- Premium card layout --- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium{
  width: 100% !important;
  max-width: none !important;

  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  grid-template-areas: "header media" "footer media" !important;
  gap: 14px !important;

  padding: 16px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: var(--sh-card) !important;

  overflow: hidden !important;
  transform: none !important;
}
@media (max-width: 760px){
  body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium{
    grid-template-columns: 1fr !important;
    grid-template-areas: "header" "media" "footer" !important;
  }
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__header{ grid-area: header !important; }
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__media{ grid-area: media !important; }
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__footer{
  grid-area: footer !important;
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

/* --- No glow / no sheen hover --- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card::after{ content: none !important; }
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 24px 80px rgba(2,8,6,0.12), 0 8px 22px rgba(2,8,6,0.08) !important;
}

/* --- Card typography polish --- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__title{
  color: var(--ink) !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}
body.asc-portal-page .asc-portal.asc-eco .asc-eco__sub{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: fit-content !important;

  padding: 7px 10px !important;
  border-radius: var(--r-pill) !important;

  background: rgba(15,23,42,0.06) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  color: rgba(15,23,42,0.78) !important;
  font-weight: 850 !important;
  font-size: 12px !important;
}

/* --- Media: NO CROP EVER --- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__media{
  aspect-ratio: 16 / 10 !important;
  min-height: 180px !important;
  padding: 12px !important;

  border-radius: var(--r-sm) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  background: linear-gradient(180deg, rgba(15,23,42,0.03), rgba(15,23,42,0.015)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65) !important;

  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
body.asc-portal-page .asc-portal.asc-eco .asc-eco__card--premium .asc-eco__media img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 0 !important;
  transform: none !important;
  filter: none !important;
}

/* --- Graphite-glass buttons everywhere (tabs, email pill, logout, Open Toolkit) --- */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__pill{
  background: var(--gloss), var(--graphite) !important;
  border: 1px solid var(--pill-border) !important;
  color: rgba(255,255,255,0.92) !important;

  border-radius: var(--r-pill) !important;
  box-shadow: var(--sh-pill) !important;

  transition: transform 180ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease) !important;
}
body.asc-portal-page .asc-portal.asc-eco .asc-eco__tab:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn:hover,
body.asc-portal-page .asc-portal.asc-eco .asc-eco__pill:hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--sh-pill-h) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* Email pill clamp */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__pill{
  max-width: 360px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* =========================================================
   ASC TOOLKIT BROWSER — Premium Skin (Scoped)
   Target: .asc-toolkit-browser
   Paste at VERY END of stylesheet
========================================================= */

body.asc-portal-page .asc-toolkit-browser{
  /* Canvas + surfaces */
  --tk-canvas:
    radial-gradient(900px 520px at 18% 10%, rgba(31,182,78,0.06), transparent 62%),
    radial-gradient(900px 520px at 82% 0%, rgba(108,42,34,0.06), transparent 60%),
    linear-gradient(180deg, #f7f7f3 0%, #f1f2ed 55%, #eceee8 100%);

  --tk-hero:
    radial-gradient(1200px 380px at 50% -40px,
      rgba(30, 120, 70, 0.45) 0%,
      rgba(4, 20, 12, 0.95) 58%,
      rgba(2, 12, 8, 1) 100%);

  --tk-panel: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.86));
  --tk-row: rgba(255,255,255,0.96);

  /* Ink */
  --tk-ink: rgba(15,23,42,0.92);
  --tk-ink-2: rgba(15,23,42,0.66);

  /* Brand accent */
  --tk-maroon: rgba(108,42,34,0.92);
  --tk-maroon-soft: rgba(108,42,34,0.14);

  /* Borders + shadow system */
  --tk-border: rgba(15,23,42,0.10);
  --tk-border-soft: rgba(15,23,42,0.08);

  --tk-shadow-panel:
    0 40px 120px rgba(2, 8, 6, 0.14),
    0 12px 38px rgba(2, 8, 6, 0.10);

  --tk-shadow-row:
    0 18px 60px rgba(2,8,6,0.10),
    0 6px 18px rgba(2,8,6,0.06);

  --tk-shadow-row-hover:
    0 26px 78px rgba(2,8,6,0.14),
    0 10px 26px rgba(2,8,6,0.08);

  --tk-radius-lg: 20px;
  --tk-radius-md: 16px;
  --tk-radius-pill: 999px;

  --tk-ease: cubic-bezier(.2,.85,.2,1);

  color: var(--tk-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -----------------------------
   HERO
------------------------------ */
body.asc-portal-page .asc-toolkit-browser .asc-tk-hero{
  background: var(--tk-hero) !important;
  padding: clamp(44px, 5vw, 74px) 0 clamp(20px, 3vw, 34px);
  position: relative;
  overflow: hidden;
}

/* subtle texture */
body.asc-portal-page .asc-toolkit-browser .asc-tk-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.06;
  pointer-events:none;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-hero__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 2.2vw, 28px);
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.92);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-hero__kicker{
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--tk-radius-pill);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 850;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-hero__title{
  margin: 14px 0 10px !important;
  font-size: clamp(30px, 3.6vw, 46px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em;
  font-weight: 950 !important;
  color: rgba(255,255,255,0.96) !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-hero__sub{
  margin: 0 !important;
  max-width: 72ch;
  color: rgba(255,255,255,0.84) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  line-height: 1.75 !important;
}

/* -----------------------------
   MAIN CANVAS + DIVIDER
------------------------------ */
body.asc-portal-page .asc-toolkit-browser .asc-tk-main{
  background: var(--tk-canvas) !important;
  padding: 18px 0 70px;
  position: relative;
}

/* full-bleed maroon divider (clean + deliberate) */
body.asc-portal-page .asc-toolkit-browser .asc-tk-main::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 3px;
  background: var(--tk-maroon);
  box-shadow: 0 1px 0 rgba(0,0,0,0.28);
}

/* -----------------------------
   PANEL (centered, luxe)
------------------------------ */
body.asc-portal-page .asc-toolkit-browser .asc-tk-panel{
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--tk-radius-lg);

  background: var(--tk-panel) !important;
  border: 1px solid var(--tk-border) !important;
  box-shadow: var(--tk-shadow-panel) !important;

  position: relative;
  overflow: hidden;
}

/* faint “surface layer” so big panels don’t feel empty */
body.asc-portal-page .asc-toolkit-browser .asc-tk-panel::after{
  content: "";
  position: absolute;
  inset: 14px 14px 14px 52%;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15,23,42,0.035), rgba(15,23,42,0.012));
  pointer-events: none;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-panel > *{
  position: relative;
  z-index: 1;
}

/* -----------------------------
   BREADCRUMB
------------------------------ */
body.asc-portal-page .asc-toolkit-browser .asc-tk-breadcrumb{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 6px 0 18px;
  color: var(--tk-ink-2);
  font-weight: 750;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-breadcrumb__link{
  color: rgba(108,42,34,0.92);
  text-decoration: none;
  font-weight: 900;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-breadcrumb__link:hover{
  text-decoration: underline;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-breadcrumb__sep{
  opacity: 0.45;
}

/* -----------------------------
   LIST + ROWS
------------------------------ */
body.asc-portal-page .asc-toolkit-browser .asc-tk-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-item__row{
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 12px;
  align-items: center;

  padding: 14px 14px;
  border-radius: var(--tk-radius-md);

  background: var(--tk-row) !important;
  border: 1px solid var(--tk-border-soft) !important;
  box-shadow: var(--tk-shadow-row) !important;

  text-decoration: none;
  color: var(--tk-ink);

  transition:
    transform 180ms var(--tk-ease),
    box-shadow 240ms var(--tk-ease),
    border-color 220ms var(--tk-ease),
    background 220ms var(--tk-ease);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-item__row:hover{
  transform: translateY(-1px);
  border-color: rgba(108,42,34,0.16);
  box-shadow: var(--tk-shadow-row-hover);
}

/* icon badge (stone + maroon ink) */
body.asc-portal-page .asc-toolkit-browser .asc-tk-item__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(140px 90px at 30% 25%, rgba(255,255,255,0.70), transparent 62%),
    linear-gradient(180deg, rgba(108,42,34,0.06), rgba(15,23,42,0.03)) !important;

  border: 1px solid rgba(15,23,42,0.10);
  color: rgba(108,42,34,0.72);

  box-shadow:
    0 12px 26px rgba(2,8,6,0.08),
    inset 0 1px 0 rgba(255,255,255,0.70);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-item__row:hover .asc-tk-item__icon{
  border-color: rgba(108,42,34,0.18);
  color: rgba(108,42,34,0.88);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-item__name{
  font-weight: 900;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-item__meta{
  color: var(--tk-ink-2);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

/* -----------------------------
   ACTIONS + BUTTONS
------------------------------ */
body.asc-portal-page .asc-toolkit-browser .asc-tk-actions{
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn{
  height: 40px;
  padding: 0 14px;
  border-radius: var(--tk-radius-pill);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none !important;
  font-weight: 900;
  letter-spacing: -0.01em;

  border: 1px solid rgba(15,23,42,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  color: rgba(15,23,42,0.90);

  box-shadow:
    0 10px 22px rgba(2,8,6,0.10),
    inset 0 1px 0 rgba(255,255,255,0.70);

  transition:
    transform 160ms var(--tk-ease),
    box-shadow 220ms var(--tk-ease),
    border-color 220ms var(--tk-ease),
    filter 220ms var(--tk-ease),
    background 220ms var(--tk-ease);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(108,42,34,0.18);
  box-shadow:
    0 16px 36px rgba(2,8,6,0.12),
    inset 0 1px 0 rgba(255,255,255,0.78);
}

/* Primary action = maroon-accent “premium”, not loud */
body.asc-portal-page .asc-toolkit-browser .asc-tk-btn--primary{
  background:
    radial-gradient(160px 90px at 30% 25%, rgba(255,255,255,0.65), transparent 62%),
    linear-gradient(180deg, rgba(108,42,34,0.14), rgba(108,42,34,0.08)) !important;

  border: 1px solid rgba(108,42,34,0.24) !important;
  color: rgba(108,42,34,0.92) !important;

  box-shadow:
    0 12px 30px rgba(108,42,34,0.10),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn--primary:hover{
  transform: translateY(-1px);
  border-color: rgba(108,42,34,0.32) !important;
  box-shadow:
    0 18px 44px rgba(108,42,34,0.14),
    inset 0 1px 0 rgba(255,255,255,0.78) !important;
  filter: saturate(1.03) contrast(1.02);
}

/* Focus rings (accessible + matches your portal) */
body.asc-portal-page .asc-toolkit-browser a:focus-visible,
body.asc-portal-page .asc-toolkit-browser .asc-tk-btn:focus-visible{
  outline: none !important;
  box-shadow:
    0 0 0 4px rgba(183,245,59,0.18),
    0 0 0 7px rgba(108,42,34,0.14),
    0 18px 44px rgba(0,0,0,0.18) !important;
}

/* -----------------------------
   EMPTY STATE
------------------------------ */
body.asc-portal-page .asc-toolkit-browser .asc-tk-empty{
  padding: 18px;
  border-radius: var(--tk-radius-md);
  border: 1px dashed rgba(15,23,42,0.18);
  background: rgba(255,255,255,0.86);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-empty__title{
  font-weight: 950;
  color: var(--tk-ink);
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-empty__sub{
  margin-top: 6px;
  color: var(--tk-ink-2);
}

/* -----------------------------
   MOBILE
------------------------------ */
@media (max-width: 760px){
  body.asc-portal-page .asc-toolkit-browser .asc-tk-panel::after{
    content: none; /* don’t split the panel on small screens */
  }

  body.asc-portal-page .asc-toolkit-browser .asc-tk-item__row{
    grid-template-columns: 44px 1fr;
    grid-auto-rows: auto;
    gap: 10px 12px;
  }

  body.asc-portal-page .asc-toolkit-browser .asc-tk-item__meta{
    grid-column: 1 / -1;
  }

  body.asc-portal-page .asc-toolkit-browser .asc-tk-actions{
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  body.asc-portal-page .asc-toolkit-browser .asc-tk-btn{
    width: 100%;
    height: 44px;
  }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  body.asc-portal-page .asc-toolkit-browser .asc-tk-item__row,
  body.asc-portal-page .asc-toolkit-browser .asc-tk-btn{
    transition: none !important;
  }
}


/* =========================================================
   TOOLKIT BROWSER — WORLD-CLASS FINAL OVERRIDES (LAST WINS)
   Scope: body.asc-portal-page .asc-toolkit-browser
========================================================= */

/* 0) Kill the Toolkit hero header completely (requested) */
body.asc-portal-page .asc-toolkit-browser .asc-tk-hero{
  display: none !important;
}

/* Bring the panel up slightly now that hero is gone */
body.asc-portal-page .asc-toolkit-browser .asc-tk-main{
  padding-top: 26px !important;
}

/* 1) Panel: more premium framing + better spacing rhythm */
body.asc-portal-page .asc-toolkit-browser .asc-tk-panel{
  max-width: 1040px !important;                 /* tighter = more premium */
  margin: 0 auto !important;

  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.88)) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;

  box-shadow:
    0 40px 120px rgba(2, 8, 6, 0.14),
    0 14px 44px rgba(2, 8, 6, 0.10) !important;

  padding: 22px 22px 26px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle right-side “surface” so the panel doesn’t feel empty/flat */
body.asc-portal-page .asc-toolkit-browser .asc-tk-panel::after{
  content: "" !important;
  position: absolute !important;
  inset: 14px 14px 14px 56% !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(15,23,42,0.030), rgba(15,23,42,0.010)) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.asc-portal-page .asc-toolkit-browser .asc-tk-panel > *{
  position: relative !important;
  z-index: 1 !important;
}

/* 2) Breadcrumb: make “Root / …” feel like a real path bar */
body.asc-portal-page .asc-toolkit-browser .asc-tk-breadcrumb{
  margin: 2px 0 16px !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;

  background: rgba(15,23,42,0.04) !important;
  border: 1px solid rgba(15,23,42,0.08) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.70) !important;

  color: rgba(15,23,42,0.70) !important;
  font-weight: 800 !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-breadcrumb__sep{
  opacity: 0.35 !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-breadcrumb__link{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 6px 10px !important;
  border-radius: 999px !important;

  text-decoration: none !important;
  font-weight: 900 !important;

  color: rgba(108,42,34,0.92) !important;
  background: rgba(255,255,255,0.70) !important;
  border: 1px solid rgba(108,42,34,0.16) !important;

  box-shadow:
    0 10px 22px rgba(2,8,6,0.08),
    inset 0 1px 0 rgba(255,255,255,0.75) !important;

  transition: transform 160ms cubic-bezier(.2,.85,.2,1),
              border-color 200ms cubic-bezier(.2,.85,.2,1),
              box-shadow 220ms cubic-bezier(.2,.85,.2,1),
              background 200ms cubic-bezier(.2,.85,.2,1) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-breadcrumb__link:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(108,42,34,0.24) !important;
  background: rgba(255,255,255,0.86) !important;
  box-shadow:
    0 16px 36px rgba(2,8,6,0.10),
    inset 0 1px 0 rgba(255,255,255,0.80) !important;
}

/* 3) List container: more breathing room */
body.asc-portal-page .asc-toolkit-browser .asc-tk-list{
  gap: 12px !important;
}

/* 4) Rows: “file manager” layout + richer hover */
body.asc-portal-page .asc-toolkit-browser .asc-tk-item__row{
  grid-template-columns: 46px 1fr auto auto !important;
  gap: 14px !important;
  padding: 16px 16px !important;

  border-radius: 16px !important;

  background: rgba(255,255,255,0.965) !important;
  border: 1px solid rgba(15,23,42,0.085) !important;

  box-shadow:
    0 18px 60px rgba(2,8,6,0.10),
    0 6px 18px rgba(2,8,6,0.06) !important;

  transition: transform 180ms cubic-bezier(.2,.85,.2,1),
              box-shadow 240ms cubic-bezier(.2,.85,.2,1),
              border-color 220ms cubic-bezier(.2,.85,.2,1),
              filter 220ms cubic-bezier(.2,.85,.2,1) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-item__row:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(108,42,34,0.16) !important;
  box-shadow:
    0 26px 78px rgba(2,8,6,0.14),
    0 10px 26px rgba(2,8,6,0.08) !important;
  filter: saturate(1.02) !important;
}

/* 5) Icon badge: premium “stone” + type tint (folders vs files) */
body.asc-portal-page .asc-toolkit-browser .asc-tk-item__icon{
  width: 46px !important;
  height: 46px !important;
  border-radius: 15px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:
    radial-gradient(140px 90px at 30% 25%, rgba(255,255,255,0.74), transparent 62%),
    linear-gradient(180deg, rgba(15,23,42,0.055), rgba(15,23,42,0.025)) !important;

  border: 1px solid rgba(15,23,42,0.10) !important;
  color: rgba(15,23,42,0.62) !important;

  box-shadow:
    0 12px 26px rgba(2,8,6,0.08),
    inset 0 1px 0 rgba(255,255,255,0.70) !important;
}

/* Folder rows: warmer “maroon/bronze” ink */
body.asc-portal-page .asc-toolkit-browser .asc-tk-item--dir .asc-tk-item__icon{
  color: rgba(108,42,34,0.80) !important;
  border-color: rgba(108,42,34,0.16) !important;
  background:
    radial-gradient(140px 90px at 30% 25%, rgba(255,255,255,0.78), transparent 62%),
    linear-gradient(180deg, rgba(108,42,34,0.060), rgba(15,23,42,0.022)) !important;
}

/* File rows: cooler “slate” ink */
body.asc-portal-page .asc-toolkit-browser .asc-tk-item--file .asc-tk-item__icon{
  color: rgba(15,23,42,0.62) !important;
}

/* 6) Name + meta: better hierarchy */
body.asc-portal-page .asc-toolkit-browser .asc-tk-item__name{
  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
  font-size: 14px !important;
  color: rgba(15,23,42,0.92) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-item__meta{
  font-size: 12px !important;
  font-weight: 900 !important;
  color: rgba(15,23,42,0.64) !important;

  padding: 6px 10px !important;
  border-radius: 999px !important;

  background: rgba(15,23,42,0.045) !important;
  border: 1px solid rgba(15,23,42,0.075) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.70) !important;
}

/* 7) Actions: make “Edit” look premium and consistent */
body.asc-portal-page .asc-toolkit-browser .asc-tk-actions{
  gap: 10px !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn{
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;

  font-weight: 900 !important;
  letter-spacing: -0.01em !important;

  border: 1px solid rgba(108,42,34,0.22) !important;
  color: rgba(108,42,34,0.92) !important;

  background:
    radial-gradient(140px 90px at 30% 25%, rgba(255,255,255,0.70), transparent 62%),
    linear-gradient(180deg, rgba(108,42,34,0.14), rgba(108,42,34,0.08)) !important;

  box-shadow:
    0 12px 30px rgba(108,42,34,0.10),
    inset 0 1px 0 rgba(255,255,255,0.72) !important;

  transition: transform 160ms cubic-bezier(.2,.85,.2,1),
              box-shadow 220ms cubic-bezier(.2,.85,.2,1),
              border-color 220ms cubic-bezier(.2,.85,.2,1),
              filter 220ms cubic-bezier(.2,.85,.2,1) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(108,42,34,0.32) !important;
  box-shadow:
    0 18px 44px rgba(108,42,34,0.14),
    inset 0 1px 0 rgba(255,255,255,0.78) !important;
  filter: saturate(1.03) contrast(1.02) !important;
}

body.asc-portal-page .asc-toolkit-browser .asc-tk-btn:active{
  transform: translateY(0) scale(0.99) !important;
}

/* 8) Mobile: simplify layout cleanly */
@media (max-width: 760px){
  body.asc-portal-page .asc-toolkit-browser .asc-tk-panel{
    padding: 18px 14px 20px !important;
  }

  body.asc-portal-page .asc-toolkit-browser .asc-tk-item__row{
    grid-template-columns: 46px 1fr !important;
    grid-auto-rows: auto !important;
  }

  body.asc-portal-page .asc-toolkit-browser .asc-tk-item__meta{
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }

  body.asc-portal-page .asc-toolkit-browser .asc-tk-actions{
    grid-column: 1 / -1 !important;
    justify-content: stretch !important;
  }

  body.asc-portal-page .asc-toolkit-browser .asc-tk-btn{
    width: 100% !important;
    height: 44px !important;
  }
}


/* =========================================================
   ASC DOCUMENT VAULT — Premium Skin (Vault.php)
   Scope: .asc-portal.asc-eco.asc-vault
   Paste at VERY END (last wins)
========================================================= */

/* ---- Theme containment reset (only when Vault is present) ---- */
body:has(.asc-vault) .content-container,
body:has(.asc-vault) .site-container,
body:has(.asc-vault) .content-wrap,
body:has(.asc-vault) .entry-content-wrap{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body:has(.asc-vault) .entry-content{
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* If :has() isn’t supported, add this class via body_class filter:
   body.asc-portal-page ... (see instructions section) */
body.asc-portal-page .asc-vault .asc-portal__container{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-left: clamp(16px, 2.2vw, 28px) !important;
  padding-right: clamp(16px, 2.2vw, 28px) !important;
}

/* ---- Tokens (Vault) ---- */
body .asc-portal.asc-eco.asc-vault{
  --v-ink: rgba(15,23,42,.92);
  --v-ink2: rgba(15,23,42,.70);
  --v-line: rgba(15,23,42,.10);

  --v-top:
    radial-gradient(1200px 380px at 50% -40px,
      rgba(30,120,70,0.45) 0%,
      rgba(4,20,12,0.95) 58%,
      rgba(2,12,8,1) 100%);

  --v-ivory:
    radial-gradient(900px 520px at 18% 10%, rgba(31,182,78,0.06), transparent 62%),
    radial-gradient(900px 520px at 82% 0%, rgba(108,42,34,0.06), transparent 60%),
    linear-gradient(180deg, #f7f7f3 0%, #f1f2ed 55%, #eceee8 100%);

  --v-maroon: rgba(108,42,34,0.92);

  --v-graphite: linear-gradient(180deg, #3a424a 0%, #22282e 55%, #13171b 100%);
  --v-gloss: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 52%);
  --v-pill-border: rgba(255,255,255,0.16);

  --v-sh-panel: 0 40px 120px rgba(2,8,6,0.14), 0 12px 38px rgba(2,8,6,0.10);
  --v-sh-card: 0 22px 70px rgba(2,8,6,0.12), 0 8px 22px rgba(2,8,6,0.08);
  --v-sh-pill: 0 10px 22px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10);
  --v-sh-pill-h: 0 16px 36px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.12);

  --v-r-lg: 20px;
  --v-r-md: 16px;
  --v-r-pill: 999px;
  --v-ease: cubic-bezier(.2,.85,.2,1);

  color: var(--v-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Loader (matches your portal) ---- */
body .asc-portal.asc-eco.asc-vault .asc-eco__loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(900px 520px at 16% 14%, rgba(183,245,59,0.16), transparent 62%),
    radial-gradient(900px 620px at 86% 18%, rgba(57,211,83,0.12), transparent 66%),
    radial-gradient(900px 620px at 68% 120%, rgba(108,42,34,0.14), transparent 66%),
    rgba(8, 20, 12, 0.72);

  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
body .asc-portal.asc-eco.asc-vault .asc-eco__loader.is-active{ display: flex; }

body .asc-portal.asc-eco.asc-vault .asc-eco__loader-inner{
  width: min(520px, calc(100% - 40px));
  border-radius: 32px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  border: 1px solid rgba(255,255,255,0.50);
  box-shadow: 0 28px 78px rgba(7, 20, 39, 0.14);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
}
body .asc-portal.asc-eco.asc-vault .asc-eco__loader-mark{
  width: 44px; height: 44px; border-radius: 14px;
  background:
    radial-gradient(18px 18px at 30% 28%, rgba(255,255,255,0.65), transparent 60%),
    linear-gradient(180deg, #b7f53b, #39d353);
  box-shadow: 0 18px 42px rgba(22,163,74,0.22);
}
body .asc-portal.asc-eco.asc-vault .asc-eco__loader-title{
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(7,20,39,0.92);
  line-height: 1.15;
}
body .asc-portal.asc-eco.asc-vault .asc-eco__loader-sub{
  font-size: 13px;
  color: rgba(7,20,39,0.62);
  margin-top: 3px;
}

/* ---- Appbar ---- */
body .asc-portal.asc-eco.asc-vault .asc-eco__appbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 20, 12, 0.40);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
body .asc-portal.asc-eco.asc-vault .asc-eco__appbar-inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
}

body .asc-portal.asc-eco.asc-vault .asc-eco__logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 950;
  letter-spacing: -0.02em;
}
body .asc-portal.asc-eco.asc-vault .asc-eco__logo-mark{
  width: 30px; height: 30px; border-radius: 10px;
  background:
    radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,0.60), transparent 60%),
    linear-gradient(180deg, #b7f53b, #39d353);
  box-shadow: 0 16px 32px rgba(22,163,74,0.20);
}

body .asc-portal.asc-eco.asc-vault .asc-eco__tabs{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Graphite-glass tabs + actions */
body .asc-portal.asc-eco.asc-vault .asc-eco__tab,
body .asc-portal.asc-eco.asc-vault .asc-eco__btn,
body .asc-portal.asc-eco.asc-vault .asc-eco__pill{
  height: 42px;
  padding: 0 16px;
  border-radius: var(--v-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--v-gloss), var(--v-graphite) !important;
  border: 1px solid var(--v-pill-border) !important;
  color: rgba(255,255,255,0.92) !important;
  text-decoration: none !important;

  box-shadow: var(--v-sh-pill) !important;

  transition: transform 180ms var(--v-ease),
              box-shadow 220ms var(--v-ease),
              border-color 220ms var(--v-ease),
              filter 220ms var(--v-ease) !important;
}
body .asc-portal.asc-eco.asc-vault .asc-eco__tab:hover,
body .asc-portal.asc-eco.asc-vault .asc-eco__btn:hover,
body .asc-portal.asc-eco.asc-vault .asc-eco__pill:hover{
  transform: translateY(-2px);
  box-shadow: var(--v-sh-pill-h) !important;
  border-color: rgba(255,255,255,0.22) !important;
}
body .asc-portal.asc-eco.asc-vault .asc-eco__tab.is-active,
body .asc-portal.asc-eco.asc-vault .asc-eco__tab[aria-current="page"]{
  border-color: rgba(183,245,59,0.55) !important;
}
body .asc-portal.asc-eco.asc-vault .asc-eco__pill{
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Hero ---- */
body .asc-portal.asc-eco.asc-vault .asc-eco__hero{
  background: var(--v-top) !important;
  padding: clamp(44px, 5vw, 74px) 0 clamp(20px, 3vw, 34px);
  position: relative;
  overflow: hidden;
}
body .asc-portal.asc-eco.asc-vault .asc-eco__hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.06;
  pointer-events:none;
}
body .asc-portal.asc-eco.asc-vault .asc-eco__hero-inner{
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.92);
}
body .asc-portal.asc-eco.asc-vault .asc-eco__brandline{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
body .asc-portal.asc-eco.asc-vault .asc-eco__badge{
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--v-r-pill);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}
body .asc-portal.asc-eco.asc-vault .asc-eco__badge--soft{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}
body .asc-portal.asc-eco.asc-vault .asc-eco__title{
  margin: 0 0 10px !important;
  font-size: clamp(30px, 3.8vw, 54px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em;
  font-weight: 1000;
  color: rgba(255,255,255,0.96) !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
body .asc-portal.asc-eco.asc-vault .asc-eco__subtitle{
  margin: 0 !important;
  max-width: 72ch;
  color: rgba(255,255,255,0.84) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  line-height: 1.8 !important;
}

/* ---- Main canvas + divider ---- */
body .asc-portal.asc-eco.asc-vault .asc-eco__main{
  background: var(--v-ivory) !important;
  margin-top: 0 !important;
  padding: 18px 0 70px !important;
  position: relative;
}
body .asc-portal.asc-eco.asc-vault .asc-eco__main::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 3px;
  background: var(--v-maroon);
  box-shadow: 0 1px 0 rgba(0,0,0,0.28);
}

/* ---- Panel (premium) ---- */
body .asc-portal.asc-eco.asc-vault .asc-eco__panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.88)) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
  border-radius: var(--v-r-lg) !important;
  box-shadow: var(--v-sh-panel) !important;

  padding: 22px !important;
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* Make generic Vault content look designed (your current h3/p/ul/li) */
body .asc-portal.asc-eco.asc-vault .asc-eco__panel h3{
  margin: 10px 0 8px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em;
  color: var(--v-ink) !important;
}
body .asc-portal.asc-eco.asc-vault .asc-eco__panel p{
  margin: 0 0 12px !important;
  color: var(--v-ink2) !important;
  line-height: 1.7 !important;
}
body .asc-portal.asc-eco.asc-vault .asc-eco__panel p a{
  color: rgba(108,42,34,0.92);
  font-weight: 850;
  text-decoration: none;
}
body .asc-portal.asc-eco.asc-vault .asc-eco__panel p a:hover{
  text-decoration: underline;
}

/* Turn the plain <ul><li> into premium “file rows” */
body .asc-portal.asc-eco.asc-vault .asc-eco__panel ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 10px 0 0 !important;
  display: grid;
  gap: 10px;
}
body .asc-portal.asc-eco.asc-vault .asc-eco__panel li{
  margin: 0 !important;
  padding: 14px 14px !important;
  border-radius: var(--v-r-md) !important;

  background: rgba(255,255,255,0.965) !important;
  border: 1px solid rgba(15,23,42,0.085) !important;
  box-shadow: 0 18px 60px rgba(2,8,6,0.10), 0 6px 18px rgba(2,8,6,0.06) !important;

  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;

  transition: transform 180ms var(--v-ease),
              box-shadow 240ms var(--v-ease),
              border-color 220ms var(--v-ease);
}
body .asc-portal.asc-eco.asc-vault .asc-eco__panel li:hover{
  transform: translateY(-1px);
  border-color: rgba(108,42,34,0.16) !important;
  box-shadow: 0 26px 78px rgba(2,8,6,0.14), 0 10px 26px rgba(2,8,6,0.08) !important;
}

/* The link becomes the primary label */
body .asc-portal.asc-eco.asc-vault .asc-eco__panel li a{
  color: var(--v-ink) !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .asc-portal.asc-eco.asc-vault .asc-eco__panel li a:hover{
  color: rgba(108,42,34,0.92) !important;
}

/* Style your inline timestamp <span style="..."> without editing PHP */
body .asc-portal.asc-eco.asc-vault .asc-eco__panel li span{
  color: rgba(15,23,42,0.62) !important;
  font-size: 12px !important;
  font-weight: 850 !important;

  padding: 6px 10px;
  border-radius: var(--v-r-pill);
  background: rgba(15,23,42,0.045);
  border: 1px solid rgba(15,23,42,0.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.70);
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 820px){
  body .asc-portal.asc-eco.asc-vault .asc-eco__appbar-inner{
    grid-template-columns: 1fr;
    justify-items: center;
  }
  body .asc-portal.asc-eco.asc-vault .asc-eco__panel{
    margin: 0 14px;
  }
  body .asc-portal.asc-eco.asc-vault .asc-eco__panel li{
    flex-direction: column;
    align-items: flex-start;
  }
}
/* =========================================================
   ASC Shell — Table styling (Manager Dashboard + any panel tables)
   Scope: only inside the ASC app shell
========================================================= */

body.asc-portal-page .asc-portal.asc-eco .asc-eco__tablewrap{
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.70);
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px; /* keeps columns readable; scrolls on small screens */
  color: rgba(15,23,42,0.92);
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__table thead th{
  text-align: left;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  padding: 14px 14px;
  background: linear-gradient(180deg, rgba(15,23,42,0.045), rgba(15,23,42,0.020));
  border-bottom: 1px solid rgba(15,23,42,0.10);
  white-space: nowrap;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__table tbody td{
  padding: 14px 14px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  vertical-align: middle;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__table tbody tr:hover{
  background: rgba(31,182,78,0.035);
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__staffcell{
  display: grid;
  gap: 8px;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__staffname{
  font-weight: 950;
  letter-spacing: -0.01em;
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__status{
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: -0.01em;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.05);
  color: rgba(15,23,42,0.78);
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__status.is-good{
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.18);
  color: rgba(10,60,32,0.86);
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__status.is-bad{
  background: rgba(108,42,34,0.10);
  border-color: rgba(108,42,34,0.18);
  color: rgba(108,42,34,0.92);
}

body.asc-portal-page .asc-portal.asc-eco .asc-eco__muted{
  color: rgba(15,23,42,0.60);
  font-weight: 800;
}

/* small button variant for table actions */
body.asc-portal-page .asc-portal.asc-eco .asc-eco__btn--sm{
  height: 38px !important;
  padding: 0 12px !important;
  font-weight: 900 !important;
}

/* =========================================================
   ASC Portal Shell — Remove Kadence content top gap (shortcodes)
   Applies to Staff/Manager dashboards (body.asc-portal-page)
========================================================= */
body.asc-portal-page #content,
body.asc-portal-page .site-content,
body.asc-portal-page .content-wrap,
body.asc-portal-page .content-container,
body.asc-portal-page .entry-content-wrap,
body.asc-portal-page .entry-content,
body.asc-portal-page #primary,
body.asc-portal-page main#main{
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: transparent !important;
}

/* Hide empty Kadence page headers if they appear */
body.asc-portal-page .entry-hero,
body.asc-portal-page .entry-header,
body.asc-portal-page .page-header{
  display: none !important;
}

/* =========================================================
   ASC Manager Dashboard — Premium (scoped, stable)
   Target: .asc-mgrdash2 wrapper + .asc-mgrdashX rows
   Paste LAST.
========================================================= */

body.asc-portal-page .asc-mgrdash2{
  --md-ink: rgba(15,23,42,.92);
  --md-muted: rgba(15,23,42,.62);
  --md-line: rgba(15,23,42,.10);

  --md-panel: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
  --md-row: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));

  --md-shadow-panel: 0 40px 120px rgba(2,8,6,.14), 0 14px 44px rgba(2,8,6,.10);
  --md-shadow-row: 0 18px 60px rgba(2,8,6,.10), 0 6px 18px rgba(2,8,6,.06);
  --md-shadow-row-h: 0 26px 86px rgba(2,8,6,.14), 0 10px 28px rgba(2,8,6,.08);

  --md-r-xl: 26px;
  --md-r-lg: 20px;
  --md-r-md: 16px;
  --md-r-pill: 999px;

  --md-ease: cubic-bezier(.2,.85,.2,1);
}

/* Panel: real premium surface */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__panel{
  background: var(--md-panel) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: var(--md-r-xl) !important;
  box-shadow: var(--md-shadow-panel) !important;
  padding: 20px !important;
  overflow: visible !important;
}

/* Topbar */
body.asc-portal-page .asc-mgrdash2__topbar{
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 18px;
}

@media (max-width: 980px){
  body.asc-portal-page .asc-mgrdash2__topbar{ grid-template-columns: 1fr; }
}

/* KPI tiles */
body.asc-portal-page .asc-mgrdash2__kpis{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 980px){
  body.asc-portal-page .asc-mgrdash2__kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.asc-portal-page .asc-mgrdash2__kpi{
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(15,23,42,.09);
  box-shadow: 0 16px 44px rgba(2,8,6,.08), inset 0 1px 0 rgba(255,255,255,.75);
}

body.asc-portal-page .asc-mgrdash2__kpiLabel{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 950;
  color: rgba(15,23,42,.56);
}

body.asc-portal-page .asc-mgrdash2__kpiVal{
  margin-top: 6px;
  font-size: 30px;
  font-weight: 1000;
  letter-spacing: -0.04em;
  color: var(--md-ink);
}

/* Search */
body.asc-portal-page .asc-mgrdash2__searchInput{
  width: 100%;
  min-height: 56px;
  border-radius: 18px;
  padding: 0 16px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 16px 44px rgba(2,8,6,.08), inset 0 1px 0 rgba(255,255,255,.75);
  font-weight: 900;
  color: rgba(15,23,42,.90);
  outline: none;
}

body.asc-portal-page .asc-mgrdash2__searchInput::placeholder{
  color: rgba(15,23,42,.45);
  font-weight: 800;
}

/* Hide table-like header; cards don’t need it */
body.asc-portal-page .asc-mgrdash2__head{ display: none !important; }

/* Row card */
body.asc-portal-page .asc-mgrdashX{
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(520px, 1.6fr) minmax(220px, .65fr);
  gap: 14px;
  align-items: center;

  padding: 16px;
  margin-bottom: 12px;

  border-radius: var(--md-r-lg);
  background: var(--md-row);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--md-shadow-row);

  transition: transform 180ms var(--md-ease), box-shadow 220ms var(--md-ease);
}

body.asc-portal-page .asc-mgrdashX:hover{
  transform: translateY(-1px);
  box-shadow: var(--md-shadow-row-h);
}

/* Left: status + person */
body.asc-portal-page .asc-mgrdashX__left{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

body.asc-portal-page .asc-mgrdashX__person{
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

body.asc-portal-page .asc-mgrdashX__avatar{
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;

  background: linear-gradient(180deg, #2d343a 0%, #151a1f 100%);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.94);
  font-weight: 1000;
  letter-spacing: -0.02em;
  box-shadow: 0 18px 46px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.10);
}

body.asc-portal-page .asc-mgrdashX__name{
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: -0.03em;
  color: var(--md-ink);
  line-height: 1.1;
}

body.asc-portal-page .asc-mgrdashX__email{
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 850;
  color: rgba(15,23,42,.58);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status pill (uses your existing .asc-eco__status classes) */
body.asc-portal-page .asc-mgrdashX .asc-eco__status{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: var(--md-r-pill);
  font-weight: 1000;
  font-size: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.05);
  color: rgba(15,23,42,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

/* Mid: inline metrics strip (no nested “mini cards”) */
body.asc-portal-page .asc-mgrdashX__mid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  align-items: center;
}

body.asc-portal-page .asc-mgrdashX__metric{
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
  position: relative;
}

body.asc-portal-page .asc-mgrdashX__metric:not(:first-child)::before{
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(15,23,42,.10);
}

body.asc-portal-page .asc-mgrdashX__metricLabel{
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 950;
  color: rgba(15,23,42,.52);
}

body.asc-portal-page .asc-mgrdashX__metricVal{
  margin-top: 6px;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: -0.03em;
  color: var(--md-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.asc-portal-page .asc-mgrdashX__metricSub{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 850;
  color: rgba(15,23,42,.56);
}

/* Right: action group */
body.asc-portal-page .asc-mgrdashX__right{
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

body.asc-portal-page .asc-mgrdashX__btn{
  height: 44px;
  border-radius: 14px; /* premium rectangle, not pill */
  padding: 0 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 1000;
  letter-spacing: -0.01em;
  text-decoration: none;

  background: linear-gradient(180deg, #2d343a 0%, #151a1f 100%);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.94);

  box-shadow: 0 18px 46px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
}

body.asc-portal-page .asc-mgrdashX__btn--ghost{
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(15,23,42,.12);
  color: rgba(15,23,42,.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

/* Responsive */
@media (max-width: 1100px){
  body.asc-portal-page .asc-mgrdashX{ grid-template-columns: 1fr; }
  body.asc-portal-page .asc-mgrdashX__left{ grid-template-columns: 1fr; }
  body.asc-portal-page .asc-mgrdashX__mid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.asc-portal-page .asc-mgrdashX__metric:not(:first-child)::before{ content: none; }
}

@media (max-width: 600px){
  body.asc-portal-page .asc-mgrdashX__mid{ grid-template-columns: 1fr; }
}
/* =========================================================
   ASC Manager Dashboard — ULTRA PREMIUM (Screenshot)
   Scope: body.asc-portal-page .asc-mgrdash2 (ONLY)
   Paste as the LAST block in the stylesheet.
========================================================= */

body.asc-portal-page .asc-mgrdash2{
  /* Premium material system */
  --u-ink: rgba(15,23,42,.92);
  --u-muted: rgba(15,23,42,.62);
  --u-faint: rgba(15,23,42,.42);
  --u-line: rgba(15,23,42,.10);
  --u-line2: rgba(15,23,42,.08);

  --u-ivory: rgba(255,255,255,.92);
  --u-ivory2: rgba(255,255,255,.86);
  --u-card: rgba(255,255,255,.965);

  --u-maroon: rgba(108,42,34,.92);
  --u-bad: rgba(108,42,34,.92);
  --u-good: rgba(10,60,32,.92);

  --u-graph0: #3a424a;
  --u-graph1: #22282e;
  --u-graph2: #13171b;
  --u-graph: linear-gradient(180deg, var(--u-graph0) 0%, var(--u-graph1) 55%, var(--u-graph2) 100%);
  --u-gloss: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 52%);
  --u-graph-border: rgba(255,255,255,.16);

  --u-r-2xl: 26px;
  --u-r-xl: 22px;
  --u-r-lg: 18px;
  --u-r-md: 16px;
  --u-r-sm: 14px;
  --u-pill: 999px;

  /* “Ultra” shadow stack: deep but soft (no harsh drop shadows) */
  --u-sh-panel: 0 46px 140px rgba(2,8,6,.14), 0 18px 56px rgba(2,8,6,.10);
  --u-sh-tile: 0 18px 60px rgba(2,8,6,.10), 0 6px 18px rgba(2,8,6,.06);
  --u-sh-tile-h: 0 28px 96px rgba(2,8,6,.14), 0 10px 26px rgba(2,8,6,.08);
  --u-sh-ctl: 0 14px 32px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.12);
  --u-sh-ctl-h: 0 18px 46px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.14);

  --u-ease: cubic-bezier(.2,.85,.2,1);
}

/* 0) Kill global “rail” pseudo elements that cheapen this view */
body.asc-portal-page .asc-mgrdash2 .asc-eco__panel::before,
body.asc-portal-page .asc-mgrdash2 .asc-eco__panel::after,
body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__panel::before,
body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__panel::after{
  content: none !important;
  display: none !important;
}

/* 1) Panel: calmer, luxe surface */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__panel{
  background:
    radial-gradient(900px 520px at 16% 12%, rgba(31,182,78,0.06), transparent 60%),
    radial-gradient(900px 520px at 84% 0%, rgba(108,42,34,0.05), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90)) !important;

  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: var(--u-r-2xl) !important;
  box-shadow: var(--u-sh-panel) !important;
  padding: 22px !important;
  overflow: visible !important;
}

/* 2) Topbar spacing */
body.asc-portal-page .asc-mgrdash2__topbar{
  display: grid;
  grid-template-columns: 1fr minmax(320px, 420px);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 18px;
}
@media (max-width: 980px){
  body.asc-portal-page .asc-mgrdash2__topbar{ grid-template-columns: 1fr; }
}

/* 3) KPI tiles: make them feel like “hardware” */
body.asc-portal-page .asc-mgrdash2__kpis{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  body.asc-portal-page .asc-mgrdash2__kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.asc-portal-page .asc-mgrdash2__kpi{
  position: relative;
  border-radius: var(--u-r-xl);
  padding: 14px 16px;

  background:
    radial-gradient(220px 160px at 18% 12%, rgba(255,255,255,.85), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));

  border: 1px solid rgba(15,23,42,.09);
  box-shadow: 0 16px 44px rgba(2,8,6,.08), inset 0 1px 0 rgba(255,255,255,.80);
}

body.asc-portal-page .asc-mgrdash2__kpi::after{
  /* hairline highlight */
  content:"";
  position:absolute;
  left: 14px; right: 14px; top: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  opacity: .55;
  pointer-events:none;
}

body.asc-portal-page .asc-mgrdash2__kpiLabel{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 950;
  color: rgba(15,23,42,.56);
}

body.asc-portal-page .asc-mgrdash2__kpiVal{
  margin-top: 6px;
  font-size: 30px;
  font-weight: 1000;
  letter-spacing: -0.045em;
  color: var(--u-ink);
}

/* Color cues: elegant (not loud) */
body.asc-portal-page .asc-mgrdash2__kpi--danger .asc-mgrdash2__kpiVal{ color: var(--u-bad); }
body.asc-portal-page .asc-mgrdash2__kpi--good .asc-mgrdash2__kpiVal{ color: var(--u-good); }

/* 4) Search: premium control, better text rhythm */
body.asc-portal-page .asc-mgrdash2__searchInput{
  width: 100%;
  min-height: 56px;
  border-radius: var(--u-r-xl);
  padding: 0 18px;

  background:
    radial-gradient(240px 160px at 16% 20%, rgba(255,255,255,.85), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));

  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 16px 44px rgba(2,8,6,.08), inset 0 1px 0 rgba(255,255,255,.82);

  font-weight: 900;
  color: rgba(15,23,42,.90);
  outline: none;
}
body.asc-portal-page .asc-mgrdash2__searchInput::placeholder{
  color: rgba(15,23,42,.45);
  font-weight: 850;
}
body.asc-portal-page .asc-mgrdash2__searchInput:focus{
  border-color: rgba(183,245,59,.38);
  box-shadow:
    0 18px 60px rgba(2,8,6,.10),
    0 0 0 6px rgba(183,245,59,.14),
    inset 0 1px 0 rgba(255,255,255,.82);
}

/* 5) Hide the old table header row for this screen */
body.asc-portal-page .asc-mgrdash2__head{ display: none !important; }

/* 6) The staff row: “one premium surface”, not nested boxes */
body.asc-portal-page .asc-mgrdashX{
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(520px, 1.6fr) minmax(240px, .65fr);
  gap: 14px;
  align-items: center;

  padding: 16px 16px;
  margin-bottom: 12px;

  border-radius: var(--u-r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.985), rgba(255,255,255,.94));
  border: 1px solid rgba(15,23,42,.10);

  box-shadow: var(--u-sh-tile);
  transition: transform 180ms var(--u-ease), box-shadow 220ms var(--u-ease), border-color 220ms var(--u-ease);
}

body.asc-portal-page .asc-mgrdashX::before{
  /* subtle top hairline sheen */
  content:"";
  position:absolute;
  left: 18px; right: 18px; top: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.70), transparent);
  opacity: .55;
  pointer-events:none;
}

body.asc-portal-page .asc-mgrdashX:hover{
  transform: translateY(-1px);
  box-shadow: var(--u-sh-tile-h);
  border-color: rgba(15,23,42,.12);
}

@media (max-width: 1100px){
  body.asc-portal-page .asc-mgrdashX{ grid-template-columns: 1fr; }
}

/* 7) Left cluster */
body.asc-portal-page .asc-mgrdashX__left{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
@media (max-width: 1100px){
  body.asc-portal-page .asc-mgrdashX__left{ grid-template-columns: 1fr; }
}

body.asc-portal-page .asc-mgrdashX__person{
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

/* Avatar: “soft graphite glass” */
body.asc-portal-page .asc-mgrdashX__avatar{
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;

  background: var(--u-gloss), var(--u-graph);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.94);

  font-weight: 1000;
  letter-spacing: -0.02em;

  box-shadow: 0 18px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10);
}

body.asc-portal-page .asc-mgrdashX__name{
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: -0.03em;
  color: var(--u-ink);
  line-height: 1.1;
}

body.asc-portal-page .asc-mgrdashX__email{
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 850;
  color: rgba(15,23,42,.58);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status pill: crisp + expensive */
body.asc-portal-page .asc-mgrdashX .asc-eco__status{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 12px;
  border-radius: var(--u-pill);
  font-weight: 1000;
  font-size: 12px;

  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.045);
  color: rgba(15,23,42,.78);

  box-shadow: inset 0 1px 0 rgba(255,255,255,.80);
}

/* Make your existing classes look premium */
body.asc-portal-page .asc-mgrdashX .asc-eco__status.is-bad{
  background: rgba(108,42,34,0.09);
  border-color: rgba(108,42,34,0.16);
  color: rgba(108,42,34,0.92);
}
body.asc-portal-page .asc-mgrdashX .asc-eco__status.is-good{
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.18);
  color: rgba(10,60,32,0.88);
}

/* 8) Metrics: ultra-premium “label/value/sub” (no mini cards) */
body.asc-portal-page .asc-mgrdashX__mid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  align-items: center;
}
@media (max-width: 1100px){
  body.asc-portal-page .asc-mgrdashX__mid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  body.asc-portal-page .asc-mgrdashX__mid{ grid-template-columns: 1fr; }
}

body.asc-portal-page .asc-mgrdashX__metric{
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
  position: relative;
}

body.asc-portal-page .asc-mgrdashX__metric:not(:first-child)::before{
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(15,23,42,.10);
}
@media (max-width: 1100px){
  body.asc-portal-page .asc-mgrdashX__metric:not(:first-child)::before{ content: none; }
}

body.asc-portal-page .asc-mgrdashX__metricLabel{
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 950;
  color: rgba(15,23,42,.52);
}

body.asc-portal-page .asc-mgrdashX__metricVal{
  margin-top: 7px;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: -0.03em;
  color: var(--u-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.asc-portal-page .asc-mgrdashX__metricSub{
  margin-top: 3px;
  font-size: 12px;
  font-weight: 850;
  color: rgba(15,23,42,.56);
}

/* Make “overdue count” read like an alert, not just text */
body.asc-portal-page .asc-mgrdashX__metricSub{
  font-variant-numeric: tabular-nums;
}

/* 9) Actions: make buttons look like product controls */
body.asc-portal-page .asc-mgrdashX__right{
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

body.asc-portal-page .asc-mgrdashX__btn{
  height: 44px;
  padding: 0 16px;
  border-radius: 14px; /* less pill = more “premium hardware” */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 1000;
  letter-spacing: -0.01em;
  text-decoration: none !important;

  background: var(--u-gloss), var(--u-graph);
  border: 1px solid var(--u-graph-border);
  color: rgba(255,255,255,.94);

  box-shadow: var(--u-sh-ctl);
  transition: transform 180ms var(--u-ease), box-shadow 220ms var(--u-ease), border-color 220ms var(--u-ease), filter 220ms var(--u-ease);
}

body.asc-portal-page .asc-mgrdashX__btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--u-sh-ctl-h);
  border-color: rgba(255,255,255,.22);
  filter: saturate(1.06) contrast(1.02);
}

body.asc-portal-page .asc-mgrdashX__btn--ghost{
  background: linear-gradient(180deg, rgba(15,23,42,.055), rgba(15,23,42,.035));
  border: 1px solid rgba(15,23,42,.12);
  color: rgba(15,23,42,.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80);
}

body.asc-portal-page .asc-mgrdashX__btn--ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(108,42,34,.20);
  box-shadow: 0 16px 40px rgba(2,8,6,.10), inset 0 1px 0 rgba(255,255,255,.84);
  filter: none;
}

body.asc-portal-page .asc-mgrdashX__btn--ghost[disabled],
body.asc-portal-page .asc-mgrdashX__btn--ghost[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
}

/* 10) Micro polish: consistent type smoothing */
body.asc-portal-page .asc-mgrdash2,
body.asc-portal-page .asc-mgrdash2 *{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* =========================================================
   MANAGER DASHBOARD — HARD RESET + PREMIUM ROW (LAST WINS)
   Scope: ONLY inside .asc-mgrdash2 (safe)
========================================================= */

/* 0) Disable any global panel rails / pseudo decorations in manager */
body.asc-portal-page .asc-mgrdash2 .asc-eco__panel::before,
body.asc-portal-page .asc-mgrdash2 .asc-eco__panel::after,
body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__panel::before,
body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__panel::after{
  content: none !important;
  display: none !important;
}


/* 2) Row container: premium surface + correct spacing */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX{
  display: grid !important;
  grid-template-columns: minmax(320px, 1.2fr) minmax(520px, 2fr) 220px !important;
  gap: 16px !important;
  align-items: center !important;

  padding: 16px 16px !important;
  margin: 0 0 12px 0 !important;

  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.985), rgba(255,255,255,.94)) !important;
  border: 1px solid rgba(15,23,42,.10) !important;

  box-shadow: 0 22px 70px rgba(2,8,6,.10), 0 8px 22px rgba(2,8,6,.06) !important;
}

/* Responsive: stack cleanly before it gets squished */
@media (max-width: 980px){
  body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX{
    grid-template-columns: 1fr !important;
  }
}

/* 3) Left block (status + person) */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__left{
  display: grid !important;
  grid-template-columns: 120px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  min-width: 0 !important;
}

@media (max-width: 980px){
  body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__left{
    grid-template-columns: 1fr !important;
  }
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__person{
  display: grid !important;
  grid-template-columns: 46px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  min-width: 0 !important;
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__avatar{
  width: 46px !important;
  height: 46px !important;
  border-radius: 15px !important;
  display: grid !important;
  place-items: center !important;

  background: linear-gradient(180deg, #2d343a 0%, #151a1f 100%) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.94) !important;

  font-weight: 900 !important;
  letter-spacing: -0.02em !important;

  box-shadow: 0 18px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__name{
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  color: rgba(15,23,42,.92) !important;
  line-height: 1.15 !important;
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__email{
  margin-top: 4px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: rgba(15,23,42,.58) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Status pill */
body.asc-portal-page .asc-mgrdash2 .asc-eco__status{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 12px !important;

  border: 1px solid rgba(15,23,42,.10) !important;
  background: rgba(15,23,42,.045) !important;
  color: rgba(15,23,42,.78) !important;
}

body.asc-portal-page .asc-mgrdash2 .asc-eco__status.is-bad{
  background: rgba(108,42,34,.09) !important;
  border-color: rgba(108,42,34,.16) !important;
  color: rgba(108,42,34,.92) !important;
}

/* 4) Metrics: prevent ugly truncation */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__mid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) !important;
  gap: 14px !important;
  align-items: center !important;
  min-width: 0 !important;
}

@media (max-width: 980px){
  body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__mid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px){
  body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__mid{
    grid-template-columns: 1fr !important;
  }
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__metricLabel{
  font-size: 10px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  color: rgba(15,23,42,.52) !important;
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__metricVal{
  margin-top: 6px !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  color: rgba(15,23,42,.92) !important;

  /* key: allow wrapping for dates instead of “...” */
  white-space: normal !important;
  overflow: visible !important;
}

/* 5) Actions: buttons should never squash the content */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__right{
  display: grid !important;
  gap: 10px !important;
  justify-items: stretch !important;
  align-content: center !important;
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__btn{
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;

  background: linear-gradient(180deg, #2d343a 0%, #151a1f 100%) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.94) !important;

  box-shadow: 0 18px 46px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__btn--ghost{
  background: linear-gradient(180deg, rgba(15,23,42,.055), rgba(15,23,42,.035)) !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  color: rgba(15,23,42,.86) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80) !important;
}

/* =========================================================
   ASC Manager — table headings + aligned columns (LAST)
========================================================= */

/* Show and style the existing header row you already output */
body.asc-portal-page .asc-mgrdash2__head{
  display: grid !important;
  grid-template-columns:
    130px               /* Status */
    minmax(320px, 1.4fr)/* Staff */
    140px               /* Open */
    220px               /* Next due */
    190px               /* Completed today */
    240px               /* Latest submitted */
    200px               /* Actions */
  !important;

  gap: 12px !important;
  align-items: end !important;

  padding: 10px 12px 12px !important;
  margin: 10px 0 12px !important;

  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(15,23,42,0.045), rgba(15,23,42,0.02)) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;

  font-size: 11px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 950 !important;
  color: rgba(15,23,42,0.58) !important;
}

/* Align each row to the same grid as the header */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX{
  display: grid !important;
  grid-template-columns:
    130px
    minmax(320px, 1.4fr)
    140px
    220px
    190px
    240px
    200px
  !important;

  gap: 12px !important;
  align-items: center !important;
}

/* Map your current 3 blocks into the 7 columns */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__left{ grid-column: 1 / 3 !important; }
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__mid{  grid-column: 3 / 7 !important; }
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__right{grid-column: 7 / 8 !important; }

/* Make the mid metrics itself align to columns 3–6 */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__mid{
  display: grid !important;
  grid-template-columns: 140px 220px 190px 240px !important;
  gap: 12px !important;
  align-items: center !important;
}

/* Keep the right buttons sized nicely */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__right{
  display: grid !important;
  gap: 10px !important;
  justify-items: stretch !important;
}
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__btn{
  width: 100% !important;
}

/* Prevent text truncation weirdness */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__metricVal,
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__email{
  min-width: 0 !important;
}

/* Responsive: hide header and stack rows earlier */
@media (max-width: 1150px){
  body.asc-portal-page .asc-mgrdash2__head{ display: none !important; }
  body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX{
    grid-template-columns: 1fr !important;
  }
  body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__left,
  body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__mid,
  body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__right{
    grid-column: auto !important;
  }
  body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__mid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* ============================
   Vault Premium UI (scoped)
============================ */
body.asc-portal-page .asc-vault__panel{ max-width: 1040px; margin: 0 auto; }

body.asc-portal-page .asc-vault__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 980px){
  body.asc-portal-page .asc-vault__grid{ grid-template-columns: 1fr; }
}

body.asc-portal-page .asc-vault__card{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  box-shadow: 0 18px 55px rgba(2,8,6,.10), 0 6px 18px rgba(2,8,6,.06);
  padding: 16px;
  display: grid;
  gap: 12px;
}

body.asc-portal-page .asc-vault__cardhead{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
}

body.asc-portal-page .asc-vault__icon{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(108,42,34,0.08), rgba(15,23,42,0.03));
  border: 1px solid rgba(15,23,42,0.10);
}

body.asc-portal-page .asc-vault__h3{
  margin: 0 !important;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,0.92);
}
body.asc-portal-page .asc-vault__sub{
  margin: 4px 0 0 !important;
  color: rgba(15,23,42,0.66);
  line-height: 1.6;
  font-size: 13px;
}

body.asc-portal-page .asc-vault__cardfoot{
  display: flex;
  justify-content: flex-start;
}

body.asc-portal-page .asc-vault__btn{
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 52%),
              linear-gradient(180deg, #3a424a 0%, #22282e 55%, #13171b 100%);
  color: rgba(255,255,255,0.92) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.10);
}

body.asc-portal-page .asc-vault__search{ margin-top: 6px; }
body.asc-portal-page .asc-vault__input{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.04);
  padding: 0 12px;
  outline: none;
}

body.asc-portal-page .asc-vault__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

body.asc-portal-page .asc-vault__row{
  border: 1px solid rgba(15,23,42,0.085);
  background: rgba(255,255,255,0.965);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(2,8,6,0.08);
}

body.asc-portal-page .asc-vault__rowlink{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  text-decoration: none !important;
  color: rgba(15,23,42,0.92) !important;
}

body.asc-portal-page .asc-vault__rowtitle{
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.asc-portal-page .asc-vault__rowmeta{
  font-size: 12px;
  font-weight: 850;
  color: rgba(15,23,42,0.60);
  white-space: nowrap;
}

body.asc-portal-page .asc-vault__empty{
  padding: 14px;
  border-radius: 14px;
  background: rgba(15,23,42,0.04);
  border: 1px dashed rgba(15,23,42,0.16);
  color: rgba(15,23,42,0.70);
  font-weight: 700;
}



/* =========================================================
   ASC Manager Dashboard — PREMIUM PASS (LAST WINS)
   Scope: ONLY .asc-mgrdash2 (safe)
========================================================= */

body.asc-portal-page .asc-mgrdash2{
  /* Typography + rhythm */
  --pm-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  --pm-ink: rgba(15,23,42,.92);
  --pm-ink2: rgba(15,23,42,.70);
  --pm-ink3: rgba(15,23,42,.55);

  /* Surfaces */
  --pm-panelA: rgba(255,255,255,.96);
  --pm-panelB: rgba(255,255,255,.90);
  --pm-cardA: rgba(255,255,255,.985);
  --pm-cardB: rgba(255,255,255,.94);

  /* Lines */
  --pm-line: rgba(15,23,42,.10);
  --pm-line2: rgba(15,23,42,.08);

  /* Brand accents */
  --pm-maroon: rgba(108,42,34,.92);
  --pm-good: rgba(10,60,32,.92);
  --pm-bad: rgba(108,42,34,.92);

  /* Controls (graphite) */
  --pm-graph0: #3a424a;
  --pm-graph1: #22282e;
  --pm-graph2: #13171b;
  --pm-graph: linear-gradient(180deg, var(--pm-graph0) 0%, var(--pm-graph1) 55%, var(--pm-graph2) 100%);
  --pm-gloss: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 52%);
  --pm-graph-border: rgba(255,255,255,.16);

  /* Radius + shadows */
  --pm-r-2xl: 26px;
  --pm-r-xl: 22px;
  --pm-r-lg: 18px;
  --pm-r-md: 16px;
  --pm-r-pill: 999px;

  --pm-sh-panel: 0 46px 140px rgba(2,8,6,.14), 0 18px 56px rgba(2,8,6,.10);
  --pm-sh-tile: 0 18px 60px rgba(2,8,6,.10), 0 6px 18px rgba(2,8,6,.06);
  --pm-sh-tile-h: 0 28px 96px rgba(2,8,6,.14), 0 10px 26px rgba(2,8,6,.08);
  --pm-sh-ctl: 0 14px 32px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.12);
  --pm-sh-ctl-h: 0 18px 46px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.14);

  --pm-ease: cubic-bezier(.2,.85,.2,1);

  font-family: var(--pm-font);
  color: var(--pm-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Make sure your manager panel is a luxe “stage” */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__panel{
  background:
    radial-gradient(900px 520px at 16% 12%, rgba(31,182,78,0.06), transparent 60%),
    radial-gradient(900px 520px at 84% 0%, rgba(108,42,34,0.05), transparent 58%),
    linear-gradient(180deg, var(--pm-panelA), var(--pm-panelB)) !important;

  border: 1px solid var(--pm-line) !important;
  border-radius: var(--pm-r-2xl) !important;
  box-shadow: var(--pm-sh-panel) !important;

  padding: 22px !important;
}

/* Hero polish (Manager Dashboard header area) */
body.asc-portal-page .asc-mgrdash2 .asc-eco__hero .asc-eco__title{
  letter-spacing: -0.03em !important;
  font-weight: 1000 !important;
}
body.asc-portal-page .asc-mgrdash2 .asc-eco__hero .asc-eco__subtitle{
  max-width: 70ch !important;
  color: rgba(255,255,255,0.86) !important;
}

/* Topbar: more intentional spacing */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__topbar{
  gap: 14px !important;
  margin-bottom: 18px !important;
}

/* KPI tiles: “hardware” feel */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__kpi{
  position: relative;
  border-radius: var(--pm-r-xl) !important;

  background:
    radial-gradient(240px 160px at 18% 14%, rgba(255,255,255,.88), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.91)) !important;

  border: 1px solid rgba(15,23,42,.09) !important;
  box-shadow: 0 16px 44px rgba(2,8,6,.08), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__kpiLabel{
  color: rgba(15,23,42,.56) !important;
}
body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__kpiVal{
  font-variant-numeric: tabular-nums;
}

/* Search: premium control */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__searchInput{
  border-radius: var(--pm-r-xl) !important;
  border: 1px solid rgba(15,23,42,.10) !important;

  background:
    radial-gradient(260px 160px at 16% 20%, rgba(255,255,255,.86), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.91)) !important;

  box-shadow: 0 16px 44px rgba(2,8,6,.08), inset 0 1px 0 rgba(255,255,255,.82) !important;

  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}
body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__searchInput:focus{
  outline: none !important;
  border-color: rgba(183,245,59,.38) !important;
  box-shadow:
    0 18px 60px rgba(2,8,6,.10),
    0 0 0 6px rgba(183,245,59,.14),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
}

/* Column header row: crisp, aligned, premium */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__head{
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(15,23,42,0.045), rgba(15,23,42,0.02)) !important;
  border: 1px solid rgba(15,23,42,0.10) !important;
}

/* Staff row: richer surface + subtle top sheen */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX{
  position: relative !important;
  border-radius: var(--pm-r-xl) !important;

  background: linear-gradient(180deg, var(--pm-cardA), var(--pm-cardB)) !important;
  border: 1px solid rgba(15,23,42,.10) !important;

  box-shadow: var(--pm-sh-tile) !important;
  transition:
    transform 180ms var(--pm-ease),
    box-shadow 220ms var(--pm-ease),
    border-color 220ms var(--pm-ease) !important;
}
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX::before{
  content:"" !important;
  position:absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: 10px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.70), transparent) !important;
  opacity: .55 !important;
  pointer-events:none !important;
}
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX:hover{
  transform: translateY(-1px) !important;
  box-shadow: var(--pm-sh-tile-h) !important;
  border-color: rgba(15,23,42,.12) !important;
}

/* Avatar: premium graphite glass */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__avatar{
  background: var(--pm-gloss), var(--pm-graph) !important;
  border: 1px solid var(--pm-graph-border) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Name/email hierarchy */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__name{
  font-weight: 1000 !important;
  letter-spacing: -0.03em !important;
}
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__email{
  color: rgba(15,23,42,.58) !important;
  font-weight: 850 !important;
}

/* Status pill: clean, “expensive”, consistent */
body.asc-portal-page .asc-mgrdash2 .asc-eco__status{
  border-radius: var(--pm-r-pill) !important;
  padding: 8px 12px !important;
  font-weight: 1000 !important;
  letter-spacing: -0.01em !important;

  background: rgba(15,23,42,.045) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  color: rgba(15,23,42,.78) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.80) !important;
}
body.asc-portal-page .asc-mgrdash2 .asc-eco__status.is-good{
  background: rgba(34,197,94,0.10) !important;
  border-color: rgba(34,197,94,0.18) !important;
  color: rgba(10,60,32,0.88) !important;
}
body.asc-portal-page .asc-mgrdash2 .asc-eco__status.is-bad{
  background: rgba(108,42,34,0.09) !important;
  border-color: rgba(108,42,34,0.16) !important;
  color: rgba(108,42,34,0.92) !important;
}

/* Metrics: typography + tabular nums + softer separators */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__metricLabel{
  color: rgba(15,23,42,.52) !important;
  font-weight: 950 !important;
}
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__metricVal{
  font-variant-numeric: tabular-nums;
}
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__metricSub{
  color: rgba(15,23,42,.56) !important;
  font-weight: 850 !important;
}

/* Actions: make both buttons feel like product controls */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__btn{
  background: var(--pm-gloss), var(--pm-graph) !important;
  border: 1px solid var(--pm-graph-border) !important;
  color: rgba(255,255,255,.94) !important;
  box-shadow: var(--pm-sh-ctl) !important;

  transition:
    transform 180ms var(--pm-ease),
    box-shadow 220ms var(--pm-ease),
    border-color 220ms var(--pm-ease),
    filter 220ms var(--pm-ease) !important;
}
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__btn:hover{
  transform: translateY(-1px) !important;
  box-shadow: var(--pm-sh-ctl-h) !important;
  border-color: rgba(255,255,255,.22) !important;
  filter: saturate(1.06) contrast(1.02) !important;
}

/* Ghost button: “stone” (still premium, not dull) */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__btn--ghost{
  background:
    radial-gradient(180px 120px at 18% 22%, rgba(255,255,255,.70), transparent 62%),
    linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.04)) !important;

  border: 1px solid rgba(15,23,42,.12) !important;
  color: rgba(15,23,42,.88) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.82) !important;
}
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__btn--ghost:hover{
  border-color: rgba(108,42,34,.20) !important;
  box-shadow: 0 16px 40px rgba(2,8,6,.10), inset 0 1px 0 rgba(255,255,255,.86) !important;
  filter: none !important;
}

/* Mobile: keep it “app-like” */
@media (max-width: 760px){
  body.asc-portal-page .asc-mgrdash2 .asc-mgrdashX__btn{
    height: 46px !important;
    border-radius: 16px !important;
  }
}

/* =========================================================
   ASC Staff Dashboard — Premium Skin
   Scope: .asc-staffdash (does NOT touch manager dashboard)
========================================================= */

body.asc-portal-page .asc-staffdash{
  --sd-ink: rgba(15,23,42,.92);
  --sd-ink2: rgba(15,23,42,.66);
  --sd-line: rgba(15,23,42,.10);

  --sd-panel: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
  --sd-card: linear-gradient(180deg, rgba(255,255,255,.985), rgba(255,255,255,.94));

  --sd-maroon: rgba(108,42,34,.92);

  --sd-graph: linear-gradient(180deg, #2d343a 0%, #151a1f 100%);
  --sd-graph-gloss: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 52%);
  --sd-graph-border: rgba(255,255,255,.16);

  --sd-r-xl: 22px;
  --sd-r-lg: 18px;
  --sd-r-md: 16px;
  --sd-r-pill: 999px;

  --sd-shadow-panel: 0 40px 120px rgba(2,8,6,.14), 0 14px 44px rgba(2,8,6,.10);
  --sd-shadow-row: 0 18px 60px rgba(2,8,6,.10), 0 6px 18px rgba(2,8,6,.06);
  --sd-shadow-row-h: 0 28px 96px rgba(2,8,6,.14), 0 10px 26px rgba(2,8,6,.08);

  --sd-ease: cubic-bezier(.2,.85,.2,1);

  color: var(--sd-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Panel */
body.asc-portal-page .asc-staffdash .asc-eco__panel{
  background: var(--sd-panel) !important;
  border: 1px solid var(--sd-line) !important;
  border-radius: var(--sd-r-xl) !important;
  box-shadow: var(--sd-shadow-panel) !important;
}

/* Topbar */
body.asc-portal-page .asc-staffdash__topbar{
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

body.asc-portal-page .asc-staffdash__kpis{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  body.asc-portal-page .asc-staffdash__kpis{ grid-template-columns: 1fr; }
}

body.asc-portal-page .asc-staffdash__kpi{
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.09);
  box-shadow: 0 16px 44px rgba(2,8,6,.08), inset 0 1px 0 rgba(255,255,255,.80);
}
body.asc-portal-page .asc-staffdash__kpiLabel{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 950;
  color: rgba(15,23,42,.56);
}
body.asc-portal-page .asc-staffdash__kpiVal{
  margin-top: 6px;
  font-size: 30px;
  font-weight: 1000;
  letter-spacing: -0.045em;
  color: var(--sd-ink);
  font-variant-numeric: tabular-nums;
}
body.asc-portal-page .asc-staffdash__kpi--danger .asc-staffdash__kpiVal{
  color: var(--sd-maroon);
}

body.asc-portal-page .asc-staffdash__hint{
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  color: rgba(15,23,42,.70);
  font-weight: 750;
}

/* Headings */
body.asc-portal-page .asc-staffdash__h2{
  margin: 14px 0 10px !important;
  font-weight: 1000;
  letter-spacing: -0.03em;
  color: var(--sd-ink);
  font-size: 18px;
}
body.asc-portal-page .asc-staffdash__hr{
  border: 0;
  height: 1px;
  background: rgba(15,23,42,.10);
  margin: 18px 0;
}

/* List */
body.asc-portal-page .asc-staffdash__list{
  display: grid;
  gap: 12px;
}

/* Row card */
body.asc-portal-page .asc-staffdash__row{
  border-radius: var(--sd-r-lg);
  background: var(--sd-card);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--sd-shadow-row);
  padding: 16px;

  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;

  transition: transform 180ms var(--sd-ease), box-shadow 220ms var(--sd-ease), border-color 220ms var(--sd-ease);
}
body.asc-portal-page .asc-staffdash__row:hover{
  transform: translateY(-1px);
  box-shadow: var(--sd-shadow-row-h);
  border-color: rgba(15,23,42,.12);
}

@media (max-width: 760px){
  body.asc-portal-page .asc-staffdash__row{ grid-template-columns: 1fr; }
}

body.asc-portal-page .asc-staffdash__title{
  font-weight: 1000;
  letter-spacing: -0.02em;
  color: var(--sd-ink);
  line-height: 1.2;
}

body.asc-portal-page .asc-staffdash__meta{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Chips */
body.asc-portal-page .asc-staffdash__chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: var(--sd-r-pill);
  background: rgba(15,23,42,.045);
  border: 1px solid rgba(15,23,42,.08);
  color: rgba(15,23,42,.76);
  font-weight: 850;
  font-size: 12.5px;
}

/* Buttons */
body.asc-portal-page .asc-staffdash__rowActions{
  display: grid;
  gap: 10px;
  justify-items: stretch;
  align-content: start;
}

body.asc-portal-page .asc-staffdash__btn{
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 1000;
  letter-spacing: -0.01em;
  text-decoration: none !important;

  background: var(--sd-graph-gloss), var(--sd-graph);
  border: 1px solid var(--sd-graph-border);
  color: rgba(255,255,255,.94);

  box-shadow: 0 18px 46px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);

  transition: transform 180ms var(--sd-ease), box-shadow 220ms var(--sd-ease), border-color 220ms var(--sd-ease), filter 220ms var(--sd-ease);
}
body.asc-portal-page .asc-staffdash__btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
  filter: saturate(1.06) contrast(1.02);
}

body.asc-portal-page .asc-staffdash__btn--ghost{
  background: linear-gradient(180deg, rgba(15,23,42,.06), rgba(15,23,42,.04));
  border: 1px solid rgba(15,23,42,.12);
  color: rgba(15,23,42,.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

/* Reason block (overdue) */
body.asc-portal-page .asc-staffdash__reason{
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,.08);
  display: grid;
  gap: 10px;
}

body.asc-portal-page .asc-staffdash__label{
  font-weight: 950;
  letter-spacing: -0.01em;
  color: rgba(15,23,42,.82);
}

body.asc-portal-page .asc-staffdash__textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.96);
  padding: 12px 12px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80);
  color: rgba(15,23,42,.90);
  font-weight: 750;
}

body.asc-portal-page .asc-staffdash__empty{
  padding: 14px;
  border-radius: 16px;
  background: rgba(15,23,42,.04);
  border: 1px dashed rgba(15,23,42,.16);
  color: rgba(15,23,42,.70);
  font-weight: 800;
}
/* Vault: show filename + reason note stacked nicely */
body.asc-portal-page .asc-vault-list .asc-tk-item__name{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  display: grid !important;
  gap: 4px !important;
}

body.asc-portal-page .asc-vault__reason{
  font-size: 12px;
  font-weight: 850;
  color: rgba(108,42,34,0.92);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* keep it tidy */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.asc-portal-page .asc-vault__fname{
  font-weight: 900;
  color: rgba(15,23,42,0.92);
}

/* =========================================================
   Manager Dashboard — NO HORIZONTAL SCROLL + PREMIUM GRID
   Targets ONLY the new .asc-mgrdashRow markup
========================================================= */

body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__list{
  overflow-x: hidden !important;
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__head{
  display: grid !important;
  grid-template-columns:
    120px
    minmax(240px, 1.4fr)
    120px
    220px
    170px
    240px
    minmax(220px, 260px);
  gap: 12px;
  align-items: end;
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashRow{
  display: grid;
  grid-template-columns:
    120px
    minmax(240px, 1.4fr)
    120px
    220px
    170px
    240px
    minmax(220px, 260px);
  gap: 12px;
  align-items: center;

  width: 100%;
  max-width: 100%;
  overflow: hidden;

  padding: 16px;
  margin: 0 0 12px 0;

  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.985), rgba(255,255,255,.94));
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 60px rgba(2,8,6,.10), 0 6px 18px rgba(2,8,6,.06);
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashRow__cell{
  min-width: 0;
}

/* Staff cell */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashRow__staff{
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashRow__avatar{
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #2d343a 0%, #151a1f 100%);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.94);
  font-weight: 1000;
  letter-spacing: -0.02em;
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashRow__name{
  font-weight: 1000;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashRow__email{
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 850;
  color: rgba(15,23,42,.58);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Metrics */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashRow__val{
  font-weight: 1000;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.92);
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashRow__sub{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 850;
  color: rgba(15,23,42,.56);
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashRow__when{
  white-space: normal;
  line-height: 1.2;
}

/* Actions */
body.asc-portal-page .asc-mgrdash2 .asc-mgrdashRow__actions{
  display: grid;
  gap: 10px;
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashRow__btn{
  height: 44px;
  border-radius: 14px;
  padding: 0 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 1000;
  letter-spacing: -0.01em;
  text-decoration: none;

  background: linear-gradient(180deg, #2d343a 0%, #151a1f 100%);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.94);
  box-shadow: 0 18px 46px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrdashRow__btn--ghost{
  background: linear-gradient(180deg, rgba(15,23,42,.055), rgba(15,23,42,.035));
  border: 1px solid rgba(15,23,42,.12);
  color: rgba(15,23,42,.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80);
}

/* Responsive: stack without needing horizontal scroll */
@media (max-width: 1150px){
  body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__head{ display:none !important; }
  body.asc-portal-page .asc-mgrdash2 .asc-mgrdashRow{
    grid-template-columns: 1fr;
  }
  body.asc-portal-page .asc-mgrdash2 .asc-mgrdashRow__actions{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px){
  body.asc-portal-page .asc-mgrdash2 .asc-mgrdashRow__actions{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   Manager Dashboard — Premium Cards (NO horizontal overflow)
   Paste at VERY END of stylesheet
========================================================= */

body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__head{
  display: none !important; /* we removed the table header */
}

/* Make sure nothing clips inside the panel */
body.asc-portal-page .asc-mgrdash2 .asc-eco__panel,
body.asc-portal-page .asc-mgrdash2 .asc-mgrdash2__panel{
  overflow: visible !important;
  transform: none !important; /* overrides older translateX rules */
}

/* List wrapper */
body.asc-portal-page .asc-mgrdash2 .asc-mgrcards{
  display: grid;
  gap: 12px;
}

/* Card */
body.asc-portal-page .asc-mgrdash2 .asc-mgrcard{
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.985), rgba(255,255,255,.94));
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 60px rgba(2,8,6,.10), 0 6px 18px rgba(2,8,6,.06);
  padding: 16px;
  max-width: 100%;
  overflow: hidden; /* contains long emails safely */
}

/* Top: who + status + actions */
body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__top{
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(220px, 320px);
  gap: 12px;
  align-items: center;
}

@media (max-width: 980px){
  body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__top{
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* Identity */
body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__who{
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__avatar{
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #2d343a 0%, #151a1f 100%);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.94);
  font-weight: 1000;
  letter-spacing: -0.02em;
  box-shadow: 0 18px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.10);
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__name{
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: -0.03em;
  color: rgba(15,23,42,.92);
  line-height: 1.1;
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__email{
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 850;
  color: rgba(15,23,42,.58);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Actions */
body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__actions{
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

@media (max-width: 980px){
  body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__actions{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px){
  body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__actions{
    grid-template-columns: 1fr;
  }
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__btn{
  height: 44px;
  border-radius: 14px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  letter-spacing: -0.01em;
  text-decoration: none;
  background: linear-gradient(180deg, #2d343a 0%, #151a1f 100%);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.94);
  box-shadow: 0 18px 46px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__btn--ghost{
  background: linear-gradient(180deg, rgba(15,23,42,.055), rgba(15,23,42,.035));
  border: 1px solid rgba(15,23,42,.12);
  color: rgba(15,23,42,.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80);
}

/* Metrics row: wraps automatically (no overflow) */
body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__metrics{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.08);

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 980px){
  body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__metrics{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px){
  body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__metrics{
    grid-template-columns: 1fr;
  }
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__label{
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 950;
  color: rgba(15,23,42,.52);
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__val{
  margin-top: 6px;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: -0.03em;
  color: rgba(15,23,42,.92);
  font-variant-numeric: tabular-nums;
}
.asc-eco__status.is-warn{
  background: rgba(245,158,11,0.14);
  border: 1px solid rgba(245,158,11,0.35);
  color: #92400e;
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__sub{
  margin-top: 3px;
  font-size: 12px;
  font-weight: 850;
  color: rgba(15,23,42,.56);
}

body.asc-portal-page .asc-mgrdash2 .asc-mgrcard__when{
  white-space: normal;
  line-height: 1.2;
}
/* Hero contact note (below buttons) */
.asc-home__contactNote{
  color: rgba(255,255,255,0.70);
  font-weight: 700;
  line-height: 1.7;
  font-size: 13px;
}

.asc-home__contactLink{
  color: rgba(255,255,255,0.90) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  font-weight: 900;
  padding-bottom: 2px;
}

.asc-home__contactLink:hover{
  border-bottom-color: rgba(183,245,59,0.45);
}

.asc-home__sep{
  display:inline-block;
  margin: 0 8px;
  color: rgba(255,255,255,0.35);
}

/* Make primary login button feel premium */
.asc-home__btn--primary{
  min-width: 140px;
}

.asc-home__btn--primary::after{
  content: "→";
  margin-left: 10px;
  opacity: 0.9;
  transform: translateY(-0.5px);
}
/* =========================================================
   ONLYOFFICE Editor Page — Responsive Pack
   Target: body.asc-oo-editor
   Paste at END of the editor page <style> block
========================================================= */

body.asc-oo-editor{
  margin:0;
  height:100%;
  overflow:hidden;               /* prevent double scroll */
  -webkit-text-size-adjust:100%; /* iOS text scaling sanity */
}

/* Make the editor always fill remaining space reliably */
body.asc-oo-editor #asc-doc-editor{
  height: calc(100dvh - 64px); /* dynamic viewport (mobile-safe) */
  width: 100%;
}

/* Fallback if dvh not supported */
@supports not (height: 100dvh){
  body.asc-oo-editor #asc-doc-editor{
    height: calc(100vh - 64px);
  }
}

/* ---------- App bar responsiveness ---------- */
@media (max-width: 980px){
  body.asc-oo-editor .bar{
    height: auto;
    padding: 10px 12px;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  body.asc-oo-editor .bar strong{
    max-width: 100%;
    width: 100%;
    font-size: 13px;
    line-height: 1.25;
  }

  /* The right-side button cluster */
  body.asc-oo-editor .bar > div{
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  body.asc-oo-editor #ascActionStatus{
    width: 100%;
    margin-left: 0 !important;
    margin-top: 6px;
  }

  /* Editor height adjusts because bar becomes taller */
  body.asc-oo-editor #asc-doc-editor{
    height: calc(100dvh - 120px);
  }
  @supports not (height: 100dvh){
    body.asc-oo-editor #asc-doc-editor{
      height: calc(100vh - 120px);
    }
  }
}

/* Small phones */
@media (max-width: 560px){
  body.asc-oo-editor .btn,
  body.asc-oo-editor .btn2{
    width: 100%;
    justify-content: center;
    padding: 11px 14px;
  }
}

/* ---------- Modals: fit nicely on phones/tablets ---------- */
body.asc-oo-editor .modal{
  padding: 14px;
}

body.asc-oo-editor .card{
  width: min(560px, 100%);
  border-radius: 16px;
}

body.asc-oo-editor .actions{
  flex-wrap: wrap;
  justify-content: stretch;
}

body.asc-oo-editor .actions .btn,
body.asc-oo-editor .actions .btn2{
  flex: 1 1 160px;
}

/* Make the review textarea comfortable on mobile */
body.asc-oo-editor textarea{
  font-size: 16px; /* prevents iOS zoom-on-focus */
}

/* ---------- Reduced motion (nice-to-have) ---------- */
@media (prefers-reduced-motion: reduce){
  body.asc-oo-editor *{
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
/* =========================================================
   GLOBAL RESPONSIVE PACK (Phones + Tablets)
   Paste into: Appearance → Customize → Additional CSS
   Theme: Kadence-safe, site-wide
========================================================= */

/* ---------- 0) Core safety: prevent sideways scroll ---------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Ensure long strings don't break layouts (URLs, file names, tokens) */
* {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- 1) Tap targets + readable base on mobile ---------- */
@media (max-width: 768px) {
  body {
    font-size: 16px; /* avoids tiny text + iOS zoom quirks */
    line-height: 1.55;
  }

  /* Make common interactive elements easier to tap */
  a, button, input, select, textarea {
    min-height: 44px;
  }

  /* Inputs can be taller without breaking desktop */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
  }
}

/* ---------- 2) Media elements: always scale to container ---------- */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

iframe, embed, object {
  max-width: 100%;
}

/* Responsive iframe wrapper helper (optional class you can use anywhere) */
.responsive-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  border-radius: 12px;
}
.responsive-embed > iframe,
.responsive-embed > embed,
.responsive-embed > object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- 3) Tables: mobile-friendly without destroying markup ---------- */
/* This catches WP blocks, plugin tables, and most theme tables */
table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

/* Wrap overflowing tables in a scroll container automatically */
@media (max-width: 980px) {
  /* Many themes/plugins place tables in the content area; this helps */
  .entry-content table,
  .wp-block-table table,
  .content-area table,
  main table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep cells from forcing huge widths */
  .entry-content th,
  .entry-content td,
  .wp-block-table th,
  .wp-block-table td,
  main th,
  main td {
    white-space: nowrap; /* makes horizontal scroll clean */
  }
}

/* Optional: if you *want* wrapping inside cells instead of nowrap, swap:
   white-space: normal;
   (But nowrap is usually best for tables on phones.) */

/* ---------- 4) Content padding: prevent edge-to-edge squish ---------- */
/* Kadence uses containers; this adds sensible mobile padding without changing desktop */
@media (max-width: 980px) {
  .content-container,
  .content-wrap,
  .entry-content-wrap,
  .site-container,
  .site-inner,
  .container,
  .wp-site-blocks {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 560px) {
  .content-container,
  .content-wrap,
  .entry-content-wrap,
  .site-container,
  .site-inner,
  .container,
  .wp-site-blocks {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ---------- 5) Columns/rows: stack common multi-column layouts ---------- */
/* WP block columns */
@media (max-width: 980px) {
  .wp-block-columns {
    flex-direction: column !important;
  }
  .wp-block-column {
    width: 100% !important;
  }
}

/* Generic grid-ish helpers used by many plugins */
@media (max-width: 980px) {
  .row, .columns, .grid, .grid-cols-2, .grid-cols-3, .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- 6) Buttons in groups: wrap instead of overflow ---------- */
@media (max-width: 768px) {
  .wp-block-buttons,
  .wp-block-button,
  .button,
  .btn,
  .btn2 {
    max-width: 100%;
  }

  .wp-block-buttons {
    flex-wrap: wrap;
  }

  /* If you have button rows that overflow */
  .actions,
  .button-group,
  .btn-group {
    flex-wrap: wrap;
  }
}

/* ---------- 7) Modals/overlays: fit on small screens ---------- */
@media (max-width: 560px) {
  .modal, [role="dialog"] {
    padding: 14px !important;
  }
  .card, .dialog, .modal-content {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---------- 8) Reduced motion (global polish) ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}