:root {
  --color-bg: #F5F5F5;
  --color-text: #000000;
  --color-text-soft: #3F3F46;
  --color-muted: #71717A;
  --color-muted-2: #737373;
  --color-border: #E6E6E6;
  --color-border-hover: #D6D6D6;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F5F5F5;
  --color-surface-raised: #FFFFFF;
  --color-sidebar: #F5F5F5;
  --color-strong: #000000;
  --color-on-strong: #FFFFFF;
  --color-overlay: color-mix(in srgb, #000000 28%, transparent);
  --control-selected-bg: #F1F1F1;
  --control-selected-border: #D4D4D4;
  --control-selected-text: #000000;
  --button-primary-bg: #18181B;
  --button-primary-bg-hover: #09090B;
  --button-primary-border: #18181B;
  --button-primary-text: #FAFAFA;
  --button-height: 32px;
  --button-height-lg: 34px;
  --button-radius: 7px;
  --button-pad-x: 10px;
  --button-font-size: 11px;
  --button-font-weight: 500;
  --button-default-bg: var(--color-surface);
  --button-default-bg-hover: var(--color-surface-muted);
  --button-default-border: var(--color-border);
  --button-default-border-hover: var(--color-border-hover);
  --button-default-text: var(--color-text-soft);
  --button-default-text-hover: var(--color-text);
  --button-disabled-bg: var(--color-surface);
  --button-disabled-border: var(--color-border);
  --button-disabled-text: var(--color-muted);

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 36px;

  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 28px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 82px;
  --space-12: 96px;

  --radius-sm: 5.6px;
  --radius-md: 7.6px;
  --radius-lg: 9.6px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  --shadow-sm: none;
  --shadow-md: none;
  --button-shadow-hover: 0 2px 7px rgba(0, 0, 0, .075);
  --button-shadow-pressed: 0 1px 2px rgba(0, 0, 0, .09) inset;
  --button-primary-shadow: 0 1px 2px rgba(0, 0, 0, .10);
  --button-primary-shadow-hover: 0 3px 8px rgba(0, 0, 0, .12);
  --button-primary-shadow-pressed: 0 1px 2px rgba(0, 0, 0, .12) inset;
  --shadow-lg: none;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-emphasized: cubic-bezier(.2, .9, .25, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --motion-instant: 80ms var(--ease-standard);
  --motion-fast: 120ms var(--ease-standard);
  --motion-base: 150ms var(--ease-standard);
  --motion-slow: 180ms var(--ease-emphasized);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-text) 6%, transparent);

  --sidebar-width: 224px;
  --content-width: 1320px;
}

html[data-theme="dark"] {
  --color-bg: #000000;
  --color-text: #F5F5F5;
  --color-text-soft: #E6E6E6;
  --color-muted: #A1A1AA;
  --color-muted-2: #737373;
  --color-border: color-mix(in srgb, #3F3F46 72%, #000000);
  --color-border-hover: #3F3F46;
  --color-surface: color-mix(in srgb, #000000 88%, #3F3F46);
  --color-surface-muted: color-mix(in srgb, #000000 72%, #3F3F46);
  --color-surface-raised: color-mix(in srgb, #000000 60%, #3F3F46);
  --color-sidebar: color-mix(in srgb, #000000 68%, #3F3F46);
  --color-strong: #F5F5F5;
  --color-on-strong: #000000;
  --color-overlay: color-mix(in srgb, #000000 72%, transparent);
  --control-selected-bg: #27272A;
  --control-selected-border: #3F3F46;
  --control-selected-text: #F5F5F5;
  --button-primary-bg: #D4D4D8;
  --button-primary-bg-hover: #E4E4E7;
  --button-primary-border: #A1A1AA;
  --button-primary-text: #18181B;
  --shadow-sm: none;
  --shadow-md: none;
  --button-shadow-hover: 0 2px 7px color-mix(in srgb, #000000 48%, transparent);
  --button-shadow-pressed: 0 1px 2px color-mix(in srgb, #000000 52%, transparent) inset;
  --shadow-lg: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; width: 100%; height: 100%; overflow: hidden; }
html { background: var(--color-sidebar); }
#app { width: 100%; height: 100%; overflow: hidden; }
#app,
#app *,
#portal,
#portal * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#app::-webkit-scrollbar,
#app *::-webkit-scrollbar,
#portal::-webkit-scrollbar,
#portal *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  background: var(--color-sidebar);
  color: var(--color-text);
  font-family: Geist, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--text-sm);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}

html.themeSwitching,
html.themeSwitching body,
html.themeSwitching #app,
html.themeSwitching #app *,
html.themeSwitching #app *::before,
html.themeSwitching #app *::after,
html.themeSwitching #portal,
html.themeSwitching #portal *,
html.themeSwitching #portal *::before,
html.themeSwitching #portal *::after {
  transition-property: background-color, border-color, color, box-shadow, fill, stroke !important;
  transition-duration: 280ms !important;
  transition-timing-function: cubic-bezier(.2, .72, .2, 1) !important;
  transition-delay: 0ms !important;
}
button, input, textarea, select { font: inherit; color: inherit; }
.srOnly { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.dialogOpen { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { appearance: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
strong { font-weight: 500; }

button:focus-visible,
a:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--color-text) 42%, var(--color-border));
  outline-offset: 2px;
}

[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: 0; }

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 0;
}

.shell { width: 100%; height: 100dvh; min-height: 0; display: flex; overflow: hidden; background: var(--color-sidebar); }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  height: 100dvh;
  padding: var(--space-7) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scrollbar-width: none;
  background: var(--color-sidebar);
  border-right: 0;
  z-index: 40;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebarNavScroll { flex:1; min-height:0; margin-top:10px; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
.sidebarNavScroll::-webkit-scrollbar { display:none; width:0; height:0; }
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-9);
  padding: 0 var(--space-1);
  margin-bottom: 20px;
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -.03em;
}
.brandMark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-size: var(--text-xs);
  letter-spacing: -.03em;
}
.brandLogoImage { width: 100%; height: 100%; display: block; object-fit: contain; }
.searchTrigger {
  width: calc(100% + 8px);
  height: 36px;
  margin-inline: -4px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: none;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: border-color var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}
.searchTrigger:hover { border-color: var(--color-border-hover); background:var(--color-surface-muted); color:var(--color-text); }
.searchTrigger:focus-visible { outline:0; border-color:color-mix(in srgb,var(--color-text) 24%,var(--color-border)); box-shadow:var(--focus-ring); }
.shortcut {
  margin-left: auto;
  min-width: 38px;
  padding: 1px 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}
.navGroup { margin-top: 14px; }
.navLabel {
  margin: 0 var(--space-3) 6px;
  color: var(--color-muted);
  font-size: 10px;
  font-weight:500;
  letter-spacing:.015em;
}
.nav { display: grid; gap: 2px; }
.navLink {
  position:relative;
  min-width: 0;
  min-height: 34px;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-radius: var(--radius-lg);
  color: var(--color-text-soft);
  transition: background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
  overflow: hidden;
  white-space: nowrap;
}
.navLink > span:not(.navBadge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.navLink:hover,
.navLink.active {
  background: var(--control-selected-bg);
  color: var(--control-selected-text);
}
.navLink.active { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--control-selected-border) 68%,transparent); }
.navLink.active::before { content:""; position:absolute; left:3px; top:9px; bottom:9px; width:2px; border-radius:var(--radius-full); background:currentColor; opacity:.64; }
.navBadge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-2);
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-muted);
  font-size: var(--text-xs);
}
.accountWrap { position: relative; }
.accountButton {
  width: 100%;
  min-height:46px;
  margin-top: 6px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.accountButton:hover,
.accountButton[aria-expanded="true"] { background: var(--color-surface); border-color:var(--color-border); }
.accountButton:focus-visible { outline:0; border-color:color-mix(in srgb,var(--color-text) 24%,var(--color-border)); box-shadow:var(--focus-ring); }
.accountButton > svg { color: var(--color-muted); transition: transform var(--motion-fast), color var(--motion-fast); }
.accountButton:hover > svg { color: var(--color-text-soft); }
.accountButton[aria-expanded="true"] > svg { transform: rotate(-90deg); color: var(--color-text); }
.accountCopy { min-width: 0; display: grid; gap: 2px; }
.accountName, .accountMeta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 500;
}
.accountName { font-size: 12px; font-weight: 500; line-height: 1.15; }
.accountMeta { color: var(--color-muted); font-size: 10px; line-height: 1.15; }
.accountMenu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + var(--space-3));
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: 0 14px 38px color-mix(in srgb,#000 13%,transparent), var(--shadow-sm);
}
.accountMenu button,
.accountMenu a {
  width: 100%;
  min-height: 34px;
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.accountMenu button:hover,
.accountMenu a:hover { background: var(--color-bg); }

.main {
  position: relative;
  width: calc(100% - var(--sidebar-width));
  height: 100dvh;
  margin-left: var(--sidebar-width);
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  overflow: hidden;
  background: var(--color-sidebar);
}
.surface {
  width: 100%;
  height: calc(100dvh - 16px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: none;
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 50px;
  flex: 0 0 50px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  backdrop-filter: none;
  transition: background-color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), backdrop-filter var(--motion-fast);
}
html.topbarScrolled .topbar {
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  border-bottom-color: color-mix(in srgb, var(--color-border) 84%, var(--color-text) 6%);
  box-shadow: 0 1px 3px color-mix(in srgb, #000 4%, transparent);
  backdrop-filter: none;
}
.topbarIcon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-muted);
  color: var(--color-text-soft);
}
.mobileMenu {
  display: none;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color:var(--color-muted);
  cursor: pointer;
  transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast);
}
.mobileMenu:hover { border-color:var(--color-border); background:var(--color-surface-muted); color:var(--color-text); }
.mobileMenu:focus-visible { outline:0; border-color:color-mix(in srgb,var(--color-text) 24%,var(--color-border)); box-shadow:var(--focus-ring); }
.crumbs { min-width:0; display: flex; align-items: center; gap: 7px; color: var(--color-muted); font-size:12px; }
.crumbs strong { color: var(--color-text); font-weight: 500; }
.topbarSpacer { flex: 1; }
.topbarIconButton { position: relative; flex: 0 0 auto; }
.notificationButton { margin-left: var(--space-1); }
.topSearch { height:32px; min-width:142px; padding:0 8px; display:flex; align-items:center; gap:7px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-muted); cursor:pointer; transition:border-color var(--motion-fast),background-color var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast); }
.topSearch:hover { border-color:var(--color-border-hover); background:var(--color-surface-muted); color:var(--color-text); }
.topSearch:focus-visible { outline:0; border-color:color-mix(in srgb,var(--color-text) 24%,var(--color-border)); box-shadow:var(--focus-ring); }
.topSearch kbd { margin-left:auto; min-width:38px; padding:1px 4px; border:1px solid var(--color-border); border-radius:5px; background:var(--color-surface-muted); color:var(--color-muted); font-family:inherit; font-size:10px; font-weight:500; line-height:16px; text-align:center; }

[data-tooltip] { position:relative; }
[data-tooltip]::after { content:attr(data-tooltip); position:absolute; top:calc(100% + 7px); right:0; z-index:160; width:max-content; max-width:180px; padding:5px 7px; border:1px solid color-mix(in srgb,var(--color-border) 72%,transparent); border-radius:6px; background:var(--color-strong); color:var(--color-on-strong); box-shadow:var(--shadow-sm); font-size:10px; font-weight:500; line-height:1.2; white-space:nowrap; opacity:0; pointer-events:none; transform:translateY(-2px); transition:opacity var(--motion-fast),transform var(--motion-fast); transition-delay:0ms; }
[data-tooltip]:hover::after,[data-tooltip]:focus-visible::after { opacity:1; transform:translateY(0); transition-delay:360ms; }
.notificationPopoverLayer {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.notificationPopover {
  position: absolute;
  top: var(--notification-popover-top, 60px);
  right: var(--notification-popover-right, var(--space-6));
  width: min(390px, calc(100vw - 32px));
  max-height: min(620px, calc(100dvh - 76px));
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid color-mix(in srgb, var(--color-border) 86%, var(--color-text) 4%);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--color-surface) 97%, var(--color-surface-raised));
  box-shadow: 0 18px 52px color-mix(in srgb,#000 13%,transparent), 0 1px 4px color-mix(in srgb,#000 5%,transparent);
  pointer-events: auto;
  transform-origin: top right;
  animation: notificationPopoverIn 170ms var(--ease-emphasized) both;
}
.notificationPopoverHeader { min-height: 56px; padding: 0 var(--space-4); display: flex; align-items: center; gap: var(--space-3); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent); }
.notificationPopoverHeader > div { min-width: 0; flex: 1; }
.notificationPopoverHeader h2 { margin: 0; font-size: 17px; font-weight: 550; letter-spacing: -.02em; }
.notificationPopoverHeader p { margin: 3px 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.notificationPopoverHeader .iconButton { width: 34px; height: 34px; border: 1px solid transparent; background: var(--color-surface-muted); }
.notificationPopoverHeader .iconButton:hover { border-color: var(--color-border-hover); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.notificationPopoverBody { min-height: 0; overflow: auto; padding: 10px; }
.notificationPopoverBody .notificationList { gap: var(--space-2); }
.notificationPopoverBody .notificationItem { border-radius: var(--radius-md); }
.notificationPopoverFooter { min-height: 54px; padding: 8px var(--space-4); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); border-top: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent); background: color-mix(in srgb, var(--color-surface-muted) 46%, var(--color-surface)); }
@keyframes notificationPopoverIn { from { opacity: 0; transform: translateY(-5px) scale(.985); } }
.notificationBadge {
  position: absolute;
  right: -2px;
  top: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-full);
  background: var(--color-text);
  color: var(--color-surface);
  font-size: 9px;
  line-height: 1;
}
.topbarAction {
  min-height: 32px;
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-xs);
  cursor: pointer;
}
.topbarAction:hover { color: var(--color-text); border-color: var(--color-border-hover); }

