/* Approved ScreenshotFiles UI components, adapted to the live application.
   Component tokens are intentionally scoped: app.css already uses --muted
   for text while the source components use it for a surface. */

#main-menu-dropdown-v2,
#accountBox,
#pro-trial-clouds-v8,
.thumb.sf-shot {
  --ui-background: var(--bg);
  --ui-foreground: var(--text);
  --ui-card: var(--surface);
  --ui-card-soft: var(--surface2);
  --ui-muted: var(--surface3);
  --ui-muted-foreground: var(--text-soft);
  --ui-primary: var(--accent);
  --ui-primary-foreground: var(--accent-ink);
  --ui-border: var(--border2);
}

/* Main menu */
#main-menu-dropdown-v2 .md-trigger {
  min-height: 42px;
  gap: 8px;
  border-color: var(--ui-border);
  background: color-mix(in srgb, var(--ui-card) 86%, transparent);
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

#main-menu-dropdown-v2 .md-trigger:is(:hover, :focus-visible),
#main-menu-dropdown-v2 .md-trigger[aria-expanded="true"] {
  color: var(--ui-primary);
  border-color: var(--ui-primary);
  background: color-mix(in srgb, var(--ui-primary) 8%, var(--ui-card));
}

#main-menu-dropdown-v2 .md-panel {
  width: min(344px, calc(100vw - 24px));
  max-height: min(76vh, 680px);
  padding: 8px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ui-card) 96%, transparent);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .34);
  transform-origin: top right;
}

#main-menu-dropdown-v2 .menu-group {
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}

#main-menu-dropdown-v2 .menu-group:last-of-type { border-bottom: 0; }

#main-menu-dropdown-v2 .menu-section-label {
  padding: 4px 10px 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

#main-menu-dropdown-v2 .md-panel button {
  min-height: 48px;
  padding: 7px 10px;
  border-radius: 10px;
}

#main-menu-dropdown-v2 .md-panel button:hover {
  background: color-mix(in srgb, var(--ui-primary) 8%, var(--ui-card));
}

#main-menu-dropdown-v2 .menu-icon {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface2);
}

#main-menu-dropdown-v2 .menu-danger:hover { background: var(--danger-soft); }
#main-menu-dropdown-v2 .menu-shortcut { margin: 6px 4px 2px; border-radius: 9px; }

/* Email account */
#accountBox.account-component-shell {
  width: min(680px, calc(100vw - 28px));
  max-height: min(88vh, 780px);
  padding: 24px;
  overflow: auto;
  border-radius: 18px;
}

#accountBox .es-shell { width: min(100%, 560px); margin-inline: auto; }
#accountBox .es-account-label,
#accountBox .ap-kicker {
  color: var(--ui-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

#accountBox .es-title { margin-top: 10px; font-size: 26px; letter-spacing: -.025em; }
#accountBox .account-benefits { margin-top: 22px; }
#accountBox .account-benefits li {
  padding: 14px;
  border-color: var(--ui-border);
  background: var(--ui-card-soft);
}

#accountBox .account-email-row { margin-top: 8px; }
#accountBox .account-email-row input { min-height: 46px; font-size: 16px; }
#accountBox .es-send { min-width: 150px; }

#accountBox .account-pro-hint {
  margin-top: 18px;
  border-color: color-mix(in srgb, var(--ui-primary) 35%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-primary) 6%, var(--ui-card));
}

/* The one plan sentence a guest ever reads inside this modal. Glow is used as
   a thin edge only, so the accent stays far below its share of the screen. */
#accountBox .account-limit-notice {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--ui-primary) 30%, var(--ui-border));
  border-left-width: 3px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-primary) 7%, var(--ui-card));
  color: var(--ui-foreground);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

/* Signed-in account */
#accountBox .ap-shell { width: 100%; }
#accountBox .ap-topbar { position: static; display: flex; align-items: center; justify-content: space-between; width: auto; height: auto; margin-bottom: 18px; padding: 0; border: 0; background: transparent; }
#accountBox .ap-topbar h2 { margin: 5px 0 0; font-size: 22px; letter-spacing: -.025em; }

#accountBox .account-profile-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-card-soft);
}

#accountBox .account-avatar-large { width: 58px; height: 58px; border-radius: 18px; }
#accountBox .account-profile-copy strong { font-size: 14px; }
#accountBox .account-profile-copy span { font-size: 12px; }

#accountBox .ap-current-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--muted);
  font-size: 12px;
}

