/* Design lane: Apple-like Precision Software — quiet surfaces, restrained depth, minimal strokes. */
:root {
  --ws-canvas: #07070a;
  --ws-surface: rgba(24, 23, 28, 0.72);
  --ws-surface-strong: rgba(29, 28, 33, 0.9);
  --ws-surface-soft: rgba(255, 255, 255, 0.045);
  --ws-control: rgba(255, 255, 255, 0.07);
  --ws-control-hover: rgba(255, 255, 255, 0.105);
  --ws-control-stroke: rgba(255, 255, 255, 0.11);
  --ws-divider: rgba(255, 255, 255, 0.075);
  --ws-text: #f5f3f7;
  --ws-secondary: #b4afb9;
  --ws-tertiary: #77727d;
  --ws-radius-panel: 20px;
  --ws-radius-control: 12px;
  --ws-shadow-float: 0 22px 70px rgba(0, 0, 0, 0.32);
  --ws-shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.18);
  --ws-fast: 150ms;
  --ws-base: 190ms;
  --ws-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}

html {
  max-width: 100%;
  overflow-x: clip;
}

body[data-page] {
  color: var(--ws-text);
  background-color: var(--ws-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[data-page] :focus-visible {
  outline: 2px solid rgba(245, 243, 247, 0.88);
  outline-offset: 3px;
}

/* Shared navigation: one floating surface, no stacked outlines. */
body[data-page] .nav {
  border: 0 !important;
  background: rgba(22, 21, 26, 0.78) !important;
  -webkit-backdrop-filter: blur(30px) saturate(125%) !important;
  backdrop-filter: blur(30px) saturate(125%) !important;
  box-shadow: var(--ws-shadow-float) !important;
}

body[data-page] .nav::after {
  display: none !important;
}

body[data-page] .nav-links {
  border: 0 !important;
  background: rgba(0, 0, 0, 0.2) !important;
  box-shadow: none !important;
}

body[data-page] .nav-links a:hover,
body[data-page] .nav-links a.is-active {
  background: rgba(255, 255, 255, 0.085) !important;
}

body[data-page] :where(.nav-login, .nav-account, .menu-trigger, .nav-support) {
  border: 0 !important;
  background: var(--ws-control) !important;
  box-shadow: none !important;
}

body[data-page] :where(.nav-login, .nav-account, .menu-trigger, .nav-support):hover {
  background: var(--ws-control-hover) !important;
}

body[data-page] .mobile-menu {
  border: 0 !important;
  background: rgba(24, 23, 28, 0.96) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48) !important;
}

body[data-page] .mobile-menu-actions {
  border-top-color: var(--ws-divider) !important;
}

/* Home: depth comes from tonal surfaces and media, not traced rectangles. */
body[data-page="home"] {
  --bg: var(--ws-canvas);
  --surface: #111116;
  --raised: #19191f;
  --line: var(--ws-divider);
  --line-hi: rgba(255, 255, 255, 0.14);
  background: radial-gradient(circle at 68% 0%, rgba(84, 80, 94, 0.13), transparent 35%), var(--ws-canvas) !important;
}

body[data-page="home"] :where(.home-card, .media-card, .access-panel, .client-frame, .calculator, footer, dialog) {
  border: 0 !important;
  background: var(--ws-surface) !important;
  box-shadow: var(--ws-shadow-soft) !important;
}

body[data-page="home"] .home-card {
  border-radius: 22px !important;
  transform: none !important;
}

body[data-page="home"] .home-card:hover {
  background: rgba(31, 30, 36, 0.82) !important;
  transform: none !important;
}

body[data-page="home"] :where(.home-showcase, .access-section, .statement, .page-hero) {
  border: 0 !important;
}

body[data-page="home"] .showcase-image,
body[data-page="home"] .showcase-frame {
  border: 0 !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28) !important;
}