.agentDock {
  --agent-ease-morph-open: cubic-bezier(.16, 1, .3, 1);
  --agent-ease-morph-close: cubic-bezier(.4, 0, 1, 1);
  --agent-launcher-width: 84px;
  --agent-launcher-height: 34px;
  --agent-launcher-radius: 9px;
  --agent-launcher-bg: var(--color-surface-raised);
  --agent-launcher-gradient: none;
  --agent-launcher-border: var(--color-border);
  --agent-launcher-shadow: none;
  --agent-launcher-shadow-hover: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  display: grid;
  justify-items: end;
  gap: 8px;
  pointer-events: none;
}
.agentDock.open { gap: 0; }
.agentLauncher {
  position: relative;
  min-width: var(--agent-launcher-width);
  height: var(--agent-launcher-height);
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--agent-launcher-border);
  border-radius: var(--agent-launcher-radius);
  background-color: var(--agent-launcher-bg);
  color: var(--color-text-soft);
  box-shadow: var(--agent-launcher-shadow);
  cursor: pointer;
  pointer-events: auto;
  transform-origin: bottom right;
  transition: transform var(--motion-fast), filter var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.agentLauncher::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--agent-launcher-gradient);
  pointer-events: none;
}
.agentLauncherContent {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.agentLauncher:hover { filter: saturate(1.045) brightness(1.025); box-shadow: var(--agent-launcher-shadow-hover); transform: translateY(-1px); }
.agentLauncher:active { transform: translateY(0); box-shadow: var(--button-primary-shadow-pressed); }
.agentLauncher:focus-visible { outline: 0; box-shadow: var(--focus-ring), 0 1px 2px color-mix(in srgb, #000 12%, transparent); }
.agentDock.open .agentLauncher {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  animation: none;
}
.agentDock.open .agentLauncherContent { animation: agentLauncherContentOut 170ms cubic-bezier(.4, 0, 1, 1) both; }
.agentDock.open .agentLauncher::before { animation: agentLauncherSurfaceOut 170ms cubic-bezier(.4, 0, 1, 1) both; }
.agentLauncherContent > span { font-size: var(--text-xs); font-weight: 550; }
.agentPanel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: min(424px, calc(100vw - 28px));
  height: min(600px, calc(100dvh - 58px));
  overflow: hidden;
  display: block;
  border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--color-surface-muted) 88%, var(--color-border));
  box-shadow: 0 14px 38px color-mix(in srgb, #000 12%, transparent), 0 1px 2px color-mix(in srgb, #000 5%, transparent);
  pointer-events: auto;
  contain: layout paint;
  transform-origin: bottom right;
  will-change: width, height, border-radius, background-color, box-shadow, opacity;
  animation: agentShellOpen 300ms var(--agent-ease-morph-open) both;
}
.agentPanel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px color-mix(in srgb, #fff 5%, transparent);
}
.agentBrandStage {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  filter: none;
  transform: scale(.94);
  will-change: opacity, filter, transform;
  animation: agentBrandStageIn 820ms 610ms cubic-bezier(.4, 0, .2, 1) both;
}
.agentBrandLogo {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--color-text);
  transform: scale(.94);
  will-change: transform;
  animation: agentBrandLogoIn 620ms 660ms cubic-bezier(.16, 1, .3, 1) both;
}
.agentInterface {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  opacity: 0;
  filter: none;
  transform: translateY(4px) scale(.997);
  transform-origin: bottom right;
  will-change: opacity, filter, transform;
  animation: agentInterfaceIn 180ms 90ms cubic-bezier(.22, .61, .36, 1) both;
}
.agentDock.open .agentHeader { animation: agentPartIn 150ms 100ms cubic-bezier(.22, .61, .36, 1) both; }
.agentDock.open .agentWelcome { animation: agentPartIn 170ms 120ms cubic-bezier(.22, .61, .36, 1) both; }
.agentDock.open .agentQuickActions { animation: agentPartIn 170ms 135ms cubic-bezier(.22, .61, .36, 1) both; }
.agentDock.open .agentResultsSlot { animation: agentPartIn 170ms 140ms cubic-bezier(.22, .61, .36, 1) both; }
.agentDock.open .agentComposer { animation: agentPartIn 170ms 150ms cubic-bezier(.22, .61, .36, 1) both; }
.agentHeader {
  min-height: 48px;
  padding: 0 10px 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
}
.agentWindowTitle { min-width: 0; flex: 1; }
.agentWindowTitle h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: -.015em; }
.agentWindowActions {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.agentHistoryButton,
.agentNewChat,
.agentClose { width: 27px; height: 27px; flex: 0 0 27px; border: 0; background: transparent; color: var(--color-muted); }
.agentHistoryButton:hover,
.agentNewChat:hover,
.agentClose:hover { background: var(--color-surface-muted); }
.agentHistoryButton.active { background: var(--color-surface-muted); color: var(--color-text); }
.agentHistoryButton:disabled,
.agentNewChat:disabled { opacity: .4; cursor: default; }
.agentBody {
  min-height: 0;
  margin: 0 6px;
  overflow: auto;
  padding: 16px 18px 18px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface-muted) 72%, var(--color-border)) 0%,
    color-mix(in srgb, var(--color-surface-muted) 80%, var(--color-surface-raised)) 52%,
    color-mix(in srgb, var(--color-surface-raised) 92%, var(--color-surface-muted)) 100%
  );
}
.agentBody.hasConversation { display: flex; flex-direction: column; }
.agentBody.showingHistory { padding: 8px 10px 12px; }
.agentHistoryPanel { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; }
.agentHistoryMeta { min-height: 30px; padding: 0 6px; display: flex; align-items: center; justify-content: space-between; color: var(--color-muted); }
.agentHistoryMeta span { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.agentHistoryMeta small { font-size: 10px; }
.agentHistoryList { min-height: 0; display: grid; align-content: start; gap: 2px; }
.agentHistoryRow { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; border: 1px solid transparent; border-radius: 9px; transition: background-color var(--motion-fast), border-color var(--motion-fast); }
.agentHistoryRow:hover { border-color: color-mix(in srgb, var(--color-border) 72%, transparent); background: color-mix(in srgb, var(--color-surface-raised) 88%, var(--color-border)); }
.agentHistoryRow.active { border-color: color-mix(in srgb, var(--color-border) 78%, transparent); background: color-mix(in srgb, var(--color-surface-muted) 82%, transparent); }
.agentHistoryItem { width: 100%; min-width: 0; min-height: 50px; padding: 7px 6px 7px 8px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 9px; background: transparent; color: var(--color-text); text-align: left; cursor: pointer; }
.agentHistoryDelete { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--color-muted); cursor: pointer; opacity: .62; transition: background-color var(--motion-fast), color var(--motion-fast), opacity var(--motion-fast); }
.agentHistoryDelete:hover { background: var(--color-surface-muted); color: var(--color-text); opacity: 1; }
.agentHistoryDelete:focus-visible { outline: 0; box-shadow: var(--focus-ring); opacity: 1; }
.agentHistoryCopy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.agentHistoryCopy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 550; }
.agentHistoryCopy small { color: var(--color-muted); font-size: 10px; }
.agentHistoryState,
.agentHistoryEmpty { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 9px; padding: 24px; color: var(--color-muted); text-align: center; font-size: 11px; }
.agentHistoryState { grid-auto-flow: column; align-items: center; }
.agentHistoryState.error { grid-auto-flow: row; }
.agentHistoryState button { min-height: 28px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-muted); color: var(--color-text-soft); cursor: pointer; }
.agentHistoryEmpty strong { color: var(--color-text-soft); font-size: 12px; }
.agentHistoryEmpty span { max-width: 240px; line-height: 1.45; }
.agentWelcome {
  min-height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 26px 0 14px;
  text-align: center;
  transition: opacity 140ms var(--ease-standard), transform 160ms var(--ease-standard);
}
.agentWelcomeMain { display: grid; place-items: center; align-content: center; gap: 12px; }
.agentWelcomeCopy { display: grid; justify-items: center; gap: 5px; }
.agentWelcome strong { font-size: 14px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
.agentWelcomeCopy > span { max-width: 292px; color: var(--color-muted); font-size: 12px; line-height: 1.45; }
.agentMark {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text-soft);
}
.agentQuickActions { max-width: 330px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; }
.agentQuickActions button {
  min-height: 30px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface-raised) 72%, transparent);
  color: var(--color-muted);
  box-shadow: none;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast);
}
.agentQuickActions button:hover { border-color: color-mix(in srgb, var(--color-border-hover) 74%, transparent); background: color-mix(in srgb, var(--color-surface-muted) 72%, transparent); color: var(--color-text-soft); }
.agentQuickActions button:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.agentRecentConversation { width: 100%; margin: 0; padding: 9px 12px; display: grid; gap: 3px; border: 0; border-radius: 9px; background: transparent; color: var(--color-text); text-align: left; cursor: pointer; opacity: .62; transition: opacity var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast); }
.agentRecentConversation:hover { opacity: .92; background: color-mix(in srgb, var(--color-surface-muted) 56%, transparent); }
.agentRecentConversation:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.agentRecentTop { display: flex; align-items: center; color: var(--color-muted); }
.agentRecentTop small { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .045em; }
.agentRecentConversation > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 550; }
.agentRecentPreview { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--color-muted) 88%, transparent); font-size: 10px; line-height: 1.35; }
.agentSuggestions { max-height: 58px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; transition: opacity 150ms var(--ease-standard), transform 180ms var(--ease-standard), max-height 220ms var(--ease-emphasized), margin 220ms var(--ease-emphasized); }
.agentSuggestions button {
  min-width: 0;
  min-height: 58px;
  padding: 8px 8px 8px 9px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-surface) 84%, var(--color-surface-muted));
  color: var(--color-text-soft);
  box-shadow: 0 1px 2px color-mix(in srgb, #000 3%, transparent);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}
.agentSuggestions button > svg { color: var(--color-muted); opacity: .72; }
.agentSuggestionIcon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--color-border) 90%, transparent);
  border-radius: 7px;
  background: var(--color-surface-muted);
  color: var(--color-text-soft);
}
.agentSuggestions button:hover { border-color: var(--color-border-hover); background: var(--color-surface); color: var(--color-text); box-shadow: 0 2px 7px color-mix(in srgb, #000 5%, transparent); transform: translateY(-1px); }
.agentSuggestions button:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--color-text) 24%, var(--color-border)); box-shadow: var(--focus-ring); }
.agentResultsSlot { margin-top: 18px; transition: margin-top 220ms var(--ease-emphasized); }
.agentMessages { width: 100%; min-height: 0; margin-top: auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 8px 0 14px; }
.agentMessage { width: 100%; display: flex; }
.agentMessage.user { justify-content: flex-end; }
.agentMessage.assistant { justify-content: flex-start; }
.agentMessageBubble { max-width: 88%; padding: 8px 10px; border-radius: 10px; color: var(--color-text-soft); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.agentMessageBubble strong { color: var(--color-text); font-weight: 650; }
.agentInlineLink { color: var(--color-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; cursor: pointer; }
.agentInlineLink:hover { text-decoration-color: currentColor; }
.agentInlineLink:focus-visible { outline: 0; border-radius: 3px; box-shadow: var(--focus-ring); }
.agentMessage.user .agentMessageBubble { background: var(--color-surface-raised); border: 1px solid color-mix(in srgb, var(--color-border) 62%, transparent); color: var(--color-text); }
.agentMessage.assistant .agentMessageBubble { max-width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; }
.agentMessageBubble.streaming::after { content: ''; width: 1px; height: 1em; margin-left: 2px; display: inline-block; vertical-align: -.12em; background: currentColor; animation: agentStreamCaret 720ms steps(1) infinite; }
.agentThinkingState { min-height: 22px; display: inline-flex; align-items: center; gap: 8px; color: var(--color-muted); }
.agentThinkingLabel { font-size: 11px; line-height: 1; background: linear-gradient(90deg, var(--color-muted) 18%, var(--color-text-soft) 48%, var(--color-muted) 78%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: agentThinkingShimmer 1.45s linear infinite; }
.agentThinkOrb { position: relative; width: 18px; height: 18px; display: inline-block; flex: 0 0 18px; transform: rotate(45deg); animation: agentThinkOrbTurn 2.1s linear infinite; }
.agentThinkOrb i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .82; animation: agentThinkOrbMorph 1.2s cubic-bezier(.4, 0, .2, 1) infinite alternate; }
.agentThinkOrb i:nth-child(1) { left: 2px; top: 2px; }
.agentThinkOrb i:nth-child(2) { right: 2px; top: 2px; animation-delay: -300ms; }
.agentThinkOrb i:nth-child(3) { right: 2px; bottom: 2px; animation-delay: -600ms; }
.agentThinkOrb i:nth-child(4) { left: 2px; bottom: 2px; animation-delay: -900ms; }
.agentStreamReveal { animation: agentStreamReveal 260ms cubic-bezier(.16, 1, .3, 1) both; }
.agentStreamPulse { animation: agentStreamPulse var(--agent-stream-reveal-ms, 220ms) cubic-bezier(.16, 1, .3, 1) both; }
.agentChatError { margin-top: 2px; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--color-danger) 8%, transparent); color: var(--color-danger); font-size: 11px; line-height: 1.45; }
.agentResultsLabel { margin: 0 5px 8px; color: var(--color-muted); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .075em; }
.agentResults { display: grid; gap: 2px; }
.agentResult {
  width: 100%;
  min-height: 50px;
  padding: 6px 7px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast);
}
.agentResult:hover { border-color: color-mix(in srgb, var(--color-border) 70%, transparent); background: var(--color-surface-muted); }
.agentResult:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--color-text) 24%, var(--color-border)); box-shadow: var(--focus-ring); }
.agentResult > svg { flex: 0 0 auto; color: var(--color-muted); }
.agentResultIcon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--color-border) 90%, transparent); border-radius: 8px; background: var(--color-surface-muted); color: var(--color-text-soft); }
.agentResultCopy { min-width: 0; flex: 1; display: grid; gap: 1px; }
.agentResultCopy strong, .agentResultCopy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agentResultCopy strong { font-size: var(--text-xs); font-weight: 550; letter-spacing: -.01em; }
.agentResultCopy small { color: var(--color-muted); font-size: 11px; }
.agentNoResults { min-height: 58px; padding: 0 10px; display: flex; align-items: center; gap: 9px; border: 1px dashed color-mix(in srgb, var(--color-border) 88%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--color-surface-muted) 44%, transparent); color: var(--color-muted); font-size: var(--text-xs); }
.agentPanel.is-searching .agentWelcome { display: none; }
.agentPanel.is-searching .agentResultsSlot { margin-top: 0; }
.agentComposer {
  position: relative;
  margin: 0 10px 10px;
  padding: 10px 44px 10px 10px;
  border: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent);
  border-radius: 11px;
  background: var(--color-surface-raised);
  box-shadow: none;
  transition: border-color var(--motion-fast), background-color var(--motion-fast), box-shadow var(--motion-fast);
}
.agentComposer:focus-within { border-color: color-mix(in srgb, var(--color-border-hover) 72%, transparent); background: var(--color-surface-raised); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 2%, transparent); }
html:not([data-theme="dark"]) .agentComposer {
  border-color: color-mix(in srgb, var(--color-border) 92%, #bfc3c8);
  background: #fff;
  box-shadow: none !important;
}
html:not([data-theme="dark"]) .agentComposer:focus-within {
  border-color: color-mix(in srgb, var(--color-border-hover) 86%, #aeb4bb);
  background: #fff;
  box-shadow: none !important;
}
.agentComposer textarea { width: 100%; min-height: 42px; max-height: 96px; padding: 2px 1px 0; resize: none; border: 0; outline: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 12px; line-height: 1.5; }
.agentComposer textarea::placeholder { color: var(--color-muted); }
.agentSend { position: absolute; right: 9px; bottom: 9px; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-muted); color: var(--color-muted); cursor: pointer; opacity: .7; transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), opacity var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast); }
.agentSend.ready { border-color: var(--button-primary-border); background: var(--button-primary-bg); color: var(--button-primary-text); opacity: 1; box-shadow: 0 1px 2px color-mix(in srgb, #000 8%, transparent); }
.agentSend:hover { border-color: var(--color-border-hover); background: var(--color-surface); color: var(--color-text); opacity: 1; }
.agentSend.ready:hover { border-color: var(--button-primary-border); background: var(--button-primary-bg-hover); color: var(--button-primary-text); transform: translateY(-1px); }
.agentSend:focus-visible { outline: 0; border-color: color-mix(in srgb, var(--color-text) 24%, var(--color-border)); box-shadow: var(--focus-ring); opacity: 1; }
.agentSend svg { transform: rotate(-45deg); }
@keyframes agentStreamCaret { 0%, 48% { opacity: .72; } 49%, 100% { opacity: 0; } }
@keyframes agentStreamReveal { from { opacity: .35; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
@keyframes agentStreamPulse { from { opacity: .74; } to { opacity: 1; } }
@keyframes agentThinkingShimmer { from { background-position: 180% 0; } to { background-position: -40% 0; } }
@keyframes agentThinkOrbTurn { to { transform: rotate(405deg); } }
@keyframes agentThinkOrbMorph { from { transform: translate(0, 0) scale(.72); opacity: .42; } to { transform: translate(2px, 2px) scale(1.16); opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .agentThinkOrb,
  .agentThinkOrb i,
  .agentThinkingLabel,
  .agentMessageBubble.streaming::after { animation: none; }
  .agentStreamReveal { animation: none; }
  .agentStreamPulse { animation: none; }
}
@keyframes agentLauncherContentOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(9px) scale(.97); }
}
@keyframes agentLauncherSurfaceOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes agentLauncherContentIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes agentLauncherSurfaceIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes agentShellOpen {
  0% {
    width: var(--agent-launcher-width);
    height: var(--agent-launcher-height);
    border-radius: var(--agent-launcher-radius);
    border-color: var(--agent-launcher-border);
    background-color: var(--agent-launcher-bg);
    box-shadow: var(--agent-launcher-shadow);
  }
  100% {
    width: min(424px, calc(100vw - 28px));
    height: min(600px, calc(100dvh - 58px));
    border-radius: 14px;
    border-color: color-mix(in srgb, var(--color-border) 90%, var(--color-text) 4%);
    background-color: var(--color-surface-raised);
    box-shadow: 0 24px 68px color-mix(in srgb, #000 14%, transparent), 0 2px 7px color-mix(in srgb, #000 5%, transparent);
  }
}
@keyframes agentShellClose {
  0% {
    width: var(--agent-close-shell-width, min(424px, calc(100vw - 28px)));
    height: var(--agent-close-shell-height, min(600px, calc(100dvh - 58px)));
    border-width: var(--agent-close-shell-border-width, 1px);
    border-radius: var(--agent-close-shell-radius, 14px);
    border-color: var(--agent-close-shell-border, color-mix(in srgb, var(--color-border) 90%, var(--color-text) 4%));
    background-color: var(--agent-close-shell-bg, var(--color-surface-raised));
    box-shadow: var(--agent-close-shell-shadow, 0 24px 68px color-mix(in srgb, #000 14%, transparent), 0 2px 7px color-mix(in srgb, #000 5%, transparent));
    opacity: 1;
  }
  100% {
    width: var(--agent-launcher-width);
    height: var(--agent-launcher-height);
    border-radius: var(--agent-launcher-radius);
    border-color: var(--agent-launcher-border);
    background-color: var(--agent-launcher-bg);
    box-shadow: var(--agent-launcher-shadow);
    opacity: 1;
  }
}
@keyframes agentInterfaceIn {
  from { opacity: 0; transform: scale(.996); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes agentPartIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes agentBrandStageIn {
  0% { opacity: 0; transform: scale(.94); }
  22% { opacity: 1; transform: scale(1.018); }
  42%, 66% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.035); }
}
@keyframes agentBrandLogoIn {
  0% { transform: scale(.94); }
  32% { transform: scale(1.035); }
  58%, 100% { transform: scale(1); }
}
@keyframes agentBrandStageOut {
  from {
    opacity: var(--agent-close-brand-opacity, 0);
    filter: none;
    transform: var(--agent-close-brand-transform, scale(.94));
  }
  to { opacity: 0; transform: scale(1.035); }
}
@keyframes agentInterfaceOut {
  from {
    opacity: var(--agent-close-ui-opacity, 1);
    filter: none;
    transform: var(--agent-close-ui-transform, scale(1));
  }
  to { opacity: 0; transform: translateY(7px) scale(.995); }
}
.agentDock.closing .agentInterface { animation: agentInterfaceOut 110ms cubic-bezier(.4, 0, 1, 1) both; }
.agentDock.closing .agentBrandStage { animation: agentBrandStageOut 150ms cubic-bezier(.4, 0, 1, 1) both; }
.agentDock.closing .agentBrandLogo { animation-play-state: paused; }
.agentDock.closing .agentHeader,
.agentDock.closing .agentWelcome,
.agentDock.closing .agentSuggestions,
.agentDock.closing .agentResultsSlot,
.agentDock.closing .agentComposer { animation-play-state: paused; }
.agentDock.closing .agentPanel { animation: agentShellClose 260ms 30ms var(--agent-ease-morph-close) both; pointer-events: none; }
.agentDock.closing .agentLauncher { border-color: transparent; background: transparent; box-shadow: none; animation: none; }
.agentDock.closing .agentLauncherContent { animation: agentLauncherContentIn 150ms 145ms cubic-bezier(.16, 1, .3, 1) both; }
.agentDock.closing .agentLauncher::before { animation: agentLauncherSurfaceIn 150ms 145ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes agentShellOpenMobile {
  0% {
    right: 16px;
    bottom: 16px;
    width: 84px;
    height: 34px;
    border-width: 1px;
    border-radius: 9px;
    border-color: var(--agent-launcher-border);
    background-color: var(--agent-launcher-bg);
    box-shadow: var(--agent-launcher-shadow);
  }
  100% {
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    border-width: 0;
    border-radius: 0;
    border-color: transparent;
    background-color: var(--color-surface-raised);
    box-shadow: none;
  }
}
@keyframes agentShellCloseMobile {
  0% {
    right: var(--agent-close-shell-right, 0px);
    bottom: var(--agent-close-shell-bottom, 0px);
    width: var(--agent-close-shell-width, 100vw);
    height: var(--agent-close-shell-height, 100dvh);
    border-width: var(--agent-close-shell-border-width, 0px);
    border-radius: var(--agent-close-shell-radius, 0px);
    border-color: var(--agent-close-shell-border, transparent);
    background-color: var(--agent-close-shell-bg, var(--color-surface-raised));
    box-shadow: var(--agent-close-shell-shadow, none);
  }
  100% {
    right: 16px;
    bottom: 16px;
    width: 84px;
    height: 34px;
    border-width: 1px;
    border-radius: 9px;
    border-color: var(--agent-launcher-border);
    background-color: var(--agent-launcher-bg);
    box-shadow: var(--agent-launcher-shadow);
  }
}

.content {
  width: min(calc(100% - 64px), var(--content-width));
  flex: 0 0 auto;
  margin: 0 auto;
  padding: var(--space-8) 0 64px;
  outline: 0;
}
.content.customerRouteExit { pointer-events:none; animation:customerRouteExit 88ms cubic-bezier(.4,0,1,1) both; }
.content.customerRouteEnter { animation:customerRouteEnter 210ms cubic-bezier(.16,1,.3,1) both; }
.content.narrow { width: min(calc(100% - 64px), 920px); }
.pageHead {
  margin: 0 0 var(--space-7);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}
.pageHead > div:first-child { min-width: 0; }
.pageHead > .button { flex: 0 0 auto; }
.eyebrow { margin-bottom: var(--space-3); color: var(--color-muted); font-size: var(--text-xs); }
.pageTitle {
  margin: 0;
  font-size: clamp(28px, 2.5vw, 32px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.035em;
}
.pageSub {
  max-width: 680px;
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.button {
  min-height: var(--button-height);
  padding: 0 var(--button-pad-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--button-default-border);
  border-radius: var(--button-radius);
  background: var(--button-default-bg);
  color: var(--button-default-text);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  letter-spacing: -.01em;
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast), opacity var(--motion-fast);
}
.button:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--button-default-bg-hover); border-color: var(--button-default-border-hover); color:var(--button-default-text-hover); box-shadow: none; }
.button:active:not(:disabled):not([aria-disabled="true"]) { background:var(--button-default-bg-hover); box-shadow: var(--button-shadow-pressed); }
.button.primary {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
  box-shadow: 0 1px 2px color-mix(in srgb,#000 8%,transparent);
}
.button.primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--button-primary-bg-hover);
  border-color: var(--button-primary-border);
  color: var(--button-primary-text);
  box-shadow: 0 1px 2px color-mix(in srgb,#000 10%,transparent);
}
.button.primary:active:not(:disabled):not([aria-disabled="true"]) { box-shadow: var(--button-primary-shadow-pressed); }
.button.small { min-height: 30px; padding: 0 var(--space-3); font-size: var(--text-xs); }
.button.ghost { border-color: transparent; background: transparent; color: var(--color-muted); box-shadow: none; }
.button.ghost:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-surface-muted); color: var(--color-text); box-shadow: none; }
.button.danger { border-color:color-mix(in srgb,var(--color-border-hover) 88%,transparent); background:var(--color-surface); color:var(--color-text-soft); box-shadow:none; }
.button.danger:hover:not(:disabled):not([aria-disabled="true"]) { border-color:color-mix(in srgb,var(--color-text-soft) 30%,var(--color-border-hover)); background:var(--color-surface-muted); color:var(--color-text); box-shadow:none; }
.button:disabled,.button[aria-disabled="true"] { opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
.button.primary:disabled,.button.primary[aria-disabled="true"] { border-color:var(--button-primary-border); background:var(--button-primary-bg); color:var(--button-primary-text); }
.button:focus-visible { outline:0; border-color:color-mix(in srgb,var(--color-text) 24%,var(--color-border)); box-shadow:var(--focus-ring); }
.button[aria-busy="true"] { gap:7px; cursor:progress; }
.button[aria-busy="true"]::before { content:""; width:12px; height:12px; flex:0 0 12px; border:1.5px solid color-mix(in srgb,currentColor 28%,transparent); border-top-color:currentColor; border-radius:50%; animation:customerSpin .7s linear infinite; }

.hero {
  height: 220px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--color-text);
  color: var(--color-surface);
}
html[data-theme="dark"] .hero,
html[data-theme="dark"] .videoFrame,
html[data-theme="dark"] .previewStage.dark,
html[data-theme="dark"] .miniDeviceScreen.dark {
  background: #000000;
  color: #FFFFFF;
}
html[data-theme="dark"] .hero .heroKicker,
html[data-theme="dark"] .hero p,
html[data-theme="dark"] .videoCenter span,
html[data-theme="dark"] .videoTime { color: #E6E6E6; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 32px 32px;
}
.heroRing,
.heroRing::before,
.heroRing::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-full);
}
.heroRing {
  width: 520px;
  height: 520px;
  right: -52px;
  top: -300px;
}
.heroRing::before,
.heroRing::after { content: ""; inset: 72px; }
.heroRing::after { inset: 144px; }
.heroGhost {
  position: absolute;
  right: var(--space-9);
  bottom: -24px;
  font-size: 122px;
  font-weight: 500;
  line-height: .8;
  letter-spacing: -.08em;
  color: rgba(255,255,255,.055);
  user-select: none;
}
.heroCopy { position: relative; z-index: 2; max-width: 620px; }
.heroKicker {
  width: max-content;
  margin-bottom: var(--space-6);
  padding: 5px var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-full);
  color: rgba(255,255,255,.72);
  font-size: var(--text-xs);
}
.hero h1 {
  max-width: 600px;
  margin: 0;
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.055em;
}
.hero p { max-width: 520px; margin: var(--space-5) 0 0; color: rgba(255,255,255,.68); font-size: var(--text-sm); }
.resumeBar { min-height: 56px; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 18px; align-items: center; gap: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-muted); transition: border-color var(--motion-fast), background var(--motion-fast); }
.resumeBar:hover { border-color: var(--color-border-hover); background: var(--color-surface-raised); }
.resumeIcon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-strong); color: var(--color-on-strong); }
.resumeCopy { min-width: 0; display: grid; gap: 2px; }
.resumeCopy small { overflow: hidden; color: var(--color-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.resumeProgress { color: var(--color-muted); font: 500 var(--text-xs) ui-monospace, monospace; }

.section { margin-top: var(--space-9); }
.sectionHead {
  margin-bottom: var(--space-5);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}
.sectionHead h2,
.sectionHead h3 { margin: 0; font-size: var(--text-lg); font-weight: 500; letter-spacing: -.02em; }
.sectionHead p { margin: 2px 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.textButton { border: 0; background: transparent; color: var(--color-muted); cursor: pointer; }
.textButton:hover { color: var(--color-text); }

.productGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: var(--space-5); }
.productCard {
  position: relative;
  height: 100%;
  display: flex;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast);
}
.productCard:hover { border-color: var(--color-border-hover); box-shadow: var(--shadow-sm); background: var(--color-surface-raised); }
.productCard > a { width: 100%; height: 100%; min-width: 0; display: flex; flex-direction: column; padding: var(--space-1); border-radius: inherit; }
.favoriteButton { width: 30px; height: 30px; position: absolute; right: var(--space-3); top: var(--space-3); z-index: 5; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--button-radius); background: var(--color-surface); color: var(--color-muted); box-shadow: none; cursor: pointer; backdrop-filter: none; transition: color var(--motion-fast), border-color var(--motion-fast), background-color var(--motion-fast); }
.favoriteButton:hover { color: var(--color-text); border-color: var(--color-border-hover); background:var(--color-surface); }
.favoriteButton.active { background: var(--color-strong); border-color: var(--color-strong); color: var(--color-on-strong); }
.productVisual { position: relative; width: 100%; min-height: 210px; aspect-ratio: 1.32 / 1; overflow: hidden; flex: 0 0 auto; border-radius: var(--radius-lg); background: var(--color-surface-muted); }
.previewStage {
  min-height: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: #F5F5F5;
  color: #000000;
}
.previewStage.dark { background: #000000; color: #F5F5F5; }
.previewStage.studio { background: #E6E6E6; }
.previewStage.objects { background: #FFFFFF; }
.previewCode { position: absolute; right: var(--space-5); bottom: var(--space-4); z-index: 2; color: currentColor; opacity: .5; font: 500 var(--text-xs) ui-monospace, monospace; }
.previewTop { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xs); letter-spacing: .08em; }
.previewDots { display: flex; gap: var(--space-1); }
.previewDots i { width: 4px; height: 4px; border-radius: var(--radius-full); background: currentColor; opacity: .5; }
.previewBody { width: 72%; margin-top: 56px; }
.previewHeroLine, .previewSubLine { height: 9px; border-radius: var(--radius-full); background: currentColor; }
.previewHeroLine { width: 78%; }
.previewSubLine { width: 48%; height: 5px; margin-top: var(--space-3); opacity: .32; }
.previewBlocks { margin-top: var(--space-7); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-2); }
.previewBlocks.editorial { grid-template-columns: 1.25fr .75fr; }
.previewBlocks.gallery { grid-template-columns: repeat(4, minmax(0,1fr)); }
.previewBlock { min-height: 54px; border: 1px solid currentColor; border-radius: var(--radius-sm); opacity: .22; }
.previewBlock.fill { background: currentColor; opacity: .88; }
.miniDevice {
  width: 72px;
  height: 118px;
  position: absolute;
  right: var(--space-5);
  bottom: -10px;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  z-index: 3;
}
.miniDeviceScreen {
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  padding: var(--space-2);
}
.miniDeviceScreen.dark { background: var(--color-text); color: var(--color-surface); }
.miniDeviceScreen i { display: block; height: 3px; margin-bottom: var(--space-1); background: currentColor; opacity: .18; }
.miniDeviceScreen i:first-child { width: 68%; height: 5px; opacity: .8; }
.miniDeviceScreen b { display: block; height: 24px; margin-top: var(--space-2); border: 1px solid currentColor; border-radius: var(--radius-sm); opacity: .16; }
.productMeta {
  min-height: 60px;
  margin-top: auto;
  padding: var(--space-4) var(--space-4) var(--space-4) 78px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.productMetaCopy { min-width: 0; flex: 1; }
.productName { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.productType { margin-top: 2px; color: var(--color-muted); font-size: var(--text-xs); }
.productArrow { color: var(--color-muted); flex: 0 0 auto; }

.summaryGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-7); }
.summaryCard { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.summaryLabel, .metaText { color: var(--color-muted); font-size: var(--text-xs); }
.summaryValue { margin-top: var(--space-3); font-size: 24px; letter-spacing: -.035em; }
.summaryFoot { margin-top: var(--space-4); color: var(--color-muted); font-size: var(--text-xs); }
.libraryPanels { margin-bottom: var(--space-7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.miniPanel { min-width: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.miniPanelHead { min-height: 76px; padding: var(--space-5); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-border); }
.miniPanelHead h2 { margin: 0; font-size: var(--text-base); font-weight: 500; }
.miniPanelHead p { margin: 2px 0 0; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.45; }
.miniPanelBody { min-height: 156px; padding: var(--space-2); }
.compactRow { min-height: 48px; padding: var(--space-3); display: flex; align-items: center; gap: var(--space-3); border-radius: var(--radius-md); transition: background var(--motion-fast); }
a.compactRow:hover { background: var(--color-surface-muted); }
.compactRow .rowIcon { width: 30px; height: 30px; flex-basis: 30px; }
.compactRow .rowMain { display: grid; gap: 1px; }
.compactRow strong, .compactRow small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compactRow small { color: var(--color-muted); font-size: var(--text-xs); }
.compactEmpty { min-height: 148px; padding: var(--space-5); }
.libraryProductRow { padding: 0; gap: 0; }
.libraryProductLink { min-width: 0; flex: 1; min-height: 68px; padding: var(--space-5) var(--space-6); display: flex; align-items: center; gap: var(--space-5); }
.libraryProductLink:hover { background: var(--color-surface-muted); }
.favoriteInline { flex: 0 0 34px; }
.favoriteInline.active { background: var(--color-strong); color: var(--color-on-strong); }
.libraryChevron { width: 44px; align-self: stretch; display: grid; place-items: center; color: var(--color-muted); }
.libraryChevron:hover { background: var(--color-surface-muted); color: var(--color-text); }
.libraryKeysList { margin-bottom: var(--space-7); }
.libraryKeyRow { min-height: 72px; padding: 14px 18px; gap: var(--space-5); }
.libraryKeyMain { min-width: 0; flex: 1; display: grid; gap: 7px; }
.libraryKeyHead { display: flex; align-items: center; gap: 10px; }
.libraryKeyHead strong { font-size: 13px; font-weight: 500; }
.libraryKeyStatus { display: inline-flex; align-items: center; gap: 6px; color: var(--color-muted); font-size: 11px; }
.libraryKeyStatus i { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; opacity: .65; }
.libraryKeyStatus.is-used { color: var(--color-text-soft); }
.libraryKeyInline { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--color-muted); font-size: 11px; }
.libraryKeyInline code { min-width: 0; overflow: hidden; color: var(--color-text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.libraryKeyCopy { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--color-muted); cursor: pointer; }
.libraryKeyCopy:hover { background: var(--color-surface-muted); color: var(--color-text); }
.libraryKeyDivider { width: 1px; height: 12px; flex: 0 0 1px; background: var(--color-border); }
.libraryKeyDomain { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libraryKeySupport { flex: 0 0 auto; padding: 4px 0; border: 0; background: transparent; color: var(--color-muted); font-size: 11px; cursor: pointer; }
.libraryKeySupport:hover { color: var(--color-text); }
.libraryPageShell .pageHead { margin-bottom: var(--space-7); }
.libraryPageShell .pageSub { max-width: 680px; }
.librarySummaryGrid { gap: var(--space-4); margin-bottom: var(--space-7); }
.librarySummaryGrid .summaryCard { min-height: 104px; padding: var(--space-5); border-radius: var(--radius-xl); }
.librarySummaryGrid .summaryValue { margin-top: var(--space-3); font-size: 24px; }
.librarySummaryGrid .summaryFoot { margin-top: var(--space-4); font-size: var(--text-xs); }
.libraryOverviewPanels { gap: var(--space-4); margin-bottom: var(--space-7); }
.libraryOverviewPanels .miniPanel { border-radius: var(--radius-xl); }
.libraryOverviewPanels .miniPanelHead { min-height: 76px; padding: var(--space-5); align-items: flex-start; }
.libraryOverviewPanels .miniPanelHead h2 { font-size: var(--text-base); }
.libraryOverviewPanels .miniPanelHead p { margin-top: 2px; font-size: var(--text-xs); }
.libraryOverviewPanels .miniPanelBody { min-height: 156px; padding: var(--space-2); }
.libraryOverviewPanels .compactRow { min-height: 48px; padding: var(--space-3); gap: var(--space-3); }
.libraryOverviewPanels .compactRow .rowIcon { width: 30px; height: 30px; flex-basis: 30px; border: 1px solid var(--color-border); background: var(--color-surface); }
.libraryOverviewPanels .compactRow strong { font-size: var(--text-xs); font-weight: 500; }
.libraryOverviewPanels .compactRow small { font-size: var(--text-xs); }
.libraryOverviewPanels .compactEmpty { min-height: 148px; padding: var(--space-5); }
.libraryCount { min-width: 24px; height: 24px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-muted); font-size: 10px; line-height: 1; }
.librarySectionHead { margin: 0 0 var(--space-5); align-items: flex-end; }
.librarySectionHead + .list,
.librarySectionHead + .emptyState { margin-bottom: 32px; }
.librarySectionHead h2 { font-size: var(--text-lg); }
.librarySectionHead p { margin-top: 2px; font-size: var(--text-xs); }
.librarySectionHead .textButton { font-size: var(--text-xs); }
.libraryKeysList,
.libraryStoreList,
.libraryProductsList { border-radius: var(--radius-xl); }
.libraryKeysList,
.libraryStoreList { border-radius: var(--radius-xl); }
.libraryKeysList { margin-bottom: 32px; }
.libraryKeyRow { min-height: 68px; padding: var(--space-5) var(--space-6); }
.libraryKeyMain { gap: 7px; }
.libraryKeyHead strong { font-size: 13px; }
.libraryKeyInline code,
.libraryKeyInline,
.libraryKeyStatus,
.libraryKeySupport { font-size: var(--text-xs); }
.libraryStoreRow { min-height: 68px; padding: var(--space-5) var(--space-6); gap: var(--space-5); }
.libraryStoreRow .rowIcon { width: 36px; height: 36px; flex-basis: 36px; border-radius: var(--radius-md); }
.libraryStoreRow .rowTitle { font-size: 13px; }
.libraryStoreRow .metaText { margin-top: 2px; font-size: var(--text-xs); }
.libraryStoreRow > svg { flex: 0 0 auto; color: var(--color-muted); }
.libraryRowStatus { display: inline-flex; align-items: center; gap: 6px; color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.libraryRowStatus i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; }
.libraryProductsList { margin-bottom: 8px; }
.libraryProductsList .libraryProductRow { min-height: 68px; }
.libraryProductsList .libraryProductLink { min-height: 68px; padding: var(--space-5) var(--space-6); gap: var(--space-5); }
.libraryProductsList .rowIcon { width: 36px; height: 36px; flex-basis: 36px; border-radius: var(--radius-md); font-size: var(--text-xs); }
.libraryProductsList .rowTitle { font-size: 13px; }
.libraryProductsList .metaText { margin-top: 2px; font-size: var(--text-xs); }
.libraryProductsList .favoriteInline { width: 34px; height: 34px; flex-basis: 34px; }
.libraryProductsList .libraryChevron { width: 44px; }
.list { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.listRow {
  min-height: 68px;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--motion-fast);
}
.listRow:last-child { border-bottom: 0; }
a.listRow:hover, button.listRow:hover { background: var(--color-bg); }
.rowIcon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-xs);
}
.rowMain { min-width: 0; flex: 1; }
.rowTitle { font-weight: 500; }
.rowSide { display: flex; align-items: center; gap: var(--space-4); color: var(--color-muted); font-size: var(--text-xs); }
.pill {
  width: max-content;
  padding: 4px var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.tabs {
  width: max-content;
  margin-bottom: var(--space-7);
  padding: var(--space-1);
  display: flex;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-muted);
}
.tab {
  min-height: 30px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}
.tab:hover { color: var(--color-text); }
.tab:focus-visible { outline:0; border-color:color-mix(in srgb,var(--color-text) 24%,var(--color-border)); box-shadow:var(--focus-ring); }
.tab.active { background: var(--control-selected-bg); border-color:var(--control-selected-border); color: var(--control-selected-text); box-shadow:0 1px 1px color-mix(in srgb,#000 4%,transparent); }
.detailGrid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr); gap: var(--space-6); align-items: start; }
.panel { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.panelHead { min-height: 58px; padding: 0 var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-border); }
.panelBody { padding: var(--space-6); }
.detailPreview { padding: var(--space-3); }
.detailPreview .previewStage { height: 292px; }
.detailPreview .previewTop { height: 32px; }
.detailPreview .previewBody { width: 100%; position: absolute; inset: 32px 0 0; margin: 0; padding: var(--space-6); }
.detailPreview .previewHeroLine { height: 16px; }
.detailPreview .previewSubLine { height: 5px; }
.detailPreview .previewBlocks { position: absolute; left: var(--space-6); right: var(--space-6); bottom: var(--space-6); margin-top: 0; }
.detailPreview .previewBlock { height: 98px; }
.detailText { color: var(--color-text-soft); line-height: 1.7; }
.featureGrid { margin-top: var(--space-7); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.feature { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.feature p { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.kv { display: grid; gap: var(--space-5); }
.kv div { display: flex; justify-content: space-between; gap: var(--space-5); font-size: 13px; }
.kv span:first-child { color: var(--color-muted); }
.licenseBox { margin-top: var(--space-6); padding: var(--space-5); border: 1px dashed var(--color-muted-2); border-radius: var(--radius-lg); background: var(--color-bg); }
.licenseBox code { display: block; margin: var(--space-3) 0 var(--space-4); font-size: var(--text-xs); overflow-wrap: anywhere; }
.productOverviewGrid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.72fr); gap:var(--space-6); align-items:start; }
.productOverviewMain { min-width:0; display:grid; gap:var(--space-5); }
.productOverviewRail { min-width:0; display:grid; gap:var(--space-5); position:sticky; top:72px; }
.productShowcasePanel { padding:var(--space-3); }
.productShowcaseHero { min-height:320px; overflow:hidden; border-radius:calc(var(--radius-xl) - 4px); background:var(--color-bg); }
.productShowcaseHero > img { width:100%; height:100%; min-height:320px; max-height:520px; aspect-ratio:16/9; object-fit:cover; display:block; }
.productShowcaseHero .detailPreview { height:100%; padding:0; }
.productShowcaseHero .detailPreview .previewStage { height:320px; border-radius:calc(var(--radius-xl) - 4px); }
.productGalleryGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); margin-top:var(--space-3); }
.productGalleryItem { margin:0; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); }
.productGalleryItem img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform var(--motion-base); }
@media (hover:hover) and (pointer:fine) { .productGalleryItem:hover img { transform:scale(1.015); } }
.productDescriptionPanel .panelHead { justify-content:flex-start; }
.productDescriptionPanel .detailText { margin:0; white-space:pre-line; }
.productRequirement { margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--color-border); }
.productRequirement > span { display:block; margin-bottom:var(--space-2); color:var(--color-muted); font-size:var(--text-xs); font-weight:600; }
.productRequirement p { margin:0; color:var(--color-text-soft); line-height:1.65; white-space:pre-line; }
.productSpecsPanel .kv div { align-items:flex-start; }
.productSpecsPanel .kv span:last-child { max-width:62%; text-align:right; color:var(--color-text); }
.productDemoButton { margin-top:var(--space-5); }
.tileGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.tile {
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast);
}
.tile:hover {
  border-color: color-mix(in srgb, var(--color-text) 12%, var(--color-border));
  box-shadow: 0 4px 14px color-mix(in srgb, #000 3%, transparent);
  background: var(--color-surface-raised);
}
.tileTop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }
.tileIcon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); font-weight: 500; }
.tile h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-base); font-weight: 500; letter-spacing: -.02em; }
.tile p { min-height: 48px; margin: 0; color: var(--color-muted); font-size: 13px; line-height: 1.5; }
.tileFoot { margin-top: var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }

