/*
  ==============================
  Tokens
  ==============================
*/
:root {
  color-scheme: light;

  /* Color system */
  --color-bg-canvas: #f6f8fc;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-muted: #f1f4fa;
  --color-bg-subtle: rgba(15, 23, 42, 0.03);

  --color-text-primary: #0f172a;
  --color-text-secondary: #334155;
  --color-text-tertiary: #64748b;
  --color-text-inverse: #f8fafc;

  --color-border-default: rgba(15, 23, 42, 0.1);
  --color-border-strong: rgba(15, 23, 42, 0.2);

  --color-primary: #2f6df6;
  --color-primary-hover: #245de0;
  --color-primary-active: #1f52c5;
  --color-primary-soft: rgba(47, 109, 246, 0.12);

  --color-success: #16803d;
  --color-success-soft: rgba(22, 128, 61, 0.12);
  --color-warning: #a16207;
  --color-warning-soft: rgba(161, 98, 7, 0.14);
  --color-danger: #b42318;
  --color-danger-soft: rgba(180, 35, 24, 0.14);
  --color-info: #0c66e4;
  --color-info-soft: rgba(12, 102, 228, 0.12);

  /* 8pt spacing system */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.09);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);

  /* Typography */
  --font-family-base: "IBM Plex Sans", "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-family-mono: "JetBrains Mono", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;

  --font-size-title-1: clamp(30px, 4vw, 42px);
  --font-size-title-2: clamp(24px, 3vw, 32px);
  --font-size-title-3: 20px;
  --font-size-title-4: 18px;
  --font-size-body: 16px;
  --font-size-body-sm: 15px;
  --font-size-caption: 13px;
  --font-size-micro: 12px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-title: 1.3;
  --line-height-body: 1.65;
  --line-height-relaxed: 1.75;

  /* Motion */
  --motion-duration-fast: 120ms;
  --motion-duration-base: 180ms;
  --motion-duration-slow: 240ms;
  --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  --focus-ring: 0 0 0 3px rgba(47, 109, 246, 0.28);
  --layout-max: 1200px;
  --reading-max: 820px;
  --copy-max: 660px;

  /* Community skins */
  --m-accent: #1d9bf0;
  --mi-accent: #1694f0;
  --mi-accent-alt: #ff7fb0;
  --lenny-accent: #2da44e;
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-canvas: #0a1018;
  --color-bg-surface: #111a27;
  --color-bg-elevated: #162131;
  --color-bg-muted: #1a2638;
  --color-bg-subtle: rgba(230, 237, 243, 0.06);

  --color-text-primary: #e8edf4;
  --color-text-secondary: #c6d2e0;
  --color-text-tertiary: #99aec4;
  --color-text-inverse: #09101a;

  --color-border-default: rgba(153, 174, 196, 0.24);
  --color-border-strong: rgba(153, 174, 196, 0.4);

  --color-primary: #5c96ff;
  --color-primary-hover: #79a9ff;
  --color-primary-active: #4b82e0;
  --color-primary-soft: rgba(92, 150, 255, 0.18);

  --color-success: #3fb950;
  --color-success-soft: rgba(63, 185, 80, 0.2);
  --color-warning: #d29922;
  --color-warning-soft: rgba(210, 153, 34, 0.2);
  --color-danger: #f85149;
  --color-danger-soft: rgba(248, 81, 73, 0.2);
  --color-info: #58a6ff;
  --color-info-soft: rgba(88, 166, 255, 0.2);

  --shadow-sm: 0 1px 2px rgba(2, 8, 20, 0.34);
  --shadow-md: 0 8px 22px rgba(2, 8, 20, 0.42);
  --shadow-lg: 0 14px 30px rgba(2, 8, 20, 0.48);

  --focus-ring: 0 0 0 3px rgba(92, 150, 255, 0.34);
}

/*
  ==============================
  Reset / Base
  ==============================
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body.app-page {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 400px at 96% -12%, rgba(47, 109, 246, 0.1), transparent 64%),
    radial-gradient(760px 360px at -10% 0%, rgba(47, 109, 246, 0.05), transparent 62%),
    var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--color-text-primary);
  line-height: var(--line-height-title);
  letter-spacing: 0.01em;
}

p,
ul,
ol {
  margin: 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}

a:hover {
  color: var(--color-primary-hover);
}

img,
video,
iframe {
  display: block;
  max-width: 100%;
}

pre,
code,
kbd,
samp {
  font-family: var(--font-family-mono);
}

::selection {
  background: var(--color-primary-soft);
  color: var(--color-text-primary);
}

:where(
  a,
  button,
  summary,
  input,
  textarea,
  select,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/*
  ==============================
  Layout
  ==============================
*/
.container,
.hub-shell,
.shell {
  width: min(var(--layout-max), 94vw);
  margin: var(--space-4) auto var(--space-7);
}

.top,
.hub-top {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-surface) 88%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border-default) 72%, transparent);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.hub-top {
  position: sticky;
  top: var(--space-3);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.hub-layout {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

.panel,
.hero,
.section,
.foot,
.article-view,
.detail-card,
.portal {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
}

.panel,
.hero,
.section,
.foot,
.article-view,
.detail-card {
  padding: var(--space-5);
}

.panel {
  padding: var(--space-4);
}

/*
  ==============================
  Navbar / Sidebar / Tabs
  ==============================
*/
.brand,
.hub-brand strong {
  font-size: var(--font-size-title-4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.hub-brand {
  display: grid;
  gap: 2px;
}

.hub-brand span {
  font-size: var(--font-size-micro);
  color: var(--color-text-tertiary);
}

.nav,
.hub-nav,
.top-links,
.minor-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.side-menu {
  display: grid;
  gap: var(--space-2);
}

.side-panel {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  padding: var(--space-3);
}

.side-panel-body {
  margin-top: var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
}

.tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-1);
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: var(--color-bg-muted);
}

.tab {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition:
    background-color var(--motion-duration-base) var(--motion-ease-standard),
    border-color var(--motion-duration-base) var(--motion-ease-standard),
    color var(--motion-duration-base) var(--motion-ease-standard);
}

.tab:hover {
  background: var(--color-bg-subtle);
}

.tab:active {
  background: color-mix(in srgb, var(--color-bg-muted) 82%, var(--color-bg-surface));
}

.tab.active,
.tab[aria-selected="true"] {
  border-color: var(--color-border-default);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.tab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/*
  ==============================
  Buttons
  ==============================
*/
.button,
.btn,
.mini-btn,
.status-link,
.action-btn,
.cta,
.mini-link,
.hub-nav a,
.hub-nav button,
.nav a,
.nav button,
.side-menu button,
.actions button,
.actions a,
.side-links a,
.comment-form button,
.retry-btn,
.detail-close,
.thread-item {
  --button-bg: var(--color-bg-surface);
  --button-bg-hover: var(--color-bg-muted);
  --button-bg-active: color-mix(in srgb, var(--color-bg-muted) 82%, var(--color-bg-surface));
  --button-border: var(--color-border-default);
  --button-text: var(--color-text-secondary);

  appearance: none;
  border: 1px solid var(--button-border);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-text);
  min-height: 40px;
  padding: 0 var(--space-4);
  font-family: inherit;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--motion-duration-base) var(--motion-ease-standard),
    border-color var(--motion-duration-base) var(--motion-ease-standard),
    color var(--motion-duration-base) var(--motion-ease-standard),
    box-shadow var(--motion-duration-base) var(--motion-ease-standard),
    transform var(--motion-duration-base) var(--motion-ease-standard);
}

.button:hover,
.btn:hover,
.mini-btn:hover,
.status-link:hover,
.action-btn:hover,
.cta:hover,
.mini-link:hover,
.hub-nav a:hover,
.hub-nav button:hover,
.nav a:hover,
.nav button:hover,
.side-menu button:hover,
.actions button:hover,
.actions a:hover,
.side-links a:hover,
.comment-form button:hover,
.retry-btn:hover,
.detail-close:hover,
.thread-item:hover {
  background: var(--button-bg-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.button:active,
.btn:active,
.mini-btn:active,
.status-link:active,
.action-btn:active,
.cta:active,
.mini-link:active,
.hub-nav a:active,
.hub-nav button:active,
.nav a:active,
.nav button:active,
.side-menu button:active,
.actions button:active,
.actions a:active,
.side-links a:active,
.comment-form button:active,
.retry-btn:active,
.detail-close:active,
.thread-item:active {
  background: var(--button-bg-active);
  transform: translateY(1px);
}

.button:disabled,
.btn:disabled,
.mini-btn:disabled,
.status-link:disabled,
.action-btn:disabled,
.cta:disabled,
.mini-link[aria-disabled="true"],
.hub-nav a[aria-disabled="true"],
.hub-nav button:disabled,
.nav a[aria-disabled="true"],
.nav button:disabled,
.side-menu button:disabled,
.actions button:disabled,
.actions a.disabled,
.side-links a[aria-disabled="true"],
.comment-form button:disabled,
.retry-btn:disabled,
.detail-close:disabled,
.thread-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.button--primary,
.btn.primary,
.action-btn,
.cta,
.hero-actions .ai-primary,
.hub-nav .pill.is-current,
.nav .entry.ai {
  --button-bg: var(--color-primary);
  --button-bg-hover: var(--color-primary-hover);
  --button-bg-active: var(--color-primary-active);
  --button-border: var(--color-primary);
  --button-text: #ffffff;
}

.button--secondary,
.btn.secondary {
  --button-bg: var(--color-bg-muted);
  --button-bg-hover: color-mix(in srgb, var(--color-bg-muted) 70%, var(--color-bg-surface));
  --button-bg-active: color-mix(in srgb, var(--color-bg-muted) 82%, #000);
  --button-border: var(--color-border-default);
  --button-text: var(--color-text-secondary);
}

.button--ghost,
.btn.ghost,
.hub-nav .pill,
.nav .entry:not(.ai) {
  --button-bg: transparent;
  --button-bg-hover: var(--color-bg-subtle);
  --button-bg-active: color-mix(in srgb, var(--color-bg-subtle) 82%, transparent);
  --button-border: var(--color-border-default);
  --button-text: var(--color-text-secondary);
}

.hub-nav .pill,
.nav .entry {
  position: relative;
}

.hub-nav .pill.is-current::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}

.button.is-loading,
.btn.is-loading,
.mini-btn.is-loading,
.action-btn.is-loading,
.retry-btn.is-loading,
.button[aria-busy="true"],
.btn[aria-busy="true"],
.mini-btn[aria-busy="true"],
.action-btn[aria-busy="true"],
.retry-btn[aria-busy="true"] {
  color: transparent;
  pointer-events: none;
  position: relative;
}

.button.is-loading::after,
.btn.is-loading::after,
.mini-btn.is-loading::after,
.action-btn.is-loading::after,
.retry-btn.is-loading::after,
.button[aria-busy="true"]::after,
.btn[aria-busy="true"]::after,
.mini-btn[aria-busy="true"]::after,
.action-btn[aria-busy="true"]::after,
.retry-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: button-spin 0.72s linear infinite;
}

@keyframes button-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.button--danger,
.btn.danger {
  --button-bg: var(--color-danger);
  --button-bg-hover: color-mix(in srgb, var(--color-danger) 88%, #000);
  --button-bg-active: color-mix(in srgb, var(--color-danger) 78%, #000);
  --button-border: var(--color-danger);
  --button-text: #ffffff;
}

/*
  ==============================
  Inputs / Select / Textarea
  ==============================
*/
.input,
.select,
.textarea,
.field input,
.field textarea,
.field select,
.comment-form input,
.comment-form textarea,
.side-form input,
.side-form select,
.tool-row input,
.tool-row select,
.composer textarea,
#promptInput {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-body-sm);
  line-height: 1.6;
  padding: 0 var(--space-4);
  transition:
    border-color var(--motion-duration-base) var(--motion-ease-standard),
    box-shadow var(--motion-duration-base) var(--motion-ease-standard),
    background-color var(--motion-duration-base) var(--motion-ease-standard);
}

.textarea,
.field textarea,
.comment-form textarea,
.composer textarea,
#promptInput {
  min-height: 108px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
}

.input:hover,
.select:hover,
.textarea:hover,
.field input:hover,
.field textarea:hover,
.field select:hover,
.comment-form input:hover,
.comment-form textarea:hover,
.side-form input:hover,
.side-form select:hover,
.tool-row input:hover,
.tool-row select:hover,
.composer textarea:hover,
#promptInput:hover {
  border-color: var(--color-border-strong);
}

.input:active,
.select:active,
.textarea:active,
.field input:active,
.field textarea:active,
.field select:active,
.comment-form input:active,
.comment-form textarea:active,
.side-form input:active,
.side-form select:active,
.tool-row input:active,
.tool-row select:active,
.composer textarea:active,
#promptInput:active {
  border-color: var(--color-primary);
}