#accountBox .ap-current-plan strong { color: var(--ui-primary); font-size: 13px; }
#accountBox .ap-usage { padding: 17px; border: 1px solid var(--ui-border); border-radius: 14px; }
#accountBox .ap-section-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
#accountBox .ap-section-heading h3 { margin: 0; font-size: 15px; }
#accountBox .ap-section-heading p,
#accountBox .ap-section-heading > span { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
#accountBox .ap-usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 17px; }
#accountBox .ap-meter-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: 11.5px; }
#accountBox .ap-meter-head span { color: var(--text-soft); }
#accountBox .ap-meter-head strong { font-size: 11.5px; }
#accountBox .ap-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface3); }
#accountBox .ap-track > span { display: block; width: var(--ap-progress, 0%); height: 100%; border-radius: inherit; background: var(--ui-primary); transition: width 220ms ease; }
#accountBox .ap-history-row { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border); color: var(--text-soft); font-size: 12px; }
#accountBox .ap-history-row strong { color: var(--text); }

#accountBox .ap-pro-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--ui-primary) 42%, var(--ui-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--ui-primary) 7%, var(--ui-card));
}

#accountBox .ap-crown { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 14%, var(--ui-card)); font-size: 23px; }
#accountBox .ap-pro-strip strong,
#accountBox .ap-pro-strip small { display: block; }
#accountBox .ap-pro-strip strong { font-size: 13px; }
#accountBox .ap-pro-strip small { margin-top: 3px; color: var(--muted); font-size: 11px; }
#accountBox .account-actions { justify-content: flex-start; margin-top: 15px; }
#accountBox .account-actions button,
#accountBox .ap-pro-strip button { min-height: 44px; }
#accountBox .ap-data-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 15px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-card-soft);
}
#accountBox .ap-data-card h3 { margin: 0; font-size: 14px; }
#accountBox .ap-data-card p { max-width: 360px; margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
#accountBox .ap-data-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
#accountBox .ap-data-actions button { min-height: 40px; }

/* -- PASSKEYS --
   The passkey card stacks instead of sitting in a row, because it carries a
   list rather than one line of copy. Everything else reuses .ap-data-card. */
#accountBox .ap-passkeys {
  flex-direction: column;
  align-items: stretch;
}
#accountBox .ap-passkeys p { max-width: none; }
#accountBox .passkey-list { margin: 12px 0 0; padding: 0; list-style: none; }
#accountBox .passkey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--ui-border);
}
#accountBox .passkey-row strong { display: block; font-size: 13px; }
#accountBox .passkey-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
#accountBox .passkey-remove { min-height: 40px; flex: 0 0 auto; }
/* Armed state for the second press. Danger colour only once it will actually
   delete something, so the resting row carries no alarm. */
#accountBox .passkey-remove.is-armed,
#accountBox #accountSignOutAllBtn.is-armed { color: var(--danger); border-color: var(--danger); }
#accountBox .passkey-empty { margin: 12px 0 0; color: var(--muted); font-size: 11px; }
#accountBox #passkeyError { margin-top: 10px; }

/* Sign-in modal. The passkey button sits above the email field and uses the
   plain button style, not Glow: Glow is already spent on "Send sign-in link"
   and stays under 10 percent of the screen. */
.account-passkey {
  width: 100%;
  min-height: 52px;
  /* The shared button style is inline-block, so the direction below does
     nothing without this. Measured in Chrome: the two lines ran together. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  margin-top: 14px;
  padding: 9px 14px;
  text-align: left;
}
.account-passkey small { color: var(--muted); font-size: 11px; font-weight: 400; }
.account-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 2px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.account-divider::before,
.account-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ui-border);
}
.account-passkey[hidden],
.account-divider[hidden] { display: none; }
.account-delete-box { width: min(480px, calc(100vw - 28px)); }
.account-delete-confirm { display: block; margin: 20px 0 8px; color: var(--text-soft); font-size: 12px; }
.account-delete-confirm strong { color: var(--danger); font-family: var(--font-mono); letter-spacing: .06em; }
#accountDeleteInput { width: 100%; min-height: 46px; font-family: var(--font-mono); letter-spacing: .08em; }

/* Pro paywall component, v8.
   Source: jueminelcodes-jpg/ui, pro/pro-trial-clouds-v8-component.html.
   The source uses bare token names; the component scope aliases them to the
   application tokens so the rules below stay close to the design source.
   The source also relies on its demo utility classes, so the small set the
   component needs is redefined inside the scope. */
#paywallBackdrop .pc-shell {
  width: min(880px, calc(100vw - 28px));
  max-width: 880px;
  max-height: min(94vh, 920px);
  padding: 0;
  overflow: auto;
  border-radius: 20px;
}