.courseVisual {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.courseVisual::before,
.courseVisual::after { content: ""; position: absolute; border: 1px solid var(--color-border); border-radius: var(--radius-full); }
.courseVisual::before { width: 170px; height: 170px; }
.courseVisual::after { width: 110px; height: 110px; }
.courseVisual img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.courseVisual:has(img)::before,.courseVisual:has(img)::after { display: none; }
.playButton {
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-full);
  background: var(--color-text);
  color: var(--color-surface);
  cursor: pointer;
}
.progressTrack { height: 6px; margin-top: var(--space-5); overflow: hidden; border-radius: var(--radius-full); background: var(--color-border); }
.progressTrack span { display: block; height: 100%; background: var(--color-text); transition: width var(--motion-base); }

.playerGrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; }
.videoFrame {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xl);
  background: var(--color-text);
  color: var(--color-surface);
}
.videoFrame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.videoCenter { position: relative; z-index: 2; max-width: 440px; padding: var(--space-7); text-align: center; }
.videoCenter .playButton { margin: 0 auto var(--space-5); background: var(--color-surface); border-color: var(--color-surface); color: var(--color-text); }
.videoCenter span { color: rgba(255,255,255,.62); font-size: var(--text-xs); }
.academyVideoEmbed { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: #000; }
.academyVideoEmbed iframe { width: 100%; height: 100%; display: block; border: 0; }
.lessonTextContent { color: var(--color-text-soft); line-height: 1.75; overflow-wrap: anywhere; }
.lessonMaterials .listRow { border-inline: 0; }
.videoTimeline { position: absolute; left: var(--space-6); right: var(--space-6); bottom: var(--space-5); z-index: 3; }
.videoTimeline .progressTrack { background: rgba(255,255,255,.18); }
.videoTimeline .progressTrack span { background: var(--color-surface); }
.videoTime { margin-top: var(--space-2); display: flex; justify-content: space-between; color: rgba(255,255,255,.55); font-size: var(--text-xs); }
.lessonList { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.lessonHead { padding: var(--space-5); border-bottom: 1px solid var(--color-border); }
.lessonButton {
  width: 100%;
  min-height: 54px;
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: left;
  cursor: pointer;
}
.lessonButton:last-child { border-bottom: 0; }
.lessonButton:hover,
.lessonButton.active { background: var(--color-bg); }
.lessonNumber { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-muted); font-size: var(--text-xs); }
.lessonButton.done .lessonNumber { background: var(--color-text); border-color: var(--color-text); color: var(--color-surface); }
.lessonTime { color: var(--color-muted); font-size: var(--text-xs); }
.lessonActions { margin-top: var(--space-6); display: flex; justify-content: space-between; gap: var(--space-3); }
.academyModuleGroup + .academyModuleGroup { border-top: 1px solid var(--color-border); }
.academyModuleHead {
  padding: var(--space-4) var(--space-5);
  display: grid;
  gap: 3px;
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
}
.academyModuleHead > span {
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.academyModuleHead strong { font-size: var(--text-xs); font-weight: 550; }
.academyModuleHead small { color: var(--color-muted); font-size: 11px; line-height: 1.45; }
.academyModuleLessons .lessonButton:last-child { border-bottom: 0; }

.supportGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.supportTicketsSection { margin-top: var(--space-7); }
.supportCard { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.supportCard h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-base); font-weight: 500; }
.supportCard p { margin: 0 0 var(--space-6); color: var(--color-muted); }
.helpCenterPage { max-width:none; }
.helpTabs { max-width:100%; margin-bottom:var(--space-5); overflow-x:auto; scrollbar-width:none; }
.helpTabs::-webkit-scrollbar { display:none; }
.helpTabs .tab { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.helpTabs .tab small { min-width:18px; height:18px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-full); background:color-mix(in srgb,var(--color-text) 6%,transparent); color:var(--color-muted); font-size:9px; line-height:1; font-variant-numeric:tabular-nums; }
.helpTabs .tab.active small { background:color-mix(in srgb,var(--color-text) 9%,transparent); color:var(--color-text-soft); }
.helpFaqPanel { overflow:hidden; }
.helpFaqPanelHead { min-height:58px; padding:0 var(--space-5); }
.helpFaqPanelHead > div { min-width:0; }
.helpFaqPanelHead strong { font-size:var(--text-sm); font-weight:500; }
.helpFaqPanelHead .metaText { margin-top:2px; max-width:720px; font-size:var(--text-xs); }
.helpArticleList { overflow:hidden; }
.helpArticleRow { min-height:72px; padding:var(--space-4) var(--space-5); color:inherit; text-decoration:none; }
.helpArticleRow .rowIcon { width:34px; height:34px; flex-basis:34px; background:var(--color-surface-muted); color:var(--color-muted); }
.helpArticleRow .rowMain { display:grid; gap:3px; }
.helpArticleRow .rowTitle { font-size:var(--text-xs); font-weight:500; line-height:1.35; }
.helpArticleRow .metaText { max-width:820px; font-size:var(--text-xs); line-height:1.45; }
.helpArticleAction { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; color:var(--color-muted); font-size:10px; white-space:nowrap; }
.helpArticleRow:hover .helpArticleAction { color:var(--color-text-soft); }
.helpEmpty { min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--color-muted); text-align:center; }
.helpEmpty strong { color:var(--color-text); font-size:var(--text-sm); font-weight:500; }
.helpEmpty span { max-width:420px; font-size:var(--text-xs); }
.helpArticlePage { max-width:none; }
.helpArticlePageHead .pageSub { max-width:760px; }
.helpArticleLayout { grid-template-columns:minmax(0,1.65fr) minmax(260px,.72fr); gap:var(--space-5); }
.helpArticle { min-width:0; }
.helpArticlePanelHead { min-height:58px; }
.helpArticleBody { display:grid; }
.helpArticleSection { min-height:112px; padding:var(--space-6); align-items:flex-start; }
.helpArticleSection .rowMain { display:grid; gap:var(--space-3); }
.helpArticleSection .rowTitle { margin-top:3px; font-size:var(--text-base); font-weight:500; letter-spacing:-.02em; }
.helpArticleIndex { width:34px; height:34px; flex-basis:34px; background:var(--color-surface-muted); color:var(--color-muted); font-size:10px; font-variant-numeric:tabular-nums; }
.helpArticleBody p { max-width:820px; margin:0; color:var(--color-text-soft); font-size:var(--text-sm); line-height:1.72; white-space:pre-line; overflow-wrap:anywhere; }
.helpArticleNav { min-height:70px; padding:var(--space-3) var(--space-5); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-3); border-top:1px solid var(--color-border); background:var(--color-surface-muted); }
.helpArticleNav > a { min-width:0; padding:8px 10px; display:flex; align-items:center; gap:10px; border-radius:var(--radius-md); color:inherit; transition:background-color var(--motion-fast); }
.helpArticleNav > a:hover { background:var(--color-surface); }
.helpArticleNav > a.next { justify-content:flex-end; text-align:right; }
.helpArticleNav > a > span { min-width:0; display:grid; gap:2px; }
.helpArticleNav small { color:var(--color-muted); font-size:9px; }
.helpArticleNav strong { overflow:hidden; font-size:10px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.helpArticleNav svg { flex:0 0 auto; color:var(--color-muted); }
.helpArticleRail { display:grid; gap:var(--space-4); position:sticky; top:66px; }
.helpRelatedPanel { min-width:0; }
.helpRelatedList { display:grid; }
.helpRelatedRow { min-height:68px; padding:var(--space-4) var(--space-5); }
.helpRelatedRow .rowMain { display:grid; gap:3px; }
.helpRelatedRow .rowTitle { overflow:hidden; font-size:var(--text-xs); font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.helpRelatedRow .metaText { display:-webkit-box; overflow:hidden; font-size:10px; line-height:1.4; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.helpRelatedRow > svg { flex:0 0 auto; color:var(--color-muted); }
.helpSupportPanel .panelHead .rowIcon { width:32px; height:32px; flex-basis:32px; background:var(--color-surface-muted); color:var(--color-muted); }
.helpSupportPanel .panelBody { display:grid; gap:var(--space-4); }
.helpSupportPanel p { margin:0; color:var(--color-muted); font-size:var(--text-xs); line-height:1.55; }
.helpSupportPanel .button { width:100%; justify-content:center; }
@media (max-width:980px) {
  .helpArticleLayout { grid-template-columns:1fr; }
  .helpArticleRail { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .helpArticleRow { align-items:flex-start; }
  .helpArticleRail { grid-template-columns:1fr; }
  .helpArticleSection { min-height:0; padding:var(--space-5); gap:var(--space-4); }
  .helpArticleIndex { width:30px; height:30px; }
}
@media (max-width:520px) {
  .helpArticleRow { min-height:68px; gap:14px; }
  .helpArticleRow .metaText { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .helpArticleAction { font-size:0; }
  .helpArticleNav { grid-template-columns:1fr; }
  .helpArticleNav > span:empty { display:none; }
  .helpArticleNav > a.next { justify-content:flex-start; text-align:left; }
}
.supportTicketRow { width:100%; min-height:82px; padding:var(--space-4) var(--space-5); display:flex; align-items:center; gap:var(--space-4); border:0; border-top:1px solid var(--color-border); background:transparent; color:inherit; text-align:left; cursor:pointer; transition:background var(--motion-fast),transform var(--motion-fast); }
.supportTicketRow:hover { background:var(--color-surface-muted); }
.supportTicketRow:focus-visible { position:relative; z-index:1; background:var(--color-surface-muted); outline:2px solid color-mix(in srgb,var(--color-text) 42%,var(--color-border)); outline-offset:-2px; }
.supportTicketRow:active { transform:translateY(1px); }
.supportTicketRowMain { min-width:0; flex:1; display:grid; gap:2px; }
.supportTicketPreview { max-width:620px; overflow:hidden; color:var(--color-muted); font-size:var(--text-xs); text-overflow:ellipsis; white-space:nowrap; }
.supportTicketRowSide { flex:0 0 auto; display:flex; align-items:center; gap:var(--space-4); }
.supportTicketOpen { display:flex; align-items:center; gap:5px; color:var(--color-muted); font-size:var(--text-xs); white-space:nowrap; }
.supportTicketRow:hover .supportTicketOpen { color:var(--color-text); }
.faq { margin-top: var(--space-9); border-top: 1px solid var(--color-border); }
.faqItem { border-bottom: 1px solid var(--color-border); }
.faqButton { width: 100%; padding: var(--space-6) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); border: 0; background: transparent; text-align: left; font-weight: 500; cursor: pointer; }
.faqButton svg { transition: transform 260ms var(--ease-emphasized); }
.faqAnswer {
  max-width: 760px;
  display: grid;
  grid-template-rows: 0fr;
  color: var(--color-muted);
  opacity: 0;
  transform: translateY(-5px);
  transition:
    grid-template-rows 320ms var(--ease-emphasized),
    opacity 220ms var(--ease-standard),
    transform 320ms var(--ease-emphasized);
}
.faqAnswerInner {
  min-height: 0;
  overflow: hidden;
  padding: 0;
  line-height: 1.65;
  transition: padding-bottom 320ms var(--ease-emphasized);
}
.faqItem.open .faqAnswer {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}
.faqItem.open .faqAnswerInner { padding-bottom: var(--space-6); }
.faqItem.open .faqButton svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .faqButton svg,
  .faqAnswer,
  .faqAnswerInner { transition: none; }
}
.customerSupportTicket { display:grid; gap:var(--space-6); }
.supportTicketSummary { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); color:var(--color-muted); font-size:var(--text-xs); }
.supportTicketSummary > span:not(.pill) + span:not(.pill)::before { content:'·'; margin-right:var(--space-3); }
.supportTicketHistory { margin-top:var(--space-1); display:grid; gap:var(--space-3); }
.supportTicketHistoryHead { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-5); }
.supportTicketHistoryHead > div { display:grid; gap:2px; }
.supportTicketHistoryHead span { color:var(--color-muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.supportTicketHistoryHead strong { font-size:var(--text-sm); font-weight:500; }
.supportTicketHistoryHead small { color:var(--color-muted); font-size:var(--text-xs); }
.supportConversationCanvas { min-height:220px; padding:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface-muted); }
.supportConversation { display:grid; gap:var(--space-5); }
.supportConversationEmpty { min-height:170px; display:grid; place-content:center; justify-items:center; gap:5px; color:var(--color-muted); text-align:center; }
.supportConversationEmpty strong { color:var(--color-text-soft); font-size:var(--text-sm); font-weight:500; }
.supportConversationEmpty span { font-size:var(--text-xs); }
.supportMessage { width:100%; display:flex; align-items:flex-end; gap:var(--space-3); }
.supportMessage.own { flex-direction:row-reverse; }
.supportMessageAvatar { width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border:1px solid var(--color-border); border-radius:var(--radius-full); color:var(--color-muted); background:var(--color-surface); }
.supportMessage.own .supportMessageAvatar { border-color:var(--color-text); background:var(--color-text); color:var(--color-surface); }
.supportMessageContent { max-width:min(78%,620px); display:grid; gap:5px; }
.supportMessage.own .supportMessageContent { justify-items:end; }
.supportMessageBubble { width:fit-content; max-width:100%; padding:var(--space-4) var(--space-5); border:1px solid var(--color-border); border-radius:14px 14px 14px 5px; background:var(--color-surface); box-shadow:var(--shadow-sm); }
.supportMessage.own .supportMessageBubble { border-color:var(--color-text); border-radius:14px 14px 5px 14px; background:var(--color-text); color:var(--color-surface); }
.supportMessageMeta { display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-xs); }
.supportMessageMeta strong { font-weight:500; }
.supportMessageMeta span { color:var(--color-muted); }
.supportMessageBubble p { margin:0; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.supportTicketReply { padding:var(--space-5); display:grid; gap:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface); }
.supportReplyHead { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-5); }
.supportReplyHead > div { display:grid; gap:2px; }
.supportReplyHead strong { font-size:var(--text-sm); font-weight:500; }
.supportReplyHead span { color:var(--color-muted); font-size:var(--text-xs); }
.supportPublicBadge { flex:0 0 auto; padding:3px 7px; border:1px solid var(--color-border); border-radius:var(--radius-full); background:var(--color-surface-muted); color:var(--color-muted); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.supportTicketReply .textarea { min-height:108px; background:var(--color-surface-muted); }
.supportTicketReply .textarea:focus { background:var(--color-surface); }
.supportTicketClosed { padding:var(--space-5); display:flex; align-items:center; gap:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface-muted); }
.supportTicketClosed > div { display:grid; gap:2px; }
.supportTicketClosed strong { font-size:var(--text-sm); font-weight:500; }
.supportTicketClosed span { color:var(--color-muted); font-size:var(--text-xs); }
.supportFooterHint { margin-right:auto; color:var(--color-muted); font-size:var(--text-xs); }