.input:disabled,
.select:disabled,
.textarea:disabled,
.field input:disabled,
.field textarea:disabled,
.field select:disabled,
.comment-form input:disabled,
.comment-form textarea:disabled,
.side-form input:disabled,
.side-form select:disabled,
.tool-row input:disabled,
.tool-row select:disabled,
.composer textarea:disabled,
#promptInput:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  background: var(--color-bg-muted);
}

.field label,
.meta,
.muted,
.counter,
.hint,
.sub,
.inline-row,
.session-text,
.composer-tip,
.threads-head span {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
}

.meta,
.card-stats {
  color: color-mix(in srgb, var(--color-text-tertiary) 88%, transparent);
}

/*
  ==============================
  Cards
  ==============================
*/
.card,
.post,
.video-card,
.article-card,
.portal,
.status,
.hint,
.empty,
.comment,
.thread-item,
.welcome,
.msg,
.config-card,
.session-bar {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
}

.card,
.post,
.video-card,
.article-card,
.portal,
.hint,
.status,
.empty,
.comment,
.welcome,
.msg,
.config-card,
.session-bar {
  padding: var(--space-4);
}

.post:hover,
.video-card:hover,
.article-card:hover,
.portal:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.video-card.active,
.article-card.active,
.highlight-new,
.thread-item.active,
.side-menu button.active,
.actions button.on {
  border-color: color-mix(in srgb, var(--color-primary) 64%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-primary-soft) 42%, var(--color-bg-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 34%, transparent), var(--shadow-sm);
}

.post-head,
.video-head,
.article-head,
.author-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.author-row {
  justify-content: flex-start;
  min-width: 0;
}

.author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-primary) 50%, var(--color-border-default));
  background: var(--color-primary-soft);
  color: color-mix(in srgb, var(--color-primary) 82%, #001126);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.author-meta {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.author-name,
.title {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.author-name {
  font-size: var(--font-size-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title {
  font-size: var(--font-size-title-4);
  line-height: 1.45;
  margin-top: var(--space-2);
}

.body-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-relaxed);
}

.summary,
.video-card .summary,
.article-card .summary {
  margin-top: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.7em * 2);
}

.card-stats {
  margin-top: var(--space-2);
  font-size: var(--font-size-micro);
}

.media-preview,
.video-cover,
.player-shell,
.video-player {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: color-mix(in srgb, var(--color-bg-muted) 76%, #000);
}

.media-preview img,
.media-preview video,
.video-cover img,
.video-player img,
.video-player video,
.video-player iframe,
.player-shell video,
.player-shell iframe {
  width: 100%;
  display: block;
  object-fit: cover;
}

.player-shell video,
.player-shell iframe {
  min-height: 280px;
  border: 0;
}

/*
  ==============================
  Modal / Dropdown / Tooltip
  ==============================
*/
.dropdown {
  position: relative;
}

.dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 200px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  display: grid;
  gap: var(--space-1);
  z-index: 50;
}

.dropdown__item {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  text-align: left;
  padding: 0 var(--space-3);
  cursor: pointer;
}

.dropdown__item:hover {
  border-color: var(--color-border-default);
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.dropdown__item:active {
  background: color-mix(in srgb, var(--color-bg-muted) 82%, var(--color-bg-surface));
}

.dropdown__item:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.modal,
.detail-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.modal__backdrop,
.detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.56);
  backdrop-filter: blur(2px);
}

.modal__panel,
.detail-card {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-lg);
}

.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translate(-50%, 6px);
  opacity: 0;
  pointer-events: none;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-text-primary) 92%, #000);
  color: var(--color-text-inverse);
  font-size: var(--font-size-micro);
  padding: 6px 8px;
  white-space: nowrap;
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.tooltip:hover::after,
.tooltip:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/*
  ==============================
  Tag / Badge / Pagination
  ==============================
*/
.tag,
.chip,
.badge {
  min-height: 28px;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  padding: 0 10px;
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.badge {
  min-height: 22px;
  padding: 0 8px;
}

.badge--success { background: var(--color-success-soft); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 36%, var(--color-border-default)); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 36%, var(--color-border-default)); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 36%, var(--color-border-default)); }
.badge--info { background: var(--color-info-soft); color: var(--color-info); border-color: color-mix(in srgb, var(--color-info) 36%, var(--color-border-default)); }

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pagination__item {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pagination__item:hover {
  background: var(--color-bg-muted);
}

.pagination__item:active {
  background: color-mix(in srgb, var(--color-bg-muted) 82%, var(--color-bg-surface));
}

.pagination__item.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.pagination__item:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

/*
  ==============================
  Empty / Skeleton / Toast / Status
  ==============================
*/
.empty {
  text-align: center;
  color: var(--color-text-tertiary);
  border-style: dashed;
}

.status {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.status.ok {
  border-color: color-mix(in srgb, var(--color-success) 40%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-success-soft) 74%, var(--color-bg-surface));
  color: color-mix(in srgb, var(--color-success) 88%, var(--color-text-primary));
}

.status.warn {
  border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-warning-soft) 74%, var(--color-bg-surface));
  color: color-mix(in srgb, var(--color-warning) 88%, var(--color-text-primary));
}

.status.err {
  border-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-danger-soft) 74%, var(--color-bg-surface));
  color: color-mix(in srgb, var(--color-danger) 88%, var(--color-text-primary));
}

.status.info {
  border-color: color-mix(in srgb, var(--color-info) 40%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-info-soft) 74%, var(--color-bg-surface));
  color: color-mix(in srgb, var(--color-info) 88%, var(--color-text-primary));
}

.skeleton-card {
  position: relative;
  overflow: hidden;
}

.skeleton-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.skeleton-meta {
  flex: 1;
  display: grid;
  gap: var(--space-2);
}

.skeleton-avatar,
.skeleton-line,
.skeleton-chip,
.skeleton-media {
  background: linear-gradient(100deg, rgba(100, 116, 139, 0.16), rgba(100, 116, 139, 0.32), rgba(100, 116, 139, 0.16));
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.1s linear infinite;
}

.skeleton-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.skeleton-media {
  height: 164px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.skeleton-line {
  height: 10px;
  border-radius: 999px;
}

.skeleton-actions {
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
}

.skeleton-chip {
  width: 80px;
  height: 28px;
  border-radius: 999px;
}

.w-95 { width: 95%; }
.w-93 { width: 93%; }
.w-90 { width: 90%; }
.w-88 { width: 88%; }
.w-86 { width: 86%; }
.w-72 { width: 72%; }
.w-70 { width: 70%; }
.w-68 { width: 68%; }
.w-42 { width: 42%; }
.w-40 { width: 40%; }
.w-25 { width: 25%; }

.flash-toast,
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  z-index: 100;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--color-info) 44%, var(--color-border-default));
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg-elevated) 90%, transparent);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
  padding: 0 var(--space-4);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
}

@keyframes skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@keyframes rise-in {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
  ==============================
  Home Page
  ==============================
*/
.home-page .container {
  width: min(var(--layout-max), 94vw);
}

.home-page .home-shell {
  display: grid;
  gap: var(--space-4);
}

.home-page .top {
  position: sticky;
  top: var(--space-3);
  z-index: 24;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg-surface) 86%, transparent);
}

.home-page .brand,
.home-page .nav {
  align-self: center;
}

