/* MeetingCost Pro authenticated visual identity v1.1.
   Scoped to authenticated Pro pages only; Free and public Pro remain untouched.
   Visual styles only: no interaction, authentication or meeting-state changes. */
:root { --mc-pro-navy:#092f70; --mc-pro-blue:#0866d7; --mc-pro-ice:#e8f4ff; }
html.proDocument body.proPage {
  min-height:100vh!important;
  background:radial-gradient(ellipse at 15% 7%,#f6fbff 0%,transparent 42%),
    radial-gradient(ellipse at 92% 83%,#cdeeff 0%,transparent 49%),
    linear-gradient(145deg,#e6f3ff 0%,#f3f9ff 49%,#dcecff 100%)!important;
  color:#102f65;
}
html.proDocument body.proPage::before {
  content:"";position:fixed;inset:auto 0 0;z-index:0;pointer-events:none;
  height:clamp(60px,13vh,155px);
  background:linear-gradient(165deg,#a5d5ff 0%,#4a9df0 53%,#0754b7 100%);
  clip-path:polygon(0 44%,18% 38%,39% 67%,59% 53%,78% 19%,100% 35%,100% 100%,0 100%);
  opacity:.8;
}
html.proDocument body.proPage .proFrame {
  background:transparent!important;color:#0b326f!important;
  max-width:1500px!important;
}
html.proDocument body.proPage .proFrame .proShell {
  background:transparent!important;border-bottom:1px solid #bdd7f3!important;
}
html.proDocument body.proPage .proFrame .publicMenuButton {
  background:linear-gradient(140deg,#125cb4,#052f75)!important;color:white!important;
  border:1px solid #236ec5!important;border-radius:15px!important;
  box-shadow:0 8px 18px #063c8b25!important;
}
html.proDocument body.proPage .proFrame .planBadge {
  background:#d9eaff!important;color:#0756ad!important;
}
html.proDocument body.proPage .proFrame .proMenuLeft {
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
  width:100%!important;gap:14px!important;
}
html.proDocument body.proPage .proFrame .proMenuLeft .navButton {
  display:flex!important;align-items:center!important;justify-content:center!important;
  min-height:68px!important;padding:12px 14px!important;
  border-radius:19px!important;border:1px solid #c4ddf7!important;
  background:linear-gradient(160deg,#fff,#f4f9ff)!important;color:#123c80!important;
  box-shadow:0 9px 21px #0a4a9b14!important;
  font-size:clamp(12px,1.08vw,16px)!important;
  transition:box-shadow .15s ease,transform .15s ease;
}
html.proDocument body.proPage .proFrame .proMenuLeft .navButton:hover {
  transform:translateY(-1px);box-shadow:0 11px 23px #0a4a9b27!important;
}
html.proDocument body.proPage .proFrame .proMenuLeft .navButton.active,
html.proDocument body.proPage .proFrame .proMenuLeft .navButton.homeNav.active {
  color:#fff!important;border-color:#0657ba!important;
  background:linear-gradient(120deg,#259af0,#0865d0 52%,#063b93)!important;
  box-shadow:0 10px 23px #0754b52d!important;
}
html.proDocument body.proPage .proFrame .proMenuLeft .navButton.homeNav:not(.active) {
  background:linear-gradient(160deg,#fff,#f4f9ff)!important;color:#123c80!important;
  border-color:#c4ddf7!important;
}
html.proDocument body.proPage .proFrame .flagDropdown>summary {
  border-radius:999px!important;border-color:#bdd8f6!important;
  box-shadow:0 4px 12px #0d4f9510;
}
html.proDocument body.proPage .proFrame .textButton {color:#0b438f!important;}
html.proDocument body.proPage .proContent .dashboardCard {
  max-width:1450px!important;margin:25px auto 32px!important;padding:34px!important;
  background:linear-gradient(145deg,#fffffffa,#f6fafff5)!important;
  border:1px solid #d6e7fb!important;border-radius:30px!important;
  box-shadow:0 20px 48px #0a4c9420!important;
}
html.proDocument body.proPage .proContent .dashboardHead h1 {
  position:relative;padding-left:19px;color:#082d6b!important;
  font-size:clamp(27px,2.4vw,37px)!important;
}
html.proDocument body.proPage .proContent .dashboardHead h1::before {
  content:"";position:absolute;left:0;top:5px;bottom:5px;width:6px;
  border-radius:99px;background:#0874e9;
}
html.proDocument body.proPage .proContent .dashboardCols {
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:24px!important;
}
html.proDocument body.proPage .proContent .dashboardCols>div {
  min-width:0!important;padding:20px!important;border:1px solid #cce2fc!important;
  border-radius:24px!important;background:linear-gradient(160deg,#fafdff,#f2f8ff)!important;
  box-shadow:0 12px 28px #1455a214!important;
}
html.proDocument body.proPage .proContent .dashboardCols h2 {
  margin:0 0 15px!important;padding:15px 18px!important;
  border-radius:14px!important;background:linear-gradient(100deg,#e9f4ff,#c9e1ff)!important;
  color:#0a3579!important;font-size:clamp(19px,1.6vw,25px)!important;
}
html.proDocument body.proPage .proContent .dashRow {
  display:flex!important;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 16px!important;margin-bottom:9px;
  background:#fff!important;border:1px solid #e1ebf8!important;
  border-radius:12px!important;color:#0b2d64!important;
}
html.proDocument body.proPage .proContent .dashRow span {
  color:#506888!important;text-align:right;
}
html.proDocument body.proPage .proContent .dashboardHead .primary,
html.proDocument body.proPage .proContent .dashboardHead .linkButton {
  background:linear-gradient(120deg,#228ff0,#065ec9,#063b91)!important;
  color:#fff!important;border-color:#0860c9!important;border-radius:17px!important;
  box-shadow:0 11px 24px #0957ac27!important;
}
/* Authenticated Pro actions outside the dashboard retain their existing behavior. */
html.proDocument body.proPage .proContent .primary {
  background:linear-gradient(120deg,#218de9,#065ec9)!important;
  color:#fff!important;border-color:#0860c9!important;
  box-shadow:0 7px 16px #0957ac20!important;
}
html.proDocument body.proPage .proContent .muted {color:#516b8d!important;}
@media(max-width:850px) {
  html.proDocument body.proPage .proFrame .proMenuLeft {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  html.proDocument body.proPage .proContent .dashboardCols {
    grid-template-columns:1fr!important;
  }
  html.proDocument body.proPage .proContent .dashboardCard {
    margin:16px 12px 25px!important;padding:18px!important;
  }
  html.proDocument body.proPage .proContent .dashboardHead {flex-wrap:wrap;gap:14px;}
}
@media(max-width:480px) {
  html.proDocument body.proPage .proFrame .proMenuLeft .navButton {min-height:54px!important;}
  html.proDocument body.proPage .proContent .dashRow {align-items:flex-start;flex-direction:column;}
  html.proDocument body.proPage .proContent .dashRow span {text-align:left;}
}
@media(prefers-reduced-motion:reduce) {
  html.proDocument body.proPage .proFrame .proMenuLeft .navButton {transition:none;}
}

/* v1.1: Layered waves visible above the page background, below all content */
html.proDocument body.proPage {position:relative;isolation:isolate;}
html.proDocument body.proPage::after {
 content:"";position:fixed;inset:auto 0 0;z-index:0;pointer-events:none;
 height:clamp(125px,22vh,240px);
 background:linear-gradient(110deg,#eaf5ff,#b7d9ff 53%,#e3f3ff);
 clip-path:polygon(0 52%,17% 34%,34% 23%,51% 44%,67% 64%,84% 25%,100% 11%,100% 100%,0 100%);
 opacity:.84;
}
html.proDocument body.proPage .proFrame,
html.proDocument body.proPage .proContent {position:relative;z-index:1;}
/* Restore fixed-position overlay controls; never force them into document flow. */
html.proDocument body.proPage .helpFab {position:fixed!important;right:20px!important;bottom:20px!important;left:auto!important;top:auto!important;z-index:1001!important;}
html.proDocument body.proPage .modal {position:fixed;z-index:1000;}
html.proDocument body.proPage .proFrame .proMenuLeft .navButton {gap:10px!important;}
html.proDocument body.proPage .proFrame .proMenuLeft .navButton .mcNavIcon {width:20px;height:20px;display:inline-flex;flex:none;}
html.proDocument body.proPage .proFrame .proMenuLeft .navButton .mcNavIcon svg {width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
html.proDocument body.proPage .proContent .dashboardCols h2 {display:flex;align-items:center;gap:10px;}
html.proDocument body.proPage .proContent .dashboardCols>div:first-child h2::before {content:"▦";color:#0866d7;font-size:25px;line-height:1;}
html.proDocument body.proPage .proContent .dashboardCols>div:nth-child(2) h2::before {content:"◷";color:#0866d7;font-size:26px;line-height:1;}
@media(max-width:480px){html.proDocument body.proPage .proFrame .proMenuLeft .navButton {gap:5px!important;}}

/* v1.3: desktop viewport-fit without clipping long Pro forms or tables. */
@media (min-width: 901px) {
  html.proDocument body.proPage main.accountPage.proContent {
    display:block!important;grid-template-columns:none!important;
    grid-template-rows:none!important;min-height:0!important;height:auto!important;
    max-width:1500px!important;margin:0 auto!important;
    padding:clamp(6px,1.3vh,14px) 24px 18px!important;
    overflow:visible!important;
  }
  html.proDocument body.proPage .proFrame {padding-top:clamp(4px,.8vh,10px)!important;}
  html.proDocument body.proPage .proFrame .proShellTop {
    height:clamp(65px,8vh,78px)!important;min-height:0!important;
  }
  html.proDocument body.proPage .proFrame .proLogo,
  html.proDocument body.proPage .proFrame .proLogo>img {height:70px!important;}
  html.proDocument body.proPage .proFrame .proMenu {gap:4px 12px!important;padding-bottom:5px!important;}
  html.proDocument body.proPage .proFrame .proMenuLeft .navButton {
    min-height:clamp(49px,6.5vh,62px)!important;padding:9px 12px!important;
  }
  html.proDocument body.proPage .proFrame .proRight .flagDropdown>summary {height:34px!important;}
  html.proDocument body.proPage .proContent .dashboardCard {
    margin:clamp(7px,1.5vh,16px) auto 12px!important;
    padding:clamp(17px,2.5vh,28px)!important;
  }
  html.proDocument body.proPage .proContent .dashboardCols {gap:clamp(12px,1.6vw,20px)!important;}
  html.proDocument body.proPage .proContent .dashboardCols>div {padding:clamp(12px,1.8vh,18px)!important;}
  html.proDocument body.proPage .proContent .dashboardCols h2 {
    margin-bottom:10px!important;padding:11px 14px!important;
  }
  html.proDocument body.proPage .proContent .dashRow {
    padding:10px 14px!important;margin-bottom:7px!important;
  }
  html.proDocument body.proPage .proContent .dashboardHead h1 {margin-top:0!important;}
  html.proDocument body.proPage .proContent .dashboardHead p {margin-bottom:12px!important;}
}
/* Short laptop displays: reduce chrome further, but never hide content. */
@media (min-width:901px) and (max-height:780px) {
  html.proDocument body.proPage .proFrame .proShellTop {height:60px!important;}
  html.proDocument body.proPage .proFrame .proLogo,
  html.proDocument body.proPage .proFrame .proLogo>img {height:60px!important;}
  html.proDocument body.proPage .proFrame .proMenuLeft .navButton {min-height:46px!important;}
  html.proDocument body.proPage .proContent .dashboardCard {padding:16px!important;}
  html.proDocument body.proPage .proContent .dashboardCols>div {padding:12px!important;}
  html.proDocument body.proPage .proContent .dashboardCols h2 {padding:9px 12px!important;}
}

/* v1.4: Keep the language selector above the main content card.
   The header and main area are separate stacking contexts. */
html.proDocument body.proPage .proFrame {
  position:relative!important;z-index:50!important;overflow:visible!important;
}
html.proDocument body.proPage .proFrame .proShell,
html.proDocument body.proPage .proFrame .proMenu,
html.proDocument body.proPage .proFrame .proRight {overflow:visible!important;}
html.proDocument body.proPage .proFrame .flagDropdown[open] {z-index:100!important;}
html.proDocument body.proPage .proFrame .flagDropdownMenu {z-index:101!important;}
html.proDocument body.proPage .proContent {position:relative;z-index:1!important;}
/* Retain the compact viewport styling from v1.3. */