.modal.supportTicketModal { width:min(780px,100%); }
.modal.supportTicketModal .modalHeader { min-height:72px; }
.modal.supportTicketModal .modalBody { padding:var(--space-6); background:color-mix(in srgb,var(--color-surface-muted) 34%,var(--color-surface)); }
.modal.supportTicketModal .modalFooter { min-height:66px; background:var(--color-surface); }
.modal.supportTicketModal .modalFooter .button.primary { display:inline-flex; align-items:center; gap:5px; }
.modal.supportRequestModal .modalBody { padding:var(--space-7); }

@media (max-width:760px) {
  .modal.supportTicketModal { width:100%; }
  .modal.supportTicketModal .modalHeader { min-height:68px; padding-inline:20px; }
  .modal.supportTicketModal .modalBody { padding:22px 20px; }
  .modal.supportTicketModal .modalFooter { min-height:68px; padding:12px 20px; }
  .modal.supportRequestModal .modalBody { padding:22px 20px; }
  .supportTicketRow { align-items:flex-start; flex-wrap:wrap; }
  .supportTicketRowSide { width:100%; padding-left:calc(36px + var(--space-4)); justify-content:space-between; }
  .supportMessageContent { max-width:86%; }
  .supportConversationCanvas { padding:var(--space-4); }
  .supportFooterHint { display:none; }
}