.home-page .nav .entry {
  color: #ffffff;
  border: 0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

.home-page .nav .entry.m {
  background: linear-gradient(108deg, #2ea7f4, #1d9bf0);
}

.home-page .nav .entry.mi {
  background: linear-gradient(108deg, #ff8db1, #fb7299);
}

.home-page .nav .entry.lenny {
  background: linear-gradient(108deg, #45c46a, #2da44e);
}

.home-page .nav .entry.ai {
  background: linear-gradient(108deg, #2f6df6, #0f56cf);
}

.home-page .hero {
  margin-top: 0;
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 36px);
  background:
    linear-gradient(142deg, color-mix(in srgb, var(--color-primary-soft) 58%, var(--color-bg-surface)), var(--color-bg-surface));
  box-shadow: var(--shadow-md);
}

.home-page .home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr);
  gap: var(--space-5);
  align-items: start;
}

.home-page .hero-main,
.home-page .hero-side {
  display: grid;
  gap: var(--space-3);
}

.home-page .eyebrow {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  padding: 0 var(--space-3);
  background: var(--color-bg-surface);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-page .hero h1 {
  margin-top: var(--space-2);
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

.home-page .hero h1 span {
  background: linear-gradient(108deg, #1664df, #ef5d91, #27a95b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-page .hero p {
  margin-top: var(--space-2);
  max-width: 62ch;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: 1.78;
}

.home-page .hero-actions {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.home-page .hero-actions a {
  min-height: 42px;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  padding: 0 var(--space-4);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
}

.home-page .hero-actions a:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-primary) 36%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-primary-soft) 32%, var(--color-bg-surface));
  color: var(--color-text-primary);
}

.home-page .hero-actions .ai-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(47, 109, 246, 0.28);
}

.home-page .hero-actions .ai-primary:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(47, 109, 246, 0.34);
}

.home-page .hero-actions .cta-soft {
  border: 0;
  min-height: auto;
  padding: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-primary) 78%, var(--color-text-primary));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-page .hero-actions .cta-soft:hover {
  transform: none;
  color: var(--color-primary-hover);
}

.home-page .hero-points {
  margin-top: var(--space-1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.home-page .hero-points span {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border-default));
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary-soft) 26%, var(--color-bg-surface));
  color: var(--color-text-secondary);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-semibold);
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
}

.home-page .metric-grid {
  margin-top: var(--space-2);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.home-page .metric-card {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bg-surface) 74%, var(--color-bg-muted));
  padding: var(--space-3);
  display: grid;
  gap: 4px;
}

.home-page .metric-card strong {
  color: var(--color-text-primary);
  font-size: 22px;
  line-height: 1;
}

.home-page .metric-card span {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-micro);
  line-height: 1.5;
}

.home-page .launch-card,
.home-page .signal-card {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.home-page .launch-card strong,
.home-page .signal-card strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-body-sm);
  line-height: 1.45;
}

.home-page .launch-list,
.home-page .signal-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.75;
  display: grid;
  gap: var(--space-2);
}

.home-page .launch-card .ai-primary {
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-page .launch-card .ai-primary:hover {
  background: var(--color-primary-hover);
}

.home-page .section {
  border-radius: var(--radius-lg);
}

.home-page .section-head {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.home-page .section-head h2 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.home-page .section-head p {
  max-width: 66ch;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: 1.76;
}

.home-page .trust-strip {
  padding: var(--space-4);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--color-primary-soft) 22%, var(--color-bg-surface)), var(--color-bg-surface));
}

.home-page .trust-item {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bg-surface) 84%, transparent);
  padding: var(--space-3);
  display: grid;
  gap: 6px;
}

.home-page .trust-item b {
  color: var(--color-text-primary);
  font-size: var(--font-size-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-page .trust-item span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-micro);
  line-height: 1.6;
}

.home-page .value-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.home-page .value-card {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bg-surface) 88%, var(--color-bg-muted));
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
}

.home-page .value-card h3 {
  font-size: var(--font-size-title-4);
}

.home-page .value-card p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.72;
}

.home-page .creator-fit {
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--color-primary-soft) 24%, var(--color-bg-surface)), var(--color-bg-surface));
}

.home-page .creator-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.home-page .creator-chip {
  min-height: 40px;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg-surface) 90%, var(--color-bg-muted));
  color: var(--color-text-secondary);
  padding: 0 var(--space-4);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition:
    background-color var(--motion-duration-base) var(--motion-ease-standard),
    border-color var(--motion-duration-base) var(--motion-ease-standard),
    color var(--motion-duration-base) var(--motion-ease-standard),
    transform var(--motion-duration-base) var(--motion-ease-standard);
}

.home-page .creator-chip:hover {
  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border-default));
  transform: translateY(-1px);
}

.home-page .creator-chip.is-active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary-soft) 54%, var(--color-bg-surface));
  color: color-mix(in srgb, var(--color-primary) 78%, var(--color-text-primary));
}

.home-page .creator-spotlight {
  margin-top: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-primary) 34%, var(--color-border-default));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-surface) 92%, var(--color-bg-muted));
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
}

.home-page .creator-spotlight h3 {
  font-size: var(--font-size-title-4);
}

.home-page .creator-spotlight p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.76;
}

.home-page .creator-actions {
  margin-top: var(--space-1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.home-page .creator-actions a {
  min-height: 40px;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  padding: 0 var(--space-4);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
}

.home-page .creator-actions a:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.home-page .creator-actions .ai-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
}

.home-page .creator-actions .ai-primary:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
  color: #ffffff;
}

.home-page .portal-section {
  display: grid;
  gap: var(--space-3);
}

.home-page .portal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.home-page .portal {
  position: relative;
  scroll-margin-top: 110px;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-rows: auto minmax(48px, auto) minmax(72px, auto) 1fr auto;
  gap: var(--space-3);
  min-height: 324px;
  background: color-mix(in srgb, var(--color-bg-surface) 90%, var(--color-bg-muted));
  transition:
    border-color var(--motion-duration-base) var(--motion-ease-standard),
    box-shadow var(--motion-duration-base) var(--motion-ease-standard),
    transform var(--motion-duration-base) var(--motion-ease-standard);
}

.home-page .portal:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.home-page .portal.is-focused {
  border-color: color-mix(in srgb, var(--color-primary) 56%, var(--color-border-default));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent),
    var(--shadow-md);
}

.home-page .portal .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.home-page .portal .logo {
  font-size: 26px;
  font-weight: var(--font-weight-bold);
}

.home-page .portal .type {
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-muted);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-medium);
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
}

.home-page .portal h3 {
  font-size: var(--font-size-title-4);
  line-height: 1.4;
}

.home-page .portal p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.72;
  max-width: 38ch;
}

.home-page .portal ul {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
  line-height: 1.72;
}

.home-page .portal.m {
  border-color: color-mix(in srgb, var(--m-accent) 30%, var(--color-border-default));
}

.home-page .portal.mi {
  border-color: color-mix(in srgb, var(--mi-accent-alt) 32%, var(--color-border-default));
}

.home-page .portal.lenny {
  border-color: color-mix(in srgb, var(--lenny-accent) 34%, var(--color-border-default));
}

.home-page .portal .portal-cta {
  color: color-mix(in srgb, var(--color-primary) 82%, var(--color-text-primary));
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  align-self: end;
}

.home-page .trust-item {
  transition:
    transform var(--motion-duration-base) var(--motion-ease-standard),
    border-color var(--motion-duration-base) var(--motion-ease-standard),
    box-shadow var(--motion-duration-base) var(--motion-ease-standard);
}

.home-page .trust-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border-default));
  box-shadow: var(--shadow-sm);
}

.home-page .onboarding {
  display: grid;
  gap: var(--space-2);
}

.home-page .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.home-page .step {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bg-surface) 84%, var(--color-bg-muted));
  padding: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.home-page .step b {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-micro);
  letter-spacing: 0.06em;
}

.home-page .step strong {
  font-size: var(--font-size-body);
  line-height: 1.4;
}

.home-page .step p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.72;
}

.home-page .step a {
  color: var(--color-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-page .quote-section {
  display: grid;
  gap: var(--space-2);
}

.home-page .quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.home-page .quote-card {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bg-surface) 92%, var(--color-bg-muted));
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.home-page .quote-card p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.8;
}

.home-page .quote-card span {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-micro);
}

.home-page .cta-band {
  border: 1px solid color-mix(in srgb, var(--color-primary) 36%, var(--color-border-default));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(134deg, color-mix(in srgb, var(--color-primary-soft) 58%, var(--color-bg-surface)), var(--color-bg-surface));
  padding: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
}

.home-page .cta-band strong {
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.home-page .cta-band p {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: 1.74;
}

.home-page .cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.home-page .cta-band-actions a {
  min-height: 42px;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  padding: 0 var(--space-4);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
}

.home-page .cta-band-actions a:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.home-page .cta-band-actions .ai-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
}

.home-page .cta-band-actions .ai-primary:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
  color: #ffffff;
}

.home-page .foot {
  margin-top: 0;
  border-radius: var(--radius-lg);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
  line-height: 1.78;
}

@media (max-width: 1199px) {
  .home-page .home-hero-grid {
    grid-template-columns: 1fr;
  }

  .home-page .trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-page .quote-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .home-page .metric-grid,
  .home-page .value-grid,
  .home-page .steps,
  .home-page .quote-grid {
    grid-template-columns: 1fr;
  }

  .home-page .trust-strip {
    grid-template-columns: 1fr;
  }

  .home-page .cta-band {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .home-page .creator-switch {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .home-page .hero {
    padding: var(--space-4);
  }

  .home-page .hero h1 {
    font-size: clamp(28px, 8vw, 38px);
  }

  .home-page .hero-actions {
    gap: var(--space-2);
  }

  .home-page .hero-actions .cta-soft {
    width: auto;
  }

  .home-page .creator-actions a {
    width: 100%;
    justify-content: center;
  }

  .home-page .cta-band {
    padding: var(--space-4);
  }

  .home-page .section-head h2 {
    font-size: clamp(22px, 7vw, 28px);
  }
}


/*
  ==============================
  Motion And Playground
  ==============================
*/
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px) scale(0.988);
  filter: saturate(0.9) blur(2px);
  transition:
    opacity var(--motion-duration-slow) var(--motion-ease-standard),
    transform var(--motion-duration-slow) var(--motion-ease-standard),
    filter var(--motion-duration-slow) var(--motion-ease-standard);
}

.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;
}

.home-page .hero,
.community-gateway-page .hero {
  position: relative;
  overflow: hidden;
}

.home-page .hero::after,
.community-gateway-page .hero::after {
  content: "";
  position: absolute;
  inset: -24% -10% auto;
  height: 58%;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(47, 109, 246, 0.12), transparent 70%),
    radial-gradient(44% 44% at 70% 40%, rgba(22, 148, 240, 0.14), transparent 74%);
  animation: hero-drift 12s ease-in-out infinite alternate;
}

.home-page .portal,
.community-gateway-page .card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  transform:
    perspective(960px)
    translateY(var(--lift))
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  will-change: transform;
}

.home-page .portal:hover,
.community-gateway-page .card:hover {
  --lift: -4px;
}