body[data-page="home"] .showcase-image.rb-gui-surface::after {
  border: 0 !important;
  box-shadow: inset 0 -42px 70px rgba(8, 7, 11, 0.14) !important;
}

body[data-page="home"] .showcase-image.rb-gui-surface:hover {
  border-color: transparent !important;
  box-shadow: 0 34px 88px rgba(0, 0, 0, 0.32) !important;
}

body[data-page="home"] .signal-strip {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.018);
}

body[data-page="home"] .media-card {
  width: 316px;
  padding: 0 0 18px;
  border-radius: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

body[data-page="home"] .media-card:hover {
  background: transparent !important;
  transform: translateY(-2px) !important;
}

body[data-page="home"] .media-thumb {
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

body[data-page="home"] .media-thumb::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 -54px 72px rgba(7, 7, 10, 0.2);
}

body[data-page="home"] .media-thumb > svg {
  inset: auto 12px 12px auto;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 11px;
  border-radius: 11px;
  color: var(--ws-canvas);
  background: rgba(245, 243, 247, 0.94);
  backdrop-filter: none;
  transition: transform var(--ws-base) var(--ws-ease), background var(--ws-fast) var(--ws-ease);
}

body[data-page="home"] .media-card:hover .media-thumb > svg,
body[data-page="home"] .media-card:focus-visible .media-thumb > svg {
  background: var(--ws-text);
  transform: translate(-2px, -2px);
}

body[data-page="home"] .media-card > span:last-child {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 14px;
  padding: 13px 2px 0;
  border-top: 1px solid var(--ws-divider);
}

body[data-page="home"] .media-card b {
  color: var(--ws-tertiary);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

body[data-page="home"] .video-title {
  display: -webkit-box;
  max-width: none;
  min-height: 2.8em;
  overflow: hidden;
  color: var(--ws-secondary);
  font-size: 12px;
  font-weight: 520;
  line-height: 1.4;
  white-space: normal;
  text-overflow: clip;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-page="home"] .media-card:hover .video-title,
body[data-page="home"] .media-card:focus-visible .video-title {
  color: var(--ws-text);
}

body[data-page="home"] .media-marquee:focus-within {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: none;
  mask-image: none;
}

body[data-page="home"] .media-marquee:focus-within::-webkit-scrollbar {
  display: none;
}

body[data-page="home"] .media-marquee:focus-within .media-track {
  animation: none;
  transform: none;
}

body[data-page="home"] .access-panel {
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="home"] .access-panel::after,
body[data-page="home"] .access-orb {
  display: none !important;
}

body[data-page="home"] footer {
  border-top: 1px solid var(--ws-divider) !important;
  border-radius: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  body[data-page="home"] .media-heading {
    align-items: flex-start;
  }

  body[data-page="home"] .media-card {
    width: min(316px, calc(100vw - 48px));
  }
}

body[data-page="home"] :where(.plan-name span:last-child, .presets button, .footer-socials a) {
  border: 0 !important;
  background: var(--ws-control) !important;
}

body[data-page="home"] .presets button:hover,
body[data-page="home"] .footer-socials a:hover {
  background: var(--ws-control-hover) !important;
}

body[data-page="home"] .presets button[aria-pressed="true"] {
  background: var(--ws-text) !important;
  color: var(--ws-canvas) !important;
}

body[data-page="home"] .hero-bottom,
body[data-page="home"] .footer-bottom,
body[data-page="home"] .feature {
  border-color: var(--ws-divider) !important;
}

body[data-page="home"] .hero-bottom a {
  border: 0 !important;
  background: rgba(18, 17, 21, 0.55) !important;
}

/* Account: grouped content, quiet list separators, borders only on fields. */
body[data-page="account"] {
  --bg: var(--ws-canvas);
  --panel: #111116;
  --raised: #19191f;
  --line: var(--ws-divider);
  --line-hi: rgba(255, 255, 255, 0.15);
  --account-canvas: var(--ws-canvas);
  --account-surface-low: rgba(18, 17, 22, 0.6);
  --account-surface-mid: rgba(27, 26, 31, 0.84);
  --account-hairline: var(--ws-divider);
  --account-hairline-active: rgba(255, 255, 255, 0.16);
  background: radial-gradient(circle at 54% 30%, rgba(84, 80, 94, 0.11), transparent 42%), var(--ws-canvas) !important;
}

body[data-page="account"] .account-tabs {
  border: 0 !important;
  background: rgba(23, 22, 27, 0.96) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42) !important;
}

body[data-page="account"] .account-tabs a.is-active {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

body[data-page="account"] .account-panel:focus-visible {
  outline: 0 !important;
}

body[data-page="account"] .profile-hero {
  border: 0 !important;
  box-shadow: var(--ws-shadow-soft) !important;
}

body[data-page="account"] .profile-cover-action {
  border: 0 !important;
  background: rgba(23, 22, 27, 0.76) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

body[data-page="account"] .profile-cover-action:hover {
  background: rgba(40, 38, 45, 0.92) !important;
}

body[data-page="account"] :where(.ws-avatar, .profile-main-avatar, .settings-avatar) {
  border: 0 !important;
  background: #232228 !important;
  color: #c8c3cc !important;
  box-shadow: none !important;
}

body[data-page="account"] .profile-dashboard {
  border: 0 !important;
  column-gap: 72px;
}

body[data-page="account"] .profile-actions {
  border: 0 !important;
  padding-left: 0 !important;
}

body[data-page="account"] :where(.profile-data-icon, .profile-action-icon) {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

body[data-page="account"] .profile-data-grid div {
  border-bottom-color: var(--ws-divider) !important;
}

body[data-page="account"] .profile-action-list {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.032) !important;
}

body[data-page="account"] .profile-action-list a {
  border-color: var(--ws-divider) !important;
}

body[data-page="account"] .profile-action-list a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

body[data-page="account"] .license-activation {
  border: 0 !important;
}

body[data-page="account"] :where(.license-activation input, .field input, .field textarea, .field select, .command-search, .select-field select, .role-field select, .upload-zone) {
  border: 1px solid var(--ws-control-stroke) !important;
  background: rgba(9, 9, 12, 0.72) !important;
  box-shadow: none !important;
}

body[data-page="account"] :where(.license-activation input, .field input, .field textarea, .field select, .command-search, .select-field select, .role-field select):focus-within,
body[data-page="account"] :where(.license-activation input, .field input, .field textarea, .field select, .role-field select):focus {
  border-color: rgba(245, 243, 247, 0.34) !important;
  box-shadow: 0 0 0 3px rgba(245, 243, 247, 0.07) !important;
}

body[data-page="account"] :where(.button, .icon-button, .mini-action, .text-action, .directory-more) {
  border-color: transparent !important;
}

body[data-page="account"] .button:not(.primary) {
  background: var(--ws-control) !important;
}

body[data-page="account"] .button:not(.primary):hover {
  background: var(--ws-control-hover) !important;
}

body[data-page="account"] .button.primary {
  border: 0 !important;
  background: var(--ws-text) !important;
  color: #0d0c10 !important;
  box-shadow: none !important;
}

body[data-page="account"] :where(.subscription-card, .account-activity) {
  border: 0 !important;
  box-shadow: var(--ws-shadow-soft) !important;
}

body[data-page="account"] .account-activity {
  background: rgba(18, 17, 22, 0.78) !important;
}

body[data-page="account"] .surface::before {
  opacity: 0.35;
}

body[data-page="account"] :where(
  .settings-card,
  .profile-empty,
  .referral-stage,
  .referral-bonus,
  .referral-history,
  .transaction-ledger,
  .profile-analytics,
  .media-form,
  .media-prerequisite,
  .admin-console,
  .directory-main,
  .user-inspector,
  .bulk-editor,
  .role-ladder,
  .role-editor,
  .request-registry,
  .request-detail,
  .analytics-ledger,
  .analytics-secondary,
  .metric-registry,
  .metric-empty-panel,
  .release-panel,
  .ops-panel,
  .site-log-list,
  .plain-state
) {
  border: 0 !important;
  background: rgba(20, 19, 24, 0.74) !important;
  box-shadow: none !important;
}

body[data-page="account"] :where(.settings-card, .profile-empty, .referral-stage, .referral-bonus, .referral-history, .transaction-ledger, .profile-analytics, .media-form, .admin-console, .directory-main, .user-inspector, .bulk-editor, .role-ladder, .role-editor, .request-registry, .request-detail, .analytics-secondary, .release-panel, .ops-panel, .site-log-list) {
  border-radius: var(--ws-radius-panel) !important;
}

body[data-page="account"] :where(.settings-data, .settings-action-row, .integration-row, .transaction-row, .directory-index-row, .request-registry-row, .site-log-row, .acl-row, .role-right, .user-subscription-row) {
  border-color: var(--ws-divider) !important;
}

body[data-page="account"] .settings-data > div {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: none !important;
}

body[data-page="account"] :where(.admin-tools, .directory-toolbar, .directory-index, .selection-toolbar) {
  border: 0 !important;
  background: rgba(20, 19, 24, 0.72) !important;
  box-shadow: none !important;
}

body[data-page="account"] .directory-index {
  border-radius: var(--ws-radius-panel) !important;
}

body[data-page="account"] .pagination {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

body[data-page="account"] :where(.directory-index-row, .request-registry-row, .site-log-row):hover {
  background: rgba(255, 255, 255, 0.038) !important;
}

body[data-page="account"] .site-footer {
  border: 0 !important;
  background: rgba(16, 15, 19, 0.62) !important;
  box-shadow: none !important;
}

body[data-page="account"] .footer-socials a {
  border: 0 !important;
  background: var(--ws-control) !important;
}

body[data-page="account"] :where(dialog, .dialog) {
  border: 0 !important;
  background: #1b1a1f !important;
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.58) !important;
}

/* Auth: the form panel reads as one calm sheet. Only editable fields keep a stroke. */
body[data-page="auth"] {
  --auth-bg: var(--ws-canvas);
  --auth-panel: rgba(16, 15, 19, 0.9);
  --auth-line: var(--ws-control-stroke);
  background: var(--ws-canvas) !important;
}

body[data-page="auth"] .auth-panel {
  border: 0 !important;
  background: rgba(16, 15, 20, 0.88) !important;
  box-shadow: 24px 0 80px rgba(0, 0, 0, 0.22) !important;
}

body[data-page="auth"] .auth-panel::after {
  opacity: 0.28;
}

body[data-page="auth"] .auth-switch {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

body[data-page="auth"] .auth-switch button.is-active {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

body[data-page="auth"] .auth-input-wrap input {
  border-color: var(--ws-control-stroke) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: none !important;
}

body[data-page="auth"] .auth-input-wrap input:hover {
  background: rgba(255, 255, 255, 0.065) !important;
}

body[data-page="auth"] .auth-input-wrap input:focus {
  border-color: rgba(245, 243, 247, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(245, 243, 247, 0.07) !important;
}

body[data-page="auth"] .auth-submit {
  border: 0 !important;
  background: var(--ws-text) !important;
  box-shadow: none !important;
}

body[data-page="auth"] .auth-submit:hover {
  background: #fff !important;
  box-shadow: none !important;
}

/* Account workspace: persistent profile rail and solid, low-noise content sheets. */
body[data-page="account"] .shell {
  width: min(calc(100% - 56px), 1440px) !important;
}

body[data-page="account"] .nav {
  width: 100% !important;
  max-width: none !important;
}

body[data-page="account"] #content {
  padding-top: 18px;
}

body[data-page="account"] .account-workspace {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
}

body[data-page="account"] .account-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 12px;
}

body[data-page="account"] .sidebar-profile-card,
body[data-page="account"] .sidebar-navigation {
  border: 0;
  border-radius: 22px;
  background: rgba(15, 15, 20, 0.92);
  box-shadow: var(--ws-shadow-soft);
}

body[data-page="account"] .sidebar-profile-card {
  min-height: 86px;
  padding: 15px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 12px;
}

body[data-page="account"] .sidebar-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #d8d4dc;
  background: linear-gradient(145deg, #34323b, #17171d);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
}

body[data-page="account"] .sidebar-avatar svg {
  width: 22px;
  height: 22px;
}

body[data-page="account"] .sidebar-profile-copy {
  min-width: 0;
}

body[data-page="account"] .sidebar-profile-copy strong,
body[data-page="account"] .sidebar-profile-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="account"] .sidebar-profile-copy strong {
  color: var(--ws-text);
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -0.02em;
}

body[data-page="account"] .sidebar-profile-copy small {
  margin-top: 4px;
  color: var(--ws-muted);
  font-size: 10px;
}

body[data-page="account"] .sidebar-online {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a9c8b2;
  box-shadow: 0 0 0 4px rgba(169, 200, 178, 0.08);
}

body[data-page="account"] .sidebar-navigation {
  padding: 8px;
}

body[data-page="account"] .account-tabs,
body[data-page="account"] .account-tabs[hidden] {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}

body[data-page="account"] .account-tabs a {
  min-height: 46px !important;
  padding: 0 13px !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  border: 0 !important;
  border-radius: 14px !important;
  color: #88858f !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 520 !important;
  text-align: left !important;
}

body[data-page="account"] .account-tabs a span {
  text-align: left !important;
}

body[data-page="account"] .account-tabs a:hover {
  color: #d8d4dc !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

body[data-page="account"] .account-tabs a.is-active {
  color: #f5f3f7 !important;
  background: rgba(255, 255, 255, 0.075) !important;
  box-shadow: none !important;
}

body[data-page="account"] .account-tabs .icon,
body[data-page="account"] .sidebar-signout .icon {
  width: 18px !important;
  height: 18px !important;
  color: currentColor;
}

body[data-page="account"] .sidebar-signout {
  min-height: 50px;
  margin-top: 7px;
  padding: 6px 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  display: flex;
  align-items: center;
  gap: 11px;
  color: #77747d;
  font-size: 13px;
}

body[data-page="account"] .sidebar-signout:hover {
  color: #d8d4dc;
}

body[data-page="account"] .account-content {
  min-width: 0;
}

body[data-page="account"] .account-content .account-panel {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 34px !important;
  scroll-margin-top: 100px;
}

body[data-page="account"] .account-overview-head {
  min-height: 92px;
  padding: 2px 2px 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

body[data-page="account"] .account-overview-head > div > span {
  color: #78747e;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body[data-page="account"] .account-overview-head h1 {
  margin-top: 7px;
  color: var(--ws-text);
  font-size: 34px;
  font-weight: 610;
  letter-spacing: -0.045em;
}

body[data-page="account"] .account-overview-head p {
  max-width: 380px;
  padding-bottom: 5px;
  color: var(--ws-muted);
  font-size: 12px;
  line-height: 1.55;
  text-align: right;
}

body[data-page="account"] .profile-hero {
  display: none !important;
}

body[data-page="account"] .profile-dashboard {
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.78fr) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-page="account"] .profile-data,
body[data-page="account"] .profile-actions,
body[data-page="account"] .license-activation,
body[data-page="account"] .subscription-card,
body[data-page="account"] .account-activity,
body[data-page="account"] .settings-card,
body[data-page="account"] .profile-banner,
body[data-page="account"] .calculator,
body[data-page="account"] .chart-card,
body[data-page="account"] .support-main,
body[data-page="account"] .support-aside,
body[data-page="account"] .people-panel,
body[data-page="account"] .permission-editor,
body[data-page="account"] .admin-view,
body[data-page="account"] .media-form,
body[data-page="account"] .media-prerequisite {
  border: 0 !important;
  background: rgba(15, 15, 20, 0.9) !important;
  box-shadow: var(--ws-shadow-soft) !important;
}

body[data-page="account"] .profile-data,
body[data-page="account"] .profile-actions {
  min-height: 350px;
  padding: 25px 26px !important;
  border-radius: 22px;
}

body[data-page="account"] .profile-actions {
  border-left: 0 !important;
}

body[data-page="account"] .profile-data-grid {
  gap: 0 24px !important;
}

body[data-page="account"] .profile-data-grid div {
  min-height: 67px !important;
  padding: 13px 6px 12px 46px !important;
  border-bottom-color: rgba(255, 255, 255, 0.045) !important;
}

body[data-page="account"] .profile-data-grid div::before {
  display: none !important;
}

body[data-page="account"] .profile-data-icon {
  left: -45px !important;
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

body[data-page="account"] .profile-action-list a {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
}

body[data-page="account"] .profile-action-list a:hover {
  background: rgba(255, 255, 255, 0.065) !important;
}

body[data-page="account"] .profile-signout {
  color: #88858f !important;
  background: transparent !important;
}

body[data-page="account"] .license-activation {
  margin-top: 14px !important;
  padding: 22px 24px !important;
  border-radius: 22px;
}

body[data-page="account"] .subscription-section {
  margin-top: 38px !important;
}

body[data-page="account"] .subscription-stage {
  gap: 14px !important;
}

body[data-page="account"] .subscription-card {
  min-height: 178px !important;
  border-radius: 22px !important;
}

body[data-page="account"] .account-activity {
  min-height: 232px !important;
  margin-top: 14px !important;
  border-radius: 22px !important;
}

body[data-page="account"] .panel-head {
  max-width: none !important;
  margin: 0 0 22px !important;
  display: block !important;
  text-align: left !important;
}

body[data-page="account"] .panel-head h2 {
  display: block !important;
  font-size: 32px !important;
  text-align: left !important;
}

body[data-page="account"] .panel-head p {
  max-width: 620px !important;
  margin-top: 7px !important;
  padding: 0 !important;
  text-align: left !important;
}

body[data-page="account"] .site-footer {
  margin-top: 18px !important;
}

@media (max-width: 1200px) {
  body[data-page="account"] .account-workspace {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  body[data-page="account"] .profile-dashboard {
    grid-template-columns: 1fr !important;
  }

  body[data-page="account"] .profile-data,
  body[data-page="account"] .profile-actions {
    min-height: 0;
  }

  body[data-page="account"] .license-activation {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body[data-page="account"] .license-activation > div {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 900px) {
  body[data-page="account"] .shell {
    width: calc(100% - 32px) !important;
  }

  body[data-page="account"] .account-workspace {
    display: block;
  }

  body[data-page="account"] .account-sidebar {
    position: static;
    display: block;
    margin-bottom: 18px;
  }

  body[data-page="account"] .sidebar-profile-card,
  body[data-page="account"] .sidebar-signout {
    display: none;
  }

  body[data-page="account"] .sidebar-navigation {
    padding: 4px;
    border-radius: 18px;
    background: rgba(15, 15, 20, 0.9);
  }

  body[data-page="account"] .account-tabs,
  body[data-page="account"] .account-tabs[hidden] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  body[data-page="account"] .account-tabs a {
    justify-content: center !important;
    padding-inline: 8px !important;
  }

  body[data-page="account"] .account-tabs a span {
    text-align: center !important;
  }

  body[data-page="account"] #content {
    padding-top: 12px;
  }
}

@media (max-width: 760px) {
  body[data-page="account"] .shell {
    width: calc(100% - 24px) !important;
  }

  body[data-page="account"] .account-sidebar {
    display: none;
  }

  body[data-page="account"] .account-overview-head {
    min-height: 0;
    padding: 10px 2px 20px;
    display: block;
  }

  body[data-page="account"] .account-overview-head h1 {
    font-size: 30px;
  }

  body[data-page="account"] .account-overview-head p {
    margin-top: 8px;
    padding: 0;
    text-align: left;
  }

  body[data-page="account"] .profile-actions {
    border: 0 !important;
    padding-top: 22px !important;
  }

  body[data-page="account"] .profile-data,
  body[data-page="account"] .profile-actions,
  body[data-page="account"] .license-activation {
    border-radius: 18px;
  }

  body[data-page="account"] .profile-data-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  body[data-page="account"] .profile-cover-action {
    width: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    overflow: hidden;
    font-size: 0 !important;
    line-height: 0;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page] *,
  body[data-page] *::before,
  body[data-page] *::after {
    scroll-behavior: auto !important;
  }
}

/* Shared desktop navigation contract for the home and account surfaces. */
body[data-page="home"] .nav-space {
  top: 14px !important;
  width: min(calc(100% - 112px), 1384px) !important;
}

body[data-page="home"] .nav {
  width: 100% !important;
  height: 68px !important;
  min-height: 68px !important;
  padding: 7px 9px 7px 16px !important;
  border-radius: 20px !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: 18px !important;
}

body[data-page="home"] .nav .brand-mark,
body[data-page="home"] .nav .brand-mark img {
  width: 40px !important;
  height: 40px !important;
}

body[data-page="home"] .nav .brand {
  font-size: 15px !important;
}

body[data-page="home"] .nav-links {
  gap: 3px !important;
  padding: 4px !important;
}

body[data-page="home"] .nav-links a {
  min-height: 42px !important;
  padding-inline: 15px !important;
  font-size: 12px !important;
}

body[data-page] .nav-account {
  min-width: 164px !important;
  min-height: 50px !important;
  padding: 5px 11px 5px 5px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 14px !important;
  align-items: center !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 16px !important;
  color: var(--ws-text) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  text-align: left !important;
  box-shadow: none !important;
}

body[data-page] .nav-account:hover {
  background: rgba(255, 255, 255, 0.085) !important;
  transform: none !important;
}

body[data-page] .nav-account .ws-avatar {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(240, 235, 244, 0.14) !important;
  border-radius: 50% !important;
  overflow: hidden;
  background: #0b0b0e !important;
  box-shadow: none !important;
}

body[data-page] .ws-default-avatar {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  filter: saturate(0.72) contrast(1.05);
}

body[data-page] .nav-profile-copy {
  min-width: 0;
  display: block;
  line-height: 1.1;
}

body[data-page] .nav-profile-copy strong {
  display: block;
  overflow: hidden;
  color: #e8e5ed;
  font-size: 12px !important;
  font-weight: 620 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page] .nav-profile-copy small {
  display: none !important;
}

body[data-page] .nav-account-chevron {
  width: 14px !important;
  height: 14px !important;
  fill: none;
  stroke: #88818f;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 760px) {
  body[data-page="home"] .nav-space {
    top: 9px !important;
    width: calc(100% - 24px) !important;
  }

  body[data-page="home"] .nav {
    height: 60px !important;
    min-height: 60px !important;
    padding: 6px 8px 6px 11px !important;
    grid-template-columns: 1fr auto !important;
  }

  body[data-page="home"] .nav .brand-mark,
  body[data-page="home"] .nav .brand-mark img {
    width: 38px !important;
    height: 38px !important;
  }

  body[data-page="home"] .nav-links {
    display: none !important;
  }

  body[data-page="home"] .nav-account {
    display: grid !important;
  }
}