.footer {
  display: none;
  color: var(--color-muted);
  font-size: 10px;
}
.footerLinks { display: flex; gap: var(--space-5); }
.footer a:hover { color: var(--color-text); }

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: clamp(18px, 3vw, 32px);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--color-overlay) 86%, transparent);
  backdrop-filter: none;
  animation: backdropIn 150ms var(--ease-standard) both;
}
.backdrop.searchBackdrop {
  place-items: start center;
  padding-top: min(12vh, 112px);
}
.searchModal,
.modal {
  width: min(600px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-border) 86%, var(--color-text) 4%);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--color-surface) 98%, var(--color-surface-raised));
  box-shadow: 0 20px 64px color-mix(in srgb,#000 14%,transparent), 0 1px 4px color-mix(in srgb,#000 5%,transparent);
  animation: overlayPanelIn 170ms var(--ease-emphasized) both;
}
.modal.postDetailModal,
.modal.planModal { width: min(720px, 100%); }
.modal.toolSuiteModal { width:min(1040px,100%); box-shadow:none; }
.modal.toolSuiteModal .modalHeader { min-height:72px; padding-inline:24px; }
.modal.toolSuiteModal .modalBody { padding:0; max-height:calc(100dvh - 150px); }
.toolSuite { display:grid; gap:0; }
.toolSuiteSection { min-width:0; padding:22px 24px; display:grid; gap:16px; border-bottom:1px solid var(--color-border); }
.toolSuiteSection:last-child { border-bottom:0; }
.toolSuiteSectionHead { min-width:0; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.toolSuiteSectionHead > div { min-width:0; display:grid; gap:3px; }
.toolSuiteSectionHead span { color:var(--color-muted); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.toolSuiteSectionHead strong { color:var(--color-text); font-size:13px; font-weight:550; }
.toolSuiteSectionHead > small { max-width:360px; color:var(--color-muted); font-size:10px; line-height:1.45; text-align:right; }
.toolSuiteSectionHead.compact { align-items:flex-start; }
.toolSuiteSectionHead.compact strong { font-size:12px; }
.toolSuiteGrid { display:grid; gap:18px; }
.toolSuiteGrid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.toolSuiteGrid.four { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.toolSuiteGrid.whatsapp { grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:0; }
.toolSuiteGrid.whatsapp > .toolSuiteStack:first-child { border-right:1px solid var(--color-border); }
.toolSuiteStack { min-width:0; display:grid; align-content:start; gap:14px; }
.toolInputAffix { position:relative; }
.toolInputAffix > span { position:absolute; left:11px; top:50%; transform:translateY(-50%); z-index:1; color:var(--color-muted); font-size:11px; pointer-events:none; }
.toolInputAffix .input { padding-left:34px; }
.toolSegmented { width:max-content; max-width:100%; display:flex; flex-wrap:wrap; gap:6px; }
.toolSegmented button,.toolShortcodes button,.toolTemplateGrid button { min-height:32px; padding:0 10px; border:1px solid var(--color-border); border-radius:7px; background:var(--color-surface); color:var(--color-text-soft); font-size:10px; font-weight:500; cursor:pointer; transition:border-color var(--motion-fast),background var(--motion-fast),color var(--motion-fast); }
.toolSegmented button:hover,.toolShortcodes button:hover,.toolTemplateGrid button:hover { border-color:var(--color-border-hover); background:var(--color-surface-muted); color:var(--color-text); }
.toolSegmented button.active { border-color:var(--control-selected-border); background:var(--control-selected-bg); color:var(--control-selected-text); }
.toolDocumentPreview { min-height:400px; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
.toolDocumentPreview > header { min-height:48px; padding:8px 12px 8px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--color-border); background:var(--color-surface-muted); }
.toolDocumentPreview > header > span { color:var(--color-text-soft); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.toolDocumentBody { padding:20px; color:var(--color-text-soft); font-size:11px; line-height:1.68; }
.toolDocumentBody h2 { margin:0 0 20px; padding-bottom:12px; border-bottom:1px solid var(--color-border); color:var(--color-text); font-size:15px; line-height:1.35; }
.toolDocumentBody h3 { margin:20px 0 7px; padding-left:9px; border-left:2px solid var(--color-border-hover); color:var(--color-text); font-size:11px; font-weight:600; }
.toolDocumentBody p { margin:0; }
.toolPolicyExactContent { white-space:pre-wrap; }
.toolPolicyExactContent > b:first-child { display:block; margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid var(--color-border); color:var(--color-text); font-size:15px; line-height:1.35; white-space:normal; }
.toolDocumentPreview > footer { padding:12px 16px; border-top:1px solid var(--color-border); background:var(--color-surface-muted); }
.toolMetricGrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.toolMetricCard { min-height:86px; padding:13px; display:grid; align-content:space-between; gap:12px; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-muted); }
.toolMetricCard span { color:var(--color-muted); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.toolMetricCard strong { color:var(--color-text); font-size:19px; font-weight:550; letter-spacing:-.03em; }
.toolBreakdownGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.toolDataCard { min-width:0; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
.toolDataCard > strong { min-height:38px; padding:0 12px; display:flex; align-items:center; border-bottom:1px solid var(--color-border); color:var(--color-text); font-size:10px; font-weight:600; }
.toolDataCard > div { min-height:36px; padding:0 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--color-border); color:var(--color-muted); font-size:10px; }
.toolDataCard > div:last-child { border-bottom:0; }
.toolDataCard b { color:var(--color-text-soft); font-weight:550; white-space:nowrap; }
.toolDataCard small { color:var(--color-muted); font-size:9px; }
.toolProjectionBlock { display:grid; gap:12px; }
.toolTableScroll { max-width:100%; overflow:auto; border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.toolProjectionTable { width:100%; min-width:760px; border-collapse:collapse; font-size:10px; }
.toolProjectionTable th,.toolProjectionTable td { height:38px; padding:0 12px; border-bottom:1px solid var(--color-border); text-align:right; white-space:nowrap; }
.toolProjectionTable th:first-child,.toolProjectionTable td:first-child { text-align:left; }
.toolProjectionTable th { background:var(--color-surface-muted); color:var(--color-muted); font-size:9px; font-weight:600; }
.toolProjectionTable td { color:var(--color-text-soft); }
.toolProjectionTable tr:last-child td { border-bottom:0; }
.toolResultFlush { margin-top:0; }
.toolShortcodes { display:flex; flex-wrap:wrap; gap:6px; }
.toolShortcodes button { min-height:26px; padding-inline:8px; color:var(--color-muted); font-size:9px; }
.toolTemplateGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.toolTemplateGrid button { min-height:42px; padding:8px 10px; text-align:left; line-height:1.35; }
.toolPhonePreview { width:min(250px,100%); min-height:420px; margin:24px auto 0; overflow:hidden; display:grid; grid-template-rows:54px 1fr; border:5px solid var(--color-text); border-radius:28px; background:var(--color-surface-muted); }
.toolPhonePreview header { padding:0 13px; display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--color-border); background:var(--color-surface); }
.toolPhoneAvatar { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--color-strong); color:var(--color-on-strong); font-size:8px; font-weight:650; }
.toolPhonePreview header div { display:grid; gap:1px; }
.toolPhonePreview header strong { font-size:10px; font-weight:600; }
.toolPhonePreview header small { color:var(--color-muted); font-size:8px; }
.toolPhoneBody { padding:18px 12px; display:flex; align-items:flex-start; background:var(--color-surface-muted); }
.toolPhoneBubble { max-width:88%; padding:9px 10px; border:1px solid var(--color-border); border-radius:10px 10px 10px 3px; background:var(--color-surface); color:var(--color-text-soft); font-size:9px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.toolWhatsappResultSection { border-bottom:0; }
.toolQrBox { width:150px; aspect-ratio:1; padding:9px; margin:0 auto 12px; display:grid; place-items:center; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:#fff; }
.toolQrBox img { width:100%; height:100%; display:block; object-fit:contain; }
.toolSeoInputSection { gap:20px; }
.toolSeoIntro { min-height:66px; padding:12px 14px; display:flex; align-items:center; gap:12px; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-muted); }
.toolAiMark,.toolSeoEmptyIcon { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--color-border); border-radius:10px; background:var(--color-surface); color:var(--color-text); }
.toolSeoIntro > div { min-width:0; display:grid; gap:3px; }
.toolSeoIntro strong { color:var(--color-text); font-size:11px; font-weight:600; }
.toolSeoIntro span:not(.toolAiMark) { color:var(--color-muted); font-size:10px; line-height:1.45; }
.toolSeoGenerateRow { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:2px; }
.toolSeoGenerateRow .button { min-width:156px; }
.toolSeoOutputSection { min-height:250px; }
.toolSeoEmpty,.toolSeoLoading,.toolSeoError { min-height:210px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:28px; border:1px dashed var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface-muted); text-align:center; }
.toolSeoEmpty strong,.toolSeoLoading strong,.toolSeoError strong { color:var(--color-text); font-size:12px; font-weight:600; }
.toolSeoEmpty > span:last-child,.toolSeoLoading div span,.toolSeoError div span { max-width:430px; color:var(--color-muted); font-size:10px; line-height:1.5; }
.toolSeoLoading,.toolSeoError { flex-direction:row; min-height:122px; text-align:left; }
.toolSeoLoading > div,.toolSeoError > div { display:grid; gap:3px; }
.toolSeoSpinner { width:14px; height:14px; flex:0 0 auto; display:inline-block; border:1.5px solid var(--color-border-hover); border-top-color:var(--color-text); border-radius:50%; animation:toolSeoSpin .72s linear infinite; }
.toolSeoResult { display:grid; gap:12px; }
.toolSeoResultTop { min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.toolSeoAiBadge { min-height:26px; padding:0 9px; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--color-border); border-radius:999px; background:var(--color-surface-muted); color:var(--color-text-soft); font-size:9px; font-weight:600; }
.toolSeoFieldGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.toolSeoFieldCard { position:relative; min-width:0; min-height:118px; padding:14px 42px 14px 14px; display:grid; align-content:start; gap:10px; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
.toolSeoFieldHead { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.toolSeoFieldHead span { color:var(--color-muted); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.toolSeoFieldHead small { color:var(--color-muted); font-size:9px; }
.toolSeoFieldCard > strong { color:var(--color-text); font-size:12px; line-height:1.55; font-weight:550; overflow-wrap:anywhere; }
.toolSeoFieldCard > button { position:absolute; top:10px; right:10px; width:27px; height:27px; padding:0; display:grid; place-items:center; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--color-muted); cursor:pointer; }
.toolSeoFieldCard > button:hover { border-color:var(--color-border); background:var(--color-surface-muted); color:var(--color-text); }
.button.copied,[data-policy-copy].copied { border-color:var(--color-border-hover); }
@keyframes toolSeoSpin { to { transform:rotate(360deg); } }
.searchHeader { height: 52px; padding: 0 14px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent); color:var(--color-muted); }
.searchInput { flex: 1; min-width:0; border: 0; outline: 0; background: transparent; color:var(--color-text); font-size: 13px; }
.searchInput::placeholder { color:var(--color-muted); opacity:.78; }
.searchResults { max-height: 360px; overflow: auto; padding: 6px; }
.resultLabel { padding: 7px 8px 5px; color: var(--color-muted); font-size: 10px; font-weight:500; letter-spacing:.02em; }
.searchResult { width: 100%; min-height: 44px; padding: 6px 8px; display: flex; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast); }
.searchResult:hover,
.searchResult.selected { border-color:color-mix(in srgb,var(--color-border) 72%,transparent); background: var(--color-surface-muted); }
.searchResult:focus-visible { outline:0; border-color:color-mix(in srgb,var(--color-text) 24%,var(--color-border)); box-shadow:var(--focus-ring); }
.searchResult small { margin-left: auto; color: var(--color-muted); }
.searchFooter { min-height: 36px; padding: 7px 10px; display: flex; align-items: center; gap:14px; border-top: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent); background: color-mix(in srgb, var(--color-surface-muted) 72%, var(--color-surface)); color: var(--color-muted); font-size: 9px; }
.searchFooter span { display:inline-flex; align-items:center; gap:4px; }
.searchFooter kbd,.commandHint { min-width:22px; padding:1px 5px; border:1px solid var(--color-border); border-radius:5px; background:var(--color-surface-muted); color:var(--color-muted); font-family:inherit; font-size:9px; font-weight:500; line-height:16px; text-align:center; }
.commandHint { min-width:40px; }
.commandClose { min-height:24px; padding:0 6px; border:1px solid var(--color-border); border-radius:5px; background:var(--color-surface-muted); color:var(--color-muted); font-size:9px; line-height:1; }
.commandClose:hover { border-color:var(--color-border-hover); background:var(--color-surface); color:var(--color-text); }
.modalHeader { min-height: 60px; padding: 0 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent); }
.modalHeaderCopy { min-width: 0; flex: 1; }
.modalHeader h2 { margin: 0; font-size: 19px; line-height: 1.2; font-weight: 550; letter-spacing: -.025em; }
.modalHeader p { margin: 4px 0 0; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.45; }
.modalHeader .iconButton { width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--color-surface-muted); color: var(--color-text-soft); }
.modalHeader .iconButton:hover { border-color: var(--color-border-hover); background: var(--color-surface); box-shadow:none; }
.iconButton { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--color-muted); cursor: pointer; transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast); }
.iconButton:hover { border-color:var(--color-border); background: var(--color-bg); color: var(--color-text); }
.iconButton:focus-visible { outline:0; border-color:color-mix(in srgb,var(--color-text) 24%,var(--color-border)); box-shadow:var(--focus-ring); }
.modalBody { max-height: calc(100dvh - 190px); overflow: auto; padding: 22px; }
.modalFooter { min-height: 58px; padding: 10px 20px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent); background: color-mix(in srgb, var(--color-surface-muted) 46%, var(--color-surface)); }
.modalFooter .button { min-height: var(--button-height-lg); }
.formGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.field { min-width: 0; display: grid; gap: var(--space-2); }
.field.full { grid-column: 1 / -1; }
.field label { color: var(--color-text-soft); font-size: var(--text-xs); font-weight: 500; }
.input, .textarea, .select {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: 0;
  background: var(--color-surface);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
}
.textarea { min-height: 112px; padding-top: var(--space-4); padding-bottom: var(--space-4); resize: vertical; }
.select { cursor: pointer; }
.input:hover:not(:disabled), .textarea:hover:not(:disabled), .select:hover:not(:disabled) { border-color: var(--color-border-hover); }
.input:focus, .textarea:focus, .select:focus {
  border-color: color-mix(in srgb, var(--color-text) 28%, var(--color-border));
  box-shadow: var(--focus-ring);
}
.input:disabled,.textarea:disabled,.select:disabled { cursor:not-allowed; border-color:var(--color-border); background:var(--color-surface-muted); color:var(--color-muted); opacity:.68; box-shadow:none; }
.input::placeholder,.textarea::placeholder { color:var(--color-muted); opacity:.72; }
.input.invalid, .textarea.invalid, .select.invalid, [aria-invalid="true"] { border-color: var(--color-text); box-shadow: 0 0 0 1px var(--color-text); }
.fileInput { padding-top: 9px; }
.fieldHint { color: var(--color-muted); font-size: var(--text-xs); }
.toolResult { margin-top: var(--space-6); padding: var(--space-5); display: grid; gap: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-muted); }
.toolResult.errorState { border-style: dashed; border-color: var(--color-muted-2); }
.toolResult p { margin: 0; }
.toolMetric { margin: var(--space-1) 0; font-size: 26px; line-height: 1.1; letter-spacing: -.04em; }
.toolLinkOutput {
  display: block;
  max-width: 100%;
  padding: var(--space-3) var(--space-4);
  overflow-wrap: anywhere;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font: 500 11px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.toolResultActions { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.policyDraft {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.policyDraft p { white-space: pre-line; color: var(--color-text-soft); font-size: var(--text-xs); line-height: 1.65; }
.checkList { display: grid; gap: var(--space-3); }
.checkItem { min-height: 46px; padding: 0 var(--space-4); display: flex; align-items: center; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--motion-fast), background var(--motion-fast); }
.checkItem:hover { border-color: var(--color-border-hover); }
.checkItem.checked { background: var(--color-surface-muted); }
.checkItem input { width: 1px; height: 1px; position: absolute; opacity: 0; pointer-events: none; }
.checkControl { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: transparent; background: var(--color-surface); transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast); }
.checkItem.checked .checkControl { border-color: var(--color-strong); background: var(--color-strong); color: var(--color-on-strong); }
.checkItem:has(input:focus-visible) { outline: 2px solid var(--color-text); outline-offset: 2px; }
.docList, .notificationList, .bugHistory, .securityStack { display: grid; gap: var(--space-3); }
.docItem { min-height: 64px; padding: var(--space-4); display: flex; align-items: flex-start; gap: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.docItem p { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.emptyState, .successState { min-height: 180px; padding: var(--space-7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: var(--color-muted); text-align: center; }
.emptyState strong, .successState h3 { margin: 0; color: var(--color-text); font-size: var(--text-sm); font-weight: 500; }
.emptyState span, .successState p { max-width: 360px; margin: 0; font-size: var(--text-xs); }
.partnersEmpty { min-height: 280px; border: 1px dashed var(--color-border); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--color-surface) 94%, var(--color-surface-muted)); }
.partnerTitleLine { display:flex; align-items:center; gap:var(--space-2); }
.partnerCount { min-width:22px; height:22px; padding:0 7px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-full); background:var(--color-surface-muted); color:var(--color-muted); font-size:var(--text-xs); line-height:1; }
.partnerTileIcon { overflow:hidden; font-size:11px; letter-spacing:-.02em; }
.partnerTileIcon img { width:100%; height:100%; display:block; object-fit:contain; }
.partnerProgramGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); }
.partnerProgramCard { min-width:0; min-height:188px; padding:var(--space-5); display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-5); text-align:left; text-decoration:none; border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface); color:var(--color-text); cursor:pointer; transition:border-color var(--motion-fast),background-color var(--motion-fast),box-shadow var(--motion-fast); }
.partnerProgramCard:hover { border-color:var(--color-border-hover); background:var(--color-surface-muted); box-shadow:var(--shadow-sm); }
.partnerProgramCard:focus-visible { outline:0; box-shadow:var(--focus-ring); }
.partnerProgramIcon { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-bg); }
.partnerProgramCopy { display:grid; gap:var(--space-2); }
.partnerProgramCopy strong { font-size:var(--text-base); font-weight:500; }
.partnerProgramCopy > span { color:var(--color-muted); font-size:var(--text-xs); line-height:1.55; }
.partnerProgramAction { margin-top:auto; display:inline-flex; align-items:center; gap:var(--space-2); color:var(--color-text-soft); font-size:var(--text-xs); font-weight:500; }
.partnerProgramNote { max-width:620px; margin:var(--space-5) 0 0; color:var(--color-muted); font-size:var(--text-xs); line-height:1.55; }
.partnerApplicationLayout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:var(--space-6); align-items:start; }
.partnerApplicationPanel,
.partnerApplicationAside { border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface); }
.partnerApplicationPanel { padding:var(--space-6); }
.partnerApplicationHeader { margin-bottom:var(--space-6); }
.partnerApplicationHeader h2 { margin:var(--space-2) 0 0; font-size:var(--text-lg); font-weight:500; letter-spacing:-.03em; }
.partnerApplicationHeader p { margin:var(--space-2) 0 0; color:var(--color-muted); font-size:var(--text-xs); line-height:1.55; }
.partnerApplicationActions { margin-top:var(--space-6); padding-top:var(--space-5); display:flex; justify-content:flex-end; gap:var(--space-2); border-top:1px solid var(--color-border); }
.partnerApplicationAside { padding:var(--space-5); display:grid; gap:var(--space-5); }
.partnerApplicationAside h3 { margin:var(--space-2) 0 0; font-size:var(--text-base); font-weight:500; letter-spacing:-.02em; }
.partnerApplicationSteps { display:grid; gap:var(--space-4); }
.partnerApplicationSteps > div { display:grid; grid-template-columns:28px minmax(0,1fr); gap:var(--space-3); align-items:start; }
.partnerApplicationSteps span { width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--color-border); border-radius:var(--radius-full); background:var(--color-surface-muted); color:var(--color-muted); font-size:10px; }
.partnerApplicationSteps p { margin:3px 0 0; color:var(--color-muted); font-size:var(--text-xs); line-height:1.5; }
.partnerApplicationSuccess { min-height:360px; display:grid; place-items:center; }
.partnerApplicationSuccess .successState { min-height:0; }
.partnerApplicationFields label > span { color:var(--color-muted); font-size:10px; font-weight:400; }
.partnerStrategy { min-height:116px; }
.fieldHint { display:block; margin-top:6px; color:var(--color-muted); font-size:10px; line-height:1.45; }
@media (max-width:900px) { .partnerApplicationLayout { grid-template-columns:1fr; } }
@media (max-width:700px) {
  .partnerProgramGrid { grid-template-columns:1fr; }
  .partnerProgramCard { min-height:164px; }
  .partnerApplicationPanel,
  .partnerApplicationAside { padding:var(--space-5); }
  .partnerApplicationActions { align-items:stretch; flex-direction:column-reverse; }
  .partnerApplicationActions .button { width:100%; }
}
.successIcon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-strong); color: var(--color-on-strong); }
.profilePage { padding-top: var(--space-8); }
.socialProfileCard { margin-bottom: var(--space-7); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.profileCover { min-height: 190px; position: relative; overflow: hidden; background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border); }
.profileCoverPreview { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; overflow: hidden; border: 0; background: transparent; color: inherit; cursor: pointer; }
.profileCoverPreview > img { width: 100%; height: 100%; position: absolute; inset: 0; z-index: 1; display: block; object-fit: cover; transition: transform 220ms var(--ease-standard); }
.profileCoverPreview:hover > img { transform: scale(1.012); }
.profileCover.hasImage::before, .profileCover.hasImage::after { display: none; }
.profileCover::before, .profileCover::after, .profileCoverPreview > span, .profileCoverPreview > i, .profileCoverPreview > b { content: ''; position: absolute; display: block; border-radius: var(--radius-full); border: 1px solid var(--color-border); }
.profileCover::before { width: 360px; height: 360px; right: -70px; top: -210px; background: color-mix(in srgb, var(--color-surface) 76%, transparent); }
.profileCover::after { width: 250px; height: 250px; left: 14%; bottom: -185px; background: color-mix(in srgb, var(--color-surface) 68%, transparent); }
.profileCoverPreview > span { width: 520px; height: 110px; right: 10%; top: 36px; transform: rotate(-7deg); border-radius: 50%; background: color-mix(in srgb, var(--color-surface) 76%, transparent); }
.profileCoverPreview > i { width: 180px; height: 180px; left: -46px; top: -52px; background: var(--color-surface); opacity: .72; }
.profileCoverPreview > b { width: 90px; height: 90px; right: 28%; bottom: -48px; background: var(--color-strong); opacity: .06; }
.socialProfileBody { padding: 0 var(--space-7) var(--space-7); }
.socialProfileTop { min-height: 64px; margin-bottom: var(--space-3); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); }
.profileAvatarWrap { width: 82px; height: 82px; flex: 0 0 82px; margin-top: -42px; position: relative; z-index: 4; }
.socialAvatar { width: 100%; height: 100%; margin: 0; padding: 0; display: grid; place-items: center; border-radius: var(--radius-lg); border: 4px solid var(--color-surface); background: var(--color-strong); color: var(--color-on-strong); box-shadow: var(--shadow-sm); font: inherit; font-size: var(--text-base); font-weight: 500; letter-spacing: -.02em; position: relative; z-index: 2; cursor: pointer; }
.socialAvatar img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.socialProfileTop .profileHeroActions { padding-top: var(--space-5); }
.profileMediaEditControl {
  min-height: 32px;
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  backdrop-filter: none;
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.profileMediaEditControl:hover { border-color: var(--color-border-hover); background: var(--color-surface); box-shadow: var(--button-shadow-hover); }
.profileMediaEditControl:has(input:focus-visible) { outline: 1px solid color-mix(in srgb, var(--color-text) 42%, var(--color-border)); outline-offset: 2px; }
.profileMediaEditControl input,
.profileUploadButton input { width: 100%; height: 100%; position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.profileCoverEdit { right: var(--space-5); top: var(--space-5); padding: 0 var(--space-3); }
.profileAvatarEdit { width: 30px; min-height: 30px; right: -2px; bottom: 1px; padding: 0; border-radius: var(--radius-full); }
.profileAvatarEdit svg { width: 11px; height: 11px; }
.profileEditButton { display: inline-flex; align-items: center; gap: var(--space-2); }
.socialIdentity { max-width: 680px; }
.socialNameRow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.socialNameRow h1 { margin: 0; font-size: 28px; line-height: 1.1; letter-spacing: -.035em; font-weight: 500; }
.verifiedProfile { min-height: 24px; padding: 0 var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-muted); color: var(--color-text-soft); font-size: var(--text-xs); }
.socialHandle { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.socialBio { max-width: 620px; margin: var(--space-4) 0 0; color: var(--color-text-soft); font-size: var(--text-sm); line-height: 1.6; }
.socialMeta { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-4); color: var(--color-muted); font-size: var(--text-xs); }
.socialMeta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.socialProfileMetrics { margin-top: var(--space-6); padding-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-7); border-top: 1px solid var(--color-border); }
.socialProfileMetrics > div { min-width: 76px; display: grid; gap: 1px; }
.socialProfileMetrics strong { font-size: var(--text-base); font-weight: 500; }
.socialProfileMetrics span { color: var(--color-muted); font-size: var(--text-xs); }
.profilePostsSection { margin-bottom: var(--space-7); }
.profilePostList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.profilePostList .feedPost { height: 100%; }
.profilePostList .feedPostVisual { min-height: 180px; }
.profilePostList .feedPost:nth-child(3) { display: none; }
.profilePostEmpty { grid-column: 1 / -1; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
@media (max-width: 760px) {
  .profileCover { min-height: 150px; }
  .socialProfileBody { padding-left: var(--space-5); padding-right: var(--space-5); }
  .socialProfileTop { min-height: 58px; }
  .profileAvatarWrap { width: 72px; height: 72px; flex-basis: 72px; margin-top: -36px; }
  .socialProfileTop .profileHeroActions { padding-top: var(--space-4); }
  .profileCoverEdit { right: var(--space-4); top: var(--space-4); }
  .profilePostList { grid-template-columns: 1fr; }
  .profilePostList .feedPost:nth-child(3) { display: block; }
}
@media (max-width: 480px) {
  .profileCover { min-height: 124px; }
  .socialProfileTop { align-items: flex-start; flex-direction: column; }
  .socialProfileTop .profileHeroActions { width: 100%; padding-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .socialProfileMetrics { gap: var(--space-5); }
  .socialProfileMetrics > div { min-width: calc(50% - var(--space-5)); }
  .socialNameRow h1 { font-size: 24px; }
}
.profileHero { margin-bottom: var(--space-7); display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); }
.profileIdentity { min-width: 0; display: flex; align-items: center; gap: var(--space-5); }
.profileAvatar { width: 64px; height: 64px; flex: 0 0 64px; display: grid; place-items: center; border-radius: var(--radius-xl); background: var(--color-strong); color: var(--color-on-strong); font-size: var(--text-lg); font-weight: 500; letter-spacing: -.04em; }
.profileHeroActions { display: flex; gap: var(--space-3); }
.profileSummary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-bottom: var(--space-7); }
.compactValue { font-size: var(--text-lg); }
.profileLayout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: var(--space-6); }
.profileMain, .profileAside { display: grid; gap: var(--space-6); }
.settingsSection, .sidePanel { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.settingsSection { padding: var(--space-6); }
.profileEditForm { display: grid; }
.modal.profileEditModal { width: min(900px, 100%); }
.modal.profileEditModal .modalHeader { min-height: 78px; padding-inline: 30px; }
.modal.profileEditModal .modalHeader h2 { font-size: 20px; }
.modal.profileEditModal .modalBody { padding: 0 30px; }
.modal.profileEditModal .modalFooter { background: var(--color-surface); }
.profileEditSection {
  padding: 28px 0;
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  gap: 34px;
  border-top: 1px solid var(--color-border);
}
.profileEditSection:first-child { border-top: 0; }
.profileEditSectionCopy { min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
.profileEditSectionIcon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface-muted); color: var(--color-text-soft); }
.profileEditSectionCopy > div { min-width: 0; }
.profileEditSectionCopy strong { display: block; color: var(--color-text); font-size: 13px; font-weight: 550; }
.profileEditSectionCopy p { max-width: 175px; margin: 5px 0 0; color: var(--color-muted); font-size: 11px; line-height: 1.5; }
.profileEditMediaStack { min-width: 0; display: grid; gap: 14px; }
.profileEditMediaItem { padding: 14px; display: grid; gap: 12px; border: 1px solid var(--color-border); border-radius: 14px; background: color-mix(in srgb, var(--color-surface-muted) 44%, var(--color-surface)); }
.profileEditMediaItemHead { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.profileEditMediaItemHead > div { min-width: 0; display: grid; gap: 2px; }
.profileEditMediaItemHead strong { color: var(--color-text); font-size: 12px; font-weight: 550; }
.profileEditMediaItemHead span { color: var(--color-muted); font-size: 10px; }
.profileEditMediaPreview { min-width: 0; }
.profileEditAvatarPreview {
  width: 84px;
  height: 84px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  font-weight: 500;
}
.profileEditAvatarPreview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profileEditCoverPreview {
  width: 100%;
  aspect-ratio: 4 / 1;
  min-height: 92px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}
.profileEditCoverPreview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profileEditCoverPreview > span,
.profileEditCoverPreview > i,
.profileEditCoverPreview > b { position: absolute; display: block; border: 1px solid var(--color-border); border-radius: var(--radius-full); content: ""; }
.profileEditCoverPreview > span { width: 65%; height: 70%; right: 4%; top: 10%; transform: rotate(-5deg); border-radius: 50%; }
.profileEditCoverPreview > i { width: 62px; height: 62px; left: -18px; top: -20px; background: var(--color-surface); opacity: .7; }
.profileEditCoverPreview > b { width: 34px; height: 34px; right: 26%; bottom: -18px; background: var(--color-strong); opacity: .06; }
.profileInlineUpload { min-height: 34px; padding-inline: 11px; position: relative; overflow: hidden; cursor: pointer; }
.profileInlineUpload input { width: 100%; height: 100%; position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.profileInlineUpload.disabled { opacity: .5; pointer-events: none; }
.profileEditFields { gap: 16px 14px; align-items: start; }
.profileEditFields .field { gap: 7px; align-content: start; }
.profileEditFields .input {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}
.profileEditFields label { font-size: 11px; color: var(--color-text-soft); font-weight: 500; }
.profileEditFields .fieldHint { font-size: 10px; line-height: 1.4; }
.profileHandleField { height: 42px; min-height: 42px; max-height: 42px; display: flex; align-items: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
.profileHandleField > span { padding-left: var(--space-4); color: var(--color-muted); font-size: var(--text-sm); }
.profileHandleField .input { height: 40px; min-height: 40px; max-height: 40px; padding-left: 2px; border: 0; border-radius: 0; box-shadow: none; }
.profileHandleField:hover { border-color: var(--color-border-hover); }
.profileHandleField:focus-within { border-color: color-mix(in srgb, var(--color-text) 28%, var(--color-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text) 6%, transparent); }
.profileHandleField:has([aria-invalid="true"]) { border-color: var(--color-text); }
.profileBioInput { height: 104px; min-height: 104px; }
.modal.profileMediaModal { width: min(820px, 100%); }
.modal.profileMediaModal .modalBody { padding: 0; background: var(--color-surface-muted); }
.profileMediaPreviewStage { min-height: clamp(280px, 52dvh, 430px); display: grid; place-items: center; overflow: hidden; background: var(--color-surface-muted); }
.profileMediaPreviewStage img { width: 100%; height: 100%; max-height: 70vh; display: block; object-fit: contain; }
.profileMediaPreviewStage.avatarPreview { padding: clamp(28px, 6vw, 64px); }
.profileMediaPreviewStage.avatarPreview img { width: min(420px, 72vw); height: min(420px, 72vw); aspect-ratio: 1; border-radius: var(--radius-full); object-fit: cover; box-shadow: var(--shadow-lg); }
.profileMediaPreviewStage.coverPreview img { min-height: 0; object-fit: contain; }
.profileMediaPreviewEmpty { min-height: 280px; padding: var(--space-8); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: var(--color-muted); text-align: center; }
.profileMediaPreviewEmpty strong { color: var(--color-text); font-size: var(--text-sm); font-weight: 500; }
.profileMediaPreviewEmpty > span:last-child { font-size: var(--text-xs); }
.profilePreviewInitials { width: 112px; height: 112px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-strong); color: var(--color-on-strong); font-size: var(--text-xl); font-weight: 500; }
.profileUploadButton { position: relative; overflow: hidden; }
.profileUploadButton:has(input:focus-visible) { outline: 1px solid color-mix(in srgb, var(--color-text) 42%, var(--color-border)); outline-offset: 2px; }
.modal.profileMediaEditorModal { width: min(780px, 100%); }
.profileMediaEditor { display: grid; gap: 22px; }
.profileMediaEditorStage {
  min-height: 320px;
  padding: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--color-border) 35%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--color-border) 35%, transparent) 75%),
    linear-gradient(45deg, color-mix(in srgb, var(--color-border) 35%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, var(--color-border) 35%, transparent) 75%),
    var(--color-surface-muted);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}