.home-page .portal-grid,
.community-gateway-page .grid {
  position: relative;
}

.hero-playground {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-primary) 26%, var(--color-border-default));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--color-primary-soft) 56%, var(--color-bg-surface)), var(--color-bg-surface));
  box-shadow: var(--shadow-md);
  display: grid;
  gap: var(--space-3);
}

.hero-playground-shell {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.playground-head {
  display: grid;
  gap: var(--space-1);
}

.playground-head strong {
  font-size: var(--font-size-title-4);
}

.playground-head span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.playground-stage {
  position: relative;
  min-height: 230px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--color-border-default));
  border-radius: var(--radius-md);
  background:
    radial-gradient(860px 220px at 70% -30%, rgba(76, 173, 255, 0.22), transparent 58%),
    linear-gradient(165deg, #0b1627, #101f34);
  overflow: hidden;
  outline: none;
}

.playground-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 32% 68%, rgba(255, 255, 255, 0.05));
}

.playground-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.playground-hud {
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.playground-hud span {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(144, 193, 255, 0.4);
  background: rgba(4, 10, 19, 0.66);
  color: #d8ebff;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}

.playground-start {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid rgba(146, 197, 255, 0.7);
  border-radius: 999px;
  background: linear-gradient(100deg, #259cff, #1f7be5);
  color: #ffffff;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 14px 26px rgba(16, 116, 221, 0.28);
  transition:
    transform var(--motion-duration-base) var(--motion-ease-standard),
    filter var(--motion-duration-base) var(--motion-ease-standard),
    box-shadow var(--motion-duration-base) var(--motion-ease-standard);
}

.playground-start:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 18px 30px rgba(16, 116, 221, 0.34);
}

.playground-start:disabled {
  cursor: not-allowed;
  opacity: 0.86;
  transform: none;
}

.playground-stage[data-state="running"] .playground-start {
  pointer-events: none;
  background: linear-gradient(100deg, #16b17e, #1a8d66);
  border-color: rgba(100, 233, 193, 0.72);
  box-shadow: 0 12px 24px rgba(26, 141, 102, 0.26);
}

@keyframes hero-drift {
  0% {
    transform: translateX(-2%) translateY(-2%) scale(1);
  }
  100% {
    transform: translateX(2.5%) translateY(2%) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .home-page .hero::after,
  .community-gateway-page .hero::after {
    animation: none;
  }

  .home-page .portal,
  .community-gateway-page .card {
    transform: none;
  }
}
/*
  ==============================
  Community Gateway Page
  ==============================
*/
.community-gateway-page .shell {
  width: min(980px, 94vw);
}

.community-gateway-page .top {
  border-radius: var(--radius-lg);
}

.community-gateway-page .hero {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--color-primary-soft) 46%, var(--color-bg-surface)), var(--color-bg-surface));
}

.community-gateway-page .hero h1 {
  font-size: clamp(30px, 4vw, 42px);
}

.community-gateway-page .hero .sub {
  max-width: 64ch;
  color: var(--color-text-secondary);
}

.community-gateway-page .minor-links {
  margin-top: var(--space-3);
}

.community-gateway-page .section h2 {
  font-size: var(--font-size-title-3);
}

.community-gateway-page .grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.community-gateway-page .card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.community-gateway-page .card h3 {
  font-size: var(--font-size-title-4);
}

.community-gateway-page .line {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-sm);
  line-height: 1.75;
}

.community-gateway-page .meta {
  font-size: var(--font-size-micro);
}

.community-gateway-page .foot {
  color: var(--color-text-secondary);
}

/*
  ==============================
  Doc Pages
  ==============================
*/
.doc-page .shell {
  width: min(980px, 94vw);
}

.doc-page .top {
  border-radius: var(--radius-lg);
}

.doc-page .doc-article,
.doc-page .doc-list-wrap {
  border-radius: var(--radius-lg);
}

.doc-page .doc-article > h1,
.doc-page .doc-list-wrap > h1 {
  margin-bottom: var(--space-4);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.16;
}

.doc-page .doc-list {
  display: grid;
  gap: var(--space-3);
}

.doc-page .doc-list-item {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-2);
}

.doc-page .doc-list-item h3 {
  font-size: var(--font-size-title-4);
}

.doc-page .doc-list-item small {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-micro);
}

.doc-page .doc-content {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  font-size: var(--font-size-body);
}

.doc-page .doc-content > :first-child {
  margin-top: 0;
}

.doc-page .doc-content > :last-child {
  margin-bottom: 0;
}

.doc-page .doc-content h1,
.doc-page .doc-content h2,
.doc-page .doc-content h3,
.doc-page .doc-content h4,
.doc-page .doc-content h5,
.doc-page .doc-content h6 {
  margin: var(--space-5) 0 var(--space-3);
  color: var(--color-text-primary);
}

.doc-page .doc-content h2 {
  font-size: clamp(22px, 3vw, 30px);
}

.doc-page .doc-content h3 {
  font-size: var(--font-size-title-3);
}

.doc-page .doc-content p,
.doc-page .doc-content ul,
.doc-page .doc-content ol,
.doc-page .doc-content blockquote,
.doc-page .doc-content pre {
  margin: var(--space-3) 0;
}

.doc-page .doc-content ul,
.doc-page .doc-content ol {
  padding-left: 24px;
}

.doc-page .doc-content blockquote {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid color-mix(in srgb, var(--color-primary) 44%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary-soft) 46%, var(--color-bg-surface));
}

.doc-page .doc-content code {
  border: 1px solid var(--color-border-default);
  border-radius: 7px;
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
  padding: 1px 6px;
  font-size: 0.92em;
}

.doc-page .doc-content pre {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: #101726;
  color: #e7f0ff;
  padding: var(--space-4);
  overflow: auto;
}

.doc-page .doc-content pre code {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
}

.doc-page .doc-content hr {
  border: 0;
  border-top: 1px solid var(--color-border-default);
  margin: var(--space-5) 0;
}

/*
  ==============================
  Profile Page
  ==============================
*/
.profile-page .shell {
  width: min(860px, 94vw);
}

.profile-page .top {
  display: grid;
  gap: var(--space-4);
  border-radius: var(--radius-lg);
}

.profile-page .top .nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.profile-page .card {
  border-radius: var(--radius-lg);
}

.profile-page .field textarea {
  min-height: 150px;
}

/*
  ==============================
  Admin Page
  ==============================
*/
.admin-page {
  background:
    radial-gradient(980px 420px at 96% -10%, rgba(47, 109, 246, 0.12), transparent 62%),
    radial-gradient(780px 360px at -6% -2%, rgba(45, 164, 78, 0.08), transparent 66%),
    var(--color-bg-canvas);
}

.admin-page .container {
  width: min(1320px, 95vw);
  margin: var(--space-4) auto var(--space-7);
}

.admin-page .top {
  border-radius: var(--radius-lg);
}

.admin-page .title h1 {
  margin: 0;
  font-size: var(--font-size-title-2);
}

.admin-page .title p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
}

.admin-page .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.admin-page button,
.admin-page .link-btn {
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  min-height: 38px;
  padding: 0 var(--space-4);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition:
    background-color var(--motion-duration-base) var(--motion-ease-standard),
    border-color var(--motion-duration-base) var(--motion-ease-standard),
    color var(--motion-duration-base) var(--motion-ease-standard);
}

.admin-page button:hover,
.admin-page .link-btn:hover {
  background: var(--color-bg-muted);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.admin-page .primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
}

.admin-page .primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #ffffff;
}

.admin-page .danger {
  border-color: color-mix(in srgb, var(--color-danger) 60%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-danger-soft) 74%, var(--color-bg-surface));
  color: color-mix(in srgb, var(--color-danger) 90%, var(--color-text-primary));
}

.admin-page .status {
  margin-top: var(--space-3);
}

.admin-page .grid {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.admin-page .card {
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.admin-page .metric {
  margin-top: var(--space-1);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}

.admin-page .label,
.admin-page .small {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-micro);
}

.admin-page .panels {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

.admin-page .head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.admin-page .head-row h2 {
  margin: 0;
  font-size: var(--font-size-title-4);
}

.admin-page .table-wrap {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  overflow: auto;
}

.admin-page table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  background: var(--color-bg-surface);
}

.admin-page th,
.admin-page td {
  border-bottom: 1px solid var(--color-border-default);
  padding: 10px 12px;
  text-align: left;
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
  vertical-align: top;
}

.admin-page th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: var(--color-bg-muted);
}

.admin-page tr:last-child td {
  border-bottom: 0;
}

.admin-page .role {
  min-height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  padding: 0 var(--space-2);
}
/*
  ==============================
  Auth Page
  ==============================
*/
.auth-page {
  background:
    radial-gradient(900px 360px at 100% -12%, rgba(47, 109, 246, 0.12), transparent 64%),
    radial-gradient(760px 360px at -10% 120%, rgba(47, 109, 246, 0.06), transparent 62%),
    var(--color-bg-canvas);
}

.auth-page .shell {
  width: min(1060px, 95vw);
  margin: var(--space-4) auto var(--space-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.auth-page .hero,
.auth-page .panel {
  border-radius: var(--radius-lg);
}

.auth-page .hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--space-4);
  padding: clamp(24px, 4vw, 42px);
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary-soft) 42%, var(--color-bg-surface)), var(--color-bg-surface));
}

.auth-page .hero::after {
  content: "";
  position: absolute;
  inset: auto -12% -36% auto;
  width: clamp(240px, 30vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--color-primary-soft) 76%, #ffffff), transparent 68%);
  filter: blur(6px);
}

.auth-page .badge,
.auth-page .brand-tag {
  width: fit-content;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 34%, var(--color-border-default));
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: color-mix(in srgb, var(--color-primary) 88%, var(--color-text-primary));
  padding: 0 var(--space-3);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
}

.auth-page h1 {
  max-width: 14ch;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.auth-page .sub {
  color: var(--color-text-secondary);
  max-width: 50ch;
  font-size: var(--font-size-body-sm);
  line-height: 1.76;
}

.auth-page .feature-list {
  display: grid;
  gap: var(--space-3);
  max-width: 52ch;
}

.auth-page .feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.72;
}

.auth-page .feature-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  margin-top: 7px;
}

.auth-page .auth-hero-kpis {
  margin-top: var(--space-2);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.auth-page .auth-hero-kpis article {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bg-surface) 86%, var(--color-bg-muted));
  padding: var(--space-3);
  display: grid;
  gap: 4px;
}