#pro-trial-clouds-v8 {
  --primary: var(--ui-primary);
  --primary-foreground: var(--ui-primary-foreground);
  --background: var(--ui-background);
  --foreground: var(--ui-foreground);
  --card: var(--ui-card);
  --muted: var(--ui-muted);
  --muted-foreground: var(--ui-muted-foreground);
  --border: var(--ui-border);
  --input: var(--ui-border);
  --secondary: transparent;
  --secondary-foreground: var(--ui-foreground);
  --radius-lg: 12.5px;
  /* The source carries this id on a page level wrapper that centres a separate
     card. Here the id sits inside the modal box, so the hero and the content
     must stretch across the shell instead of shrinking to their own width. */
  display: grid;
  width: 100%;
  padding: 0;
  color: var(--foreground);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 21px;
}

#pro-trial-clouds-v8 :is(h2, h3, p, dd) { margin: 0; }

/* app.css still styles the bare `header` element for the application bar.
   The v8 markup uses semantic headers inside the modal, so the component
   neutralises that rule the same way #accountBox does for .ap-topbar. */
#pro-trial-clouds-v8 :is(.pc-heading, .pc-plan-heading) {
  position: static;
  z-index: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#pro-trial-clouds-v8 h2 { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
#pro-trial-clouds-v8 h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
#pro-trial-clouds-v8 .text-small,
#pro-trial-clouds-v8 small { font-size: 12px; line-height: 16px; }
#pro-trial-clouds-v8 .text-muted { color: var(--muted-foreground); }

#pro-trial-clouds-v8 .btn {
  appearance: button;
  display: inline-flex;
  inline-size: fit-content;
  max-inline-size: 100%;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  color: var(--secondary-foreground);
  background: var(--secondary);
  cursor: pointer;
  font: inherit;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

#pro-trial-clouds-v8 .btn.btn-block { inline-size: 100%; }
#pro-trial-clouds-v8 .btn-primary { border-color: transparent; color: var(--primary-foreground); }
#pro-trial-clouds-v8 .btn-ghost { border-color: transparent; color: var(--muted-foreground); background: transparent; }
#pro-trial-clouds-v8 .btn-ghost:not(:disabled):hover { color: var(--foreground); background: color-mix(in srgb, var(--foreground) 6%, transparent); }
#pro-trial-clouds-v8 .btn:active { transform: none; }

#pro-trial-clouds-v8 .pc-hero {
  /* The product mark is a cut out of a render that was lit against Ink, so a
     light surface exposes the removed backdrop as a grey residue. The hero band
     therefore stays on Ink in both themes, which is also what the brand guide
     asks for when the dark background mark is used. The tokens are overridden
     here so the topbar, clouds and orbits inside the hero follow along. */
  --card: var(--sf-ink);
  --background: var(--sf-ink);
  --foreground: var(--sf-paper);
  --muted: color-mix(in srgb, var(--sf-paper) 11%, var(--sf-ink));
  --muted-foreground: color-mix(in srgb, var(--sf-paper) 62%, transparent);
  position: relative;
  min-height: 212px;
  overflow: hidden;
  color: var(--foreground);
  background:
    radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--primary) 21%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--card) 88%, var(--primary)), var(--card) 66%);
}

#pro-trial-clouds-v8 .pc-topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
}

#pro-trial-clouds-v8 .pc-pro-pill,
#pro-trial-clouds-v8 .pc-free-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 500;
  letter-spacing: .04em;
}

#pro-trial-clouds-v8 .pc-close { min-height: 36px; padding: 0 8px; }

#pro-trial-clouds-v8 .pc-pro-pill svg,
#pro-trial-clouds-v8 .pc-close svg,
#pro-trial-clouds-v8 .pc-cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#pro-trial-clouds-v8 .pc-scene {
  position: absolute;
  inset: 0;
}

#pro-trial-clouds-v8 .pc-logo-wrap {
  position: absolute;
  left: 50%;
  bottom: 7px;
  z-index: 4;
  width: 166px;
  height: 166px;
  transform: translateX(-50%);
}

#pro-trial-clouds-v8 .pc-logo {
  position: absolute;
  top: -38px;
  left: -57px;
  z-index: 3;
  width: 280px;
  height: 280px;
  object-fit: contain;
  animation: pc-logo-pop 780ms cubic-bezier(.2, 1.15, .35, 1) 140ms both;
}

#pro-trial-clouds-v8 .pc-logo-halo {
  position: absolute;
  inset: 36px 24px 14px;
  z-index: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  filter: blur(18px);
  animation: pc-halo-in 620ms ease-out 220ms both;
}