.profileMediaEditorStage canvas { max-width: 100%; display: block; background: var(--color-surface); box-shadow: 0 12px 40px color-mix(in srgb, #000 14%, transparent); }
.profileMediaEditorStage.avatarEditor canvas { width: min(360px, 70vw); aspect-ratio: 1; border-radius: var(--radius-xl); }
.profileMediaEditorStage.coverEditor { min-height: 260px; }
.profileMediaEditorStage.coverEditor canvas { width: 100%; aspect-ratio: 4 / 1; border-radius: var(--radius-lg); }
.profileMediaEditorControls { display: grid; gap: 14px; }
.profileMediaEditorControls label { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(220px, 1.2fr); align-items: center; gap: 22px; }
.profileMediaEditorControls label > span { display: grid; gap: 2px; }
.profileMediaEditorControls strong { color: var(--color-text); font-size: var(--text-xs); font-weight: 500; }
.profileMediaEditorControls small { color: var(--color-muted); font-size: 10px; line-height: 1.4; }
.profileMediaEditorControls input[type="range"] { width: 100%; accent-color: var(--color-text); cursor: pointer; }
.profileMediaEditorMeta { padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 10px; }
.settingsHead { margin-bottom: var(--space-6); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.settingsHead.compact { margin: 0; padding: var(--space-5); border-bottom: 1px solid var(--color-border); }
.settingsHead h2 { margin: 0; font-size: var(--text-base); font-weight: 500; }
.settingsHead p { margin: 2px 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.themePicker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.themeOption { min-height: 88px; padding: var(--space-4); display: flex; align-items: center; gap: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); text-align: left; cursor: pointer; transition: border-color var(--motion-fast), background var(--motion-fast); }
.themeOption:hover, .themeOption.active { border-color: var(--color-border-hover); background: var(--color-surface-muted); }
.themeOption > span:last-child { min-width: 0; display: grid; gap: 2px; }
.themeOption small { color: var(--color-muted); font-size: var(--text-xs); }
.themePreview { width: 54px; height: 44px; flex: 0 0 54px; position: relative; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.themePreview i { position: absolute; inset: 0 auto 0 0; width: 16px; }
.themePreview b { position: absolute; left: 22px; right: 6px; top: 8px; height: 5px; border-radius: 2px; }
.lightPreview { background: #FFFFFF; }
.lightPreview i { background: #E6E6E6; }
.lightPreview b { background: #3F3F46; }
.darkPreview { background: #000000; }
.darkPreview i { background: #3F3F46; }
.darkPreview b { background: #F5F5F5; }
.settingList { display: grid; }
.settingRow { min-height: 66px; padding: var(--space-4) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); border-top: 1px solid var(--color-border); }
.settingRow:first-child { border-top: 0; }
.settingRow > span { min-width: 0; display: grid; gap: 2px; }
.settingRow small { color: var(--color-muted); font-size: var(--text-xs); }
.switch { width: 38px; height: 22px; position: relative; flex: 0 0 38px; appearance: none; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-muted); cursor: pointer; transition: background var(--motion-fast), border-color var(--motion-fast); }
.switch::after { content: ""; width: 16px; height: 16px; position: absolute; left: 2px; top: 2px; border-radius: var(--radius-full); background: var(--color-muted); transition: transform var(--motion-fast), background var(--motion-fast); }
.switch:checked { border-color: var(--color-strong); background: var(--color-strong); }
.switch:checked::after { background: var(--color-on-strong); transform: translateX(16px); }
.sessionCard { min-height: 64px; padding: var(--space-4) 0; display: flex; align-items: center; gap: var(--space-4); border-top: 1px solid var(--color-border); }
.sessionCard:first-of-type { border-top: 0; }
.sessionIcon, .notificationIcon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); }
.activityList { padding: var(--space-2); }
.activityItem { min-height: 56px; padding: var(--space-3); display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: start; gap: var(--space-3); border-radius: var(--radius-md); }
.activityItem:hover { background: var(--color-surface-muted); }
.activityItem > span:last-child { display: grid; gap: 2px; }
.activityItem small { color: var(--color-muted); font-size: var(--text-xs); }
.activityDot { width: 6px; height: 6px; margin-top: 7px; border-radius: var(--radius-full); background: var(--color-text); }
.quickActions { padding: var(--space-2); display: grid; }
.quickActions button, .quickActions a { min-height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: var(--button-radius); background: transparent; text-align: left; cursor: pointer; }
.quickActions button:hover, .quickActions a:hover { background: var(--color-surface-muted); }
.notificationItem { width: 100%; min-height: 72px; padding: var(--space-4); display: flex; align-items: flex-start; gap: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); text-align: left; cursor: pointer; transition: border-color var(--motion-fast), background var(--motion-fast); }
.notificationItem:hover { border-color: var(--color-border-hover); background: var(--color-surface-muted); }
.notificationItem.unread { background: var(--color-surface-muted); }
.notificationItem .rowMain { display: grid; gap: 2px; }
.notificationItem .rowMain > span, .notificationItem small { color: var(--color-muted); font-size: var(--text-xs); }
.unreadDot { width: 7px; height: 7px; margin-top: 6px; flex: 0 0 7px; border-radius: var(--radius-full); background: var(--color-text); }
.bugHistory { margin-top: var(--space-5); }
.bugItem { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.bugItemTop { margin-bottom: var(--space-2); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.statusBadge { padding: 4px var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface-muted); color: var(--color-muted); font-size: var(--text-xs); cursor: pointer; }
.statusBadge.resolved { background: var(--color-strong); border-color: var(--color-strong); color: var(--color-on-strong); }
.bugContext { margin-top: var(--space-2); color: var(--color-muted); font: var(--text-xs) ui-monospace, monospace; overflow-wrap: anywhere; }
.visuallyHidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.pageSkeleton { pointer-events: none; }
.skeletonBlock,
.skeletonCard::before,
.skeletonPanel::before {
  background: linear-gradient(
    90deg,
    var(--color-surface-muted) 0%,
    color-mix(in srgb, var(--color-border) 74%, var(--color-surface)) 44%,
    var(--color-surface-muted) 76%
  );
  background-size: 220% 100%;
  animation: skeletonShimmer 1.35s ease-in-out infinite;
  border-radius: var(--radius-md);
}
.skeletonPageHead { margin-bottom: var(--space-7); display: grid; gap: 10px; }
.skeletonLine { height: 11px; display: block; border-radius: var(--radius-full); }
.skeletonLine.eyebrow { width: 86px; height: 9px; }
.skeletonLine.title { width: min(330px, 56%); height: 30px; border-radius: var(--radius-md); }
.skeletonLine.subtitle { width: min(520px, 82%); }
.skeletonLine.short { width: 30%; }
.skeletonLine.medium { width: 58%; }
.skeletonLine.wide { width: 88%; }
.skeletonLine.name { width: min(280px, 54%); height: 28px; border-radius: var(--radius-md); }
.skeletonLine.handle { width: 130px; height: 9px; }
.skeletonLine.bio { width: min(570px, 90%); }
.skeletonLine.bioShort { width: min(420px, 66%); }
.skeletonCardGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.skeletonCard,
.skeletonPanel {
  min-height: 150px;
  padding: var(--space-5);
  display: grid;
  align-content: end;
  gap: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}
.skeletonCard::before,
.skeletonPanel::before {
  content: "";
  min-height: 72px;
  position: absolute;
  inset: 0 0 auto;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}
.skeletonPanel { min-height: 220px; align-content: start; padding-top: 86px; }
.skeletonPanel::before { min-height: 62px; }
.skeletonFeedList { display: grid; gap: var(--space-4); }
.skeletonCard.feedSkeleton { min-height: 190px; padding-top: 104px; }
.skeletonCard.feedSkeleton::before { min-height: 84px; }
.skeletonSupportGrid { align-items: stretch; }
.skeletonProfileCard { overflow: hidden; }
.skeletonProfileCover { min-height: 190px; border-bottom: 1px solid var(--color-border); }
.skeletonProfileTop { min-height: 70px; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }
.skeletonProfileAvatar { width: 82px; height: 82px; margin-top: -42px; flex: 0 0 82px; position: relative; z-index: 2; border: 4px solid var(--color-surface); border-radius: var(--radius-lg); }
.skeletonButton { width: 118px; height: 38px; margin-top: var(--space-4); border-radius: var(--radius-md); }
.skeletonProfileIdentity { display: grid; gap: 11px; padding-bottom: var(--space-2); }
.skeletonSummary .summarySkeleton { min-height: 108px; padding-top: 62px; }
.skeletonSummary .summarySkeleton::before { min-height: 48px; }
@keyframes skeletonShimmer {
  0% { background-position: 115% 0; }
  100% { background-position: -115% 0; }
}
.toast {
  max-width: min(520px, calc(100vw - 32px));
  min-height: 44px;
  position: fixed;
  right: 24px;
  top: 70px;
  z-index: 220;
  padding: 6px 12px 6px 7px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-xl);
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: 0 12px 32px color-mix(in srgb, #000 13%, transparent), var(--shadow-sm);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 190ms ease, transform 220ms var(--ease-emphasized);
  will-change: transform, opacity;
}
.toast.toastReady { opacity: 1; transform: translateY(0); }
.toast.toastLeaving { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.toastIcon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border:1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-surface-muted);
  color: var(--color-text-soft);
}
.toast[data-tone="error"] { border-style:dashed; }
.toast[data-tone="success"] .toastIcon { background:var(--control-selected-bg); color:var(--control-selected-text); }
.toastMessage { min-width: 0; font-size: var(--text-xs); font-weight: 500; line-height: 1.35; }
@keyframes backdropIn { from { opacity: 0; } }
@keyframes overlayPanelIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes backdropOut { to { opacity: 0; } }
@keyframes overlayPanelOut { to { opacity: 0; transform: translateY(4px) scale(.995); } }
@keyframes customerRouteExit { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:.78; transform:translateY(2px) scale(.998); } }
@keyframes customerRouteEnter { from { opacity:.52; transform:translateY(5px) scale(.997); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes customerSpin { to { transform: rotate(360deg); } }
.backdrop.overlayClosing { pointer-events:none; animation:backdropOut 120ms cubic-bezier(.4,0,1,1) both; }
.backdrop.overlayClosing .searchModal,
.backdrop.overlayClosing .modal { animation:overlayPanelOut 120ms cubic-bezier(.4,0,1,1) both; }
.mobileOverlay { display: none; }
[aria-busy="true"] { cursor: progress; }
html[data-theme="dark"] .surface { background: var(--color-surface); box-shadow: 0 0 0 1px color-mix(in srgb, #3F3F46 18%, transparent), var(--shadow-sm); }
html[data-theme="dark"] .searchTrigger,
html[data-theme="dark"] .navLink:hover,
html[data-theme="dark"] .accountButton:hover,
html[data-theme="dark"] .accountButton[aria-expanded="true"],
html[data-theme="dark"] .accountMenu { background: var(--color-surface-raised); }
html[data-theme="dark"] .navLink.active { background:var(--control-selected-bg); color:var(--control-selected-text); }
html[data-theme="dark"] .shortcut { background: var(--color-surface-muted); }
html[data-theme="dark"] .accountMenu button:hover,
html[data-theme="dark"] .accountMenu a:hover { background: var(--color-surface-muted); }
html[data-theme="dark"] .avatar { background: var(--color-surface-raised); }
html[data-theme="dark"] .hero { border: 1px solid var(--color-border); background: #000000; }
html[data-theme="dark"] .resumeBar,
html[data-theme="dark"] .summaryCard,
html[data-theme="dark"] .miniPanel,
html[data-theme="dark"] .productCard,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .lessonList,
html[data-theme="dark"] .supportCard,
html[data-theme="dark"] .settingsSection,
html[data-theme="dark"] .sidePanel { background: var(--color-surface-raised); }
html[data-theme="dark"] .resumeBar:hover,
html[data-theme="dark"] .tile.activeTile,
html[data-theme="dark"] a.compactRow:hover,
html[data-theme="dark"] .libraryProductLink:hover,
html[data-theme="dark"] .libraryChevron:hover,
html[data-theme="dark"] .lessonButton:hover,
html[data-theme="dark"] .lessonButton.active,
html[data-theme="dark"] .notificationItem:hover,
html[data-theme="dark"] .quickActions button:hover,
html[data-theme="dark"] .quickActions a:hover { background: var(--color-surface-muted); }
html[data-theme="dark"] .previewStage:not(.dark),
html[data-theme="dark"] .courseVisual,
html[data-theme="dark"] .rowIcon,
html[data-theme="dark"] .tileIcon,
html[data-theme="dark"] .sessionIcon,
html[data-theme="dark"] .notificationIcon,
html[data-theme="dark"] .checkControl,
html[data-theme="dark"] .miniDeviceScreen:not(.dark) { background: var(--color-surface-muted); }
html[data-theme="dark"] .miniDevice,
html[data-theme="dark"] .lessonButton,
html[data-theme="dark"] .themeOption,
html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .select { background: var(--color-surface-raised); }
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .licenseBox,
html[data-theme="dark"] .toolResult,
html[data-theme="dark"] .notificationItem.unread,
html[data-theme="dark"] .checkItem.checked { background: var(--color-surface-muted); }
html[data-theme="dark"] .button:not(.primary):not(.ghost),
html[data-theme="dark"] .favoriteButton { background: var(--color-surface-raised); }
html[data-theme="dark"] .tab.active { background:var(--control-selected-bg); border-color:var(--control-selected-border); color:var(--control-selected-text); }
html[data-theme="dark"] .button:not(.primary):not(.ghost):hover,
html[data-theme="dark"] .iconButton:hover { background: var(--color-surface-muted); }
html[data-theme="dark"] .searchModal,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .notificationPopover { background: var(--color-surface-raised); border-color: var(--color-border-hover); box-shadow: 0 20px 64px color-mix(in srgb, #000 46%, transparent), 0 1px 4px color-mix(in srgb, #000 26%, transparent); }
html[data-theme="dark"] .searchResult:hover,
html[data-theme="dark"] .searchResult.selected { background: var(--color-surface-muted); }
html[data-theme="dark"] .searchResultIcon,
html[data-theme="dark"] .commandHint { background: var(--color-surface); }
html[data-theme="dark"] .backdrop { background: color-mix(in srgb, var(--color-overlay) 88%, transparent); backdrop-filter: none; }
html[data-theme="dark"] .profileAvatar,
html[data-theme="dark"] .lessonButton.done .lessonNumber,
html[data-theme="dark"] .favoriteInline.active,
html[data-theme="dark"] .favoriteButton.active { background: var(--color-strong); color: var(--color-on-strong); }
html[data-theme="dark"] .videoCenter .playButton { background: var(--color-strong); border-color: var(--color-strong); color: var(--color-on-strong); }
html[data-theme="dark"] .toast { border-color: var(--color-border-hover); background: var(--color-surface-raised); color: var(--color-text); }
html[data-theme="dark"] .agentDock {
  --agent-launcher-bg: var(--color-surface-raised);
  --agent-launcher-gradient: none;
  --agent-launcher-border: var(--color-border);
  --agent-launcher-shadow: none;
  --agent-launcher-shadow-hover: none;
}
html[data-theme="dark"] .agentPanel {
  background: color-mix(in srgb, var(--color-surface-raised) 90%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
  box-shadow: 0 16px 42px color-mix(in srgb, #000 30%, transparent), 0 1px 2px color-mix(in srgb, #000 18%, transparent);
}
html[data-theme="dark"] .agentPanel::after { box-shadow: inset 0 1px color-mix(in srgb, #fff 3%, transparent); }
html[data-theme="dark"] .agentHeader { background: transparent; }
html[data-theme="dark"] .agentBody {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface-raised) 78%, var(--color-surface)) 0%,
    color-mix(in srgb, var(--color-surface-raised) 86%, var(--color-surface)) 48%,
    color-mix(in srgb, var(--color-surface-raised) 96%, var(--color-surface-muted)) 100%
  );
}
html[data-theme="dark"] .agentQuickActions button {
  border-color: color-mix(in srgb, var(--color-border) 62%, transparent);
  background: color-mix(in srgb, var(--color-surface-raised) 58%, transparent);
  color: color-mix(in srgb, var(--color-muted) 88%, var(--color-text));
}
html[data-theme="dark"] .agentQuickActions button:hover {
  border-color: color-mix(in srgb, var(--color-border-hover) 64%, transparent);
  background: color-mix(in srgb, var(--color-surface-muted) 66%, transparent);
  color: var(--color-text-soft);
}
html[data-theme="dark"] .agentComposer {
  border-color: color-mix(in srgb, var(--color-border) 58%, transparent);
  background: color-mix(in srgb, var(--color-surface-raised) 78%, var(--color-surface));
}
html[data-theme="dark"] .agentComposer:focus-within {
  border-color: color-mix(in srgb, var(--color-border-hover) 62%, transparent);
  background: color-mix(in srgb, var(--color-surface-raised) 86%, var(--color-surface));
  box-shadow: none;
}
html[data-theme="dark"] .agentLauncher { background-color: var(--agent-launcher-bg); color: var(--color-text-soft); }
html[data-theme="dark"] ::selection { background: #3F3F46; color: #FFFFFF; }
@media (min-width: 1025px) {
  .surface { height: calc(100dvh - 40px); }
  .footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    height: 26px;
    min-height: 0;
    padding: 0 96px 0 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-5);
    white-space: nowrap;
    line-height: 1;
  }
  .agentDock {
    --agent-launcher-width: 66px;
    --agent-launcher-height: 26px;
    --agent-launcher-radius: 6px;
    --agent-launcher-bg: var(--color-sidebar);
    --agent-launcher-gradient: none;
    --agent-launcher-border: transparent;
    --agent-launcher-shadow: none;
    --agent-launcher-shadow-hover: none;
    right: 16px;
    bottom: 3px;
  }
  .agentPanel { right: 16px; bottom: 3px; }
  .agentLauncher {
    min-width: var(--agent-launcher-width);
    height: var(--agent-launcher-height);
    padding: 0 8px;
    border-color: transparent;
    border-radius: var(--agent-launcher-radius);
    background: transparent;
    color: var(--color-text-soft);
    box-shadow: none;
  }
  .agentLauncher::before { display: none; }
  .agentLauncher:hover {
    filter: none;
    background: var(--control-selected-bg);
    color: var(--color-text);
    box-shadow: none;
    transform: none;
  }
  .agentLauncher:active { background: var(--color-surface-muted); box-shadow: none; transform: none; }
  .agentLauncher:focus-visible { box-shadow: var(--focus-ring); }
  html[data-theme="dark"] .agentLauncher { background: transparent; color: var(--color-text-soft); }
  html[data-theme="dark"] .agentLauncher:hover { background: var(--control-selected-bg); color: var(--color-text); }
}
@media (max-width: 1180px) {
  .content { padding-left: var(--space-7); padding-right: var(--space-7); }
  .productGrid, .tileGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summaryGrid, .profileSummary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .libraryPanels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detailGrid, .productOverviewGrid, .playerGrid, .profileLayout { grid-template-columns: 1fr; }
  .productOverviewRail { position:static; }
  .profileAside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  :root { --sidebar-width: 224px; }
  .sidebar { transform: translateX(-100%); transition: transform var(--motion-base); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .searchTrigger { width: 100%; margin-inline: 0; }
  .mobileOverlay { position: fixed; inset: 0; z-index: 35; display: block; pointer-events: none; background: var(--color-overlay); opacity: 0; transition: opacity var(--motion-base); }
  .mobileOverlay.open { opacity: 1; pointer-events: auto; }
  .main { width: 100%; height: 100dvh; margin-left: 0; padding: 0; }
  .surface { height: 100dvh; min-height: 0; border: 0; border-radius: 0; }
  .mobileMenu { display: grid; }
  .content,
  .content.narrow { width: 100%; max-width: none; padding: 24px 18px 48px; }
  .pageHead, .profileHero { align-items: flex-start; flex-direction: column; }
  .pageHeadActions, .profileHeroActions { width: 100%; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .topbar { height:50px; min-height:50px; flex-basis:50px; padding: 0 var(--space-5); }
  .topSearch { display:none; }
  .productGrid, .tileGrid, .supportGrid, .featureGrid, .libraryPanels, .themePicker, .profileAside { grid-template-columns: 1fr; }
  .productGalleryGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .formGrid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .tabs { width: 100%; max-width: 100%; overflow-x: auto; }
  .tab { white-space: nowrap; }
  .resumeBar { grid-template-columns: 34px minmax(0, 1fr) 18px; }
  .resumeProgress { display: none; }
  .updateRow { align-items: flex-start; flex-wrap: wrap; }
  .updateRow .rowSide { width: 100%; padding-left: 52px; justify-content: space-between; }
  .backdrop { padding: 16px; align-items: center; }
  .searchModal, .modal { width: 100%; max-height: calc(100dvh - 32px); border-radius: var(--radius-xl); }
  .searchModal, .modal { animation-name: overlayPanelIn; }
  .modalHeader { min-height: 58px; padding-inline: 18px; }
  .modalBody { max-height: calc(100dvh - 164px); padding: 20px 18px; }
  .modalFooter { min-height: 56px; padding: 10px 18px; }
  .modal.profileEditModal .modalHeader { padding-inline: 20px; }
  .modal.profileEditModal .modalBody { padding: 0 20px; }
  .profileEditSection { grid-template-columns: 1fr; gap: 16px; padding: 20px 0; }
  .profileEditSectionCopy p { max-width: 100%; }
  .profileEditMediaItem { padding: 12px; }
  .profileEditCoverPreview { width: 100%; }
  .profileMediaEditorStage { min-height: 260px; padding: 18px; }
  .profileMediaEditorControls label { grid-template-columns: 1fr; gap: 8px; }
  .agentDock { right: 16px; bottom: 16px; }
  .agentDock.open { inset: 0; width: 100%; height: 100dvh; display: block; }
  .agentDock.open .agentLauncher { display: inline-flex; right: 16px; bottom: 16px; }
  .agentPanel { right: 0; bottom: 0; width: 100vw; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; animation: agentShellOpenMobile 340ms var(--agent-ease-morph-open) both; }
  .agentInterface { animation-duration: 180ms; animation-delay: 100ms; }
  .agentDock.open .agentHeader { animation-delay: 110ms; }
  .agentDock.open .agentWelcome { animation-delay: 125ms; }
  .agentDock.open .agentQuickActions { animation-delay: 140ms; }
  .agentDock.open .agentResultsSlot { animation-delay: 145ms; }
  .agentDock.open .agentComposer { animation-delay: 155ms; }
  .agentDock.closing .agentInterface { animation: agentInterfaceOut 110ms cubic-bezier(.4, 0, 1, 1) both; }
  .agentDock.closing .agentPanel { animation: agentShellCloseMobile 280ms 20ms var(--agent-ease-morph-close) both; }
  .agentDock.closing .agentLauncher { border-color: transparent; background: transparent; box-shadow: none; animation: none; }
  .agentDock.closing .agentLauncherContent { animation: agentLauncherContentIn 150ms 150ms cubic-bezier(.16, 1, .3, 1) both; }
  .agentDock.closing .agentLauncher::before { animation: agentLauncherSurfaceIn 150ms 150ms cubic-bezier(.16, 1, .3, 1) both; }
  .agentHeader {
    min-height: calc(58px + env(safe-area-inset-top));
    padding-inline: 16px 12px;
    padding-top: env(safe-area-inset-top);
  }
  .agentBody { margin: 0 10px; padding: 18px 16px 16px; }
  .agentWelcome { min-height: min(360px, 52dvh); }
  .agentPanel.is-searching .agentWelcome { min-height: 96px; }
  .agentClose { width: 38px; height: 38px; flex-basis: 38px; }
  .agentComposer { margin: 0 10px calc(10px + env(safe-area-inset-bottom)); }
  .agentSend { width: 34px; height: 34px; }
  .toast { right: 12px; top: 62px; }
}
@media (max-width: 480px) {
  .content,
  .content.narrow { width: 100%; padding-left: var(--space-4); padding-right: var(--space-4); }
  .topbar { padding-left: var(--space-4); padding-right: var(--space-4); }
  .crumbs > span, .crumbs > svg { display: none; }
  .hero { min-height: 280px; padding: var(--space-7); }
  .hero h1 { font-size: 34px; }
  .heroGhost { right: var(--space-5); font-size: 72px; }
  .productGrid { grid-template-columns: 1fr; }
  .productGalleryGrid { grid-template-columns:1fr; }
  .productShowcaseHero,
  .productShowcaseHero > img,
  .productShowcaseHero .detailPreview .previewStage { min-height:220px; height:220px; }
  .agentSuggestions { max-height: 158px; grid-template-columns: 1fr; }
  .agentSuggestions button { min-height: 48px; }
  .agentWelcome { min-height: min(250px, 36dvh); }
  .agentPanel.is-searching .agentWelcome { min-height: 88px; }
  .agentComposerKey { display: none; }
  .summaryGrid, .profileSummary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summaryCard { padding: var(--space-5); }
  .summaryValue { font-size: var(--text-lg); }
  .profileIdentity { align-items: flex-start; }
  .profileAvatar { width: 52px; height: 52px; flex-basis: 52px; }
  .profileHeroActions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pageHeadActions .button { flex: 1 1 auto; }
  .libraryProductLink { padding-left: var(--space-4); padding-right: var(--space-3); }
  .libraryKeyRow { align-items: flex-start; flex-wrap: wrap; }
  .libraryKeyMain { width: 100%; flex-basis: 100%; }
  .libraryKeyInline { flex-wrap: wrap; }
  .libraryKeyDivider { display: none; }
  .libraryKeyDomain { width: 100%; }
  .libraryKeySupport { margin-left: 0; }
  .listRow { padding-left: var(--space-4); padding-right: var(--space-4); }
  .rowSide { align-items: flex-end; flex-direction: column; gap: var(--space-2); }
  .sessionCard { align-items: flex-start; flex-direction: column; }
  .sessionCard .button { width: 100%; justify-content: center; }
  .backdrop { padding: 10px; }
  .backdrop.searchBackdrop { padding-top: 50px; }
  .searchModal, .modal { max-height: calc(100dvh - 20px); border-radius: var(--radius-xl); }
  .modalHeader { min-height: 56px; padding-inline: 16px; }
  .modalBody { padding: 18px 16px; }
  .modalFooter { padding-inline: 16px; }
  .modalFooter .button { flex: 1; justify-content: center; }
  .modal.profileEditModal .modalBody { padding: 0 16px; }
  .profileEditMediaItemHead { align-items: flex-start; }
  .profileEditMediaItemHead .button { flex: 0 0 auto; }
  .profileInlineUpload { width: 100%; justify-content: center; }
  .profileMediaEditorStage { min-height: 220px; padding: 12px; }
  .profileMediaEditorStage.coverEditor { min-height: 180px; }
  .profileMediaEditorMeta { align-items: flex-start; flex-direction: column; }
  .profileMediaPreviewStage { min-height: min(330px, 48dvh); }
  .profileMediaPreviewStage.avatarPreview { padding:24px; }
  .profileMediaPreviewStage.avatarPreview img { width:min(280px,72vw); height:min(280px,72vw); }
  .modal.supportTicketModal .modalHeader { min-height:64px; padding-inline:16px; }
  .modal.supportTicketModal .modalBody,
  .modal.supportRequestModal .modalBody { padding:18px 16px; }
  .modal.supportTicketModal .modalFooter { padding:12px 16px; }
  .searchFooter span:last-child { display: none; }
  .toast { width: calc(100vw - 24px); max-width: 520px; left: 50%; right: auto; top: 12px; transform: translateX(-50%) translateY(-10px); }
  .toast.toastReady { transform: translateX(-50%) translateY(0); }
  .toast.toastLeaving { transform: translateX(-50%) translateY(-10px); }
  [data-tooltip]::after { display:none; }
}
@media (max-width: 360px) {
  .summaryGrid, .profileSummary { grid-template-columns: 1fr; }
  .profileHeroActions,
  .socialProfileTop .profileHeroActions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .content.customerRouteExit,
  .content.customerRouteEnter { animation:none !important; transform:none !important; opacity:1 !important; }
  .agentPanel,
  .agentBrandStage,
  .agentBrandLogo,
  .agentInterface,
  .agentHeader,
  .agentWelcome,
  .agentSuggestions,
  .agentSuggestions button,
  .agentResultsSlot,
  .agentComposer,
  .agentLauncher,
  .agentLauncherContent,
  .agentLauncher::before { animation-delay: 0ms !important; }
  * { view-transition-name: none !important; }
}

.pageHeadActions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.favoriteActive { background: var(--color-surface-muted); border-color: var(--control-selected-border); }
.panelMeta { margin-top: 2px; }
.updateRow .rowMain { padding-right: var(--space-5); }
.tile.activeTile { border-color: var(--color-border-hover); background: var(--color-surface-muted); }
.searchResultIcon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); color: var(--color-text-soft); }
.searchResultCopy { min-width: 0; flex: 1; display: grid; gap: 1px; }
.searchResultCopy strong, .searchResultCopy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchResultCopy span { color: var(--color-muted); font-size: var(--text-xs); }
.commandHint { padding: 2px var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-muted); color: var(--color-muted); font-size: var(--text-xs); }
.searchEmpty { min-height: 220px; }

/* BAZE Community */
.feedPage { padding-top: var(--space-8); }
.feedPage .pageSub { max-width: 620px; }
.feedLayout { display: grid; grid-template-columns: minmax(0, 1fr) 288px; align-items: start; gap: var(--space-6); }
.feedMain, .feedRail, .feedList { display: grid; gap: var(--space-5); }
.feedComposer, .feedPost, .feedRailCard { border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.feedComposer { padding: var(--space-5); display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: var(--space-4); }
.feedComposer textarea { width: 100%; min-height: 72px; resize: vertical; padding: var(--space-2) 0; border: 0; outline: 0; background: transparent; color: var(--color-text); font: inherit; line-height: 1.55; }
.feedComposer textarea::placeholder { color: var(--color-muted); }
.composerFoot { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); color: var(--color-muted); font-size: var(--text-xs); }
.feedFilters { display: flex; flex-wrap: wrap; gap: var(--space-2); overflow: visible; padding-bottom: var(--space-1); scrollbar-width: none; }
.feedFilters::-webkit-scrollbar { display: none; }
.feedFilter {
  min-height: 30px;
  padding: 0 10px;
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--button-radius);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size:11px;
  font-weight: 500;
  box-shadow: none;
  cursor: pointer;
  transition: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.feedFilter:hover:not(:disabled) { color: var(--color-text); border-color: var(--color-border-hover); background:var(--color-surface-muted); box-shadow:none; }
.feedFilter:active:not(:disabled) { background:var(--color-surface-muted); box-shadow:none; }
.feedFilter.active { border-color: var(--control-selected-border); background: var(--control-selected-bg); color: var(--control-selected-text); box-shadow:none; }
.feedFilter.active:hover:not(:disabled) { border-color: var(--control-selected-border); background: var(--control-selected-bg); color: var(--control-selected-text); box-shadow:none; }
.feedFilter.active:active:not(:disabled) { box-shadow:none; }
.feedPost { overflow: hidden; transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast); }
.feedPostHead { padding: var(--space-5) var(--space-5) 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.feedAvatar { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-strong); color: var(--color-on-strong); font-size: var(--text-xs); font-weight: 500; }
.feedAvatarLogo { width: 32px; height: 32px; display: block; object-fit: contain; }
.smallAvatar { width: 34px; height: 34px; flex-basis: 34px; background: var(--color-surface-muted); color: var(--color-text); }
.feedAuthor { min-width: 0; display: grid; gap: 2px; }
.feedAuthor > div { min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.feedAuthor strong, .feedAuthor span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedAuthor strong { font-size: var(--text-sm); font-weight: 500; }
.feedAuthor > span { color: var(--color-muted); font-size: var(--text-xs); }
.verifiedMini { width: 16px; height: 16px; flex: 0 0 16px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-strong); color: var(--color-on-strong); }
.feedCategory { white-space: nowrap; }
.feedPostText { margin: 0; padding: var(--space-5); color: var(--color-text-soft); font-size: var(--text-sm); line-height: 1.65; }
.feedHashtags { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-5) var(--space-4); color: var(--color-text-muted); font-size: var(--text-xs); }
.feedPostMedia { margin: 0 var(--space-5); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-muted); }
.feedPostMedia img { display: block; width: 100%; max-height: 560px; object-fit: cover; }
.feedPostVisual { min-height: 250px; margin: 0 var(--space-5); overflow: hidden; position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.releaseVisual { padding: var(--space-6); background: var(--color-strong); color: var(--color-on-strong); }
.feedVisualTop { display: flex; justify-content: space-between; font: 500 var(--text-xs) ui-monospace, monospace; opacity: .64; }
.feedVisualTitle { max-width: 300px; margin-top: var(--space-9); font-size: 34px; line-height: 1; letter-spacing: -.05em; }
.feedVisualGrid { position: absolute; left: var(--space-6); right: var(--space-6); bottom: var(--space-6); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-2); }
.feedVisualGrid i { min-height: 56px; border: 1px solid currentColor; border-radius: var(--radius-sm); opacity: .24; }
.feedVisualGrid i:first-child { background: currentColor; opacity: .8; }
.showcaseVisual { padding: var(--space-6); display: flex; justify-content: space-between; gap: var(--space-7); background: var(--color-surface-muted); }
.showcaseCopy { align-self: center; display: grid; gap: var(--space-3); }
.showcaseCopy small { color: var(--color-muted); font: 500 var(--text-xs) ui-monospace, monospace; }
.showcaseCopy strong { font-size: 28px; line-height: 1.04; letter-spacing: -.04em; font-weight: 500; }
.showcaseBlocks { width: 44%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-2); }
.showcaseBlocks i { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.showcaseBlocks i:first-child { grid-row: 1 / 3; background: var(--color-strong); }
.feedPostActions { min-height: 54px; padding: var(--space-3) var(--space-5); display: flex; align-items: center; gap: var(--space-2); border-top: 1px solid var(--color-border); margin-top: var(--space-5); }
.feedSponsor {
  overflow: hidden;
  position: relative;
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--motion-fast), transform var(--motion-fast);
}
.feedSponsor:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
.feedSponsor img { width: 100%; height: auto; display: block; }
.socialAction { min-height: 34px; padding: 0 var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-muted); cursor: pointer; transition: color var(--motion-fast), background var(--motion-fast); }
.socialAction:hover, .socialAction.active { background: var(--color-surface-muted); color: var(--color-text); }
.socialAction.active[data-social-action="like"] { color: #e11d48; }
.socialAction.active[data-social-action="like"] svg { fill: currentColor; }
.socialAction:last-child { margin-left: auto; }
.postDetail { display: grid; gap: var(--space-5); }
.postDetailHead { padding: 0; }
.postDetailTitle { margin: var(--space-2) 0 0; font-size: var(--text-lg); letter-spacing: -.02em; }
.postDetail .feedPostText { padding: 0; }
.postDetail .feedHashtags { padding: 0; }
.postDetail .feedPostMedia, .postDetail .feedPostVisual { margin: 0; }
.postDetailMetrics { display: flex; gap: var(--space-5); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); color: var(--color-muted); font-size: var(--text-xs); }
.postDetailDiscussion { display: grid; gap: var(--space-3); }
.postDetailComments { display: grid; gap: var(--space-2); }
.postDetailComment { padding: var(--space-4); display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-muted); }
.postDetailComment strong, .postDetailComment small { font-size: var(--text-xs); }
.postDetailComment p { margin: 2px 0; color: var(--color-text-soft); line-height: 1.5; }
.postDetailComment small { color: var(--color-muted); }
.postDetailComposer { margin-top: var(--space-2); }
.feedRail { position: sticky; top: calc(var(--space-9) + 54px); }
.feedRailCard { overflow: hidden; }
.feedRailHead { padding: var(--space-5); border-bottom: 1px solid var(--color-border); }
.feedRailHead h2 { margin: 0; font-size: var(--text-sm); font-weight: 500; }
.feedRailHead p { margin: 2px 0 0; color: var(--color-muted); font-size: var(--text-xs); }
.topicList, .memberList { padding: var(--space-2); display: grid; }
.topicList button, .topicList a { min-height: 48px; padding: 0 var(--space-3); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text); text-align: left; cursor: pointer; }
.topicList button:hover, .topicList a:hover { background: var(--color-surface-muted); }
.topicList small, .memberCopy small { color: var(--color-muted); font-size: var(--text-xs); }
.memberRow { min-height: 54px; padding: var(--space-2) var(--space-3); display: flex; align-items: center; gap: var(--space-3); border-radius: var(--radius-md); }
.memberRow:hover { background: var(--color-surface-muted); }
.memberCopy { min-width: 0; flex: 1; display: grid; gap: 1px; }
.memberCopy strong, .memberCopy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miniFollow { min-height: 30px; padding: 0 9px; border: 1px solid var(--color-border); border-radius: var(--button-radius); background: var(--color-surface); color: var(--color-text-soft); font-size: 11px; font-weight:500; cursor: pointer; }
.miniFollow.active { background: var(--color-surface-muted); color: var(--color-muted); }
.communityNote { padding: var(--space-5); display: flex; align-items: flex-start; gap: var(--space-3); }
.communityNote strong { font-size: var(--text-xs); font-weight: 500; }
.communityNote p { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; }
.feedEmpty { border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }

@media (max-width: 1000px) { .feedLayout { grid-template-columns: minmax(0, 1fr) 250px; } }
@media (max-width: 860px) {
  .feedLayout { grid-template-columns: 1fr; }
  .feedRail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .communityNote { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .feedComposer { grid-template-columns: 34px minmax(0, 1fr); }
  .composerFoot { grid-column: 1 / -1; }
  .feedPostHead { grid-template-columns: 34px minmax(0, 1fr); }
  .feedCategory { grid-column: 2; justify-self: start; }
  .feedAvatar { width: 34px; height: 34px; flex-basis: 34px; }
  .feedRail { grid-template-columns: 1fr; }
  .communityNote { grid-column: auto; }
  .feedPostVisual { min-height: 210px; margin-left: var(--space-4); margin-right: var(--space-4); }
  .feedPostHead, .feedPostText { padding-left: var(--space-4); padding-right: var(--space-4); }
  .feedPostActions { padding-left: var(--space-3); padding-right: var(--space-3); }
  .socialAction { padding-left: var(--space-2); padding-right: var(--space-2); }
}

/* BAZE Add-ons + Membership */
.addonsPage { padding-top: var(--space-8); }

.membershipStrip {
  min-height: 94px;
  margin-bottom: var(--space-7);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-muted);
}
.membershipStrip::after {
  display: none;
}
.membershipStripCopy { min-width: 0; position: relative; z-index: 1; }
.membershipStripCopy strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -.02em;
}
.membershipStripCopy p {
  max-width: 650px;
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.55;
}
.membershipStripActions {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.addonFilters {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  overflow: visible;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.addonFilters::-webkit-scrollbar { display: none; }
.addonFilter {
  min-height: 30px;
  padding: 0 10px;
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--button-radius);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size:11px;
  font-weight: 500;
  box-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}
.addonFilter:hover:not(:disabled) { border-color: var(--color-border-hover); background:var(--color-surface-muted); color: var(--color-text); box-shadow:none; }
.addonFilter:active:not(:disabled) { background:var(--color-surface-muted); box-shadow:none; }
.addonFilter.active,
.addonFilter[aria-pressed="true"] {
  border-color: var(--control-selected-border);
  background: var(--control-selected-bg);
  color: var(--control-selected-text);
  box-shadow: none;
}
.addonFilter.active:hover:not(:disabled),
.addonFilter[aria-pressed="true"]:hover:not(:disabled) { border-color: var(--control-selected-border); background: var(--control-selected-bg); color: var(--control-selected-text); box-shadow:none; }
.addonFilter.active:active:not(:disabled),
.addonFilter[aria-pressed="true"]:active:not(:disabled) { box-shadow:none; }

.addonGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-6);
}
.addonCard {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast);
}
.addonCardPreviewWrap {
  position: relative;
  padding: 6px 6px 0;
}
.addonCardPreviewWrap .addonPreview {
  min-height: 0;
  margin: 0;
  aspect-ratio: 16 / 10;
}
.addonCardPreviewWrap .addonState {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  box-shadow: 0 1px 2px color-mix(in srgb, #000 8%, transparent);
}
.addonCard:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-sm);
  background: var(--color-surface-raised);
}
.addonCard > a {
  min-width: 0;
  height: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  color: inherit;
}
.addonPreview {
  min-height: 220px;
  position: relative;
  overflow: hidden;
  margin: var(--space-1);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-text) 4%, transparent) 1px, transparent 1px),
    var(--color-surface-muted);
  background-size: 28px 28px, 28px 28px, auto;
  color: var(--color-text);
  isolation: isolate;
}
.addonPreview::before,
.addonPreview::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.addonPreview::before {
  left: 12%;
  right: 12%;
  top: 20%;
  bottom: 20%;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  box-shadow: var(--shadow-sm);
}
.addonPreview::after {
  width: 52%;
  height: 7px;
  left: 24%;
  top: calc(50% - 4px);
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: .14;
}
.addonPreviewLarge {
  min-height: 380px;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.addonPreview[data-preview="wheel"]::before,
.addonPreview[data-preview="spin"]::before,
.addonCard[data-preview="wheel"] .addonPreview::before,
.addonCard[data-preview="spin"] .addonPreview::before {
  width: 132px;
  height: 132px;
  inset: 50% auto auto 50%;
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%);
  background:
    conic-gradient(
      color-mix(in srgb, currentColor 92%, transparent) 0 12.5%,
      transparent 12.5% 25%,
      color-mix(in srgb, currentColor 28%, transparent) 25% 37.5%,
      transparent 37.5% 50%,
      color-mix(in srgb, currentColor 64%, transparent) 50% 62.5%,
      transparent 62.5% 75%,
      color-mix(in srgb, currentColor 16%, transparent) 75% 87.5%,
      transparent 87.5% 100%
    );
  box-shadow: 0 0 0 18px color-mix(in srgb, currentColor 4%, transparent), var(--shadow-sm);
}
.addonPreview[data-preview="wheel"]::after,
.addonPreview[data-preview="spin"]::after,
.addonCard[data-preview="wheel"] .addonPreview::after,
.addonCard[data-preview="spin"] .addonPreview::after {
  width: 16px;
  height: 22px;
  left: calc(50% - 8px);
  top: calc(50% - 82px);
  opacity: .9;
  background: currentColor;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.addonPreview[data-preview="video"]::before,
.addonPreview[data-preview="ugc"]::before,
.addonCard[data-preview="video"] .addonPreview::before,
.addonCard[data-preview="ugc"] .addonPreview::before {
  width: 126px;
  height: 164px;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(to bottom, transparent 0 70%, color-mix(in srgb, currentColor 9%, transparent) 70%),
    var(--color-surface);
  box-shadow:
    46px 12px 0 -1px var(--color-surface-muted),
    46px 12px 0 0 color-mix(in srgb, currentColor 14%, transparent),
    var(--shadow-sm);
}
.addonPreview[data-preview="video"]::after,
.addonPreview[data-preview="ugc"]::after,
.addonCard[data-preview="video"] .addonPreview::after,
.addonCard[data-preview="ugc"] .addonPreview::after {
  width: 42px;
  height: 42px;
  left: calc(50% - 21px);
  top: calc(50% - 21px);
  border-radius: var(--radius-full);
  background: var(--color-strong);
  opacity: 1;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-surface) 66%, transparent);
}