.auth-page .auth-hero-kpis strong {
  font-size: clamp(20px, 2.8vw, 30px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.auth-page .auth-hero-kpis span {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-micro);
}

.auth-page .panel {
  display: grid;
  gap: var(--space-4);
  padding: clamp(20px, 2.6vw, 30px);
}

.auth-page .auth-panel-head {
  display: grid;
  gap: var(--space-2);
}

.auth-page .auth-panel-head h2 {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.auth-page .auth-mode-badge {
  width: fit-content;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 36%, var(--color-border-default));
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary-soft) 64%, var(--color-bg-surface));
  color: color-mix(in srgb, var(--color-primary) 86%, var(--color-text-primary));
  padding: 0 var(--space-3);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  transition:
    border-color var(--motion-duration-base) var(--motion-ease-standard),
    background var(--motion-duration-base) var(--motion-ease-standard),
    color var(--motion-duration-base) var(--motion-ease-standard);
}

.auth-page .flow-tip {
  display: none;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border-default));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary-soft) 52%, var(--color-bg-surface));
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.72;
  backdrop-filter: blur(10px);
  transition:
    border-color var(--motion-duration-base) var(--motion-ease-standard),
    background var(--motion-duration-base) var(--motion-ease-standard),
    color var(--motion-duration-base) var(--motion-ease-standard);
}

.auth-page .divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.auth-page .divider::before,
.auth-page .divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-border-default);
}

.auth-page .form-panel {
  display: none;
}

.auth-page .form-panel.active {
  display: block;
  animation: rise-in var(--motion-duration-base) var(--motion-ease-standard);
}

.auth-page .field {
  margin-top: var(--space-3);
}

.auth-page .field input {
  border-color: color-mix(in srgb, var(--color-border-default) 90%, var(--color-primary-soft));
  background: color-mix(in srgb, var(--color-bg-elevated) 88%, #ffffff);
  transition:
    border-color var(--motion-duration-base) var(--motion-ease-standard),
    box-shadow var(--motion-duration-base) var(--motion-ease-standard),
    background-color var(--motion-duration-base) var(--motion-ease-standard),
    transform var(--motion-duration-base) var(--motion-ease-standard);
}

.auth-page .field input::placeholder {
  color: color-mix(in srgb, var(--color-text-tertiary) 82%, transparent);
}

.auth-page .field input:hover {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-bg-elevated) 82%, #ffffff);
}

.auth-page .field input:focus-visible {
  border-color: color-mix(in srgb, var(--color-primary) 58%, var(--color-border-default));
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--color-primary-soft) 66%, transparent),
    0 12px 24px color-mix(in srgb, var(--color-primary) 12%, transparent);
  background: #ffffff;
  transform: translateY(-1px);
}

.auth-page .actions {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.auth-page .minor-links,
.auth-page .inline-row,
.auth-page .session-actions {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.auth-page .link-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-primary) 88%, var(--color-text-primary));
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: 1.6;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-family: inherit;
  transition:
    color var(--motion-duration-base) var(--motion-ease-standard),
    text-decoration-color var(--motion-duration-base) var(--motion-ease-standard),
    transform var(--motion-duration-base) var(--motion-ease-standard);
}

.auth-page .link-btn:hover {
  color: var(--color-primary-hover);
  transform: translateY(-1px);
}

.auth-page .tab,
.auth-page .btn {
  transition:
    transform var(--motion-duration-base) var(--motion-ease-standard),
    box-shadow var(--motion-duration-base) var(--motion-ease-standard),
    background-color var(--motion-duration-base) var(--motion-ease-standard),
    border-color var(--motion-duration-base) var(--motion-ease-standard),
    color var(--motion-duration-base) var(--motion-ease-standard);
}

.auth-page .tab:hover {
  transform: translateY(-1px);
}

.auth-page .tab:active {
  transform: translateY(0) scale(0.99);
}

.auth-page .actions .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--color-text-primary) 10%, transparent);
}

.auth-page .actions .btn:active {
  transform: translateY(0) scale(0.99);
}

.auth-page .link-btn.is-active {
  color: var(--color-primary);
  text-decoration-thickness: 2px;
}

.auth-page .session-bar {
  display: none;
}

.auth-page .auth-legal {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-micro);
}

.auth-page .status-action {
  display: none;
}

.auth-page .minimal-hidden {
  display: none !important;
}

.auth-page .panel[data-auth-mode="register"] {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border-default));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent),
    var(--shadow-sm);
}

.auth-page .panel[data-auth-mode="register"] .auth-mode-badge {
  border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border-default));
}

.auth-page .panel[data-auth-mode="reset"] {
  border-color: color-mix(in srgb, var(--color-warning) 32%, var(--color-border-default));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-warning) 18%, transparent),
    var(--shadow-sm);
}

.auth-page .panel[data-auth-mode="reset"] .auth-mode-badge {
  border-color: color-mix(in srgb, var(--color-warning) 48%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-warning-soft) 72%, var(--color-bg-surface));
  color: color-mix(in srgb, var(--color-warning) 84%, var(--color-text-primary));
}

/*
  ==============================
  OpenClaw Page
  ==============================
*/
.openclaw-page {
  background:
    radial-gradient(980px 420px at 94% -8%, rgba(47, 109, 246, 0.16), transparent 62%),
    radial-gradient(860px 420px at -10% 116%, rgba(47, 109, 246, 0.08), transparent 64%),
    var(--color-bg-canvas);
  overflow: hidden;
}

.openclaw-page .chat-shell {
  width: min(1360px, calc(100% - 24px));
  margin: 12px auto;
  height: calc(100vh - 24px);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 300px minmax(0, 1fr);
}

.openclaw-page .sidebar,
.openclaw-page .main {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-surface) 92%, transparent);
  box-shadow: var(--shadow-sm);
  min-height: 0;
}

.openclaw-page .sidebar {
  padding: var(--space-4);
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: var(--space-3);
}

.openclaw-page .brand {
  display: grid;
  gap: 4px;
}

.openclaw-page .brand strong {
  font-size: var(--font-size-title-4);
}

.openclaw-page .brand span {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-micro);
}

.openclaw-page .action-stack {
  display: grid;
  gap: var(--space-2);
}

.openclaw-page .config-card {
  display: grid;
  gap: var(--space-2);
  background: var(--color-bg-muted);
}

.openclaw-page .config-card strong,
.openclaw-page .threads-head strong {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.openclaw-page .hint {
  color: var(--color-text-secondary);
}

.openclaw-page .threads-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.openclaw-page .thread-list {
  list-style: none;
  margin: 0;
  padding: 0 4px 0 0;
  display: grid;
  gap: var(--space-2);
  overflow: auto;
  align-content: start;
}

.openclaw-page .thread-item {
  width: 100%;
  border-radius: var(--radius-sm);
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--space-3);
}

.openclaw-page .thread-item strong,
.openclaw-page .thread-item span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openclaw-page .thread-item strong {
  font-size: var(--font-size-caption);
}

.openclaw-page .thread-item span {
  font-size: var(--font-size-micro);
  color: var(--color-text-tertiary);
}

.openclaw-page .main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.openclaw-page .topbar {
  border-bottom: 1px solid var(--color-border-default);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.openclaw-page .topbar h1 {
  font-size: var(--font-size-title-3);
}

.openclaw-page .topbar p {
  margin-top: var(--space-1);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
}

.openclaw-page .chat-feed {
  overflow: auto;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  align-content: start;
  background: color-mix(in srgb, var(--color-bg-muted) 40%, transparent);
}

.openclaw-page .welcome {
  border-style: dashed;
  color: var(--color-text-secondary);
  max-width: 900px;
}

.openclaw-page .msg {
  max-width: min(900px, 100%);
  justify-self: start;
  display: grid;
  gap: var(--space-2);
  animation: rise-in var(--motion-duration-base) var(--motion-ease-standard);
}

.openclaw-page .msg.user {
  justify-self: end;
  border-color: color-mix(in srgb, var(--color-primary) 62%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-primary-soft) 48%, var(--color-bg-surface));
}

.openclaw-page .msg.error {
  border-color: color-mix(in srgb, var(--color-danger) 58%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-danger-soft) 58%, var(--color-bg-surface));
}

.openclaw-page .msg-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.openclaw-page .msg-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text-primary);
  font-size: var(--font-size-body-sm);
  line-height: 1.72;
}

.openclaw-page .composer {
  border-top: 1px solid var(--color-border-default);
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: grid;
  gap: var(--space-3);
  background: color-mix(in srgb, var(--color-bg-surface) 92%, transparent);
}

.openclaw-page .composer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/*
  ==============================
  Hub Shared (M / Mi / Lenny)
  ==============================
*/
.hub-page .scene-intro {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary-soft) 34%, var(--color-bg-surface)), var(--color-bg-surface));
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
}

.hub-page .scene-eyebrow {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-page .scene-intro h2 {
  font-size: var(--font-size-title-2);
}

.hub-page .scene-copy {
  color: var(--color-text-secondary);
  max-width: 72ch;
  font-size: var(--font-size-body-sm);
  line-height: 1.72;
}

.hub-page .scene-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hub-page .scene-metrics span {
  min-height: 28px;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  font-size: var(--font-size-micro);
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
}

.feed-list,
.video-grid,
.article-list,
.comment-list,
.actions,
.tool-row,
.side-links,
.side-form {
  display: grid;
  gap: var(--space-3);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.actions .action-btn {
  min-height: 40px;
}

.actions .action-more {
  position: relative;
}

.actions .action-more > summary {
  list-style: none;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  min-height: 40px;
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition:
    border-color var(--motion-duration-base) var(--motion-ease-standard),
    background-color var(--motion-duration-base) var(--motion-ease-standard),
    color var(--motion-duration-base) var(--motion-ease-standard);
}

.actions .action-more > summary::-webkit-details-marker {
  display: none;
}

.actions .action-more > summary:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.actions .action-more[open] > summary {
  border-color: var(--color-border-strong);
}

.actions .action-more-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 188px;
  padding: var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: var(--space-2);
  z-index: 30;
}

.actions .action-more-menu button {
  width: 100%;
  justify-content: flex-start;
}

.failure-actions {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mobile-quickbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border-default);
  background: color-mix(in srgb, var(--color-bg-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  display: none;
  gap: var(--space-2);
}

.mobile-quickbar a {
  flex: 1;
}

.tool-row {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.list-text {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.75;
}

.comment-wrap {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-default);
}

.comment-form {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}

.stat-line,
#miPlayerStats,
#lennyViewerStats,
#mDetailStats {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.video-grid {
  grid-template-columns: 1fr;
}

.hidden {
  display: none;
}

/*
  ==============================
  M Skin (X-inspired)
  ==============================
*/
.page-m {
  --color-bg-canvas: #04080d;
  --color-bg-surface: #0b121b;
  --color-bg-elevated: #101923;
  --color-bg-muted: #131f2e;
  --color-text-primary: #ebf2fb;
  --color-text-secondary: #c3d4e7;
  --color-text-tertiary: #8ea7c1;
  --color-border-default: rgba(142, 167, 193, 0.22);
  --color-border-strong: rgba(142, 167, 193, 0.38);
  --color-primary: var(--m-accent);
  --color-primary-soft: rgba(29, 155, 240, 0.2);
}

.page-m .panel,
.page-m .hub-top,
.page-m .post,
.page-m .video-card,
.page-m .article-card,
.page-m .article-view,
.page-m .detail-card,
.page-m .status,
.page-m .hint,
.page-m .empty,
.page-m .comment,
.page-m .thread-item,
.page-m .welcome,
.page-m .msg,
.page-m .config-card,
.page-m .session-bar {
  box-shadow: none;
}

.page-m #mFeed {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  gap: 0;
}