#pro-trial-clouds-v8 .pc-crown {
  position: absolute;
  top: 33px;
  left: 57%;
  z-index: 5;
  width: 68px;
  height: 44px;
  filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--primary) 32%, transparent));
  transform: translateX(-50%) rotate(10deg);
  transform-origin: 50% 85%;
  animation: pc-crown-land 860ms cubic-bezier(.2, 1.4, .35, 1) 580ms both;
}

#pro-trial-clouds-v8 .pc-cloud {
  position: absolute;
  bottom: -3px;
  z-index: 2;
  width: 212px;
  color: color-mix(in srgb, var(--muted) 62%, transparent);
  fill: currentColor;
  filter: drop-shadow(0 -8px 22px color-mix(in srgb, var(--background) 13%, transparent));
}

#pro-trial-clouds-v8 .pc-cloud-left {
  left: -22px;
  animation: pc-cloud-left-in 720ms cubic-bezier(.2, .9, .3, 1.2) both;
}

#pro-trial-clouds-v8 .pc-cloud-right {
  right: -22px;
  transform: scaleX(-1);
  animation: pc-cloud-right-in 720ms cubic-bezier(.2, .9, .3, 1.2) 70ms both;
}

#pro-trial-clouds-v8 .pc-orbit {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-radius: 50%;
  transform: rotate(-14deg);
  opacity: .72;
}

#pro-trial-clouds-v8 .pc-orbit-a { inset: 65px 114px 8px; }
#pro-trial-clouds-v8 .pc-orbit-b { inset: 82px 156px 24px; transform: rotate(13deg); opacity: .38; }

#pro-trial-clouds-v8 .pc-content {
  display: grid;
  gap: 18px;
  padding: 22px 28px 26px;
}

#pro-trial-clouds-v8 .pc-heading {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

#pro-trial-clouds-v8 .pc-free-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}

/* States what is about to stop working. It sits above the heading because it
   is the reason this window opened, not a footnote to the offer. */
#pro-trial-clouds-v8 .pc-notice {
  max-width: 46ch;
  margin: 2px 0 4px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--ui-primary) 30%, var(--ui-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-primary) 8%, var(--ui-card));
  color: var(--ui-foreground);
  font-size: 13px;
  line-height: 1.5;
}

#pro-trial-clouds-v8 .pc-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-block: 1px solid var(--border);
}

#pro-trial-clouds-v8 .pc-plan {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 20px;
}

#pro-trial-clouds-v8 .pc-plan-pro {
  border-left: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--primary) 3%, transparent));
}

#pro-trial-clouds-v8 .pc-plan-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#pro-trial-clouds-v8 .pc-plan-heading > div {
  display: grid;
  gap: 4px;
}

#pro-trial-clouds-v8 .pc-plan-label {
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#pro-trial-clouds-v8 .pc-plan-label-pro { color: var(--primary); }

#pro-trial-clouds-v8 .pc-plan-price {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: var(--foreground);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

#pro-trial-clouds-v8 .pc-plan-pro .pc-plan-price { color: var(--primary); }
#pro-trial-clouds-v8 .pc-plan-price small { color: var(--muted-foreground); font-weight: 400; }

#pro-trial-clouds-v8 .pc-plan-facts {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--border);
}

#pro-trial-clouds-v8 .pc-plan-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 9px;
  border-bottom: 1px solid var(--border);
}

#pro-trial-clouds-v8 .pc-plan-facts dt { color: var(--muted-foreground); }
#pro-trial-clouds-v8 .pc-plan-facts dd { margin: 0; text-align: right; font-weight: 500; }
#pro-trial-clouds-v8 .pc-plan-pro .pc-plan-facts dd { color: var(--primary); }

#pro-trial-clouds-v8 .pc-feature-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

#pro-trial-clouds-v8 .pc-feature-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 38px;
  border-bottom: 1px solid var(--border);
}

#pro-trial-clouds-v8 .pc-feature-list li:last-child { border-bottom: 0; }
#pro-trial-clouds-v8 .pc-check { color: var(--primary); font-weight: 500; }
#pro-trial-clouds-v8 .pc-plan-free .pc-check { color: var(--foreground); }
#pro-trial-clouds-v8 .pc-dash,
#pro-trial-clouds-v8 .pc-feature-list .is-unavailable { color: var(--muted-foreground); }

/* The entry reason highlights the matching capability. */
#pro-trial-clouds-v8 .pc-plan-pro [data-paywall-feature].is-relevant {
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--primary);
}
#pro-trial-clouds-v8 .pc-plan-pro .pc-feature-list li.is-relevant { padding-inline: 7px; }
#pro-trial-clouds-v8 .pc-plan-pro .pc-plan-facts > div.is-relevant { padding-inline: 7px; }