.addonPreview[data-preview="proof"]::before,
.addonPreview[data-preview="social"]::before,
.addonPreview[data-preview="announcement"]::before,
.addonCard[data-preview="proof"] .addonPreview::before,
.addonCard[data-preview="social"] .addonPreview::before,
.addonCard[data-preview="announcement"] .addonPreview::before {
  left: 11%;
  right: 11%;
  top: 24%;
  bottom: auto;
  height: 58px;
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 24px 50%, currentColor 0 7px, transparent 8px),
    linear-gradient(currentColor, currentColor) 44px 19px / 38% 6px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 28%, transparent), color-mix(in srgb, currentColor 28%, transparent)) 44px 31px / 52% 4px no-repeat,
    var(--color-surface);
  box-shadow: 0 66px 0 -1px var(--color-surface), 0 66px 0 0 color-mix(in srgb, currentColor 14%, transparent), var(--shadow-sm);
}
.addonPreview[data-preview="proof"]::after,
.addonPreview[data-preview="social"]::after,
.addonPreview[data-preview="announcement"]::after,
.addonCard[data-preview="proof"] .addonPreview::after,
.addonCard[data-preview="social"] .addonPreview::after,
.addonCard[data-preview="announcement"] .addonPreview::after {
  width: 72px;
  height: 22px;
  left: auto;
  right: 15%;
  top: calc(24% + 18px);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  opacity: 1;
}

.addonPreview[data-preview="bundle"]::before,
.addonPreview[data-preview="upsell"]::before,
.addonCard[data-preview="bundle"] .addonPreview::before,
.addonCard[data-preview="upsell"] .addonPreview::before {
  left: 13%;
  right: auto;
  top: 20%;
  bottom: 20%;
  width: 32%;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow:
    104px 0 0 -1px var(--color-surface),
    104px 0 0 0 color-mix(in srgb, currentColor 14%, transparent),
    var(--shadow-sm);
}
.addonPreview[data-preview="bundle"]::after,
.addonPreview[data-preview="upsell"]::after,
.addonCard[data-preview="bundle"] .addonPreview::after,
.addonCard[data-preview="upsell"] .addonPreview::after {
  width: 36px;
  height: 36px;
  left: calc(50% - 18px);
  top: calc(50% - 18px);
  border-radius: var(--radius-full);
  background: var(--color-strong);
  opacity: 1;
  box-shadow: inset 0 0 0 11px var(--color-surface-muted);
}

.addonPreview[data-preview="progress"]::before,
.addonPreview[data-preview="cart"]::before,
.addonPreview[data-preview="shipping"]::before,
.addonCard[data-preview="progress"] .addonPreview::before,
.addonCard[data-preview="cart"] .addonPreview::before,
.addonCard[data-preview="shipping"] .addonPreview::before {
  left: 12%;
  right: 12%;
  top: 34%;
  bottom: auto;
  height: 92px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--color-strong), var(--color-strong)) 18px 22px / 62% 7px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, currentColor 12%, transparent)) 18px 22px / calc(100% - 36px) 7px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, currentColor 12%, transparent)) 18px 49px / 48% 5px no-repeat,
    linear-gradient(currentColor, currentColor) calc(100% - 70px) 45px / 52px 22px no-repeat,
    var(--color-surface);
}
.addonPreview[data-preview="progress"]::after,
.addonPreview[data-preview="cart"]::after,
.addonPreview[data-preview="shipping"]::after,
.addonCard[data-preview="progress"] .addonPreview::after,
.addonCard[data-preview="cart"] .addonPreview::after,
.addonCard[data-preview="shipping"] .addonPreview::after {
  width: 8px;
  height: 8px;
  left: calc(12% + 62% - 2px);
  top: calc(34% + 21px);
  border: 3px solid var(--color-surface);
  border-radius: var(--radius-full);
  background: var(--color-strong);
  opacity: 1;
}

.addonPreview[data-preview="visual"]::before,
.addonPreview[data-preview="merch"]::before,
.addonPreview[data-preview="gallery"]::before,
.addonPreview[data-preview="editorial"]::before,
.addonCard[data-preview="visual"] .addonPreview::before,
.addonCard[data-preview="merch"] .addonPreview::before,
.addonCard[data-preview="gallery"] .addonPreview::before,
.addonCard[data-preview="editorial"] .addonPreview::before {
  inset: 17% 10%;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(var(--color-strong), var(--color-strong)) 0 0 / 47% 100% no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 15%, transparent), color-mix(in srgb, currentColor 15%, transparent)) 53% 0 / 47% 47% no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 7%, transparent), color-mix(in srgb, currentColor 7%, transparent)) 53% 100% / 47% 47% no-repeat;
  box-shadow: none;
}
.addonPreview[data-preview="visual"]::after,
.addonPreview[data-preview="merch"]::after,
.addonPreview[data-preview="gallery"]::after,
.addonPreview[data-preview="editorial"]::after,
.addonCard[data-preview="visual"] .addonPreview::after,
.addonCard[data-preview="merch"] .addonPreview::after,
.addonCard[data-preview="gallery"] .addonPreview::after,
.addonCard[data-preview="editorial"] .addonPreview::after {
  width: 56px;
  height: 5px;
  left: 16%;
  top: auto;
  bottom: 26%;
  background: var(--color-on-strong);
  opacity: .72;
}