.page-m #mFeed .post {
  border: 0;
  border-bottom: 1px solid var(--color-border-default);
  border-radius: 0;
  background: transparent;
  padding: var(--space-5);
}

.page-m #mFeed .post:last-child {
  border-bottom: 0;
}

.page-m #mFeed .post:hover {
  background: color-mix(in srgb, var(--color-bg-muted) 56%, transparent);
}

/*
  ==============================
  Mi Skin (Bilibili-inspired)
  ==============================
*/
.page-mi {
  --color-primary: var(--mi-accent);
}

.page-mi .scene-intro-mi {
  background: linear-gradient(145deg, rgba(22, 148, 240, 0.14), rgba(255, 127, 176, 0.1));
}

.page-mi .video-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-mi .video-card {
  background: linear-gradient(180deg, var(--color-bg-surface), color-mix(in srgb, var(--color-bg-surface) 84%, #eef4ff));
}

.page-mi .video-cover {
  aspect-ratio: 16 / 9;
}

.page-mi .video-cover .empty,
.page-mi .video-cover > .empty {
  height: 100%;
  border: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
}

.page-mi .video-card .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.45em * 2);
  font-size: var(--font-size-body);
}

.page-mi .video-card .tag {
  border-color: rgba(22, 148, 240, 0.32);
  background: rgba(22, 148, 240, 0.1);
  color: #165d93;
}

.page-mi .video-card .tag:nth-child(2n) {
  border-color: rgba(255, 127, 176, 0.42);
  background: rgba(255, 127, 176, 0.12);
  color: #9b3460;
}

/*
  ==============================
  Lenny Skin (GitHub-inspired)
  ==============================
*/
.page-lenny {
  --color-primary: var(--lenny-accent);
}

.page-lenny .hub-top,
.page-lenny .panel,
.page-lenny .post,
.page-lenny .video-card,
.page-lenny .article-card,
.page-lenny .article-view,
.page-lenny .detail-card {
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.page-lenny .scene-intro-lenny {
  background: linear-gradient(145deg, rgba(45, 164, 78, 0.14), rgba(45, 164, 78, 0.03));
}

.page-lenny #lennyList .article-card {
  border-left: 3px solid transparent;
}

.page-lenny #lennyList .article-card:hover {
  border-left-color: color-mix(in srgb, var(--lenny-accent) 44%, transparent);
}

.page-lenny #lennyList .article-card.active {
  border-left-color: var(--lenny-accent);
}

.page-lenny #lennyViewerContent {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-bg-muted) 88%, var(--color-bg-surface));
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 1.72;
  white-space: pre-wrap;
  word-break: break-word;
}

/*
  ==============================
  Utilities
  ==============================
*/
.u-hidden { display: none; }
.u-muted { color: var(--color-text-tertiary); }
.u-center { display: grid; place-items: center; }
.u-scroll-x { overflow-x: auto; }
.u-min-hit { min-height: 40px; }

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
  ==============================
  Responsive
  ==============================
*/
@media (min-width: 768px) {
  .hub-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }

  .panel-left {
    grid-column: 1;
  }

  .panel-main {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .panel-right {
    grid-column: 1;
  }

  .auth-page .shell {
    grid-template-columns: 1.1fr minmax(0, 1fr);
    align-items: stretch;
  }
}

@media (min-width: 1024px) {
  .hub-layout {
    grid-template-columns: 250px minmax(0, 1fr) 300px;
  }

  .panel-left,
  .panel-main,
  .panel-right {
    grid-column: auto;
    grid-row: auto;
  }

  .page-m .hub-layout {
    grid-template-columns: 250px minmax(0, 1fr) 320px;
  }

  .page-mi .hub-layout {
    grid-template-columns: 236px minmax(0, 1fr) 300px;
  }

  .page-lenny .hub-layout {
    grid-template-columns: 250px minmax(0, 1fr) 330px;
  }

  .openclaw-page .chat-shell {
    width: min(1360px, calc(100% - 24px));
  }
}

@media (min-width: 1280px) {
  .home-page .portal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-mi .video-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .openclaw-page {
    overflow: auto;
  }

  .openclaw-page .chat-shell {
    width: calc(100% - 14px);
    margin: 7px auto;
    min-height: calc(100vh - 14px);
    height: auto;
    grid-template-columns: 1fr;
  }

  .openclaw-page .sidebar {
    grid-template-rows: auto auto auto auto;
  }

  .openclaw-page .thread-list {
    max-height: 220px;
  }
}

@media (max-width: 767px) {
  .container,
  .hub-shell,
  .shell {
    width: 96vw;
    margin: var(--space-3) auto var(--space-6);
  }

  .top,
  .hub-top,
  .panel,
  .hero,
  .section,
  .foot,
  .article-view,
  .detail-card {
    padding: var(--space-4);
  }

  .home-page .hero {
    padding: var(--space-5);
  }

  .home-page .portal-grid {
    grid-template-columns: 1fr;
  }

  .home-page .portal {
    min-height: auto;
    grid-template-rows: auto;
  }

  .video-grid {
    grid-template-columns: 1fr;
  }

  .tabs {
    grid-template-columns: 1fr;
  }

  .comment-form {
    grid-template-columns: 1fr;
  }

  .tool-row {
    grid-template-columns: 1fr;
  }

  .actions button,
  .actions a,
  .side-links a,
  .hub-nav a,
  .hub-nav button,
  .nav a,
  .nav button,
  .side-menu button,
  .btn,
  .button,
  .action-btn,
  .cta,
  .mini-link {
    width: 100%;
    justify-content: center;
  }

  .actions .action-more {
    width: 100%;
  }

  .actions .action-more > summary {
    width: 100%;
    justify-content: center;
  }

  .actions .action-more-menu {
    position: static;
    margin-top: var(--space-2);
    box-shadow: none;
    background: var(--color-bg-muted);
  }

  .hub-page .hub-shell {
    padding-bottom: 82px;
  }

  .mobile-quickbar {
    display: flex;
  }

  .openclaw-page .topbar,
  .openclaw-page .chat-feed,
  .openclaw-page .composer,
  .openclaw-page .sidebar {
    padding: var(--space-4);
  }
}

@media (max-width: 1023px) {
  .community-gateway-page .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-page .top {
    position: static;
    display: grid;
    gap: var(--space-3);
  }
}

@media (min-width: 1024px) {
  .admin-page .panels {
    grid-template-columns: 1fr 1fr;
  }

  .profile-page .top {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

@media (max-width: 767px) {
  .community-gateway-page .shell,
  .profile-page .shell,
  .admin-page .container {
    width: 96vw;
  }

  .community-gateway-page .hero,
  .community-gateway-page .card,
  .admin-page .card {
    padding: var(--space-3);
  }

  .community-gateway-page .grid {
    grid-template-columns: 1fr;
  }

  .profile-page .top .nav {
    display: grid;
    gap: var(--space-2);
  }

  .profile-page .top .nav .btn {
    width: 100%;
    justify-content: center;
  }

  .admin-page .actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .admin-page .actions button,
  .admin-page .actions .link-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 1023px) {
  .playground-stage {
    min-height: 212px;
  }
}

@media (max-width: 767px) {
  .hero-playground {
    padding: var(--space-3);
  }

  .playground-stage {
    min-height: 198px;
  }

  .playground-hud {
    left: var(--space-2);
    right: var(--space-2);
    justify-content: flex-start;
  }

  .playground-start {
    left: 50%;
    bottom: var(--space-2);
    transform: translateX(-50%);
    width: calc(100% - 32px);
    justify-content: center;
  }

  .playground-start:hover {
    transform: translateX(-50%);
  }
}

/*
  ==============================
  Apple Minimal Refresh (Global)
  ==============================
*/
:root {
  --color-bg-canvas: #f5f5f7;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-muted: #f2f2f5;
  --color-bg-subtle: rgba(29, 29, 31, 0.04);

  --color-text-primary: #1d1d1f;
  --color-text-secondary: #424245;
  --color-text-tertiary: #6e6e73;
  --color-text-inverse: #f5f5f7;

  --color-border-default: rgba(29, 29, 31, 0.12);
  --color-border-strong: rgba(29, 29, 31, 0.2);

  --color-primary: #0071e3;
  --color-primary-hover: #0062c4;
  --color-primary-active: #0056ad;
  --color-primary-soft: rgba(0, 113, 227, 0.12);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 46px rgba(15, 23, 42, 0.12);
  --focus-ring: 0 0 0 3px rgba(0, 113, 227, 0.24);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --m-accent: #0a84ff;
  --mi-accent: #5e5ce6;
  --mi-accent-alt: #64d2ff;
  --lenny-accent: #34c759;
}

[data-theme="dark"] {
  --color-bg-canvas: #111113;
  --color-bg-surface: #1c1c1e;
  --color-bg-elevated: #232326;
  --color-bg-muted: #2c2c2e;
  --color-bg-subtle: rgba(245, 245, 247, 0.06);

  --color-text-primary: #f5f5f7;
  --color-text-secondary: #d3d3d8;
  --color-text-tertiary: #9a9aa2;
  --color-text-inverse: #111113;

  --color-border-default: rgba(245, 245, 247, 0.16);
  --color-border-strong: rgba(245, 245, 247, 0.28);

  --color-primary: #0a84ff;
  --color-primary-hover: #3d9dff;
  --color-primary-active: #0070df;
  --color-primary-soft: rgba(10, 132, 255, 0.2);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.42);
  --focus-ring: 0 0 0 3px rgba(10, 132, 255, 0.35);
}

body.app-page {
  background:
    radial-gradient(1100px 520px at 100% -20%, rgba(0, 113, 227, 0.08), transparent 62%),
    radial-gradient(860px 420px at -10% 0%, rgba(255, 255, 255, 0.78), transparent 58%),
    linear-gradient(180deg, #f5f5f7 0%, #f4f4f6 42%, #f6f6f8 100%);
}

.top,
.hub-top {
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg-surface) 82%, transparent);
  backdrop-filter: blur(16px);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--color-border-default) 70%, transparent),
    0 10px 28px rgba(15, 23, 42, 0.06);
}