/* The plan comparison is taller than the shell on a laptop screen, so the call
   to action stays pinned to the bottom of the scrolling modal instead of
   waiting below the fold. It releases once the reader reaches the trial steps,
   which keeps the closing copy and the Not now control reachable. */
#pro-trial-clouds-v8 .pc-cta-bar {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin-inline: -28px;
  padding: 12px 28px 14px;
  background: var(--card);
  box-shadow: 0 -12px 22px -12px color-mix(in srgb, var(--foreground) 34%, transparent);
}

#pro-trial-clouds-v8 .pc-cta {
  min-height: 54px;
  gap: 9px;
  color: var(--primary-foreground);
  border: 1px solid color-mix(in srgb, var(--primary) 72%, var(--foreground));
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, var(--foreground)), var(--primary));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 28%, transparent), inset 0 1px 0 color-mix(in srgb, var(--primary-foreground) 28%, transparent);
  font-weight: 500;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

#pro-trial-clouds-v8 .pc-cta.is-ready {
  animation: pc-cta-bounce 460ms cubic-bezier(.2, 1.3, .35, 1);
}

#pro-trial-clouds-v8 .pc-cta:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--primary) 34%, transparent), inset 0 1px 0 color-mix(in srgb, var(--primary-foreground) 32%, transparent);
}

#pro-trial-clouds-v8 .pc-price,
#pro-trial-clouds-v8 .pc-status { text-align: center; }
#pro-trial-clouds-v8 .pc-status:empty { display: none; }

/* The processor and statement descriptor line. It sits directly under the
   price note as a footnote rather than as a second paragraph, so the two read
   as one block of small print instead of competing. */
#pro-trial-clouds-v8 .pc-payment-trust {
  margin-top: 4px;
  opacity: 0.85;
}

#pro-trial-clouds-v8 .pc-trial-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--border);
}

#pro-trial-clouds-v8 .pc-trial-steps > div {
  display: grid;
  gap: 3px;
  padding: 11px 14px;
  text-align: center;
}

#pro-trial-clouds-v8 .pc-trial-steps > div + div { border-left: 1px solid var(--border); }
#pro-trial-clouds-v8 .pc-trial-steps span { color: var(--muted-foreground); font-size: 12px; }
#pro-trial-clouds-v8 .pc-trial-steps strong { color: var(--foreground); font-weight: 500; }
#pro-trial-clouds-v8 .pc-trial-steps > div:first-child strong,
#pro-trial-clouds-v8 .pc-trial-steps > div:last-child strong { color: var(--primary); }
#pro-trial-clouds-v8 .pc-trial-steps.is-no-trial { grid-template-columns: repeat(2, minmax(0, 1fr)); }

#pro-trial-clouds-v8 .pc-later {
  justify-self: center;
  color: var(--muted-foreground);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  font-weight: 400;
  opacity: .72;
  min-height: 40px;
}

#pro-trial-clouds-v8 .pc-logo-wrap.is-celebrating .pc-crown {
  animation: pc-crown-cheer 560ms cubic-bezier(.2, 1.35, .35, 1);
}

@keyframes pc-logo-pop {
  0% { opacity: 0; transform: translateY(22px) scale(.72) rotate(-5deg); }
  55% { opacity: 1; transform: translateY(-4px) scale(1.04) rotate(2deg); }
  72% { transform: translateY(2px) scale(.98) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes pc-crown-land {
  0% { opacity: 0; transform: translate(-50%, -34px) rotate(-7deg) scale(.6); }
  55% { opacity: 1; transform: translate(-50%, 4px) rotate(15deg) scale(1.06); }
  72% { transform: translate(-50%, -2px) rotate(7deg) scale(.98); }
  100% { opacity: 1; transform: translate(-50%, 0) rotate(10deg) scale(1); }
}

@keyframes pc-crown-cheer {
  0%, 100% { transform: translateX(-50%) rotate(10deg) scale(1); }
  28% { transform: translate(-50%, -8px) rotate(1deg) scale(1.06); }
  58% { transform: translate(-50%, -3px) rotate(18deg) scale(1.03); }
  78% { transform: translate(-50%, 0) rotate(7deg) scale(.99); }
}

@keyframes pc-cloud-left-in {
  0% { opacity: 0; transform: translate(-38px, 20px) scale(.82); }
  70% { opacity: 1; transform: translate(4px, -2px) scale(1.02); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes pc-cloud-right-in {
  0% { opacity: 0; transform: scaleX(-1) translate(-38px, 20px) scale(.82); }
  70% { opacity: 1; transform: scaleX(-1) translate(4px, -2px) scale(1.02); }
  100% { opacity: 1; transform: scaleX(-1) translate(0, 0) scale(1); }
}

@keyframes pc-halo-in {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pc-cta-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-3px) scale(1.018); }
  68% { transform: translateY(1px) scale(.992); }
}

@media (max-width: 720px) {
  #pro-trial-clouds-v8 .pc-plans { grid-template-columns: 1fr; }
  #pro-trial-clouds-v8 .pc-plan-pro {
    border-top: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
    border-left: 0;
  }
}

@media (max-width: 590px) {
  #pro-trial-clouds-v8 .pc-content { padding-inline: 16px; }
  #pro-trial-clouds-v8 .pc-cta-bar { margin-inline: -16px; padding-inline: 16px; }
  #pro-trial-clouds-v8 .pc-plan { padding-inline: 12px; }
  #pro-trial-clouds-v8 .pc-trial-steps { grid-template-columns: 1fr; }
  #pro-trial-clouds-v8 .pc-trial-steps.is-no-trial { grid-template-columns: 1fr; }
  #pro-trial-clouds-v8 .pc-trial-steps > div + div {
    border-top: 1px solid var(--border);
    border-left: 0;
  }
  #pro-trial-clouds-v8 .pc-orbit-a { inset-inline: 50px; }
  #pro-trial-clouds-v8 .pc-orbit-b { inset-inline: 86px; }
}