.addonPreview[data-preview="sticky"]::before,
.addonCard[data-preview="sticky"] .addonPreview::before {
  left: 12%;
  right: 12%;
  top: 20%;
  bottom: 20%;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(color-mix(in srgb, currentColor 9%, transparent), color-mix(in srgb, currentColor 9%, transparent)) 16px 16px / 42% 7px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 5%, transparent), color-mix(in srgb, currentColor 5%, transparent)) 16px 31px / 62% 5px no-repeat,
    var(--color-surface);
}
.addonPreview[data-preview="sticky"]::after,
.addonCard[data-preview="sticky"] .addonPreview::after {
  width: auto;
  height: 44px;
  left: calc(12% + 10px);
  right: calc(12% + 10px);
  top: auto;
  bottom: calc(20% + 10px);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--radius-md);
  background:
    linear-gradient(currentColor, currentColor) calc(100% - 92px) 8px / 82px 26px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 10%, transparent), color-mix(in srgb, currentColor 10%, transparent)) 10px 11px / 34% 6px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 6%, transparent), color-mix(in srgb, currentColor 6%, transparent)) 10px 24px / 24% 4px no-repeat,
    var(--color-surface-muted);
  opacity: 1;
}

.addonPreview[data-preview="tabs"]::before,
.addonCard[data-preview="tabs"] .addonPreview::before {
  left: 11%;
  right: 11%;
  top: 22%;
  bottom: 22%;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--color-strong), var(--color-strong)) 14px 14px / 24% 28px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 7%, transparent), color-mix(in srgb, currentColor 7%, transparent)) 34% 14px / 25% 28px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 7%, transparent), color-mix(in srgb, currentColor 7%, transparent)) calc(100% - 14px) 14px / 25% 28px no-repeat,
    var(--color-surface);
}
.addonPreview[data-preview="tabs"]::after,
.addonCard[data-preview="tabs"] .addonPreview::after {
  width: auto;
  height: 6px;
  left: calc(11% + 14px);
  right: calc(11% + 14px);
  top: calc(22% + 66px);
  border-radius: var(--radius-full);
  background:
    linear-gradient(currentColor, currentColor) left center / 72% 100% no-repeat;
  opacity: .12;
  box-shadow: 0 16px 0 color-mix(in srgb, currentColor 60%, transparent), 0 32px 0 color-mix(in srgb, currentColor 35%, transparent);
}

.addonCardMeta {
  min-width: 0;
  padding: var(--space-4) var(--space-5) var(--space-4);
  display: grid;
  gap: 7px;
}
.addonCardMetaLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.addonVersion {
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.addonCardMeta h2,
.addonCardMeta h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -.02em;
}
.addonCardMeta p {
  min-height: 38px;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.55;
}
.addonCardFoot {
  min-height: 62px;
  margin-top: auto;
  padding: var(--space-3) var(--space-5) var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.addonCardFoot.hasActions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.addonCardFoot.hasActions .button { width: 100%; }
.addonCardAccessCopy {
  min-width: 0;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.addonState {
  min-height: 26px;
  max-width: 100%;
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1;
  white-space: nowrap;
}
.addonState::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: .62;
}
.addonState.active,
.addonState.owned,
.addonState.included,
.addonState[data-state="owned"],
.addonState[data-state="included"] {
  border-color: var(--color-strong);
  background: var(--color-strong);
  color: var(--color-on-strong);
}

.addonDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .68fr);
  align-items: start;
  gap: var(--space-6);
}
.addonDetailHead { margin-bottom: var(--space-7); }
.addonDetailMain { min-width: 0; }
.addonDetailAside {
  min-width: 0;
  position: sticky;
  top: calc(50px + var(--space-6));
  align-self: start;
  display: grid;
  align-content: start;
  gap: var(--space-6);
}
.addonMetaPanel,
.addonInstall,
.addonChangelog,
.addonAccessCard,
.addonSidePanel {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}
.addonMetaPanel,
.addonInstall,
.addonChangelog { padding: var(--space-6); }
.addonMetaPanel h2,
.addonMetaPanel h3,
.addonInstall h2,
.addonInstall h3,
.addonChangelog h2,
.addonChangelog h3,
.addonAccessCard h2,
.addonAccessCard h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -.02em;
}
.addonSidePanel h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: -.02em;
}
.addonMetaPanel > p,
.addonInstall > p,
.addonChangelog > p,
.addonAccessCard p {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.addonSidePanel > p,
.addonSideSectionHead p {
  margin: var(--space-2) 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.55;
}
.addonMetaPanel .kv { margin-top: var(--space-6); }
.addonInstall { margin-top: 0; }
.addonDetailMain .addonInstall { margin-top: var(--space-6); }
.addonInstallStep {
  min-height: 62px;
  padding: var(--space-4) 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.addonInstallStep:first-of-type { margin-top: var(--space-4); }
.addonInstallStep > :first-child {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-size: var(--text-xs);
}
.addonInstallStep strong { display: block; font-weight: 500; }
.addonInstallStep p { margin: 2px 0 0; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.55; }
.addonChangelog { margin-top: 0; }
.addonDetailAside .addonChangelog { margin-top: 0; }
.addonChangelog > :is(ul, ol) { margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.addonChangelog li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  line-height: 1.55;
}
.addonChangelog li::before {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  left: 2px;
  top: 18px;
  border-radius: var(--radius-full);
  background: var(--color-text);
}
.addonAccessCard {
  position: static;
  padding: var(--space-5);
  border-color:color-mix(in srgb,var(--color-border) 92%,transparent);
  background:color-mix(in srgb,var(--color-surface) 98%,var(--color-surface-raised));
}
.addonAccessCard .addonState { margin-bottom: var(--space-4); }
.addonAccessCard .button { width: 100%; min-height:var(--button-height-lg); }
.addonAccessCard .button + .button { margin-top: 6px; }
.addonSidePanel {
  position: static;
  padding: var(--space-5);
}
.addonAccessHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.addonAccessHeader .eyebrow { display: block; margin-bottom: 5px; }
.addonAccessHeader .addonState { margin-bottom: 0; }
.addonActionGrid {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.addonActionGrid .button { width: 100%; min-height: var(--button-height-lg); }
.addonActionGrid .button + .button { margin-top: 0; }
.addonInstallHint {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}
.addonSideDivider {
  height: 1px;
  margin: var(--space-5) 0;
  background: var(--color-border);
}
.addonSideSectionHead h3 { margin: 0; }
.addonSidePanel .kv { margin-top: var(--space-4); }
.addonDemoButton { width: 100%; margin-top: var(--space-4); }

.planGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.planCard {
  min-width: 0;
  min-height: 300px;
  padding: var(--space-5);
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.planCard:hover { border-color: var(--color-border-hover); }
.planCardCurrent,
.planCard.current,
.planCard[data-current="true"] {
  border-color: var(--color-strong);
  box-shadow: inset 0 0 0 1px var(--color-strong);
}
.planCardCurrent::before,
.planCard.current::before,
.planCard[data-current="true"]::before {
  content: "Plano atual";
  width: max-content;
  min-height: 24px;
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-full);
  background: var(--color-strong);
  color: var(--color-on-strong);
  font-size: var(--text-xs);
}
.planCard h3 { margin: 0; font-size: var(--text-base); font-weight: 500; letter-spacing: -.02em; }
.planCard > p { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.55; }
.planCard .button { width: 100%; margin-top: auto; }
.planFeatures {
  margin: var(--space-6) 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  list-style: none;
}
.planFeatures > * {
  min-width: 0;
  position: relative;
  padding-left: var(--space-5);
  color: var(--color-text-soft);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.planFeatures > *::before {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  left: 1px;
  top: .48em;
  border-radius: var(--radius-full);
  background: var(--color-text);
  opacity: .58;
}
.bazePlusOffer {
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-muted);
}
.bazePlusOfferHead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); }
.bazePlusOfferHead h3 { max-width: 470px; margin: var(--space-2) 0 0; font-size: var(--text-lg); line-height: 1.15; letter-spacing: -.035em; font-weight: 550; }
.bazePlusPrice { flex: 0 0 auto; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.bazePlusPrice strong { font-size: 24px; line-height: 1; letter-spacing: -.04em; font-weight: 600; }
.bazePlusPrice span { color: var(--color-muted); font-size: var(--text-xs); }
.bazePlusBenefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); }
.bazePlusBenefits span { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-soft); font-size: var(--text-xs); }
.bazePlusBenefits svg { flex: 0 0 auto; }
.bazePlusOfferFoot { padding-top: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-top: 1px solid var(--color-border); }

html[data-theme="dark"] .membershipStrip { background: var(--color-surface-raised); }
html[data-theme="dark"] .addonCard,
html[data-theme="dark"] .addonMetaPanel,
html[data-theme="dark"] .addonInstall,
html[data-theme="dark"] .addonChangelog,
html[data-theme="dark"] .addonAccessCard,
html[data-theme="dark"] .addonSidePanel,
html[data-theme="dark"] .planCard { background: var(--color-surface-raised); }
html[data-theme="dark"] .bazePlusOffer,
html[data-theme="dark"] .academyModuleHead { background: var(--color-surface-raised); }
html[data-theme="dark"] .toolLinkOutput,
html[data-theme="dark"] .policyDraft { background: var(--color-surface); }
html[data-theme="dark"] .addonPreview {
  background:
    linear-gradient(color-mix(in srgb, #FFFFFF 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #FFFFFF 4%, transparent) 1px, transparent 1px),
    var(--color-surface-muted);
  background-size: 28px 28px, 28px 28px, auto;
}
html[data-theme="dark"] .addonPreview::before { background-color: var(--color-surface-raised); }
html[data-theme="dark"] .addonPreview[data-preview="wheel"]::before,
html[data-theme="dark"] .addonPreview[data-preview="spin"]::before,
html[data-theme="dark"] .addonCard[data-preview="wheel"] .addonPreview::before,
html[data-theme="dark"] .addonCard[data-preview="spin"] .addonPreview::before,
html[data-theme="dark"] .addonPreview[data-preview="visual"]::before,
html[data-theme="dark"] .addonPreview[data-preview="merch"]::before,
html[data-theme="dark"] .addonPreview[data-preview="gallery"]::before,
html[data-theme="dark"] .addonPreview[data-preview="editorial"]::before,
html[data-theme="dark"] .addonCard[data-preview="visual"] .addonPreview::before,
html[data-theme="dark"] .addonCard[data-preview="merch"] .addonPreview::before,
html[data-theme="dark"] .addonCard[data-preview="gallery"] .addonPreview::before,
html[data-theme="dark"] .addonCard[data-preview="editorial"] .addonPreview::before { background-color: transparent; }
html[data-theme="dark"] .addonFilter,
html[data-theme="dark"] .feedFilter {
  background: var(--color-surface-raised);
  border-color: color-mix(in srgb, var(--color-muted-2) 46%, var(--color-border));
  box-shadow: none;
}
html[data-theme="dark"] .addonFilter:hover:not(:disabled),
html[data-theme="dark"] .feedFilter:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--color-muted) 42%, var(--color-border));
  background:var(--color-surface-muted);
  box-shadow:none;
}
html[data-theme="dark"] .addonFilter.active,
html[data-theme="dark"] .addonFilter[aria-pressed="true"],
html[data-theme="dark"] .feedFilter.active {
  background: var(--control-selected-bg);
  border-color: var(--control-selected-border);
  color: var(--control-selected-text);
  box-shadow:none;
}
html[data-theme="dark"] .addonInstallStep > :first-child,
html[data-theme="dark"] .addonState { background: var(--color-surface-muted); }
html[data-theme="dark"] .addonState.active,
html[data-theme="dark"] .addonState.owned,
html[data-theme="dark"] .addonState.included,
html[data-theme="dark"] .addonState[data-state="owned"],
html[data-theme="dark"] .addonState[data-state="included"] { background: var(--color-strong); }

@media (max-width: 1180px) {
  .addonGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .addonDetailGrid { grid-template-columns: 1fr; }
  .addonDetailAside {
    position: static;
    gap: var(--space-5);
  }
}

@media (max-width: 900px) {
  .planGrid { grid-template-columns: 1fr; }
  .planCard { min-height: 0; }
}

@media (max-width: 760px) {
  .notificationPopover { width: min(390px, calc(100vw - 24px)); }
  .membershipStrip { align-items: flex-start; flex-direction: column; }
  .membershipStripActions { width: 100%; justify-content: flex-start; }
  .addonGrid { grid-template-columns: 1fr; }
  .addonPreview { min-height: 240px; }
  .addonPreviewLarge { min-height: 320px; }
}

@media (max-width: 480px) {
  .addonsPage { padding-top: var(--space-7); }
  .membershipStrip { min-height: 0; padding: var(--space-5); }
  .membershipStrip::after { display: none; }
  .membershipStripActions { display: grid; grid-template-columns: 1fr; }
  .membershipStripActions .button { width: 100%; }
  .addonFilters { max-width: 100%; padding-right: var(--space-4); }
  .addonPreview { min-height: 210px; }
  .addonPreviewLarge { min-height: 250px; }
  .addonCardMeta { padding-left: var(--space-4); padding-right: var(--space-4); }
  .addonCardFoot { padding-left: var(--space-4); padding-right: var(--space-4); }
  .addonCardFoot.hasActions { grid-template-columns: 1fr; }
  .addonMetaPanel,
  .addonInstall,
  .addonChangelog,
  .addonAccessCard,
  .addonSidePanel { padding: var(--space-5); }
  .addonInstallStep { grid-template-columns: 26px minmax(0, 1fr); gap: var(--space-3); }
  .addonInstallStep > :first-child { width: 26px; height: 26px; }
  .addonAccessCard .button { min-height: var(--button-height-lg); }
  .planCard { padding: var(--space-5); }
}

.membershipLock {
  width: 100%;
  padding: var(--space-6);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.membershipLock > div { min-width: 0; }
.membershipLock h2,
.membershipLock strong { margin: var(--space-2) 0 0; font-size: var(--text-base); font-weight: 500; letter-spacing: -.02em; }
.membershipLock p { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.55; }
.compactLock { margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); }
.lockedTile,
.lockedCourse { position: relative; border-style: dashed; }
.lockedTile::after,
.lockedCourse:not(.membershipLock)::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--color-surface) 42%, transparent));
}
.lockedTile > *,
.lockedCourse > * { position: relative; z-index: 1; }
.lockedTile .tileIcon,
.lockedCourse .courseVisual { opacity: .72; }
.communityMembershipLock { margin-bottom: var(--space-6); }
.communityLocked .feedComposer { display: none; }
.communityLocked [data-social-action],
.communityLocked [data-follow] { opacity: .62; }
.socialProfileLocked .profileCover { opacity: .64; }
.socialProfileLocked .socialProfileMetrics { opacity: .72; }
.socialProfileLocked.profilePostsSection { padding-top: var(--space-2); }
html[data-theme="dark"] .membershipLock { background: var(--color-surface-raised); }

@media (max-width: 760px) {
  .membershipLock { grid-template-columns: auto minmax(0, 1fr); align-items: flex-start; }
  .membershipLock > .button { grid-column: 1 / -1; width: 100%; }
  .compactLock { grid-template-columns: minmax(0, 1fr); }
  .compactLock > .rowIcon { display: none; }
}

@media (max-width: 480px) {
  .membershipLock { padding: var(--space-5); gap: var(--space-4); }
  .communityMembershipLock { margin-bottom: var(--space-5); }
}

/* SaaS interaction and density system */
.productsCollection { margin-top: var(--space-8); }

.navLink,
.addonFilter,
.feedFilter,
.tab,
.socialAction,
.miniFollow,
.iconButton {
  transition: background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-instant);
}

.feedMain,
.feedRail,
.feedList { gap: var(--space-5); }
.feedFilter { min-height: 30px; padding: 0 10px; }
.feedPostHead { padding: var(--space-5) var(--space-5) 0; }
.feedPostText { padding: var(--space-5); }
.feedPostVisual { margin-left: var(--space-5); margin-right: var(--space-5); }
.feedPostActions { padding-left: var(--space-4); padding-right: var(--space-4); }
.feedPost:hover { border-color: var(--color-border-hover); box-shadow: var(--shadow-sm); }

.addonGrid { gap: var(--space-5); }
.addonCardMeta { padding: var(--space-4) var(--space-5); }
.addonCardMeta p { min-height: 38px; }
.addonCardFoot { min-height: 62px; padding: var(--space-3) var(--space-5) var(--space-4); }
.addonPreview { min-height: 200px; }
.addonCardPreviewWrap .addonPreview { min-height: 0; }

.membershipStrip { min-height: 82px; padding: var(--space-5); }
.summaryValue { font-size: 22px; }
.panelBody { padding: var(--space-5); }
.featureGrid { margin-top: var(--space-5); gap: var(--space-4); }
.feature { padding: var(--space-4); }

@media (hover: hover) and (pointer: fine) {
  .productCard:hover,
  .addonCard:hover,
  .tile:hover,
  .planCard:hover,
  .feedPost:hover {
    transform: none;
  }

  .button:active:not(:disabled),
  .navLink:active,
  .addonFilter:active,
  .feedFilter:active,
  .socialAction:active,
  .iconButton:active,
  .miniFollow:active {
    transform: none;
  }
}

html[data-theme="dark"] .feedComposer,
html[data-theme="dark"] .feedPost,
html[data-theme="dark"] .feedRailCard,
html[data-theme="dark"] .socialProfileCard {
  background: var(--color-surface-raised);
}

@media (max-width: 760px) {
  .backdrop { backdrop-filter: none; }
  .content,
  .content.narrow { padding-top: var(--space-7); padding-bottom: var(--space-9); }
  .pageHead { margin-bottom: var(--space-7); }
  .libraryPageShell .pageHead { margin-bottom: var(--space-7); }
  .librarySummaryGrid { gap: 8px; margin-bottom: 16px; }
  .librarySummaryGrid .summaryCard { min-height: 96px; padding: 14px; }
  .libraryOverviewPanels { gap: 8px; margin-bottom: 28px; }
  .libraryOverviewPanels .miniPanelHead { min-height: 58px; }
  .librarySectionHead { margin-bottom: var(--space-5); }
  .librarySectionHead + .list,
  .librarySectionHead + .emptyState,
  .libraryKeysList { margin-bottom: 26px; }
  .libraryStoreRow { min-height: 56px; }
  .libraryProductsList .libraryProductRow,
  .libraryProductsList .libraryProductLink { min-height: 56px; }
  .feedSponsor { border-radius: var(--radius-lg); }
  .bazePlusOfferHead { flex-direction: column; gap: var(--space-4); }
  .bazePlusBenefits { grid-template-columns: 1fr; }
  .bazePlusOfferFoot { align-items: flex-start; flex-direction: column; }
  .toolResultActions .button { flex: 1 1 100%; justify-content: center; }
  .modal.toolSuiteModal .modalHeader { min-height:64px; padding-inline:18px; }
  .modal.toolSuiteModal .modalBody { max-height:calc(100dvh - 120px); }
  .toolSuiteSection { padding:18px; }
  .toolSuiteSectionHead { align-items:flex-start; flex-direction:column; gap:6px; }
  .toolSuiteSectionHead > small { max-width:none; text-align:left; }
  .toolSuiteGrid.two,.toolSuiteGrid.four,.toolSuiteGrid.whatsapp { grid-template-columns:1fr; }
  .toolSuiteGrid.whatsapp > .toolSuiteStack:first-child { border-right:0; border-bottom:1px solid var(--color-border); }
  .toolMetricGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .toolBreakdownGrid { grid-template-columns:1fr; }
  .toolDocumentPreview > header { align-items:flex-start; flex-direction:column; padding:12px; }
  .toolDocumentPreview > header .button { width:100%; justify-content:center; }
  .toolTemplateGrid { grid-template-columns:1fr; }
  .toolPhonePreview { margin-top:20px; }
  .toolSeoGenerateRow { align-items:flex-start; flex-direction:column; }
  .toolSeoGenerateRow .button { width:100%; justify-content:center; }
  .toolSeoFieldGrid { grid-template-columns:1fr; }
  .toolSeoResultTop { align-items:flex-start; flex-direction:column; }
  .toolSeoResultTop .button { width:100%; justify-content:center; }
  .toolSeoLoading,.toolSeoError { align-items:flex-start; }
  .section { margin-top: var(--space-8); }
  .tile { padding: var(--space-5); }
  .addonPreview { min-height: 190px; }
  .skeletonCardGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skeletonProfileCover { min-height: 150px; }
  .skeletonProfileAvatar { width: 72px; height: 72px; flex-basis: 72px; margin-top: -36px; }
}

@media (max-width: 480px) {
  .pageTitle { font-size: 28px; }
  .pageHead { margin-bottom: var(--space-6); }
  .pageSub { margin-top: var(--space-3); }
  .sectionHead { margin-bottom: var(--space-5); }
  .libraryPageShell .pageHead { margin-bottom: var(--space-6); }
  .librarySummaryGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .librarySummaryGrid .summaryCard { min-height: 88px; padding: 13px; }
  .librarySummaryGrid .summaryValue { font-size: 19px; }
  .libraryOverviewPanels { margin-bottom: 24px; }
  .librarySectionHead { margin-bottom: var(--space-5); align-items: flex-end; }
  .librarySectionHead h2 { font-size: var(--text-base); }
  .librarySectionHead p { max-width: 270px; }
  .librarySectionHead + .list,
  .librarySectionHead + .emptyState,
  .libraryKeysList { margin-bottom: 24px; }
  .libraryKeyRow,
  .libraryStoreRow { padding-left: 13px; padding-right: 13px; }
  .libraryStoreRow { gap: 10px; }
  .libraryRowStatus { display: none; }
  .libraryProductsList .libraryProductLink { padding-left: 13px; padding-right: 10px; }
  .hero { min-height: 220px; padding: var(--space-6); }
  .hero h1 { font-size: 30px; }
  .addonCardMeta { padding-left: var(--space-4); padding-right: var(--space-4); }
  .addonCardFoot { padding-left: var(--space-4); padding-right: var(--space-4); }
  .skeletonCardGrid { grid-template-columns: 1fr; }
  .skeletonLine.title { width: 72%; }
  .skeletonLine.subtitle { width: 94%; }
  .skeletonProfileTop { min-height: 64px; }
  .skeletonButton { width: 102px; }
}

/* Flat SaaS surfaces: borders and solid fills carry hierarchy without glow. */
html body *,
html body *::before,
html body *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body :focus-visible {
  outline: 2px solid color-mix(in srgb,var(--color-text) 36%,var(--color-border));
  outline-offset: 2px;
}

html body .agentComposer textarea:focus-visible {
  outline: 0;
  outline-offset: 0;
}