.panel,
.hero,
.section,
.foot,
.article-view,
.detail-card,
.portal {
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg-surface) 95%, transparent);
  box-shadow: var(--shadow-sm);
}

.button,
.btn,
.mini-btn,
.status-link,
.action-btn,
.cta,
.mini-link,
.hub-nav a,
.hub-nav button,
.nav a,
.nav button,
.side-menu button,
.actions button,
.actions a,
.side-links a,
.comment-form button,
.retry-btn,
.detail-close,
.thread-item {
  border-radius: 12px;
  min-height: 38px;
}

.hub-nav .pill,
.nav .entry,
.home-page .hero-actions a,
.home-page .creator-actions a,
.home-page .cta-band-actions a,
.home-page .creator-chip,
.home-page .hero-points span,
.home-page .portal .type,
.playground-start,
.playground-hud span {
  border-radius: 999px;
}

.hub-nav .pill.is-current::after {
  background: color-mix(in srgb, var(--color-bg-surface) 94%, var(--color-primary));
}

.home-page .nav .entry {
  border: 1px solid var(--color-border-default);
  box-shadow: none;
  background: color-mix(in srgb, var(--color-bg-surface) 92%, var(--color-bg-muted));
  color: var(--color-text-secondary);
}

.home-page .nav .entry.m {
  border-color: color-mix(in srgb, var(--m-accent) 42%, var(--color-border-default));
  color: color-mix(in srgb, var(--m-accent) 86%, var(--color-text-primary));
  background: color-mix(in srgb, var(--m-accent) 12%, var(--color-bg-surface));
}

.home-page .nav .entry.mi {
  border-color: color-mix(in srgb, var(--mi-accent) 40%, var(--color-border-default));
  color: color-mix(in srgb, var(--mi-accent) 84%, var(--color-text-primary));
  background: color-mix(in srgb, var(--mi-accent) 12%, var(--color-bg-surface));
}

.home-page .nav .entry.lenny {
  border-color: color-mix(in srgb, var(--lenny-accent) 40%, var(--color-border-default));
  color: color-mix(in srgb, var(--lenny-accent) 84%, var(--color-text-primary));
  background: color-mix(in srgb, var(--lenny-accent) 12%, var(--color-bg-surface));
}

.home-page .hero,
.home-page .trust-strip,
.home-page .creator-fit,
.home-page .cta-band,
.community-gateway-page .hero,
.auth-page .hero {
  background:
    linear-gradient(
      152deg,
      color-mix(in srgb, var(--color-primary-soft) 26%, var(--color-bg-surface)),
      color-mix(in srgb, var(--color-bg-surface) 92%, var(--color-bg-muted))
    );
}

.home-page .hero h1 span {
  background: linear-gradient(112deg, #0066cc, #4d7fb5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-page .metric-card,
.home-page .launch-card,
.home-page .signal-card,
.home-page .value-card,
.home-page .quote-card,
.home-page .step,
.community-gateway-page .card,
.profile-page .card,
.admin-page .card {
  background: color-mix(in srgb, var(--color-bg-surface) 94%, var(--color-bg-muted));
}

.hero-playground {
  background: linear-gradient(160deg, rgba(0, 113, 227, 0.09), var(--color-bg-surface));
}

.playground-stage {
  border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border-default));
  background:
    radial-gradient(860px 220px at 70% -30%, rgba(100, 180, 255, 0.18), transparent 58%),
    linear-gradient(165deg, #0f233d, #163257);
}

.page-m {
  --color-primary: var(--m-accent);
  --color-primary-soft: rgba(10, 132, 255, 0.14);
}

.page-mi {
  --color-primary: var(--mi-accent);
  --color-primary-soft: rgba(94, 92, 230, 0.14);
}

.page-lenny {
  --color-primary: var(--lenny-accent);
  --color-primary-soft: rgba(52, 199, 89, 0.14);
}

.page-m,
.page-mi,
.page-lenny {
  --color-bg-canvas: #f5f5f7;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-muted: #f2f2f5;
  --color-text-primary: #1d1d1f;
  --color-text-secondary: #424245;
  --color-text-tertiary: #6e6e73;
  --color-border-default: rgba(29, 29, 31, 0.12);
  --color-border-strong: rgba(29, 29, 31, 0.2);
}

.page-m .panel,
.page-mi .panel,
.page-lenny .panel,
.page-m .hub-top,
.page-mi .hub-top,
.page-lenny .hub-top {
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
}

.page-m .scene-intro,
.page-mi .scene-intro,
.page-lenny .scene-intro {
  border-radius: var(--radius-lg);
}

.openclaw-page {
  background:
    radial-gradient(980px 420px at 94% -8%, rgba(0, 113, 227, 0.12), transparent 62%),
    radial-gradient(860px 420px at -10% 116%, rgba(0, 113, 227, 0.06), transparent 64%),
    var(--color-bg-canvas);
}

.openclaw-page .sidebar,
.openclaw-page .main {
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg-surface) 90%, transparent);
  backdrop-filter: blur(14px);
}

.openclaw-page .chat-feed {
  background: color-mix(in srgb, var(--color-bg-muted) 56%, transparent);
}

.openclaw-page .msg.user {
  border-color: color-mix(in srgb, var(--color-primary) 54%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-primary-soft) 58%, var(--color-bg-surface));
}

.openclaw-page .composer {
  background: color-mix(in srgb, var(--color-bg-surface) 94%, transparent);
}

.apple-variant-toggle {
  white-space: nowrap;
}

body.app-page[data-apple-variant="b"] {
  --color-bg-canvas: #fbfbfd;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-muted: #f5f5f7;
  --color-bg-subtle: rgba(29, 29, 31, 0.03);

  --color-text-primary: #1d1d1f;
  --color-text-secondary: #424245;
  --color-text-tertiary: #6e6e73;

  --color-border-default: rgba(29, 29, 31, 0.1);
  --color-border-strong: rgba(29, 29, 31, 0.16);

  --color-primary: #0071e3;
  --color-primary-hover: #0068d1;
  --color-primary-active: #005cba;
  --color-primary-soft: rgba(0, 113, 227, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.11);

  --font-family-base:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "SF Pro Display",
    "Helvetica Neue",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
}

body.app-page[data-apple-variant="b"] {
  background:
    radial-gradient(980px 480px at 100% -18%, rgba(0, 113, 227, 0.07), transparent 60%),
    radial-gradient(760px 420px at -10% 2%, rgba(255, 255, 255, 0.86), transparent 56%),
    linear-gradient(180deg, #fbfbfd 0%, #f8f8fa 100%);
}

body.app-page[data-apple-variant="b"] h1,
body.app-page[data-apple-variant="b"] h2,
body.app-page[data-apple-variant="b"] h3 {
  letter-spacing: -0.02em;
}

body.app-page[data-apple-variant="b"] .top,
body.app-page[data-apple-variant="b"] .hub-top {
  background: color-mix(in srgb, var(--color-bg-surface) 78%, transparent);
  border-color: rgba(29, 29, 31, 0.08);
  backdrop-filter: blur(20px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65),
    0 14px 30px rgba(15, 23, 42, 0.07);
}

body.app-page[data-apple-variant="b"] .panel,
body.app-page[data-apple-variant="b"] .hero,
body.app-page[data-apple-variant="b"] .section,
body.app-page[data-apple-variant="b"] .foot,
body.app-page[data-apple-variant="b"] .article-view,
body.app-page[data-apple-variant="b"] .detail-card,
body.app-page[data-apple-variant="b"] .portal,
body.app-page[data-apple-variant="b"] .card {
  border-color: rgba(29, 29, 31, 0.08);
  box-shadow: var(--shadow-sm);
}

body.app-page[data-apple-variant="b"] .button--primary,
body.app-page[data-apple-variant="b"] .btn.primary,
body.app-page[data-apple-variant="b"] .action-btn,
body.app-page[data-apple-variant="b"] .cta,
body.app-page[data-apple-variant="b"] .hero-actions .ai-primary,
body.app-page[data-apple-variant="b"] .hub-nav .pill.is-current,
body.app-page[data-apple-variant="b"] .nav .entry.ai {
  --button-bg: #1d1d1f;
  --button-bg-hover: #2a2a2c;
  --button-bg-active: #111113;
  --button-border: #1d1d1f;
}

body.app-page.auth-page[data-apple-variant="b"] .shell {
  width: min(1200px, 95vw);
  gap: var(--space-5);
}

body.app-page.auth-page[data-apple-variant="b"] .hero,
body.app-page.auth-page[data-apple-variant="b"] .panel {
  border-radius: 30px;
  border-color: rgba(29, 29, 31, 0.07);
  box-shadow: var(--shadow-md);
}

body.app-page.auth-page[data-apple-variant="b"] .hero {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(250, 250, 252, 0.96));
}

body.app-page.auth-page[data-apple-variant="b"] .hero::after {
  background:
    radial-gradient(circle at 30% 30%, rgba(0, 113, 227, 0.24), transparent 72%);
  filter: blur(2px);
}

body.app-page.auth-page[data-apple-variant="b"] .badge {
  border-color: rgba(29, 29, 31, 0.12);
  background: rgba(255, 255, 255, 0.8);
  color: #4b4b52;
}

body.app-page.auth-page[data-apple-variant="b"] h1 {
  font-size: clamp(42px, 6vw, 70px);
  max-width: 11.5ch;
}

body.app-page.auth-page[data-apple-variant="b"] .sub {
  font-size: clamp(16px, 1.8vw, 20px);
  color: #4b4b52;
}