@media (max-width: 390px) {
  #pro-trial-clouds-v8 .pc-hero { min-height: 192px; }
  #pro-trial-clouds-v8 .pc-logo-wrap { transform: translateX(-50%) scale(.88); transform-origin: bottom center; }
  #pro-trial-clouds-v8 .pc-pro-pill { font-size: .86em; }
}

@media (prefers-reduced-motion: reduce) {
  #pro-trial-clouds-v8 .pc-logo,
  #pro-trial-clouds-v8 .pc-crown,
  #pro-trial-clouds-v8 .pc-cloud,
  #pro-trial-clouds-v8 .pc-logo-halo,
  #pro-trial-clouds-v8 .pc-cta.is-ready,
  #pro-trial-clouds-v8 .pc-logo-wrap.is-celebrating .pc-crown {
    animation: none;
  }
  #pro-trial-clouds-v8 .pc-cta { transition: none; }
}

/* Pro subscription management */
#proBox {
  width: min(500px, calc(100vw - 28px));
  padding: 25px;
}
#proBox .pro-manage-kicker {
  margin: 2px 0 7px;
  color: var(--ui-primary);
  font: 750 10px/1 var(--font-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
#proBox .modal-title { padding-right: 42px; }
#proBox .pro-manage-summary {
  overflow: hidden;
  margin: 19px 0 0;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: var(--ui-card-soft);
}
#proBox .pro-manage-summary > div {
  display: grid;
  grid-template-columns: minmax(90px, .45fr) 1fr;
  gap: 16px;
  align-items: center;
  min-height: 46px;
  padding: 10px 13px;
}
#proBox .pro-manage-summary > div + div { border-top: 1px solid var(--ui-border); }
#proBox .pro-manage-summary span {
  color: var(--muted);
  font-size: 11px;
}
#proBox .pro-manage-summary strong {
  color: var(--ui-foreground);
  font-size: 12px;
  text-align: right;
}
#proBox .pro-manage-message {
  margin: 14px 0 0;
  color: var(--text-soft);
  line-height: 1.55;
}
#proBox .pro-manage-primary { margin-top: 17px; }
#proBox .pro-manage-primary button {
  width: 100%;
  min-height: 44px;
}
#proBox .pro-cancel-zone {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-border);
}
#proBox .pro-cancel-zone p {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}
#proBox .pro-cancel-action {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--danger) 44%, var(--ui-border));
  border-radius: 10px;
  color: color-mix(in srgb, var(--danger) 86%, var(--ui-foreground));
  background: color-mix(in srgb, var(--danger) 5%, transparent);
  font-size: 11.5px;
  font-weight: 650;
}
#proBox .pro-cancel-action:hover,
#proBox .pro-cancel-action:focus-visible {
  border-color: var(--danger);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
#proBox .pro-cancel-action:disabled { opacity: .58; cursor: wait; }
#proBox .modal-actions { margin-top: 13px; }

/* Screenshot action card */
#grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 18px; }
.thumb.sf-shot { overflow: visible; border: 0; background: transparent; box-shadow: none; }
.thumb.sf-shot:hover { transform: translateY(-2px); box-shadow: none; }
.thumb.sf-shot .thumb-img-wrap {
  position: relative;
  aspect-ratio: 13 / 9;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-card-soft);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