body.app-page.auth-page[data-apple-variant="b"] .auth-hero-kpis article {
  border-color: rgba(29, 29, 31, 0.08);
  background: rgba(255, 255, 255, 0.9);
}

body.app-page.auth-page[data-apple-variant="b"] .tabs {
  border-color: rgba(29, 29, 31, 0.1);
  background: #f3f3f6;
}

body.app-page.auth-page[data-apple-variant="b"] .tab {
  color: #6a6a71;
}

body.app-page.auth-page[data-apple-variant="b"] .tab.active,
body.app-page.auth-page[data-apple-variant="b"] .tab[aria-selected="true"] {
  border-color: rgba(29, 29, 31, 0.1);
  background: #ffffff;
  color: #1d1d1f;
}

body.app-page.auth-page[data-apple-variant="b"] .field input {
  border-color: rgba(29, 29, 31, 0.11);
  background: #ffffff;
}

body.app-page.auth-page[data-apple-variant="b"] .field input:hover {
  border-color: rgba(29, 29, 31, 0.18);
}

body.app-page.auth-page[data-apple-variant="b"] .field input:focus-visible {
  border-color: rgba(0, 102, 204, 0.62);
  box-shadow:
    0 0 0 4px rgba(0, 102, 204, 0.16),
    0 16px 30px rgba(0, 102, 204, 0.14);
}

body.app-page.auth-page[data-apple-variant="b"] .status {
  border-color: rgba(29, 29, 31, 0.1);
  background: rgba(255, 255, 255, 0.88);
}

body.app-page.auth-page[data-apple-variant="b"] .auth-mode-badge {
  border-color: rgba(29, 29, 31, 0.14);
  background: rgba(255, 255, 255, 0.88);
  color: #2f2f35;
}

body.app-page.auth-page[data-apple-variant="b"] .flow-tip {
  border-color: rgba(29, 29, 31, 0.09);
  background: rgba(255, 255, 255, 0.86);
  color: #56565d;
}

body.app-page.auth-page[data-apple-variant="b"] .link-btn {
  color: #4a4a51;
  text-decoration-color: rgba(29, 29, 31, 0.42);
}

body.app-page.auth-page[data-apple-variant="b"] .link-btn:hover {
  color: #1d1d1f;
}

body.app-page.auth-page[data-apple-variant="b"] .link-btn.is-active {
  color: #0066cc;
  text-decoration-color: rgba(0, 102, 204, 0.75);
}

body.app-page.auth-page[data-apple-variant="b"] .actions .btn:hover {
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
}

body.app-page.auth-page[data-apple-variant="b"] .actions .btn.primary:hover {
  box-shadow: 0 16px 30px rgba(0, 102, 204, 0.24);
}

body.app-page.auth-page[data-apple-variant="b"] .panel[data-auth-mode="register"] {
  border-color: rgba(0, 102, 204, 0.22);
  box-shadow:
    0 0 0 1px rgba(0, 102, 204, 0.13),
    var(--shadow-md);
}

body.app-page.auth-page[data-apple-variant="b"] .panel[data-auth-mode="register"] .auth-mode-badge {
  border-color: rgba(0, 102, 204, 0.28);
  background: rgba(0, 102, 204, 0.09);
  color: #0050a6;
}

body.app-page.auth-page[data-apple-variant="b"] .panel[data-auth-mode="reset"] {
  border-color: rgba(204, 127, 15, 0.24);
  box-shadow:
    0 0 0 1px rgba(204, 127, 15, 0.12),
    var(--shadow-md);
}

body.app-page.auth-page[data-apple-variant="b"] .panel[data-auth-mode="reset"] .auth-mode-badge {
  border-color: rgba(204, 127, 15, 0.34);
  background: rgba(204, 127, 15, 0.11);
  color: #9f5f00;
}

@media (prefers-reduced-motion: reduce) {
  .auth-page .field input,
  .auth-page .tab,
  .auth-page .btn,
  .auth-page .link-btn {
    transition: none;
    transform: none;
  }
}

body.app-page[data-apple-variant="b"] .home-page .home-shell {
  gap: var(--space-5);
}

html[data-apple-variant="b"].motion-ready [data-reveal] {
  transform: translateY(10px) scale(0.995);
  filter: none;
}

html[data-apple-variant="b"].motion-ready [data-reveal].is-visible {
  transform: translateY(0) scale(1);
}

body.app-page[data-apple-variant="b"] .home-page .hero {
  padding: clamp(36px, 5vw, 84px);
  border-radius: 34px;
  background: linear-gradient(180deg, #ffffff 0%, #f9f9fb 100%);
  box-shadow: var(--shadow-md);
}

body.app-page[data-apple-variant="b"] .home-page .home-hero-grid {
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

body.app-page[data-apple-variant="b"] .home-page .hero-main {
  justify-items: center;
  text-align: center;
}

body.app-page[data-apple-variant="b"] .home-page .hero h1 {
  max-width: 12ch;
  font-size: clamp(44px, 8vw, 84px);
  line-height: 1.02;
}

body.app-page[data-apple-variant="b"] .home-page .hero h1 span {
  background: none;
  color: #4d4d52;
}

body.app-page[data-apple-variant="b"] .home-page .hero p {
  max-width: 62ch;
  text-align: center;
  font-size: clamp(17px, 2vw, 22px);
  color: #4a4a50;
}

body.app-page[data-apple-variant="b"] .home-page .hero-actions,
body.app-page[data-apple-variant="b"] .home-page .hero-points,
body.app-page[data-apple-variant="b"] .home-page .creator-actions,
body.app-page[data-apple-variant="b"] .home-page .cta-band-actions {
  justify-content: center;
}

body.app-page[data-apple-variant="b"] .home-page .metric-grid {
  width: min(940px, 100%);
  margin-inline: auto;
}

body.app-page[data-apple-variant="b"] .home-page .hero::after,
body.app-page[data-apple-variant="b"] .community-gateway-page .hero::after {
  display: none;
}

body.app-page[data-apple-variant="b"] .home-page .hero-side {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

body.app-page[data-apple-variant="b"] .home-page .launch-card,
body.app-page[data-apple-variant="b"] .home-page .signal-card {
  border-radius: 22px;
  background: #ffffff;
}

body.app-page[data-apple-variant="b"] .home-page .section-head {
  justify-items: center;
  text-align: center;
}

body.app-page[data-apple-variant="b"] .home-page .section-head p {
  max-width: 64ch;
  text-align: center;
}

body.app-page[data-apple-variant="b"] .home-page .nav .entry,
body.app-page[data-apple-variant="b"] .home-page .nav .entry.m,
body.app-page[data-apple-variant="b"] .home-page .nav .entry.mi,
body.app-page[data-apple-variant="b"] .home-page .nav .entry.lenny {
  background: color-mix(in srgb, #ffffff 92%, var(--color-bg-muted));
  color: #343438;
  border-color: rgba(29, 29, 31, 0.1);
  box-shadow: none;
}

body.app-page[data-apple-variant="b"] .home-page .portal {
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fafafc 100%);
}

body.app-page[data-apple-variant="b"] .home-page .portal:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

body.app-page[data-apple-variant="b"] .home-page .portal,
body.app-page[data-apple-variant="b"] .community-gateway-page .card {
  transform: none !important;
}

body.app-page[data-apple-variant="b"] .home-page .portal.is-focused,
body.app-page[data-apple-variant="b"] .video-card.active,
body.app-page[data-apple-variant="b"] .article-card.active,
body.app-page[data-apple-variant="b"] .thread-item.active,
body.app-page[data-apple-variant="b"] .side-menu button.active {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-primary) 34%, transparent),
    var(--shadow-md);
}

body.app-page.page-m[data-apple-variant="b"],
body.app-page.page-mi[data-apple-variant="b"],
body.app-page.page-lenny[data-apple-variant="b"] {
  --color-bg-canvas: #fbfbfd;
  --color-bg-surface: #ffffff;
  --color-bg-muted: #f5f5f7;
  --color-text-primary: #1d1d1f;
  --color-text-secondary: #424245;
  --color-text-tertiary: #6e6e73;
  --color-border-default: rgba(29, 29, 31, 0.1);
}

body.app-page[data-apple-variant="b"] .scene-intro {
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f8fa 100%);
}

body.app-page.community-gateway-page[data-apple-variant="b"] .hero,
body.app-page.community-gateway-page[data-apple-variant="b"] .section {
  border-radius: 28px;
}

body.app-page.community-gateway-page[data-apple-variant="b"] .hero {
  padding: clamp(32px, 5vw, 68px);
}

body.app-page.community-gateway-page[data-apple-variant="b"] .hero h1,
body.app-page.community-gateway-page[data-apple-variant="b"] .hero .sub {
  max-width: 42ch;
}

body.app-page.community-gateway-page[data-apple-variant="b"] .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.app-page.openclaw-page[data-apple-variant="b"] .sidebar,
body.app-page.openclaw-page[data-apple-variant="b"] .main {
  background: color-mix(in srgb, #ffffff 90%, transparent);
}

body.app-page.openclaw-page[data-apple-variant="b"] {
  background:
    radial-gradient(980px 460px at 92% -10%, rgba(0, 113, 227, 0.1), transparent 62%),
    radial-gradient(860px 420px at -10% 116%, rgba(255, 255, 255, 0.7), transparent 64%),
    var(--color-bg-canvas);
}

body.app-page.openclaw-page[data-apple-variant="b"] .chat-feed {
  background: color-mix(in srgb, var(--color-bg-muted) 66%, transparent);
}

body.app-page.openclaw-page[data-apple-variant="b"] .msg.user {
  border-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-primary-soft) 62%, #ffffff);
}

@media (max-width: 1023px) {
  body.app-page[data-apple-variant="b"] .home-page .hero-side {
    grid-template-columns: 1fr;
  }

  body.app-page[data-apple-variant="b"] .home-page .hero {
    padding: var(--space-5);
  }

  body.app-page.auth-page[data-apple-variant="b"] .shell {
    grid-template-columns: 1fr;
  }

  body.app-page.auth-page[data-apple-variant="b"] h1 {
    font-size: clamp(36px, 8vw, 48px);
  }

  body.app-page.auth-page[data-apple-variant="b"] .auth-hero-kpis {
    grid-template-columns: 1fr;
  }

  body.app-page.community-gateway-page[data-apple-variant="b"] .grid {
    grid-template-columns: 1fr;
  }
}