.thumb.sf-shot .thumb-img-wrap > img { width: 100%; height: 100%; object-fit: contain; }
.thumb.sf-shot .thumb-overlay { display: none; }
.thumb.sf-shot .sf-control { border: 1px solid rgba(255,255,255,.16); color: #fff; background: rgba(10,12,16,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.thumb.sf-shot .sf-control:hover,
.thumb.sf-shot .sf-control:focus-visible { color: var(--ui-primary); border-color: var(--ui-primary); background: rgba(10,12,16,.86); }
.thumb.sf-shot .sf-icon-control { position: absolute; z-index: 6; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 11px; }
.thumb.sf-shot .sf-icon-control svg,
.thumb.sf-shot .sf-label-control svg,
.thumb.sf-shot .sf-toggle svg,
.thumb.sf-shot .sf-retention svg,
.thumb.sf-shot .sf-tag-trigger svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.thumb.sf-shot .sf-share,
.thumb.sf-shot .sf-retention { left: 11px; top: 11px; }
.thumb.sf-shot .sf-star { right: 11px; top: 11px; }
.thumb.sf-shot .sf-more { right: 57px; top: 11px; }
.thumb.sf-shot .sf-star.active { color: var(--ui-primary); }
.thumb.sf-shot .sf-star.active svg,
.thumb.sf-shot .sf-star[aria-pressed="true"] svg { fill: currentColor; }
.thumb.sf-shot .sf-star.is-bouncing { animation: sf-favorite-bounce 460ms cubic-bezier(.2,.85,.32,1.35); }
@keyframes sf-favorite-bounce {
  0% { transform: scale(1) rotate(0); }
  36% { transform: scale(1.22) rotate(-7deg) translateY(-1px); }
  62% { transform: scale(.91) rotate(4deg); }
  82% { transform: scale(1.07) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
.thumb.sf-shot .sf-retention { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; color: #fff; background: rgba(10,12,16,.72); backdrop-filter: blur(12px); font-size: 11px; }
.thumb.sf-shot .sf-retention strong { color: var(--ui-primary); font-family: var(--font-mono); }
.thumb.sf-shot .sf-action-rail { position: absolute; z-index: 7; left: 11px; bottom: 11px; display: flex; max-width: calc(100% - 22px); align-items: center; gap: 5px; }
.thumb.sf-shot .sf-label-control { display: inline-flex; width: 72px; min-width: 72px; min-height: 40px; flex-shrink: 0; align-items: center; justify-content: center; gap: 7px; padding: 0 9px; border-radius: 11px; font-size: 11.5px; font-weight: 650; }
.thumb.sf-shot .sf-edit { order: 1; width: 68px; min-width: 68px; }
.thumb.sf-shot .sf-toggle { order: 2; display: grid; width: 28px; height: 28px; flex-shrink: 0; place-items: center; padding: 0; border-radius: 9px; }
.thumb.sf-shot .sf-toggle svg { transition: transform 180ms ease; }
.thumb.sf-shot .sf-action-rail.is-open .sf-toggle svg { transform: rotate(180deg); }
.thumb.sf-shot .sf-extra-actions { order: 3; display: flex; gap: 5px; max-width: 0; opacity: 0; overflow: hidden; pointer-events: none; transform: translateX(-8px); transition: max-width 260ms cubic-bezier(.2,.75,.25,1), opacity 160ms ease, transform 260ms cubic-bezier(.18,.82,.3,1.18); }
.thumb.sf-shot .sf-extra-actions .sf-label-control { width: 60px; min-width: 60px; padding-inline: 7px; opacity: 0; transform: translateX(-8px) scale(.95); transition: opacity 180ms ease, transform 240ms cubic-bezier(.18,.82,.3,1.18); }
.thumb.sf-shot .sf-action-rail.is-open .sf-extra-actions { order: 2; max-width: 190px; overflow: visible; opacity: 1; pointer-events: auto; transform: translateX(0); }
.thumb.sf-shot .sf-action-rail.is-open .sf-extra-actions .sf-label-control { opacity: 1; transform: translateX(0) scale(1); }
.thumb.sf-shot .sf-action-rail.is-open .sf-extra-actions .sf-label-control:nth-child(1) { transition-delay: 30ms; }
.thumb.sf-shot .sf-action-rail.is-open .sf-extra-actions .sf-label-control:nth-child(2) { transition-delay: 70ms; }
.thumb.sf-shot .sf-action-rail.is-open .sf-extra-actions .sf-label-control:nth-child(3) { transition-delay: 110ms; }
.thumb.sf-shot .sf-action-rail.is-open .sf-toggle { order: 3; }
.thumb.sf-shot .sf-meta { position: relative; display: flex; align-items: center; gap: 8px; min-height: 45px; padding: 9px 4px 0; }
.thumb.sf-shot .sf-file-name { min-width: 0; min-height: 36px; padding: 0 7px; display: inline-flex; flex: 1; align-items: center; gap: 6px; overflow: hidden; border: 1px solid transparent; border-radius: 9px; color: var(--text-soft); background: transparent; font: 500 11.5px/1.4 var(--font-mono); text-align: left; }
.thumb.sf-shot .sf-file-name:hover,
.thumb.sf-shot .sf-file-name:focus-visible { border-color: var(--border2); color: var(--text); background: var(--surface2); }
.thumb.sf-shot .sf-file-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb.sf-shot .sf-file-name svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
.thumb.sf-shot .thumb-sync-state { margin: 0; flex: 0 0 auto; }
.thumb.sf-shot .thumb-tags { min-height: 0; margin: 0; }
.thumb.sf-shot .sf-tag-trigger { display: inline-flex; align-items: center; gap: 4px; min-width: 42px; min-height: 34px; justify-content: center; padding: 0 9px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); background: var(--surface2); }
.thumb.sf-shot .sf-tag-trigger:hover { color: var(--ui-primary); border-color: var(--ui-primary); }
.thumb.sf-shot .sf-tag-count { font: 650 10px/1 var(--font-mono); }
.thumb.sf-shot .anno-pip { top: auto; left: auto; right: 58px; bottom: 12px; width: auto; height: 26px; padding: 0 8px; border-radius: 8px; color: #fff; font-size: 9px; }
.thumb.sf-shot .quick-pip { display: none !important; }
.thumb.sf-shot .ocr-match-label { left: auto; right: 11px; bottom: 11px; }
.thumb.sf-shot.local-only .thumb-img-wrap { border-color: rgba(247,167,83,.52); }
.thumb.sf-shot.selected .thumb-img-wrap { outline: 2px solid var(--ui-primary); outline-offset: 2px; }

#tagBox .tag-current-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; margin: 0 0 12px; }
#tagBox .tag-current-item { min-height: 30px; padding: 4px 9px; border: 1px solid var(--border2); border-radius: 999px; color: var(--text-soft); background: var(--surface2); font: 600 11px/1 var(--font-mono); }
#tagBox .tag-current-item:hover { color: var(--danger); border-color: var(--danger); }
#tagBox .tag-current-empty { color: var(--muted); font-size: 11px; }

@media (max-width: 700px) {
  #accountBox.account-component-shell { padding: 20px 16px; }
  #accountBox .account-profile-card { grid-template-columns: auto 1fr; }
  #accountBox .account-profile-actions { grid-column: 1 / -1; }
  #accountBox .ap-usage-grid { grid-template-columns: 1fr; }
  #accountBox .ap-pro-strip { grid-template-columns: auto 1fr; }
  #accountBox .ap-pro-strip button { grid-column: 1 / -1; width: 100%; }
  #accountBox .ap-data-card { align-items: stretch; flex-direction: column; }
  #accountBox .ap-data-actions { justify-content: stretch; }
  #accountBox .ap-data-actions button { flex: 1 1 100%; min-height: 44px; }
  .thumb.sf-shot .sf-icon-control,
  .thumb.sf-shot .sf-toggle { min-width: 44px; width: 44px; min-height: 44px; height: 44px; }
  .thumb.sf-shot .sf-label-control { min-height: 44px; }
  .thumb.sf-shot .sf-action-rail { right: 11px; }
  .thumb.sf-shot .sf-extra-actions { position: absolute; left: 0; bottom: 50px; flex-wrap: nowrap; width: max-content; }
  .thumb.sf-shot .sf-extra-actions .sf-label-control { width: 60px; min-width: 60px; min-height: 44px; height: 44px; }
  .thumb.sf-shot .sf-action-rail.is-open .sf-extra-actions { max-width: 190px; overflow: visible; }
  .thumb.sf-shot .sf-rename-trigger { min-height: 44px; }
}

@media (max-width: 460px) {
  #accountBox .account-benefits { grid-template-columns: 1fr; }
  #accountBox .account-email-row { flex-direction: column; }
  #accountBox .es-send { width: 100%; }
  #proBox { padding: 22px 19px; }
}

@media (prefers-reduced-motion: reduce) {
  #accountBox .ap-track > span,
  .thumb.sf-shot .sf-extra-actions,
  .thumb.sf-shot .sf-toggle svg,
  .thumb.sf-shot .sf-star.is-bouncing { animation: none; transition: none; }
}