/* =============================================
   CAPYKA — Retro Paper Design System
   Warm paper, black outlines, hard offset shadows.
   ============================================= */

@import url('retro-global.css?v=20260615-retro-v10');
@import url('app-shell.css?v=20260615-retro-v10');
@import url('design-system.css?v=20260615-retro-v10');
@import url('chat-page.css?v=20260615-retro-v10');
@import url('admin-page.css?v=20260615-retro-v10');
@import url('news-page.css?v=20260615-retro-v10');

/* ───────── Design Tokens ───────── */
:root {
  color-scheme: light;

  --bg-page: #f7f3ea;
  --bg-card: #fffdf7;
  --bg-soft: #f2ecdf;
  --text-main: #202124;
  --text-secondary: #6f6a60;
  --text-muted: #9a9488;
  --border-main: #d8d1c4;
  --border-strong: #202124;
  --shadow-strong: #202124;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --space-card: 24px;
  --space-section: 32px;
  --space-page: 32px;
  --bottom-bar-height: 56px;

  --paper-bg: var(--bg-page);
  --paper-bg-alt: var(--bg-soft);
  --ink: var(--text-main);
  --ink-muted: var(--text-secondary);
  --border-retro: var(--border-main);

  --bg: var(--bg-page);
  --bg2: var(--bg-soft);
  --surface: var(--bg-card);
  --surface2: var(--bg-soft);
  --card: var(--bg-card);
  --card-hov: var(--bg-soft);

  --ink-soft: var(--text-main);
  --border: var(--border-main);
  --border-hov: var(--border-strong);
  --rail-border: var(--border-main);

  --amber: var(--bg-soft);
  --amber-deep: var(--border-strong);
  --amber-soft: var(--bg-page);
  --pink: var(--text-secondary);
  --coral: var(--text-secondary);
  --sky: var(--bg-soft);
  --sky-deep: var(--text-main);
  --mint: var(--bg-soft);
  --lilac: var(--bg-soft);

  --purple: var(--text-main);
  --purple2: var(--text-main);
  --cyan: var(--text-secondary);

  --t1: var(--text-main);
  --t2: var(--text-secondary);
  --t3: var(--text-muted);
  --t4: #b8b2a6;

  --r: var(--radius-sm);
  --r2: var(--radius-md);
  --r3: var(--radius-lg);
  --radius-card: var(--radius-lg);
  --radius-btn: var(--radius-sm);
  --radius-tag: 999px;

  --font-head: 'Noto Sans SC', 'Inter', sans-serif;
  --font-body: 'Noto Sans SC', 'Inter', sans-serif;
  --font-mono: 'Inter', ui-monospace, monospace;

  --nav-h: 64px;
  --side-w: 240px;
  --page-max: 1240px;

  --shadow-retro: none;
  --shadow-retro-hover: 4px 5px 0 var(--shadow-strong);
  --shadow-retro-active: 1px 2px 0 var(--shadow-strong);
  --shadow: none;
  --shadow2: none;
  --shadow3: none;
  --shadow-hov: var(--shadow-retro-hover);
  --glow: none;
  --glow2: none;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.32s;
  --duration-slow: 0.48s;
}

html {
  scroll-behavior: smooth;
}

.capykaBootShell {
  min-height: 100dvh;
  background: var(--paper-bg);
}

@media (prefers-reduced-motion: no-preference) {
  .capykaBootShell:empty::after {
    content: '';
    position: fixed;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 999px;
    border: 3px solid rgba(32, 33, 36, 0.12);
    border-top-color: #202124;
    animation: capykaBootSpin 0.85s var(--ease-smooth) infinite;
  }
}

:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .directoryPrimaryNavItem.active,
:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .directoryCategoryItem.active {
  background: var(--text-main) !important;
  color: var(--bg-page) !important;
}

:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .directoryPrimaryNavItem.active span,
:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .directoryPrimaryNavItem.active strong,
:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .directoryPrimaryNavItem.active svg,
:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .directoryCategoryItem.active span,
:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .directoryCategoryItem.active svg {
  background: transparent !important;
  color: var(--bg-page) !important;
  stroke: currentColor !important;
}

@keyframes capykaBootSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .capykaBootShell:empty::after { animation: none; border-top-color: rgba(123, 97, 255, 0.35); }
}

.capykaBootFailure {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--paper-bg);
  color: var(--text-main);
}

.capykaBootFailure > div {
  width: min(420px, 100%);
  padding: 28px;
  border-radius: 18px;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px var(--border-main);
  text-align: center;
}

.capykaBootFailure strong {
  display: block;
  font: 600 20px/1.3 var(--font-display);
}

.capykaBootFailure p {
  margin: 10px 0 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

.capykaBootFailure button {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--text-main);
  color: var(--bg-card);
  font-weight: 600;
  cursor: pointer;
}

.directoryPage {
  --dir-bg: var(--bg-soft);
  --dir-line: #e8edf5;
  --dir-muted: #8b96a8;
  --dir-text: #111827;
  --dir-soft: var(--bg-soft, #f2ecdf);
  position: relative;
  color: var(--dir-text);
  background: var(--bg-page);
}

/* 只有非 app-shell 的旧页面才用旧 100vh grid；统一壳用 app-shell 的 grid */
body.retroSite .directoryPage:not(.app-shell):not(.chatUnifiedPage):not(.chatWorkbenchPage) {
  height: 100vh;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr) 420px;
  overflow: hidden;
}
.directoryRail {
  height: 100%;
  min-height: 0;
  padding: 18px 14px 82px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: rgba(255,255,255,.96);
  border-right: 1px solid var(--dir-line);
}
.directoryRail::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.directoryPanel {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--dir-line);
  border-radius: 16px;
  box-shadow: 0 18px 52px rgba(15,23,42,.035);
}
.directoryPrimaryNav {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}
.directoryPrimaryNavItem,
.directoryAllTools,
.directorySubmitEntry {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-radius: 10px;
  background: #fff;
  color: var(--dir-text);
  border: 1px solid var(--dir-line);
  font-weight: 650;
  position: relative;
  overflow: hidden;
}
.directoryPrimaryNavItem::after {
  content: '';
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: color-mix(in oklch, var(--item-color, #ff8a1c) 18%, transparent);
  transform: rotate(35deg);
}
.directoryPrimaryNavItem span,
.directoryAllTools svg,
.directorySubmitEntry svg {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--item-color, #ff8a1c);
  background: color-mix(in oklch, var(--item-color, #ff8a1c) 13%, #fff);
  flex: 0 0 auto;
}
.directoryPrimaryNavItem strong {
  font-size: 16px;
  font-weight: 650;
  position: relative;
  z-index: 1;
}
.directoryBrand {
  width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: color-mix(in oklch, #ff8a1c 10%, #fff);
  color: #ff7a1a;
  font: 700 18px/1 var(--font-head);
}
.directoryBrand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
}
.directoryPrimaryNavItem.active {
  border-color: color-mix(in oklch, var(--item-color, #ff8a1c) 55%, var(--dir-line));
  box-shadow: 0 12px 32px color-mix(in oklch, var(--item-color, #ff8a1c) 14%, transparent);
}
.directoryAllTools {
  width: 100%;
  border: 0;
  margin-bottom: 14px;
  background: color-mix(in oklch, #ff8a1c 10%, #fff);
  color: #ff7a1a;
}
.directoryCategoryTitle {
  padding: 13px 12px 8px;
  color: var(--dir-muted);
  font-size: 13px;
  font-weight: 650;
}
.directoryCategoryToggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
}
.directoryCategoryList {
  display: grid;
  gap: 2px;
  padding: 0 2px;
}
.directoryCategoryItem {
  width: 100%;
  height: 43px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #394150;
  cursor: pointer;
  text-align: left;
  font: 650 15px/1.2 var(--font-body);
}
.directoryCategoryItem svg {
  color: #64748b;
  flex: 0 0 28px;
}
.directoryCategoryItem span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.directoryCategoryItem:hover,
.directoryCategoryItem.active {
  background: color-mix(in oklch, var(--item-color, #ff8a1c) 9%, #fff);
  color: var(--dir-text);
}
.directoryCategoryItem:hover svg,
.directoryCategoryItem.active svg {
  color: #ff8a1c;
}
.directorySubmitEntry {
  width: calc(100% - 8px);
  margin: 28px 4px 0;
  justify-content: center;
  border-color: var(--dir-line);
  background: #fff;
  cursor: pointer;
  font: 650 15px/1 var(--font-body);
}
.directorySubmitUpload {
  height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid var(--dir-line);
  border-radius: 10px;
  color: var(--dir-muted);
  cursor: pointer;
  font: 650 14px/1 var(--font-body);
}
.directorySubmitUpload input {
  display: none;
}
.directoryCaptchaRow {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: center;
}
.directoryCaptchaRow span,
.directoryCaptchaRow button {
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dir-line);
  border-radius: 10px;
  background: var(--dir-soft);
  color: var(--dir-text);
  font: 700 15px/1 var(--font-mono);
}
.directoryCaptchaRow button {
  cursor: pointer;
}
.helpContentStack {
  display: grid;
  gap: 22px;
}
.helpQuickLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}
.helpQuickLinks button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--dir-line);
  border-radius: 999px;
  background: #fff;
  color: #596376;
  cursor: pointer;
  font: 650 13px/1 var(--font-body);
}
.helpHeroPanel .directoryBackButton {
  margin-bottom: 20px;
}
.helpHeroPanel .directorySearchWrap button {
  border: 0;
  background: transparent;
  color: #8b96a8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.helpCategoryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.helpCategoryGrid button {
  min-height: 126px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--dir-line);
  border-radius: 12px;
  background: #fff;
  color: #111827;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
}
.helpCategoryGrid svg {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 10px;
  color: var(--item-color, #ff8a1c);
  background: color-mix(in oklch, var(--item-color, #ff8a1c) 12%, #fff);
}
.helpCategoryGrid strong {
  display: block;
  font-size: 15px;
  font-weight: 650;
}
.helpCategoryGrid em {
  display: block;
  margin-top: 5px;
  color: var(--dir-muted);
  font: 600 12px/1 var(--font-mono);
}
.helpCategoryGrid p {
  grid-column: 1 / -1;
  margin: 0;
  color: #596376;
  font-size: 13px;
  line-height: 1.55;
}
.helpArticleRows {
  display: grid;
  gap: 8px;
}
.helpStatePanel {
  color: #596376;
  font-weight: 650;
}
.helpInlineSupport {
  display: none;
  gap: 22px;
}
.helpSupportCard {
  padding: 20px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1) 8%, transparent);
  text-align: center;
}
.helpSupportForm {
  display: grid;
  gap: 10px;
  text-align: left;
}
.helpSupportFormRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.helpSupportForm label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--t2);
  font-size: 12px;
  font-weight: 600;
}
.helpSupportForm input,
.helpSupportForm textarea {
  width: 100%;
  border: 0;
  border-radius: 9px;
  background: var(--surface);
  color: var(--t1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1) 12%, transparent);
  font: 500 13px/1.5 var(--font-body);
  outline: 0;
}
.helpSupportForm input {
  height: 38px;
  padding: 0 11px;
}
.helpSupportForm textarea {
  min-height: 96px;
  padding: 9px 11px;
  resize: vertical;
}
.helpSupportForm input:focus,
.helpSupportForm textarea:focus {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--amber) 72%, #000 8%), 0 0 0 3px color-mix(in srgb, var(--amber) 20%, transparent);
}
.helpSupportActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.helpSupportStatus {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.helpSupportStatus.success {
  background: color-mix(in srgb, #16a34a 12%, transparent);
  color: #15803d;
}
.helpSupportStatus.error {
  background: color-mix(in srgb, #dc2626 10%, transparent);
  color: #b91c1c;
}
@media (max-width: 560px) {
  .helpSupportFormRow {
    grid-template-columns: 1fr;
  }
}
.authOverlay {
  background: rgba(32, 33, 36, 0.42) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.authCard {
  border: 1px solid var(--border-main) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--bg-card) !important;
  box-shadow: none !important;
}
.authCard .authTabs {
  padding: 4px;
  border: 1px solid var(--border-main);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.authCard .authTabs .tab {
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  box-shadow: none;
}
.authCard .authTabs .tab.active {
  background: var(--text-main);
  color: var(--bg-card);
  box-shadow: none;
}
.authCard .authInput {
  border: 1px solid var(--border-main);
  background: var(--bg-card);
  box-shadow: none;
}
.authCard .authInput:focus {
  border-color: var(--border-strong);
  box-shadow: none;
  outline: none;
}
.authCard .authProviderButton {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-main) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}
.authCard .authSubmit {
  border: 1px solid var(--border-strong) !important;
  background: var(--text-main) !important;
  color: var(--bg-card) !important;
  box-shadow: none !important;
}
.authCard .authTextAction {
  color: var(--text-main) !important;
}
.authLegalLinks {
  margin: 14px 0 0;
  color: var(--t3);
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
}
.authLegalLinks a {
  margin: 0 4px;
  color: var(--text-main);
  font-weight: 600;
  text-decoration: none;
}
.authLegalLinks a:hover {
  text-decoration: underline;
}
.authCloseButton {
  border: 1px solid var(--border-main) !important;
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}
.directoryMain,
.directoryAside {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.directoryMain {
  display: grid;
  align-content: start;
  gap: 22px;
  padding: 28px 30px 92px;
  border-right: 1px solid var(--dir-line);
}
.directoryAside {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 24px 20px 92px;
  background: rgba(255,255,255,.78);
}
.directoryPanel {
  padding: 22px;
}
.directoryHeroPanel {
  padding: 26px 28px 24px;
}
.directorySectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.directorySectionHead h1 {
  margin: 0;
  color: #111827;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 650;
  letter-spacing: 0;
}
.directorySectionHead h2,
.directoryPanelTitle h2,
.newsTopicPanel h2,
.newsSubscribePanel h2,
.newsFeaturePanel h2 {
  margin: 0;
  color: #111827;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: 0;
}
.directorySectionHead p,
.directoryPanelTitle p,
.newsSubscribePanel p {
  margin: 8px 0 0;
  color: var(--dir-muted);
  font-size: 15px;
  line-height: 1.5;
}
.directorySectionHead.compact {
  align-items: center;
  margin-bottom: 18px;
}
.directorySectionHead.compact h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.directorySectionHead button,
.directoryWideAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #7b8496;
  cursor: pointer;
  font: 650 14px/1.2 var(--font-body);
}
.directoryMono {
  font: 600 12px/1 var(--font-mono);
  color: var(--dir-muted);
}
.directorySearchWrap,
.newsSearchWrap {
  height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 0 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--dir-line);
  box-shadow: 0 8px 24px rgba(15,23,42,.035);
}
.directorySearchWrap input,
.newsSearchWrap input,
.directoryAskInput input,
.newsSubscribePanel input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #111827;
  font: 550 15px/1.2 var(--font-body);
}
.directorySearchWrap svg,
.newsSearchWrap svg {
  color: #8b96a8;
}
.directoryToolGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.directoryToolCard,
.directoryToolRow {
  border: 1px solid var(--dir-line);
  background: rgba(255,255,255,.96);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.directoryToolCard:hover,
.directoryToolRow:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--item-color, #ff8a1c) 40%, var(--dir-line));
  box-shadow: 0 20px 42px rgba(15,23,42,.08);
}
.directoryToolCard {
  min-height: 184px;
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: 12px;
}
.directoryToolTop {
  display: flex;
  align-items: center;
  gap: 14px;
}
.directoryToolCard img,
.directoryToolRow img,
.directoryNewsList img,
.newsArticleRow img,
.newsFeaturePanel img {
  width: 52px;
  height: 52px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--dir-soft);
  border: 1px solid var(--dir-line);
}
.directoryToolCard strong,
.directoryToolRow strong,
.directoryNewsList strong,
.newsArticleRow h3,
.newsFeaturePanel strong,
.newsTopicPanel strong {
  color: #111827;
  font-weight: 650;
}
.directoryToolCard p {
  min-height: 66px;
  margin: 16px 0 16px;
  color: #596376;
  font-size: 14px;
  line-height: 1.65;
}
.directoryToolCard span,
.directoryToolRow b,
.directoryDetailHero span,
.directoryDetailTags b,
.newsArticleRow b,
.newsHeroCard span {
  display: inline-flex;
  width: fit-content;
  padding: 6px 9px;
  border-radius: 8px;
  background: color-mix(in oklch, var(--item-color, var(--text-secondary)) 13%, #fff);
  color: var(--item-color, var(--text-secondary));
  font: 650 12px/1 var(--font-body);
}
.directoryCategoryGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.directoryCategoryGrid button {
  min-height: 72px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  padding: 13px 14px;
  border: 1px solid var(--dir-line);
  border-radius: 12px;
  background: #fff;
  color: #111827;
  cursor: pointer;
  text-align: left;
}
.directoryCategoryGrid button svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 9px;
  color: var(--item-color, var(--text-secondary));
  background: color-mix(in oklch, var(--item-color, var(--text-secondary)) 12%, #fff);
}
.directoryCategoryGrid button strong {
  font-size: 14px;
  font-weight: 650;
}
.directoryCategoryGrid button span {
  grid-column: 2;
  color: var(--dir-muted);
  font-size: 12px;
}
.directoryCategoryGrid button.active {
  border-color: color-mix(in oklch, var(--item-color, var(--text-secondary)) 38%, var(--dir-line));
  background: color-mix(in oklch, var(--item-color, var(--text-secondary)) 5%, #fff);
}
.directoryToolList {
  display: grid;
  gap: 10px;
}
.directoryToolRow {
  min-height: 88px;
  display: grid;
  grid-template-columns: 54px 170px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 15px;
  border-radius: 12px;
}
.directoryToolRow em {
  display: block;
  margin-top: 5px;
  color: var(--dir-muted);
  font: 500 12px/1.2 var(--font-mono);
}
.directoryToolRow p {
  color: #596376;
  font-size: 14px;
  line-height: 1.5;
}
.directoryToolRow div {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.directorySubmitForm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.directorySubmitForm input,
.directorySubmitForm select,
.directorySubmitForm textarea {
  width: 100%;
  border: 1px solid var(--dir-line);
  outline: none;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font: 550 14px/1.4 var(--font-body);
  padding: 13px 14px;
}
.directorySubmitForm textarea {
  grid-column: 1 / -1;
  min-height: 86px;
  resize: vertical;
}
.directorySubmitForm button {
  width: fit-content;
  min-height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--amber);
  color: #1F1F22;
  cursor: pointer;
  font: 700 14px/1 var(--font-body);
  padding: 0 18px;
}
.directorySubmitForm p {
  align-self: center;
  margin: 0;
  color: #596376;
  font-size: 13px;
}
.directoryBottomBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 88;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 30px;
  border-top: 1px solid var(--dir-line);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
}
.directoryBottomBar > div {
  display: flex;
  align-items: center;
  gap: 22px;
}
.directoryBottomBar button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  color: #647083;
  cursor: pointer;
  font: 650 15px/1 var(--font-body);
}
.directoryBottomBar svg {
  color: #7d8798;
}
.pricingComplianceNote {
  max-width: 760px;
  margin: -48px auto 54px;
  color: var(--t2);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}
.pricingComplianceNote a {
  color: var(--t1);
  font-weight: 600;
}
.dashboardStatusPanel a {
  color: var(--t1);
  font-family: var(--font-mono);
  font-weight: 600;
}
.directoryPanelTitle {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.directoryPanelTitle > svg {
  color: var(--text-main);
}
.directoryAskBox {
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  border: 1px solid var(--border-main);
}
.directoryAskBox strong {
  display: block;
  margin-bottom: 18px;
  font-weight: 650;
}
.directoryAskBox div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.directoryAskBox button {
  min-height: 46px;
  border: 1px solid var(--dir-line);
  border-radius: 9px;
  background: #fff;
  color: #394150;
  cursor: pointer;
  font: 650 13px/1.35 var(--font-body);
  padding: 0 12px;
}
.directoryAskInput {
  height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  padding: 0 10px 0 14px;
  border: 1px solid var(--dir-line);
  border-radius: 12px;
  background: #fff;
}
.directoryAskInput button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--text-main);
  color: var(--bg-card);
  cursor: pointer;
  box-shadow: none;
}
.directoryNewsList {
  display: grid;
  gap: 14px;
}
.directoryNewsList button {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.directoryNewsList img {
  width: 78px;
  height: 58px;
}
.directoryNewsList strong {
  display: block;
  font-size: 14px;
  line-height: 1.38;
}
.directoryNewsList em,
.newsArticleRow span,
.newsFeaturePanel em,
.newsTopicPanel em {
  display: block;
  margin-top: 5px;
  color: var(--dir-muted);
  font: normal 12px/1.3 var(--font-body);
}
.directoryWideAction {
  width: 100%;
  min-height: 46px;
  margin-top: 18px;
  border: 1px solid var(--dir-line);
  border-radius: 10px;
  background: #fff;
}
.directoryDetailOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15,23,42,.32);
  backdrop-filter: blur(10px);
}
.directoryDetailCard {
  width: min(560px, 100%);
  border-radius: 18px;
  border: 1px solid var(--dir-line);
  background: #fff;
  padding: 24px;
  box-shadow: 0 30px 90px rgba(15,23,42,.18);
  position: relative;
}
.directoryDetailClose {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--dir-line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}
.directoryDetailHero {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding-right: 38px;
}
.directoryDetailHero img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  border: 1px solid var(--dir-line);
}
.directoryDetailHero h2 {
  margin: 10px 0 3px;
  font-size: 28px;
  font-weight: 700;
}
.directoryDetailHero p,
.directoryDetailDesc {
  color: #596376;
}
.directoryDetailDesc {
  margin: 22px 0;
  font-size: 15px;
  line-height: 1.75;
}
.directoryDetailMeta,
.directoryDetailTags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.directoryDetailMeta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--dir-soft);
  color: #394150;
  font-size: 13px;
  font-weight: 650;
}
.directoryDetailTags {
  margin-top: 14px;
}
.directoryDetailAction {
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff9a2e, #ffcc45);
  color: #111827;
  font-weight: 750;
}
.directoryBackButton {
  width: fit-content;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--dir-line);
  border-radius: 10px;
  background: #fff;
  color: #596376;
  cursor: pointer;
  font: 650 14px/1 var(--font-body);
  padding: 0 14px;
}
.directoryPageBackButton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0;
  padding: 0 14px;
  height: 42px;
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-strong);
  box-shadow: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s var(--ease-smooth), box-shadow .16s var(--ease-smooth);
}
@media (hover: hover) {
  .directoryPageBackButton:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 5px 0 var(--text-main);
  }
}
.directoryPageBackButton:active { transform: translate(0, 0); box-shadow: none; }
.directoryPageBackButton svg { flex: 0 0 auto; }
.topicMain > .directoryPageBackButton { margin-bottom: 18px; }
.chatHeaderPrimary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.directoryDetailPage {
  display: grid;
  gap: 18px;
}
.directoryDetailPageHero,
.directoryDetailPageGrid > section,
.directoryDetailPageGrid > aside {
  border: 1px solid var(--dir-line);
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 52px rgba(15,23,42,.035);
}
.directoryDetailPageHero {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 28px;
}
.directoryDetailPageHero img {
  width: 86px;
  height: 86px;
  border-radius: 18px;
  border: 1px solid var(--dir-line);
}
.directoryDetailPageHero span {
  display: inline-flex;
  width: fit-content;
  padding: 6px 9px;
  border-radius: 8px;
  background: color-mix(in oklch, var(--item-color, var(--text-secondary)) 13%, #fff);
  color: var(--item-color, var(--text-secondary));
  font: 650 12px/1 var(--font-body);
}
.directoryDetailPageHero h1 {
  margin: 12px 0 6px;
  color: #111827;
  font-size: 36px;
  line-height: 1.12;
  font-weight: 650;
  letter-spacing: 0;
}
.directoryDetailPageHero p {
  color: #697386;
  font: 600 13px/1.2 var(--font-mono);
}
.directoryDetailPageHero a {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  background: var(--text-main);
  color: var(--bg-card);
  border: 1px solid var(--border-strong);
  box-shadow: none;
  font-weight: 750;
  padding: 0 22px;
  transition: transform var(--duration-fast, .15s) ease, box-shadow var(--duration-fast, .15s) ease;
}
.directoryDetailPageHero a:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 5px 0 var(--shadow-strong, rgba(15,23,42,.16));
}
.directoryDetailPageHero a:active {
  transform: translate(0, 0);
  box-shadow: 1px 2px 0 var(--shadow-strong, rgba(15,23,42,.16));
}
.directoryScreenshotGallery {
  min-width: 0;
  padding: 24px;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  box-shadow: inset 0 0 0 1px var(--dir-line), 0 18px 52px rgba(15,23,42,.035);
}
.directoryScreenshotHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.directoryScreenshotHead h2 {
  margin: 0;
  color: #111827;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 650;
}
.directoryScreenshotHead span {
  color: #697386;
  font: 600 12px/1 var(--font-mono);
}
.directoryScreenshotViewport {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #eef1f4;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
}
.directoryScreenshotTrack {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  outline: none;
}
.directoryScreenshotTrack::-webkit-scrollbar {
  display: none;
}
.directoryScreenshotTrack:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(37,99,235,.55);
}
.directoryScreenshotTrack figure {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.directoryScreenshotTrack img {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top center;
  background: #fff;
}
.directoryScreenshotArrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.94);
  color: #111827;
  box-shadow: 0 8px 24px rgba(15,23,42,.14), inset 0 0 0 1px rgba(15,23,42,.08);
  transform: translateY(-50%);
  cursor: pointer;
}
.directoryScreenshotArrow.previous { left: 14px; }
.directoryScreenshotArrow.next { right: 14px; }
.directoryScreenshotArrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.directoryScreenshotDots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
}
.directoryScreenshotDots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #c5cad3;
  cursor: pointer;
  transition: width .18s ease, background .18s ease;
}
.directoryScreenshotDots button.active {
  width: 22px;
  background: #111827;
}
.directoryDetailPageGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.directoryDetailPageGrid > section,
.directoryDetailPageGrid > aside {
  padding: 24px;
}
.directoryDetailPageGrid h2 {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: 650;
}
.directoryDetailPageGrid p {
  margin: 0;
  color: #596376;
  line-height: 1.8;
}
.directoryDetailPageGrid aside {
  display: grid;
  align-content: start;
  gap: 10px;
}
.directoryDetailPageGrid aside span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--dir-soft);
  color: #394150;
  font-size: 13px;
  font-weight: 650;
}
.newsHeaderPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: start;
}
.newsHeaderPanel h1 {
  margin: 0;
  font-size: 31px;
  font-weight: 650;
}
.newsHeaderPanel p {
  margin-top: 8px;
  color: var(--dir-muted);
  font-size: 15px;
}
.newsSearchWrap {
  margin-top: 0;
}
.newsFilterRow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.newsFilterRow button {
  height: 38px;
  padding: 0 20px;
  border: 1px solid var(--dir-line);
  border-radius: 999px;
  background: #fff;
  color: #596376;
  cursor: pointer;
  font: 650 14px/1 var(--font-body);
}
.newsFilterRow button.active {
  color: #ff7a1a;
  border-color: #ffc58b;
  background: #fff8f0;
}
.newsBreadcrumb {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  color: var(--dir-muted);
  font: 650 14px/1 var(--font-body);
}
.newsBreadcrumb button {
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--dir-line);
  border-radius: 999px;
  background: #fff;
  color: #596376;
  cursor: pointer;
  font: inherit;
}
.newsBreadcrumb strong {
  color: var(--t1);
}
.newsHeroCard {
  min-height: 276px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 14px;
  padding: 28px;
  background: #fff;
  color: var(--t1);
  box-shadow: 0 14px 38px rgba(15,23,42,.06);
}
.newsHeroCard span {
  background: #fff0df;
  color: #ff7a1a;
  border: 1px solid #ffd4aa;
}
.newsHeroCard h2 {
  width: min(780px, 94%);
  margin: 18px 0 12px;
  font-size: 29px;
  line-height: 1.32;
  font-weight: 700;
  color: var(--t1);
}
.newsHeroCard p {
  width: min(880px, 96%);
  color: #596376;
  line-height: 1.7;
}
.newsHeroCard div {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  color: #697386;
}
.newsArticlePanel h2 {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 650;
}
.newsArticleList {
  display: grid;
  gap: 0;
}
.newsArticleRow {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--dir-line);
}
.newsArticleRow img {
  width: 220px;
  height: 108px;
  border-radius: 10px;
}
.newsArticleRow h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
}
.newsArticleRow p {
  margin: 10px 0;
  color: #697386;
  line-height: 1.55;
}
.newsArticleRow b {
  color: var(--item-color, #ff8a1c);
  background: #fff4e8;
}
.newsTopicPanel > div,
.newsFeaturePanel > div {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}
.newsTopicPanel button,
.newsFeaturePanel button {
  display: grid;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: 0;
}
.newsTopicPanel button {
  grid-template-columns: 30px minmax(0, 1fr) auto;
}
.newsTopicPanel button span {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--dir-line);
  color: #8b96a8;
  font-weight: 700;
}
.newsTopicPanel button:nth-child(-n+3) span {
  color: var(--bg-card);
  border-color: var(--text-main);
  background: var(--text-main);
}
.newsSubscribePanel div {
  height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  margin-top: 24px;
  border: 1px solid var(--dir-line);
  border-radius: 10px;
  overflow: hidden;
}
.newsSubscribePanel input {
  padding: 0 14px;
}
.newsSubscribePanel button {
  border: 0;
  background: var(--text-main);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.newsFeaturePanel button {
  grid-template-columns: 76px minmax(0, 1fr) 18px;
}
.newsFeaturePanel img {
  width: 76px;
  height: 58px;
}
.newsHeroButton {
  width: 100%;
  border: 1px solid var(--dir-line);
  background: #fff;
  cursor: pointer;
  text-align: left;
}
.newsHeroButton span,
.newsArticleRow b,
.newsDetailKicker {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font: 700 13px/1 var(--font-body);
}
.newsArticleRow {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 22px;
  border: 1px solid var(--dir-line);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.newsArticleRow > div {
  min-width: 0;
}
.newsArticleList {
  gap: 12px;
}
.newsArticleRow h3 {
  font-size: 21px;
  font-weight: 700;
}
.newsArticleRow p {
  max-width: 860px;
  font-size: 15px;
}
.newsDetailPanel {
  padding: 34px;
}
.newsDetailTopline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.newsDetailKicker {
  margin: 0;
  background: #fff4e8;
  color: #ff7a1a;
  flex: 0 0 auto;
}
.newsDetailPanel h2 {
  max-width: 980px;
  margin: 0 0 18px;
  font-size: 36px;
  line-height: 1.22;
  font-weight: 750;
}
.newsDetailMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 28px;
  color: #697386;
  font: 650 14px/1 var(--font-body);
}
.newsDetailMeta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.newsDetailMeta em,
.newsArticleMeta em {
  min-width: 0;
  font-style: normal;
}
.newsArticleMeta {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  max-width: 100%;
}
.newsArticleMeta svg,
.newsDetailMeta svg {
  flex: 0 0 auto;
}
.newsHeroButton.is-returned,
.newsArticleRow.is-returned {
  outline: 2px solid #ff8a1c;
  outline-offset: 3px;
}
.newsPagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}
.newsPagination button {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dir-line);
  border-radius: 10px;
  background: #fff;
  color: #6b778c;
  cursor: pointer;
}
.newsPagination button:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.newsPagination span {
  min-width: 112px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #233044;
  font: 700 13px/1 var(--font-mono);
}
.newsPagination em {
  font-style: normal;
  color: #8b96a8;
  font-family: var(--font-body);
  font-weight: 650;
}
.newsDetailBody {
  max-width: 900px;
  display: grid;
  gap: 14px;
}
.newsDetailBody p {
  margin: 0;
  color: #394150;
  font-size: 17px;
  line-height: 1.86;
}
.imageStudioPage {
  grid-template-columns: 228px minmax(0, 1fr) 360px;
}
.imageStudioMain {
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-right: 1px solid var(--dir-line);
  background: #fff;
}
.imageStudioHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 28px 30px 18px;
}
.imageStudioHeader h1 {
  margin: 0;
  color: #111827;
  font-size: 32px;
  line-height: 1.18;
  font-weight: 650;
  letter-spacing: 0;
}
.imageStudioHeader p {
  margin-top: 8px;
  color: var(--dir-muted);
  font-size: 15px;
}
.imageStudioHeader button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--dir-line);
  border-radius: 10px;
  background: #fff;
  color: #596376;
  cursor: pointer;
  font: 650 14px/1 var(--font-body);
  padding: 0 14px;
}
.imageStudioScroll {
  min-height: 0;
  overflow-y: auto;
  padding: 14px 30px 22px;
}
.imageStudioComposer {
  padding: 0 30px 90px;
  background: linear-gradient(180deg, transparent, #fff 24%);
}
.imageStudioComposer .glass {
  border: 1px solid var(--dir-line);
  border-radius: 15px;
  box-shadow: 0 18px 50px rgba(15,23,42,.045);
}
.imageStudioAside h2 {
  margin: 0 0 18px;
  color: #111827;
  font-size: 21px;
  font-weight: 650;
}
.imageModeGrid,
.imageRatioGrid {
  display: grid;
  gap: 10px;
}
.imageModeGrid {
  grid-template-columns: 1fr 1fr;
}
.imageModeGrid button,
.imageRatioGrid button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--dir-line);
  border-radius: 10px;
  background: #fff;
  color: #596376;
  cursor: pointer;
  font: 650 13px/1 var(--font-body);
}
.imageModeGrid button.active,
.imageRatioGrid button.active {
  border-color: #d8ccff;
  background: #f3efff;
  color: var(--text-secondary);
}
.imageRatioGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.imageRatioGrid button {
  font-family: var(--font-mono);
}
.imageRecentList {
  display: grid;
  gap: 12px;
}
.imageRecentList button {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: 0;
}
.imageRecentList img {
  width: 72px;
  height: 56px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid var(--dir-line);
  background: var(--dir-soft);
}
.imageRecentList span,
.imageRecentList p {
  color: #596376;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1360px) {
  .directoryPage {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .directoryAside {
    display: none;
  }
  .directoryMain {
    border-right: 0;
  }
  .helpInlineSupport {
    display: grid;
  }
  .imageStudioPage {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .imageStudioAside {
    display: none;
  }
  .imageStudioMain {
    border-right: 0;
  }
}

@media (max-width: 1120px) {
  .directoryToolGrid,
  .directoryCategoryGrid,
  .helpCategoryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .newsHeaderPanel,
  .newsArticleRow {
    grid-template-columns: 1fr;
  }
  .newsArticleRow img {
    width: 100%;
    height: 180px;
  }
  .newsArticleRow {
    grid-template-columns: 1fr;
  }
  .newsArticleRow b {
    justify-self: start;
  }
  .directoryDetailPageHero,
  .directoryDetailPageGrid {
    grid-template-columns: 1fr;
  }
  .directoryDetailPageHero a {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .directoryPage {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .directoryScreenshotGallery {
    padding: 16px;
  }
  .directoryScreenshotArrow {
    width: 36px;
    height: 36px;
  }
  .directoryScreenshotArrow.previous { left: 8px; }
  .directoryScreenshotArrow.next { right: 8px; }
  .directoryBottomBar {
    min-height: 58px;
    padding: 8px 12px;
    gap: 8px;
  }
  .directoryBottomBar > div {
    gap: 6px;
  }
  .directoryBottomBar button {
    width: 40px;
    justify-content: center;
    font-size: 0;
  }
  .directoryRail {
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--dir-line);
    padding-bottom: 18px;
  }
  .directoryPrimaryNav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .directoryPrimaryNavItem {
    height: 50px;
    justify-content: center;
    padding: 0 8px;
  }
  .directoryPrimaryNavItem span {
    display: none;
  }
  .directoryCategoryList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .directoryMain {
    height: auto;
    overflow: visible;
    padding: 18px 14px 74px;
    border-right: 0;
  }
  .directoryPanel {
    padding: 18px;
    border-radius: 14px;
  }
  .directoryToolGrid,
  .directoryCategoryGrid,
  .helpCategoryGrid,
  .directorySubmitForm,
  .directoryAskBox div {
    grid-template-columns: 1fr;
  }
  .directoryCaptchaRow {
    grid-template-columns: 1fr;
  }
  .newsFilterRow {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .newsFilterRow button {
    flex: 0 0 auto;
  }
  .newsHeroCard {
    min-height: 220px;
    padding: 22px;
  }
  .newsHeroCard p {
    width: 100%;
  }
  .newsDetailPanel {
    padding: 22px;
  }
  .newsDetailPanel h2 {
    font-size: 28px;
  }
  .newsDetailBody p {
    font-size: 16px;
  }
  .directoryToolRow {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .directoryToolRow p,
  .directoryToolRow div {
    grid-column: 1 / -1;
  }
  .directoryToolRow div {
    justify-content: flex-start;
  }
  .directorySectionHead {
    display: block;
  }
  .directorySectionHead h1,
  .newsHeaderPanel h1 {
    font-size: 28px;
  }
  .newsHeroCard h2 {
    width: 100%;
    font-size: 24px;
  }
  .imageStudioMain {
    height: auto;
    display: block;
  }
  .imageStudioHeader {
    display: block;
    padding: 18px 14px 12px;
  }
  .imageStudioHeader button {
    margin-top: 14px;
  }
  .imageStudioScroll {
    overflow: visible;
    padding: 12px 14px 18px;
  }
  .imageStudioComposer {
    padding: 0 14px 76px;
  }
}

.topicPage {
  --topic-hover-ring: color-mix(in srgb, var(--text-main) 16%, var(--border-main));
  --topic-ease: cubic-bezier(.22, 1, .36, 1);
}

.topicPage .topicSectionHead {
  margin-bottom: 20px;
}

.topicPage .topicSectionHead h2 {
  font: 600 26px/1.2 var(--font-display);
  letter-spacing: -.02em;
}

.topicPage .topicToolGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.topicPage .topicToolCard {
  min-height: 280px;
  padding: 22px;
  border: 0;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px var(--border-main);
  transition: transform .28s var(--topic-ease), box-shadow .28s var(--topic-ease), background .2s ease;
}

.topicPage .topicToolCard img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  box-shadow: none;
}

.topicPage .topicToolCard strong {
  font-size: 17px;
}

.topicPage .topicToolCard > p {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.65;
}

.topicPage .topicToolTags {
  gap: 8px;
  margin-top: 14px;
}

.topicPage .topicToolTags span {
  padding: 6px 9px;
  border-radius: 9px;
  font-weight: 500;
}

.topicPage .topicToolActions {
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border-main);
}

.topicPage .topicToolActions button,
.topicPage .topicTextButton,
.topicPage .topicSubscribe button,
.topicPage .topicHeroActions a {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  transition: transform .2s var(--topic-ease), background .2s ease, color .2s ease, box-shadow .2s ease;
}

.topicPage .topicToolActions button {
  flex: 1 1 0;
  min-width: 0;
  gap: 4px;
  padding-inline: 4px;
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: inset 0 0 0 1.5px var(--text-main);
  white-space: nowrap;
}

.topicPage .topicToolActions button:nth-child(-n+2) {
  flex-grow: 1.15;
}

.topicPage .topicToolActions button:last-child {
  flex-grow: .85;
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--border-main);
}

.topicPage .topicSubscribe button {
  background: var(--text-main);
  color: var(--bg-card);
  box-shadow: none;
}

.topicPage .topicStickyNav {
  gap: 8px;
  padding: 9px;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--border-main), 0 10px 28px rgba(16, 24, 40, .05);
}

.topicPage .topicStickyNav a {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  transition: transform .2s var(--topic-ease), background .2s ease, color .2s ease;
}

.topicPage .topicRankingFilters input,
.topicPage .topicRankingFilters select,
.topicPage .topicSubscribe input {
  height: 40px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--border-main);
  transition: box-shadow .2s ease, background .2s ease;
}

.topicPage .topicRankingFilters input:focus,
.topicPage .topicRankingFilters select:focus,
.topicPage .topicSubscribe input:focus {
  box-shadow: inset 0 0 0 1px var(--border-strong), 0 0 0 3px color-mix(in srgb, var(--text-main) 8%, transparent);
}

.topicPage .topicRankingTable,
.topicPage .topicWikiList {
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--border-main);
}

.topicPage .topicRankingTable > div,
.topicPage .topicWikiList button,
.topicPage .topicAside > section > button {
  transition: background .2s ease, color .2s ease, transform .2s var(--topic-ease);
}

.topicPage .topicContentCard,
.topicPage .topicNewsGrid > a {
  border: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px var(--border-main);
  transition: transform .28s var(--topic-ease), box-shadow .28s var(--topic-ease), background .2s ease;
}

.topicPage .topicContentCard > img,
.topicPage .topicContentPlaceholder {
  height: 148px;
}

.topicPage .topicContentCard > div {
  padding: 18px;
}

.topicPage .topicAside > section {
  padding: 20px;
  border: 0;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--border-main);
}

.topicPage .topicAside > section > button {
  border-radius: 10px;
}

.topicPage .topicSideLinks a {
  transition: transform .2s var(--topic-ease), background .2s ease, color .2s ease;
}

.topicPage button:focus-visible,
.topicPage a:focus-visible,
.topicPage input:focus-visible,
.topicPage select:focus-visible {
  outline: 2px solid var(--text-main);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .topicPage .topicToolCard:hover,
  .topicPage .topicContentCard:hover,
  .topicPage .topicNewsGrid > a:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: inset 0 0 0 1px var(--topic-hover-ring), 0 16px 34px rgba(16, 24, 40, .08);
  }

  .topicPage .topicTextButton:hover,
  .topicPage .topicSubscribe button:hover,
  .topicPage .topicHeroActions a:hover {
    transform: translateY(-2px);
  }

  .topicPage .topicSubscribe button:hover {
    background: color-mix(in srgb, var(--text-main) 88%, var(--bg-page));
  }

  .topicPage .topicTextButton:hover,
  .topicPage .topicStickyNav a:hover,
  .topicPage .topicWikiList button:hover,
  .topicPage .topicAside > section > button:hover {
    background: var(--bg-soft);
    color: var(--text-main);
  }

  .topicPage .topicToolActions button:hover {
    transform: translate(-2px, -2px);
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: inset 0 0 0 1.5px var(--text-main), 6px 7px 0 var(--text-main);
  }

  .topicPage .topicStickyNav a:hover,
  .topicPage .topicSideLinks a:hover {
    transform: translateY(-1px);
  }

  .topicPage .topicRankingTable > div:not(.head):hover {
    background: var(--bg-soft);
  }
}

@media (max-width: 1280px) {
  .topicPage .topicToolGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .topicPage .topicToolGrid {
    grid-template-columns: 1fr;
  }
}

.retroHeroCard .topicPromoSection {
  min-width: 0;
  margin-top: 18px;
}

.retroHeroCard .topicPromoGrid {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 28px) / 3);
  gap: 14px;
  padding: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-behavior: auto;
  scroll-snap-type: inline proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.retroHeroCard .topicPromoGrid::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.retroHeroCard .topicPromoCard {
  min-height: 184px;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

@media (max-width: 760px) {
  .retroHeroCard .topicPromoGrid {
    grid-auto-columns: minmax(220px, 82%);
  }
}

.chatUnifiedPage {
  --chat-line: #e8edf5;
  --chat-text: #111827;
  --chat-muted: #8b96a8;
  height: 100vh;
  display: grid;
  grid-template-columns: 220px 340px minmax(0, 1fr);
  background: #fff;
  overflow: hidden;
  color: var(--chat-text);
}
.chatUnifiedDrop {
  position: fixed;
  inset: 18px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px dashed var(--text-main);
  border-radius: 18px;
  background: rgba(32,33,36,0.08);
  color: var(--text-secondary);
  font-weight: 700;
  pointer-events: none;
}
@keyframes chatBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}
.chatUnifiedNav {
  border-right: 1px solid var(--chat-line);
}
.chatAssistantPanel,
.chatHistoryPanel {
  height: 100vh;
  min-height: 0;
  overflow-y: auto;
  padding: 30px 26px 92px;
  border-right: 1px solid var(--chat-line);
  background: rgba(255,255,255,.96);
}
.chatHistoryPanel {
  border-right: 0;
  border-left: 1px solid var(--chat-line);
}
.chatAssistantPanel h2,
.chatHistoryHead h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: 0;
}
.chatAssistantSearch {
  height: 52px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 20px 0 22px;
  padding: 0 14px;
  border: 1px solid var(--chat-line);
  border-radius: 12px;
  background: #fff;
}
.chatAssistantSearch svg {
  color: #8b96a8;
}
.chatAssistantSearch input {
  border: 0;
  outline: none;
  background: transparent;
  color: #111827;
  font: 550 15px/1 var(--font-body);
}
.chatAssistantList {
  display: grid;
  gap: 12px;
}
.chatAssistantCard {
  min-height: 92px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--chat-line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.chatAssistantCard.active {
  border-color: #d8ccff;
  background: linear-gradient(135deg, rgba(32,33,36,0.08), rgba(255,255,255,.96));
  box-shadow: 0 14px 34px rgba(32,33,36,0.08);
}
.chatAssistantCard > span {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--text-secondary);
  background: #f1edff;
}
.chatAssistantCard strong {
  display: block;
  color: #111827;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.chatAssistantCard em {
  display: block;
  margin-top: 5px;
  color: #8b96a8;
  font: 550 13px/1.3 var(--font-body);
}
.chatAssistantCard b {
  padding: 4px 7px;
  border-radius: 7px;
  background: var(--text-main);
  color: #fff;
  font: 700 11px/1 var(--font-body);
}
.chatAssistantEmpty {
  padding: 18px;
  border: 1px solid var(--chat-line);
  border-radius: 12px;
  color: #8b96a8;
}
.chatDiscoverButton,
.chatHistoryMore {
  width: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 26px;
  border: 1px solid var(--chat-line);
  border-radius: 12px;
  background: #fff;
  color: #596376;
  cursor: pointer;
  font: 650 15px/1 var(--font-body);
}
.chatUnifiedMain {
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  overflow: hidden;
  background: #fff;
}
.chatUnifiedHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 28px 18px;
}
.chatCurrentAssistant {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.chatCurrentAssistant > span {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--text-secondary);
  background: #f1edff;
}
.chatCurrentAssistant strong {
  display: block;
  font-size: 18px;
  font-weight: 750;
  line-height: 1.25;
}
.chatCurrentAssistant em {
  display: block;
  margin-top: 5px;
  color: #8b96a8;
  font: 600 13px/1.25 var(--font-body);
}
.chatCurrentAssistant button,
.chatHeaderActions button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--chat-line);
  border-radius: 10px;
  background: #fff;
  color: #8b96a8;
  cursor: pointer;
}
.chatHeaderActions {
  display: flex;
  gap: 12px;
}
.chatUnifiedScroll {
  min-height: 0;
  overflow-y: auto;
  padding: 8px 32px 22px;
}
.chatUnifiedContent {
  max-width: 920px;
  margin: 0 auto;
}
.chatUnifiedEmpty {
  margin: 40px auto;
  padding: 28px;
  border: 1px solid var(--chat-line);
  border-radius: 16px;
  background: #fff;
  color: #596376;
  text-align: center;
}
.chatUnifiedEmpty h2 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 24px;
  font-weight: 650;
}
.chatUnifiedThinking {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.chatUnifiedThinking > span {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-secondary);
  background: #f1edff;
}
.chatUnifiedThinking div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border: 1px solid var(--chat-line);
  border-radius: 8px 16px 16px 16px;
  background: #fff;
}
.chatUnifiedThinking i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-main);
  animation: chatBounce 1.1s ease-in-out infinite;
}
.chatUnifiedThinking em {
  font-style: normal;
  color: #8b96a8;
  font-size: 13px;
}
.chatPromptRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 52px;
  gap: 12px;
  padding: 0 32px 22px;
  max-width: 1010px;
  width: 100%;
  margin: 0 auto;
}
.chatPromptRow button {
  min-height: 50px;
  border: 1px solid var(--chat-line);
  border-radius: 10px;
  background: #fff;
  color: #8b96a8;
  cursor: pointer;
  font: 650 14px/1.3 var(--font-body);
  padding: 0 16px;
}
.chatUnifiedComposer {
  width: calc(100% - 64px);
  max-width: 980px;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto 90px;
  padding: 16px;
  border: 1px solid var(--chat-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15,23,42,.045);
}
.chatUnifiedComposer textarea {
  min-height: 62px;
  border: 0;
  outline: none;
  resize: none;
  color: #111827;
  font: 550 16px/1.6 var(--font-body);
}
.chatComposerFooter {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chatComposerFooter button {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--chat-line);
  border-radius: 9px;
  background: #fff;
  color: #697386;
  cursor: pointer;
  font: 650 13px/1 var(--font-body);
  padding: 0 14px;
}
.chatComposerFooter .chatUnifiedSend {
  width: 48px;
  height: 48px;
  margin-left: auto;
  border: 0;
  border-radius: 11px;
  background: var(--text-main);
  color: #fff;
  padding: 0;
  box-shadow: 0 14px 30px rgba(32,33,36,0.08);
}
.chatUnifiedSend:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.chatHistoryHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}
.chatHistoryHead button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #8b96a8;
  cursor: pointer;
  font: 650 13px/1 var(--font-body);
}
.chatHistoryGroup {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}
.chatHistoryGroup h3 {
  margin: 0 0 8px;
  color: #a1a9b7;
  font-size: 14px;
  font-weight: 650;
}
.chatHistoryGroup button {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #394150;
  cursor: pointer;
  text-align: left;
  font: 600 15px/1.35 var(--font-body);
  padding: 0 10px;
}
.chatHistoryGroup button.active {
  color: var(--text-secondary);
  background: #f2efff;
}
.chatHistoryRow {
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  background: transparent;
}
.chatHistoryRow.active {
  background: #f2efff;
}
.chatHistoryRowMain {
  min-width: 0;
  height: auto !important;
  display: grid !important;
  gap: 4px;
  padding: 9px 10px !important;
  border: 0 !important;
  background: transparent !important;
}
.chatHistoryRowMain strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #394150;
  font-size: 14px;
  font-weight: 650;
}
.chatHistoryRow.active .chatHistoryRowMain strong {
  color: var(--text-secondary);
}
.chatHistoryRowMain span {
  color: #9aa4b5;
  font: 600 12px/1.25 var(--font-body);
}
.chatHistoryRowActions {
  display: flex;
  gap: 4px;
  padding-right: 6px;
  opacity: .72;
}
.chatHistoryRow:hover .chatHistoryRowActions,
.chatHistoryRow:focus-within .chatHistoryRowActions {
  opacity: 1;
}
.chatHistoryRowActions button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--chat-line);
  border-radius: 8px;
  background: #fff;
  color: #8b96a8;
  cursor: pointer;
  padding: 0;
}
.chatHistoryModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15,23,42,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.chatHistoryModal {
  width: min(760px, 100%);
  max-height: min(720px, calc(100dvh - 48px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid var(--chat-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15,23,42,.18);
  overflow: hidden;
}
.chatHistoryModalHead {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--chat-line);
}
.chatHistoryModalHead h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}
.chatHistoryModalHead p {
  margin: 6px 0 0;
  color: #8b96a8;
  font-size: 13px;
}
.chatHistoryModalHead > button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--chat-line);
  border-radius: 10px;
  background: #fff;
  color: #8b96a8;
  cursor: pointer;
}
.chatHistoryModalBody {
  min-height: 0;
  overflow: auto;
  padding: 20px 24px 24px;
  display: grid;
  gap: 22px;
}
.chatHistoryModalBody section {
  display: grid;
  gap: 10px;
}
.chatHistoryModalBody h3 {
  margin: 0;
  color: #8b96a8;
  font-size: 13px;
  font-weight: 700;
}
.chatHistoryModalBody p {
  margin: 0;
  color: #8b96a8;
}
.chatHistoryArchiveBlock {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--chat-line);
  border-radius: 14px;
}
.chatHistoryArchiveBlock > strong {
  color: var(--t1);
  font-size: 14px;
}
.chatHistoryNewButton {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 22px;
  border: 1px solid var(--chat-line);
  border-radius: 11px;
  background: #fff7ed;
  color: #ff7a1a;
  cursor: pointer;
  font: 700 14px/1 var(--font-body);
}
.chatHistoryEmpty {
  padding: 18px 0;
  color: #8b96a8;
  font: 650 14px/1.5 var(--font-body);
}

@media (max-width: 1500px) {
  .chatUnifiedPage {
    grid-template-columns: 220px 320px minmax(0, 1fr);
  }
}

@media (max-width: 1080px) {
  .chatUnifiedPage {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  .chatHistoryPanelDock {
    display: none;
  }
}

@media (max-width: 760px) {
  .chatUnifiedPage {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .chatUnifiedNav {
    height: auto;
  }
  .chatUnifiedMain {
    height: auto;
    min-height: calc(100vh - 120px);
    display: block;
  }
  .chatUnifiedHeader {
    padding: 16px 14px;
  }
  .chatHeaderActions {
    display: none;
  }
  .chatUnifiedScroll {
    max-height: none;
    overflow: visible;
    padding: 12px 14px 18px;
  }
  .chatPromptRow {
    grid-template-columns: 1fr;
    padding: 0 14px 16px;
  }
  .chatUnifiedComposer {
    width: calc(100% - 28px);
    margin-bottom: 76px;
  }
  .chatComposerFooter {
    flex-wrap: wrap;
  }
  .chatHistoryPanelDock {
    display: block;
    height: auto;
    max-height: 260px;
    overflow: auto;
    padding: 16px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--chat-line);
  }
  .chatHistoryHead {
    margin-bottom: 12px;
  }
  .chatHistoryGroup {
    margin-bottom: 14px;
  }
}

/* ───────── NIGHT MODE ───────── */
:root[data-theme="night"],
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-page: #171613;
  --bg-card: #22201b;
  --bg-soft: #2b2822;
  --text-main: #f4efe5;
  --text-secondary: #c8bfae;
  --text-muted: #8f8678;
  --border-main: #4a4438;
  --border-strong: #f4efe5;
  --shadow-strong: #000000;

  --paper-bg: var(--bg-page);
  --paper-bg-alt: var(--bg-soft);
  --ink: var(--text-main);
  --ink-muted: var(--text-secondary);
  --border-retro: var(--border-main);

  --bg: var(--bg-page);
  --bg2: var(--bg-soft);
  --surface: var(--bg-card);
  --surface2: var(--bg-soft);
  --card: var(--bg-card);
  --card-hov: var(--bg-soft);

  --ink-soft: var(--text-main);
  --border: var(--border-main);
  --border-hov: var(--border-strong);
  --rail-border: var(--border-main);

  --amber: var(--bg-soft);
  --amber-deep: var(--border-strong);
  --amber-soft: var(--bg-page);
  --pink: var(--text-secondary);
  --coral: var(--text-secondary);
  --sky: var(--bg-soft);
  --sky-deep: var(--text-main);
  --mint: var(--bg-soft);
  --lilac: var(--bg-soft);

  --purple: var(--text-main);
  --purple2: var(--text-main);
  --cyan: var(--text-secondary);

  --t1: var(--text-main);
  --t2: var(--text-secondary);
  --t3: var(--text-muted);
  --t4: #6f6a60;

  --shadow-retro: none;
  --shadow-retro-hover: 4px 5px 0 var(--shadow-strong);
  --shadow-retro-active: 1px 2px 0 var(--shadow-strong);
  --shadow: none;
  --shadow2: none;
  --shadow3: none;
  --shadow-hov: var(--shadow-retro-hover);
  --glow: none;
  --glow2: none;

  --news-purple: var(--text-main);
  --news-purple-soft: var(--bg-soft);
}

:root[data-theme="night"] .directoryPage {
  --dir-bg: var(--bg-page);
  --dir-line: var(--border-main);
  --dir-muted: var(--text-muted);
  --dir-text: var(--text-main);
  --dir-soft: var(--bg-soft);
  background: var(--bg-page);
}
:root[data-theme="night"] .directoryRail,
:root[data-theme="night"] .directoryAside,
:root[data-theme="night"] .chatAssistantPanel,
:root[data-theme="night"] .chatHistoryPanel {
  background: var(--bg-page);
}
:root[data-theme="night"] .directoryMain,
:root[data-theme="night"] .imageStudioMain,
:root[data-theme="night"] .chatUnifiedPage,
:root[data-theme="night"] .chatUnifiedMain {
  background: var(--bg-page);
}
:root[data-theme="night"] .directoryPanel,
:root[data-theme="night"] .newsHeaderPanel,
:root[data-theme="night"] .newsArticlePanel,
:root[data-theme="night"] .directoryToolCard,
:root[data-theme="night"] .directoryToolRow,
:root[data-theme="night"] .directoryDetailPage,
:root[data-theme="night"] .directoryDetailPageHero,
:root[data-theme="night"] .directoryScreenshotGallery,
:root[data-theme="night"] .directoryDetailPageGrid > section,
:root[data-theme="night"] .directoryDetailPageGrid > aside {
  background: var(--bg-card);
  border-color: var(--border-main);
}
:root[data-theme="night"] .directoryBrand,
:root[data-theme="night"] .directoryAllTools,
:root[data-theme="night"] .directoryPrimaryNavItem,
:root[data-theme="night"] .directorySubmitEntry,
:root[data-theme="night"] .directoryBottomBar,
:root[data-theme="night"] .directorySearchWrap,
:root[data-theme="night"] .newsSearchWrap,
:root[data-theme="night"] .directoryBackButton,
:root[data-theme="night"] .newsFilterRow button,
:root[data-theme="night"] .imageStudioHeader button {
  background: var(--bg-card);
  border-color: var(--border-main);
  color: var(--text-secondary);
}
:root[data-theme="night"] .directoryPrimaryNavItem span,
:root[data-theme="night"] .directoryAllTools svg,
:root[data-theme="night"] .directorySubmitEntry svg {
  background: var(--bg-soft);
  color: var(--text-main);
}
:root[data-theme="night"] .directorySectionHead h1,
:root[data-theme="night"] .directorySectionHead h2,
:root[data-theme="night"] .directoryPanelTitle h2,
:root[data-theme="night"] .newsTopicPanel h2,
:root[data-theme="night"] .newsSubscribePanel h2,
:root[data-theme="night"] .newsFeaturePanel h2,
:root[data-theme="night"] .newsHeaderPanel h1,
:root[data-theme="night"] .newsArticlePanel h2,
:root[data-theme="night"] .newsArticleRow h3,
:root[data-theme="night"] .imageStudioHeader h1,
:root[data-theme="night"] .chatAssistantPanel h2,
:root[data-theme="night"] .chatHistoryHead h2,
:root[data-theme="night"] .directoryToolTop strong,
:root[data-theme="night"] .directoryToolRow strong,
:root[data-theme="night"] .directoryDetailPageHero h1,
:root[data-theme="night"] .directoryScreenshotHead h2,
:root[data-theme="night"] .directoryDetailPageGrid h2 {
  color: var(--text-main);
}
:root[data-theme="night"] .directoryCategoryTitle,
:root[data-theme="night"] .directorySectionHead p,
:root[data-theme="night"] .directoryToolCard p,
:root[data-theme="night"] .directoryToolRow p,
:root[data-theme="night"] .directoryToolRow em,
:root[data-theme="night"] .directoryDetailPageHero p,
:root[data-theme="night"] .directoryScreenshotHead span,
:root[data-theme="night"] .directoryDetailPageGrid p,
:root[data-theme="night"] .newsHeaderPanel p,
:root[data-theme="night"] .newsArticleRow p,
:root[data-theme="night"] .newsArticleRow span,
:root[data-theme="night"] .newsSubscribePanel p,
:root[data-theme="night"] .imageStudioHeader p {
  color: var(--text-secondary);
}
:root[data-theme="night"] .directoryCategoryItem {
  color: var(--text-secondary);
}
:root[data-theme="night"] .directoryCategoryItem svg {
  color: var(--text-muted);
}
:root[data-theme="night"] .directoryCategoryItem:hover,
:root[data-theme="night"] .directoryCategoryItem.active {
  background: var(--bg-soft);
  color: var(--text-main);
}
:root[data-theme="night"] .directoryCategoryItem:hover svg,
:root[data-theme="night"] .directoryCategoryItem.active svg {
  color: var(--text-main);
}
:root[data-theme="night"] .directoryToolRow div b,
:root[data-theme="night"] .directoryToolCard span,
:root[data-theme="night"] .directoryDetailTags b {
  background: var(--bg-soft);
  color: var(--text-secondary);
}
:root[data-theme="night"] .directoryDetailPageGrid aside span {
  background: var(--bg-soft);
  color: var(--text-secondary);
}
:root[data-theme="night"] .directoryScreenshotViewport {
  background: var(--bg-soft);
  box-shadow: inset 0 0 0 1px var(--border-main);
}
:root[data-theme="night"] .directoryScreenshotDots button {
  background: var(--text-muted);
}
:root[data-theme="night"] .directoryScreenshotDots button.active {
  background: var(--text-main);
}
:root[data-theme="night"] .newsFilterRow button.active {
  background: var(--bg-soft);
  border-color: var(--border-strong);
  color: var(--text-main);
}
:root[data-theme="night"] .newsTopicPanel button,
:root[data-theme="night"] .newsFeaturePanel button,
:root[data-theme="night"] .directoryNewsList button {
  color: var(--text-secondary);
}
:root[data-theme="night"] .newsTopicPanel em,
:root[data-theme="night"] .newsFeaturePanel em,
:root[data-theme="night"] .directoryNewsList em {
  color: var(--text-muted);
}
:root[data-theme="night"] .directorySearchWrap input,
:root[data-theme="night"] .newsSearchWrap input,
:root[data-theme="night"] .directoryAskInput input,
:root[data-theme="night"] .directorySubmitForm input,
:root[data-theme="night"] .directorySubmitForm select,
:root[data-theme="night"] .directorySubmitForm textarea {
  background: transparent;
  color: var(--text-main);
}

/* ───────── Reset ───────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--t1);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* 不能设 overflow-x:hidden：会被规范强制 overflow-y:auto，使 body 成为滚动容器，破坏侧栏 sticky。横向裁切交给 html。 */
  transition: background 0.18s ease, color 0.18s ease;
}
/* 注意：#root 不能设 overflow-x:hidden（会被强制 overflow-y:auto 成为滚动容器，破坏侧栏 sticky）。横向裁切交给 html。 */
#root { width: 100%; max-width: 100%; }

html.theme-transitioning body,
html.theme-transitioning body * {
  transition-property: background-color, color, border-color, box-shadow, opacity, filter !important;
  transition-duration: 260ms !important;
  transition-timing-function: cubic-bezier(.2,.8,.2,1) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 99px; border: 2px solid var(--bg); }

/* Typography */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--t1); }
p { line-height: 1.65; color: var(--t2); }
a { color: inherit; text-decoration: none; }
input, select, textarea, button { max-width: 100%; }
input, select, textarea { min-width: 0; }

/* ───────── Glass / Card ───────── */
.glass {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: none;
  transition: background 0.14s, border-color 0.14s;
}
/* Add the .lift class on a .glass element to opt into hover lift. */
.glass.lift:hover {
  background: var(--card-hov);
}

/* ───────── Lift on hover utility ─────────
   Default: flat (border only, no shadow).
   Hover: 3D blocky shadow with a small lift.
   Used for top nav buttons, conversation cards, message bubbles, action icons.
*/
.lift {
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo),
              background var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth);
  box-shadow: none;
}
@media (hover: hover) {
  .lift:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-hov);
    border-color: var(--border-strong);
  }
}
.lift:active {
  transform: translate(0, 0);
  box-shadow: 1px 2px 0 var(--shadow-strong);
}
@media (prefers-reduced-motion: reduce) {
  .lift, .lift:hover, .lift:active { transform: none; transition: none; }
}

/* ───────── Buttons ───────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo),
              background var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth);
  white-space: nowrap;
  box-shadow: none;
}
.btn-primary {
  background: var(--amber);
  color: #1F1F22;
  border-color: color-mix(in oklch, var(--amber) 60%, var(--border-strong));
}
@media (hover: hover) {
  .btn-primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-hov);
    background: var(--bg-card);
    border-color: var(--border-strong);
  }
}
.btn-primary:active {
  transform: translate(0, 0);
  box-shadow: 1px 2px 0 var(--shadow-strong);
}
.btn-secondary {
  background: var(--surface);
  color: var(--t1);
}
@media (hover: hover) {
  .btn-secondary:hover {
    background: var(--card-hov);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-hov);
    border-color: var(--border-strong);
  }
}
.btn-secondary:active {
  transform: translate(0, 0);
  box-shadow: 1px 1px 0 var(--border-strong);
}
.btn-ghost {
  background: transparent;
  color: var(--t2);
  border: 1px solid transparent;
  box-shadow: none;
  padding: 8px 12px;
}
.btn-ghost:hover {
  color: var(--t1);
  background: var(--surface2);
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}
:root[data-theme="night"] .btn-ghost:hover { background: var(--surface2); color: var(--t1); }

.btn-lg { padding: 14px 26px; font-size: 15px; border-radius: 12px; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; transition: none; }
}

.toolIconButton {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--t2);
  box-shadow: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.toolIconButton:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hov);
  background: var(--surface2);
  border-color: var(--border-strong);
  color: var(--t1);
}
.toolIconButton:active:not(:disabled) {
  transform: translate(0, 0);
  box-shadow: 1px 1px 0 var(--border-strong);
}
.toolIconButton:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.settingsModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  padding: 78px 24px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 31, 34, 0.34);
  backdrop-filter: blur(6px);
}
.settingsModalShell {
  width: min(980px, calc(100vw - 48px));
  max-height: min(78vh, 720px);
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(31, 31, 34, 0.22);
  overflow: hidden;
}
:root[data-theme="night"] .settingsModalOverlay {
  background: rgba(10, 10, 14, 0.58);
}
:root[data-theme="night"] .settingsModalShell {
  box-shadow: 0 26px 88px rgba(0, 0, 0, 0.48);
}

@media (prefers-reduced-motion: reduce) {
  .toolIconButton,
  .toolIconButton:hover,
  .toolIconButton:active {
    transform: none;
    transition: none;
  }
}

/* ───────── Badge ───────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-head);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--t1);
}
.badge-purple { background: var(--amber); color: #1F1F22; }
.badge-cyan   { background: var(--sky); color: #1F1F22; }
.badge-amber  { background: var(--amber); color: #1F1F22; }
.badge-pink   { background: var(--pink); color: #1F1F22; }
.badge-mint   { background: var(--mint); color: #1F1F22; }
.badge-lilac  { background: var(--lilac); color: #1F1F22; }

/* ───────── Input ───────── */
.input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--t1);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
  width: 100%;
  box-shadow: none;
}
.input::placeholder { color: var(--t3); }
.input:hover {
  border-color: color-mix(in oklch, var(--border-strong) 55%, var(--border));
}
.input:focus {
  border-color: color-mix(in oklch, var(--amber) 60%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--amber) 24%, transparent);
}
:root[data-theme="night"] .input:focus {
  border-color: color-mix(in oklch, var(--amber) 60%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--amber) 18%, transparent);
}

.capykaModelPickerButton {
  box-shadow: none !important;
  background: var(--surface) !important;
}
.capykaModelPickerInline {
  width: auto !important;
}
.capykaModelPickerButtonInline {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  color: var(--t2);
}
.capykaModelPickerButtonInline:hover {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
}
.capykaModelGroupButton,
.capykaModelOption {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--t1);
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}
.capykaModelGroupButton {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}
.capykaModelOption {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
}
.capykaModelGroupButton:hover,
.capykaModelOption:hover {
  background: var(--surface2);
  color: var(--t1);
}
.capykaModelOption.active {
  background: var(--amber);
  color: #1F1F22;
  font-weight: 700;
}

.capykaComposerToolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.capykaComposerIconButton {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  justify-content: center !important;
}
.capykaComposerChip {
  width: auto !important;
  min-width: 86px;
  max-width: 142px;
  height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 12.5px;
}
.capykaComposerToolbar .capykaModelPickerInline {
  flex: 0 0 auto;
  width: auto !important;
  max-width: 160px;
}
.capykaComposerToolbar .capykaModelPickerButtonInline {
  width: auto;
  min-width: 0;
  height: 36px !important;
}
.capykaComposerInputGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}
.capykaComposerInputGrid .capykaModelPickerInline,
.capykaComposerInputGrid .capykaModelPickerButtonInline {
  height: 100% !important;
}
.capykaComposerInputGrid .capykaModelPickerButtonInline {
  min-height: 58px;
}

.mobileComposerToolSwitch {
  position: relative;
  flex: 0 0 auto;
}
.mobileComposerToolButton,
.mobileComposerToolMenuItem {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--t1);
  border-radius: 10px;
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.mobileComposerToolButton:hover,
.mobileComposerToolMenuItem:hover,
.mobileComposerToolMenuItem.active {
  background: var(--amber);
  border-color: color-mix(in oklch, var(--amber) 60%, var(--border-strong));
  color: #1F1F22;
}
.mobileComposerToolMenu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 180;
  min-width: 132px;
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 16px 42px rgba(31,31,34,0.18);
}
.mobileComposerToolMenuItem {
  width: 100%;
  justify-content: flex-start;
}

@media (max-width: 768px) {
  input,
  select,
  textarea,
  .input {
    font-size: 16px !important;
  }
  .capykaComposerToolbar {
    gap: 6px;
    margin-bottom: 7px;
  }
  .capykaComposerIconButton {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
  }
  .capykaComposerChip {
    min-width: 78px;
    max-width: 118px;
    height: 34px !important;
    font-size: 12px;
  }
  .capykaComposerToolbar .capykaModelPickerInline {
    flex-basis: auto;
    max-width: 134px;
  }
  .capykaComposerToolbar .capykaModelPickerButtonInline {
    height: 34px !important;
  }
  .capykaComposerInputGrid {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 7px;
  }
  .capykaComposerInputGrid .capykaModelPickerButtonInline {
    min-height: 48px;
  }
}

.topMobileTools { display: none; }
.topNav.topNavTransparent {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.topNav.topNavTransparent.topNavImmersive {
  position: absolute !important;
}
.topQuickNavLink {
  display: inline-flex;
  align-items: center;
  color: var(--t1);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.14s ease, transform 0.14s ease;
}
.topQuickNavLink:hover,
.topQuickNavLink:focus-visible {
  color: #1F1F22;
  transform: translateY(-1px);
  outline: none;
}
.topQuickNavLink.active {
  color: #1F1F22;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.topMobileTool {
  min-width: 0;
  height: 34px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--t2);
  flex: 0 0 auto;
  box-shadow: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
  will-change: transform;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  padding: 0 10px;
}
.topMobileToolText { width: auto; }
.topMobileTool:hover,
.topMobileTool:focus-visible {
  background: transparent;
  color: var(--t1);
  transform: translateY(-1px);
  box-shadow: none;
  outline: none;
}
.topMobileTool:active {
  transform: translate(0, 0);
  box-shadow: none;
}
.topMobileTool.active {
  background: transparent;
  color: #1F1F22;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.topMobileTool.active:hover,
.topMobileTool.active:focus-visible {
  background: transparent;
  color: #1F1F22;
}

.chatSidebarSectionHeader,
.chatArchiveToggle,
.chatArchiveMiniButton,
.chatSidebarBottomAction {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--t1);
  font-family: var(--font-body);
  cursor: pointer;
}
.chatSidebarSectionHeader {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
}
.chatSidebarSectionHeader:hover,
.chatArchiveToggle:hover,
.chatArchiveMiniButton:hover,
.chatSidebarBottomAction:hover {
  background: var(--surface2);
  border-color: var(--border-strong);
}
.chatSidebarSectionCount {
  margin-left: auto;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--amber);
  color: #1F1F22;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.chatSidebarSectionTitle {
  padding: 12px 4px 2px;
  color: var(--t3);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chatArchiveGroup,
.chatArchiveConversationList {
  display: grid;
  gap: 10px;
}
.chatArchiveHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px 32px;
  gap: 6px;
  align-items: center;
}
.chatArchiveToggle {
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}
.chatArchiveToggle span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chatArchiveToggle small {
  margin-left: auto;
  color: var(--t3);
  font-family: var(--font-mono);
  font-size: 11px;
}
.chatArchiveMiniButton {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.chatArchiveMiniButton.active {
  background: var(--amber);
  color: #1F1F22;
  border-color: color-mix(in oklch, var(--amber) 60%, var(--border-strong));
}
.chatArchivePickerOverlay {
  position: absolute;
  inset: 0;
  z-index: 96;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 31, 34, 0.28);
  backdrop-filter: blur(5px);
}
.chatArchivePickerDialog {
  width: min(360px, calc(100vw - 36px));
  max-height: min(72vh, 520px);
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 22px 70px rgba(31, 31, 34, 0.22);
  display: grid;
  gap: 12px;
  overflow: hidden;
}
.chatArchivePickerHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: start;
}
.chatArchivePickerHeader h3 {
  margin: 0 0 5px;
  font-size: 17px;
  font-weight: 700;
  color: var(--t1);
}
.chatArchivePickerHeader p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--t3);
}
.chatArchivePickerClose,
.chatArchivePickerOption,
.chatArchivePickerCreate {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--t1);
  box-shadow: none;
  cursor: pointer;
  font-family: var(--font-body);
}
.chatArchivePickerClose {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chatArchivePickerList {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}
.chatArchivePickerOption,
.chatArchivePickerCreate {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
}
.chatArchivePickerOption span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chatArchivePickerOption small {
  color: var(--t3);
  font-family: var(--font-mono);
  font-size: 11px;
}
.chatArchivePickerCreate {
  justify-content: center;
  background: var(--amber);
  color: #1F1F22;
  border-color: color-mix(in oklch, var(--amber) 60%, var(--border-strong));
}
.chatArchivePickerClose:hover,
.chatArchivePickerOption:hover {
  background: var(--surface2);
  border-color: var(--border-strong);
}
.chatSidebarBottomActions {
  display: grid;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px dashed var(--rail-border);
}
.chatSidebarBottomAction {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.homeHeroPrompt {
  width: min(640px, 100%);
  min-height: 64px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--t1);
  cursor: pointer;
  box-shadow: none;
  text-align: left;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.homeHeroPrompt:hover,
.homeHeroPrompt:focus-visible {
  background: var(--surface2);
  border-color: var(--border-strong);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hov);
  outline: none;
}
.homeHeroPromptIcon,
.homeHeroPromptSend {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.homeHeroPromptIcon {
  background: var(--sky);
  color: #1F1F22;
}
.homeHeroPromptSend {
  width: 46px;
  height: 46px;
  background: var(--amber);
  color: #1F1F22;
  border-color: color-mix(in oklch, var(--amber) 60%, var(--border-strong));
}
.homeHeroPromptText {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 17px;
  font-weight: 600;
  color: var(--t1);
}
.homeHeroPromptCursor {
  opacity: 0.45;
  animation: blink 1s step-end infinite;
}

.homeHeroSection {
  --hero-x: 50%;
  --hero-y: 45%;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in oklch, var(--pink) 46%, transparent) 0 18%, transparent 42%),
    radial-gradient(circle at 78% 24%, color-mix(in oklch, var(--sky) 52%, transparent) 0 20%, transparent 44%),
    radial-gradient(circle at 36% 78%, color-mix(in oklch, var(--coral) 42%, transparent) 0 18%, transparent 42%),
    radial-gradient(circle at 86% 76%, color-mix(in oklch, var(--mint) 48%, transparent) 0 18%, transparent 42%),
    linear-gradient(135deg, #fff9df 0%, #edf7ff 42%, #fff1ea 100%);
  isolation: isolate;
}
.homeHeroSection::before,
.homeHeroSection::after {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: 0;
  pointer-events: none;
  filter: blur(36px) saturate(1.25);
  opacity: 0.72;
}
.homeHeroSection::before {
  background:
    radial-gradient(circle at var(--hero-x) var(--hero-y),
      color-mix(in oklch, var(--amber) 48%, transparent) 0 8%,
      color-mix(in oklch, var(--sky) 42%, transparent) 13%,
      transparent 32%),
    conic-gradient(from 0deg at 48% 46%,
      color-mix(in oklch, var(--amber) 58%, transparent),
      color-mix(in oklch, var(--sky) 62%, transparent),
      color-mix(in oklch, var(--pink) 54%, transparent),
      color-mix(in oklch, var(--mint) 58%, transparent),
      color-mix(in oklch, var(--amber) 58%, transparent));
  animation: heroColorSurge 10s ease-in-out infinite alternate;
}
.homeHeroSection::after {
  background:
    radial-gradient(ellipse at 24% 38%, rgba(255,255,255,0.74), transparent 38%),
    radial-gradient(ellipse at 76% 66%, rgba(255,255,255,0.58), transparent 36%),
    linear-gradient(120deg, transparent 12%, rgba(255,255,255,0.34) 46%, transparent 76%);
  mix-blend-mode: soft-light;
  animation: heroColorDrift 7s ease-in-out infinite alternate;
}
.homeHeroSection > * {
  position: relative;
  z-index: 1;
}

/* ───────── Gradient text — replaced with solid ───────── */
.grad-text {
  color: var(--t1);
  position: relative;
  display: inline-block;
}
.grad-text::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 4%;
  height: 30%;
  background: var(--amber);
  z-index: -1;
  transform: skewX(-6deg);
}

/* ───────── Section / container ───────── */
.section { padding: 80px 0; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ───────── Page enter animation ───────── */
.page-enter {
  max-width: 100%;
  min-width: 0;
  animation: pageIn var(--duration-normal) var(--ease-out-expo) both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.page-section {
  animation: capykaRevealUp var(--duration-slow) var(--ease-out-expo) both;
}
.page-section:nth-of-type(1) { animation-delay: .04s; }
.page-section:nth-of-type(2) { animation-delay: .10s; }
.page-section:nth-of-type(3) { animation-delay: .16s; }
.page-section:nth-of-type(4) { animation-delay: .22s; }
.page-section:nth-of-type(n+5) { animation-delay: .26s; }
@keyframes capykaRevealUp {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes capykaRevealFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .page-enter,
  .page-section { animation: none; }
}

/* ───────── Mesh bg — soft blobs in Sunny palette ───────── */
.mesh-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.mesh-bg::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,216,58,0.45) 0%, transparent 70%);
  top: -200px; left: -100px;
  animation: meshFloat 18s ease-in-out infinite alternate;
}
.mesh-bg::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,123,123,0.32) 0%, transparent 70%);
  bottom: 0; right: -100px;
  animation: meshFloat2 22s ease-in-out infinite alternate;
}
:root[data-theme="night"] .mesh-bg::before {
  background: radial-gradient(circle, rgba(255,216,58,0.18) 0%, transparent 70%);
}
:root[data-theme="night"] .mesh-bg::after {
  background: radial-gradient(circle, rgba(124,197,255,0.12) 0%, transparent 70%);
}

@keyframes meshFloat {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(60px, 80px) scale(1.1); }
}
@keyframes meshFloat2 {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-50px, -60px) scale(1.08); }
}
@keyframes heroColorSurge {
  0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(4%, 3%, 0) rotate(28deg) scale(1.08); }
  100% { transform: translate3d(-1%, 5%, 0) rotate(-18deg) scale(1.04); }
}
@keyframes heroColorDrift {
  0% { transform: translate3d(3%, -4%, 0) rotate(-8deg) scale(1.02); opacity: 0.58; }
  100% { transform: translate3d(-4%, 3%, 0) rotate(10deg) scale(1.1); opacity: 0.82; }
}

/* Noise — subtle in day, very subtle in night */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
:root[data-theme="night"] .noise { opacity: 0.06; }

/* ───────── Divider ───────── */
.divider { height: 2px; background: var(--ink); margin: 0; opacity: 0.15; }
:root[data-theme="night"] .divider { opacity: 0.3; }

/* ───────── Avatar ───────── */
.avatar {
  border-radius: 50%;
  background: var(--amber);
  color: #1F1F22;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-head);
  flex-shrink: 0;
}
.topAvatarWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.topAvatarButton {
  padding: 0;
}
.topAvatarMenu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 168px;
  z-index: 220;
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(31,31,34,0.2);
}
.topAvatarMenuItem {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--t1);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
.topAvatarMenuItem:hover,
.topAvatarMenuItem:focus-visible {
  background: var(--surface2);
  border-color: var(--border);
  outline: none;
}
.topAvatarMenuItemDanger {
  color: var(--danger, #B42318);
}

/* ───────── Tag ───────── */
.tag {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--t1);
}

/* ───────── Stat Card ───────── */
.stat-value {
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1;
}

/* ───────── Feature icon box ───────── */
.icon-box {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  background: var(--amber);
  color: #1F1F22;
  box-shadow: none;
}

/* ───────── Tabs ───────── */
.tabs {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border-radius: var(--r);
  padding: 4px;
  border: 1px solid var(--border);
  box-shadow: none;
}
.tab {
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  color: var(--t2);
  border: 1px solid transparent;
  background: none;
  font-family: var(--font-body);
}
.tab.active {
  background: var(--amber);
  color: #1F1F22;
  border-color: color-mix(in oklch, var(--amber) 60%, var(--border-strong));
}
.tab:hover:not(.active) { color: var(--t1); background: var(--surface2); }

.sidebarCollapseButton {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
  color: var(--t2);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.sidebarCollapseButton:hover {
  background: var(--surface2);
  border-color: var(--rail-border);
  color: var(--t1);
}

.segmentedPill,
.themeSwitchPill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}
.themeSwitchPill {
  width: 128px;
  height: 38px;
  cursor: pointer;
}
.segmentedPill {
  height: 38px;
}
.segmentedPillThumb,
.themeSwitchPillThumb {
  position: absolute;
  z-index: 0;
  top: 3px;
  left: 3px;
  bottom: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--amber);
  transform: translateX(calc(var(--pill-index, 0) * 100%));
  transition: transform 0.24s cubic-bezier(.2,.8,.2,1), background 0.2s ease;
}
.segmentedPillSegment,
.themeSwitchPillSegment {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 54px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--t2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
  word-break: keep-all;
  line-height: 1;
}
.segmentedPillSegment {
  padding: 0 12px;
  font-family: var(--font-head);
  font-weight: 700;
}
.segmentedPillSegment.active,
.themeSwitchPillSegment.active {
  color: #1F1F22;
}

/* Responsive */
@media (max-width: 768px) {
  :root { --nav-h: 56px; }
  html { overflow-x: hidden; }
  html, body { width: 100%; max-width: 100%; }
  .container { max-width: 100%; padding-left: 16px; padding-right: 16px; }
  .section { padding: 52px 0; }
  .topNav {
    height: var(--nav-h) !important;
    padding: 0 10px !important;
    gap: 7px !important;
  }
  .topNav.topNavTransparent {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  .topNav.topNavTransparent.topNavImmersive {
    position: absolute !important;
  }
  .topNavLogoLink {
    height: 36px;
    align-items: center;
  }
  .topNavLogoLink > span:first-child {
    width: 34px !important;
    height: 34px !important;
  }
  .topMobileTools {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topMobileTools::-webkit-scrollbar { display: none; }
  .topQuickNav,
  .topNavCredit,
  .topNavUpgrade {
    display: none !important;
  }
  .topNavActions { gap: 6px !important; }
  .topNavAuthGroup { display: none !important; }
  .topNavBrand,
  .topNavLogin {
    display: none !important;
  }
  .topNavLogin,
  .topNavRegister {
    height: 34px !important;
    padding: 5px 9px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
  }
  .topNavBadge { display: none !important; }
  .topNavAvatar {
    width: 34px !important;
    height: 34px !important;
  }
  .topAvatarMenu {
    width: 156px;
    right: -2px;
  }
  .homeHeroPrompt {
    min-height: 56px;
    grid-template-columns: 36px minmax(0, 1fr) 40px;
    gap: 9px;
    padding: 8px;
    border-radius: 16px;
  }
  .homeHeroPromptIcon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .homeHeroPromptSend {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .homeHeroPromptText {
    font-size: 15px;
  }
  .announcementTopRail {
    min-height: 46px !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
    font-size: 12.5px !important;
  }
  .dashboardActivityRow {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start !important;
    gap: 10px !important;
    padding: 12px 8px !important;
  }
  .dashboardActivityTime {
    grid-column: 2;
    max-width: 100% !important;
  }
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .tab { white-space: nowrap; }
  .btn { max-width: 100%; }
  .settingsModalOverlay {
    padding: 64px 10px 10px;
    align-items: stretch;
  }
  .settingsModalShell {
    width: 100%;
    max-height: calc(100dvh - 74px);
    border-radius: 14px;
  }
  .main-content { padding-left: 0; }
}

.directoryRail,
.directoryMain,
.directoryAside,
.chatAssistantPanel,
.chatHistoryPanel,
.chatUnifiedScroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.directoryRail::-webkit-scrollbar,
.directoryMain::-webkit-scrollbar,
.directoryAside::-webkit-scrollbar,
.chatAssistantPanel::-webkit-scrollbar,
.chatHistoryPanel::-webkit-scrollbar,
.chatUnifiedScroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.directoryRail {
  position: relative;
  transition: width .18s ease, padding .18s ease;
}
.directoryRailToggle {
  width: calc(100% - 8px);
  min-height: 46px;
  margin: 14px 4px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dir-line);
  border-radius: 9px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
}
.directoryRail > .directoryRailToggle {
  width: calc(100% - 8px);
  height: 46px;
}
.directoryRail.isCollapsed {
  padding-left: 10px;
  padding-right: 10px;
}
.directoryRail.isCollapsed .directoryBrand {
  justify-content: center;
  padding: 0;
}
.directoryRail.isCollapsed .directoryBrand strong,
.directoryRail.isCollapsed .directoryPrimaryNavItem strong,
.directoryRail.isCollapsed .directoryCategoryTitle,
.directoryRail.isCollapsed .directoryCategoryItem span,
.directoryRail.isCollapsed .directorySubmitEntry span {
  display: none;
}
.directoryRail.isCollapsed .directoryPrimaryNavItem,
.directoryRail.isCollapsed .directoryCategoryItem,
.directoryRail.isCollapsed .directorySubmitEntry,
.directoryRail.isCollapsed > .directoryRailToggle {
  justify-content: center;
  padding: 0;
}
.directoryRail.isCollapsed .directoryPrimaryNavItem::after {
  display: none;
}
.directoryRail.isCollapsed .directorySubmitEntry {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.directoryPage:has(.directoryRail.isCollapsed),
.imageStudioPage:has(.directoryRail.isCollapsed) {
  grid-template-columns: 76px minmax(0, 1fr) 420px;
}
.chatUnifiedPage:has(.directoryRail.isCollapsed) {
  grid-template-columns: 76px 320px minmax(0, 1fr);
}
.directoryBottomIconButton {
  width: 40px;
  min-width: 40px;
  height: 40px;
  justify-content: center;
  border: 1px solid var(--dir-line) !important;
  border-radius: 10px;
  background: #fff !important;
  padding: 0 !important;
  font-size: 0 !important;
}
.directoryBottomIconButton span {
  margin-left: 3px;
  font: 800 9px/1 var(--font-mono);
}
.directoryLanguagePicker {
  position: relative;
}
.directoryLanguageMenu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  width: 224px;
  max-height: 360px;
  overflow: auto;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 2px solid var(--border-strong);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: 4px 5px 0 var(--shadow-strong, rgba(20,18,12,.16));
  z-index: 220;
  animation: retroMenuPop .22s var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
}
.directoryLanguageMenu button {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  padding: 0 10px;
  font-size: 13px;
  transition: background var(--duration-fast, .16s) var(--ease-smooth, ease),
              color var(--duration-fast, .16s) var(--ease-smooth, ease),
              border-color var(--duration-fast, .16s) var(--ease-smooth, ease);
}
.directoryLanguageMenu button:hover {
  background: var(--bg-soft);
  color: var(--text-main);
  border-color: var(--border-main);
}
.directoryLanguageMenu button.active {
  background: var(--text-main);
  color: var(--bg-card);
  border-color: var(--border-strong);
}
.directoryLanguageMenu span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-soft);
  color: inherit;
  font: 800 10px/1 var(--font-mono);
}
.directoryLanguageMenu button.active span {
  background: var(--bg-card);
  color: var(--text-main);
}
.directoryLanguageMenu strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 13px/1 var(--font-body);
}
@keyframes retroMenuPop {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.directoryCategoryItem {
  min-width: 0;
}
.directoryCategoryItem span {
  flex: 1;
}
.chatHeaderActions button.active {
  color: #ff8a1c;
  border-color: rgba(255,138,28,.45);
  background: rgba(255,138,28,.09);
}
.chatComposerModelPicker {
  width: min(260px, 48%);
  min-width: 170px;
}
.chatComposerModelPicker .capykaModelPicker,
.chatComposerModelPicker .capykaModelPickerButton {
  width: 100% !important;
}
@media (max-width: 1500px) {
  .chatUnifiedPage:has(.directoryRail.isCollapsed) {
    grid-template-columns: 76px 300px minmax(0, 1fr);
  }
}
@media (max-width: 1360px) {
  .directoryPage:has(.directoryRail.isCollapsed),
  .imageStudioPage:has(.directoryRail.isCollapsed) {
    grid-template-columns: 76px minmax(0, 1fr);
  }
}
@media (max-width: 1080px) {
  .chatUnifiedPage:has(.directoryRail.isCollapsed) {
    grid-template-columns: 76px minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .directoryRailToggle {
    display: none;
  }
  .chatComposerModelPicker {
    width: 100%;
  }
}

:root[data-theme="night"] .directoryPage,
:root[data-theme="night"] .chatUnifiedPage,
:root[data-theme="night"] .imageStudioPage {
  --dir-bg: var(--bg-page);
  --dir-line: var(--border-main);
  --dir-muted: var(--text-muted);
  --dir-text: var(--text-main);
  --dir-soft: var(--bg-soft, #2b2822);
  --chat-line: var(--border-main);
  --chat-text: var(--text-main);
  --chat-muted: var(--text-muted);
  background: var(--bg-page);
  color: var(--text-main);
}
:root[data-theme="night"] .directoryRail,
:root[data-theme="night"] .directoryMain,
:root[data-theme="night"] .directoryAside,
:root[data-theme="night"] .chatAssistantPanel,
:root[data-theme="night"] .chatHistoryPanel,
:root[data-theme="night"] .chatUnifiedMain,
:root[data-theme="night"] .chatUnifiedHeader {
  background: var(--bg-page);
  border-color: var(--border-main);
}
:root[data-theme="night"] .directoryPanel,
:root[data-theme="night"] .directoryToolCard,
:root[data-theme="night"] .directoryToolRow,
:root[data-theme="night"] .directoryCategoryGrid button,
:root[data-theme="night"] .directoryDetailCard,
:root[data-theme="night"] .directoryDetailPageHero,
:root[data-theme="night"] .directoryDetailPageGrid > section,
:root[data-theme="night"] .directoryDetailPageGrid > aside,
:root[data-theme="night"] .directorySearchWrap,
:root[data-theme="night"] .directoryAskBox,
:root[data-theme="night"] .directoryAskInput,
:root[data-theme="night"] .directorySubmitForm input,
:root[data-theme="night"] .directorySubmitForm select,
:root[data-theme="night"] .directorySubmitForm textarea,
:root[data-theme="night"] .newsHeaderPanel,
:root[data-theme="night"] .newsTopicPanel,
:root[data-theme="night"] .newsSubscribePanel,
:root[data-theme="night"] .newsFeaturePanel,
:root[data-theme="night"] .newsArticlePanel,
:root[data-theme="night"] .newsArticleRow,
:root[data-theme="night"] .newsSearchWrap,
:root[data-theme="night"] .chatAssistantSearch,
:root[data-theme="night"] .chatAssistantCard,
:root[data-theme="night"] .chatDiscoverButton,
:root[data-theme="night"] .chatHistoryMore,
:root[data-theme="night"] .newsPagination button,
:root[data-theme="night"] .chatUnifiedEmpty,
:root[data-theme="night"] .chatUnifiedThinking div,
:root[data-theme="night"] .chatPromptRow button,
:root[data-theme="night"] .chatUnifiedComposer,
:root[data-theme="night"] .chatComposerFooter button,
:root[data-theme="night"] .capykaModelPickerButton,
:root[data-theme="night"] .capykaModelPickerPanel,
:root[data-theme="night"] .directoryBackButton,
:root[data-theme="night"] .directoryRailToggle,
:root[data-theme="night"] .directoryBottomIconButton,
:root[data-theme="night"] .chatHistoryRowActions button,
:root[data-theme="night"] .chatHistoryModal,
:root[data-theme="night"] .chatHistoryModalHead > button,
:root[data-theme="night"] .chatHistoryArchiveBlock,
:root[data-theme="night"] .newsBreadcrumb button {
  background: var(--bg-card) !important;
  border-color: var(--border-main) !important;
  color: var(--text-secondary) !important;
}
:root[data-theme="night"] .chatHistoryRow.active {
  background: rgba(32,33,36,0.08) !important;
}
:root[data-theme="night"] .chatHistoryRowMain strong,
:root[data-theme="night"] .chatHistoryModalHead h2,
:root[data-theme="night"] .chatHistoryArchiveBlock > strong,
:root[data-theme="night"] .newsBreadcrumb strong {
  color: var(--text-main) !important;
}
:root[data-theme="night"] .chatHistoryRowMain span,
:root[data-theme="night"] .chatHistoryModalHead p,
:root[data-theme="night"] .chatHistoryModalBody h3,
:root[data-theme="night"] .chatHistoryModalBody p {
  color: var(--text-muted) !important;
}
:root[data-theme="night"] .newsHeroButton {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-soft)) !important;
}
:root[data-theme="night"] .newsDetailBody p,
:root[data-theme="night"] .newsDetailMeta {
  color: var(--text-secondary) !important;
}
:root[data-theme="night"] .directoryBrand,
:root[data-theme="night"] .directoryPrimaryNavItem.active,
:root[data-theme="night"] .directoryCategoryItem.active {
  background: rgba(255,138,28,.14) !important;
  color: #ffb56b !important;
}
:root[data-theme="night"] .directoryPrimaryNavItem span {
  background: rgba(255,138,28,.14);
}
:root[data-theme="night"] .directoryPrimaryNavItem strong,
:root[data-theme="night"] .directoryToolTop strong,
:root[data-theme="night"] .directoryToolRow strong,
:root[data-theme="night"] .directorySectionHead h1,
:root[data-theme="night"] .directorySectionHead h2,
:root[data-theme="night"] .directoryPanelTitle h2,
:root[data-theme="night"] .directoryDetailHero h2,
:root[data-theme="night"] .directoryDetailPageHero h1,
:root[data-theme="night"] .directoryDetailPageGrid h2,
:root[data-theme="night"] .newsHeaderPanel h1,
:root[data-theme="night"] .newsArticlePanel h2,
:root[data-theme="night"] .newsArticleRow h3,
:root[data-theme="night"] .newsTopicPanel h2,
:root[data-theme="night"] .newsSubscribePanel h2,
:root[data-theme="night"] .newsFeaturePanel h2,
:root[data-theme="night"] .chatCurrentAssistant strong,
:root[data-theme="night"] .chatAssistantPanel h2,
:root[data-theme="night"] .chatAssistantCard strong,
:root[data-theme="night"] .chatHistoryHead h2,
:root[data-theme="night"] .chatUnifiedEmpty h2 {
  color: var(--text-main) !important;
}
:root[data-theme="night"] .directoryCategoryTitle,
:root[data-theme="night"] .directoryCategoryItem,
:root[data-theme="night"] .directorySectionHead p,
:root[data-theme="night"] .directoryPanelTitle p,
:root[data-theme="night"] .directoryToolCard p,
:root[data-theme="night"] .directoryToolRow p,
:root[data-theme="night"] .directoryToolRow em,
:root[data-theme="night"] .directoryDetailHero p,
:root[data-theme="night"] .directoryDetailDesc,
:root[data-theme="night"] .directoryDetailPageHero p,
:root[data-theme="night"] .directoryDetailPageGrid p,
:root[data-theme="night"] .newsHeaderPanel p,
:root[data-theme="night"] .newsArticleRow p,
:root[data-theme="night"] .newsArticleRow span,
:root[data-theme="night"] .newsSubscribePanel p,
:root[data-theme="night"] .chatCurrentAssistant em,
:root[data-theme="night"] .chatAssistantCard em,
:root[data-theme="night"] .chatHistoryGroup h3,
:root[data-theme="night"] .chatHistoryGroup button,
:root[data-theme="night"] .chatUnifiedEmpty,
:root[data-theme="night"] .chatUnifiedComposer textarea {
  color: var(--text-muted) !important;
}
:root[data-theme="night"] .directorySearchWrap input,
:root[data-theme="night"] .directoryAskInput input,
:root[data-theme="night"] .newsSearchWrap input,
:root[data-theme="night"] .chatAssistantSearch input,
:root[data-theme="night"] .chatUnifiedComposer textarea {
  background: transparent !important;
  color: var(--text-main) !important;
}
:root[data-theme="night"] .directoryBottomBar {
  background: var(--bg-page);
  border-color: var(--border-main);
}
:root[data-theme="night"] .directoryLanguageMenu {
  background: var(--bg-card);
  border-color: var(--border-main);
}
:root[data-theme="night"] .directoryLanguageMenu button {
  color: var(--text-secondary);
}
:root[data-theme="night"] .directoryBottomBar button,
:root[data-theme="night"] .directoryBottomBar svg,
:root[data-theme="night"] .chatCurrentAssistant button,
:root[data-theme="night"] .chatHeaderActions button,
:root[data-theme="night"] .capykaModelGroupButton,
:root[data-theme="night"] .capykaModelOption {
  color: var(--text-secondary) !important;
}
:root[data-theme="night"] .capykaModelOption.active,
:root[data-theme="night"] .chatHistoryGroup button.active,
:root[data-theme="night"] .chatHeaderActions button.active {
  background: rgba(255,138,28,.16) !important;
  color: #ffb56b !important;
}

:root[data-theme="night"] .helpQuickLinks button,
:root[data-theme="night"] .helpCategoryGrid button,
:root[data-theme="night"] .authCard {
  background: var(--bg-card) !important;
  border-color: var(--border-main) !important;
  color: var(--text-secondary) !important;
}
:root[data-theme="night"] .helpCategoryGrid strong,
:root[data-theme="night"] .authCard h1 {
  color: var(--text-main) !important;
}
:root[data-theme="night"] .helpCategoryGrid p,
:root[data-theme="night"] .helpCategoryGrid em,
:root[data-theme="night"] .helpStatePanel,
:root[data-theme="night"] .authCard p,
:root[data-theme="night"] .authCard label,
:root[data-theme="night"] .authCard span {
  color: var(--text-muted) !important;
}
:root[data-theme="night"] .authOverlay {
  background: rgba(2,6,23,.68) !important;
}
:root[data-theme="night"] .authCard .authTabs,
:root[data-theme="night"] .authCard .authProviderButton,
:root[data-theme="night"] .authCard .authInput {
  background: var(--bg-soft) !important;
  border-color: var(--border-main) !important;
  color: var(--text-main) !important;
}
:root[data-theme="night"] .authCard .authTabs .tab.active {
  background: rgba(32,33,36,0.12) !important;
  color: var(--text-secondary) !important;
}
:root[data-theme="night"] .authLegalLinks a {
  color: var(--text-secondary);
}
:root[data-theme="night"] .authCloseButton {
  border-color: var(--border-main) !important;
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
}

.capykaChatPage .chatUnifiedHeader,
.capykaChatPage .chatUnifiedEmpty,
.capykaChatPage .capykaModelPickerInline {
  display: none !important;
}
.capykaChatPage .chatUnifiedMain {
  grid-template-rows: minmax(0, 1fr) auto auto;
}
.newsArticlePanel {
  min-width: 0;
}
.newsHeroButton {
  overflow: hidden;
}
.newsHeroButton h2,
.newsHeroButton p,
.newsArticleRow h3,
.newsArticleRow p,
.newsDetailPanel h2,
.newsDetailBody p {
  overflow-wrap: anywhere;
}
.newsDetailPanel {
  max-width: 1040px;
  border: 1px solid var(--dir-line);
  border-radius: 16px;
  background: #fff;
}
.newsDetailPanel .directoryBackButton {
  margin-bottom: 8px;
}
.newsDetailPanel .directoryDetailAction {
  width: 100%;
  margin-top: 26px;
}
:root[data-theme="night"] .newsMain {
  background: var(--bg-page) !important;
}
:root[data-theme="night"] .newsDetailPanel,
:root[data-theme="night"] .newsArticleRow {
  background: var(--bg-card) !important;
  border-color: var(--border-main) !important;
  color: var(--text-secondary) !important;
}
:root[data-theme="night"] .newsHeroButton {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-soft)) !important;
  border-color: var(--border-main) !important;
}
:root[data-theme="night"] .newsDetailKicker,
:root[data-theme="night"] .newsArticleRow b,
:root[data-theme="night"] .newsFilterRow button.active {
  background: rgba(255,138,28,.16) !important;
  border-color: rgba(255,138,28,.35) !important;
  color: #ffb56b !important;
}
:root[data-theme="night"] .newsDetailPanel h2,
:root[data-theme="night"] .newsHeroButton h2 {
  color: var(--text-main) !important;
}
:root[data-theme="night"] .newsHeroButton p,
:root[data-theme="night"] .newsHeroButton div,
:root[data-theme="night"] .newsDetailBody p,
:root[data-theme="night"] .newsDetailMeta,
:root[data-theme="night"] .newsPagination span,
:root[data-theme="night"] .newsPagination em {
  color: #b7c4d8 !important;
}

.chatUnifiedPage {
  grid-template-columns: 220px minmax(0, 1fr);
}
.chatUnifiedPage:has(.directoryRail.isCollapsed) {
  grid-template-columns: 76px minmax(0, 1fr);
}
.chatRailHistory {
  display: grid;
  gap: 12px;
}
.chatRailCreateButton,
.chatRailActionButton,
.directoryCategoryList button.directoryCategoryItem {
  width: 100%;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
}
.chatRailCreateButton {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff9a2e, #ffcc45);
  color: #111827;
  font-weight: 750;
}
.chatRailActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.chatRailActionButton {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--dir-line);
  border-radius: 9px;
  background: #fff;
  color: #596376;
  font-weight: 650;
  font-size: 12px;
}
.chatRailGroup {
  display: grid;
  gap: 8px;
}
.chatRailGroup h3 {
  margin: 8px 0 0;
  color: var(--dir-muted);
  font-size: 12px;
  font-weight: 700;
}
.chatRailHistory .chatHistoryRow {
  background: #fff;
  border: 1px solid var(--dir-line);
  border-radius: 10px;
  padding: 8px;
}
.chatRailHistory .chatHistoryRow.active {
  border-color: rgba(255,138,28,.45);
  background: rgba(255,138,28,.09);
}
.chatRailHistory .chatHistoryRowMain strong {
  font-size: 13px;
}
.chatRailHistory .chatHistoryRowActions {
  margin-top: 7px;
}
.directoryLanguageMenu {
  max-height: none;
  overflow: hidden;
}
.directorySubmitOverlay {
  z-index: 180;
  background: rgba(15,23,42,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.directorySubmitDialogCard {
  width: min(960px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  border: 1px solid var(--dir-line);
  border-radius: 18px;
  background: #fff;
  padding: 28px;
  box-shadow: 0 34px 100px rgba(15,23,42,.3);
  position: relative;
}
.newsHeroButton {
  min-height: 248px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  text-align: left;
  border: 1px solid var(--dir-line);
}
.newsHeroButton:has(.newsHeroMedia) {
  grid-template-columns: minmax(0, 1fr) 300px;
}
.newsHeroContent {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.newsHeroMedia,
.newsDetailImage {
  width: 100%;
  object-fit: cover;
  border: 1px solid var(--dir-line);
  background: var(--dir-soft);
}
.newsHeroMedia {
  height: 100%;
  min-height: 210px;
  border-radius: 13px;
  order: 2;
}
.newsHeroButton h2,
.newsHeroButton p,
.newsArticleRow h3,
.newsArticleRow p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.newsHeroButton h2 {
  -webkit-line-clamp: 2;
}
.newsHeroButton p {
  -webkit-line-clamp: 4;
}
.newsArticleRow h3 {
  -webkit-line-clamp: 2;
}
.newsArticleRow p {
  -webkit-line-clamp: 3;
}
.newsArticleRow.hasImage {
  grid-template-columns: 150px minmax(0, 1fr) auto;
}
.newsArticleThumb {
  width: 150px !important;
  height: 96px !important;
}
.newsArticleBody {
  min-width: 0;
}
.newsDetailImage {
  max-height: 360px;
  border-radius: 14px;
  margin-bottom: 22px;
}
.dashboardDirectoryPage {
  grid-template-columns: 228px minmax(0, 1fr) 340px;
}
.dashboardHeroPanel {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}
.dashboardAvatar {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff9a2e, #ffcc45);
  color: #111827;
  font-size: 26px;
  font-weight: 750;
}
.dashboardHeroPanel h1,
.dashboardPlanPanel h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 650;
}
.dashboardHeroPanel p {
  margin: 6px 0 0;
  color: var(--dir-muted);
  font: 600 13px/1.3 var(--font-mono);
}
.dashboardHeroPanel button,
.dashboardPlanPanel button,
.dashboardSubmissionRow button,
.dashboardSettingsPanel button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff9a2e, #ffcc45);
  color: #111827;
  cursor: pointer;
  font: 750 13px/1 var(--font-body);
  padding: 0 14px;
}
.dashboardGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.dashboardListPanel {
  display: grid;
  gap: 10px;
}
.dashboardActivityRow,
.dashboardSubmissionRow {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--dir-line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-align: left;
  padding: 12px;
}
.dashboardActivityRow span,
.dashboardSubmissionRow > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in oklch, var(--item-color, #ff8a1c) 14%, #fff);
  color: var(--item-color, #ff8a1c);
}
.dashboardActivityRow strong,
.dashboardSubmissionRow strong {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.dashboardActivityRow em,
.dashboardSubmissionRow em,
.dashboardSubmissionRow small,
.dashboardEmpty {
  color: var(--dir-muted);
  font-style: normal;
  font-size: 12px;
}
.dashboardActivityRow time,
.dashboardSubmissionRow b {
  color: #596376;
  font: 650 12px/1 var(--font-mono);
}
.dashboardSubmissionRow {
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
}
.dashboardTableWrap {
  overflow-x: auto;
}
.dashboardTableWrap table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}
.dashboardTableWrap th,
.dashboardTableWrap td {
  border-bottom: 1px solid var(--dir-line);
  padding: 13px 10px;
  text-align: left;
  font-size: 13px;
}
.dashboardTableWrap th,
.dashboardTableWrap td:first-child,
.dashboardTableWrap td:nth-child(3) {
  font-family: var(--font-mono);
}
.dashboardSettingsPanel {
  display: grid;
  gap: 16px;
}
.dashboardSettingsPanel label {
  display: grid;
  gap: 7px;
}
.dashboardSettingsPanel label span {
  color: #596376;
  font-size: 12px;
  font-weight: 700;
}
.dashboardSettingsPanel input {
  height: 46px;
  border: 1px solid var(--dir-line);
  border-radius: 10px;
  background: #fff;
  color: #111827;
  padding: 0 13px;
  font: 600 14px/1 var(--font-body);
}
.dashboardSettingsPanel > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dashboardSettingsPanel > div:last-child button:last-child {
  background: #fff;
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.22);
}
.dashboardPlanPanel {
  display: grid;
  gap: 10px;
}
.dashboardPlanPanel > span,
.dashboardPlanPanel p {
  color: var(--dir-muted);
  font-size: 13px;
}
.dashboardPlanPanel div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--dir-line);
  padding-top: 10px;
}
.dashboardPlanPanel b {
  font: 700 18px/1 var(--font-mono);
}
.dashboardPlanPanel em {
  color: var(--dir-muted);
  font-style: normal;
  font-size: 12px;
}
.dashboardUsageBar {
  display: grid;
  gap: 8px;
}
.dashboardUsageBar > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.dashboardUsageBar span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #394150;
  font-weight: 650;
}
.dashboardUsageBar em {
  color: #697386;
  font: normal 12px/1 var(--font-mono);
}
.dashboardUsageBar > b {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--dir-soft);
}
.dashboardUsageBar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--item-color, #ff8a1c);
}
.dashboardUsageBar button {
  width: fit-content;
  border: 0;
  background: transparent;
  color: #ff7a1a;
  cursor: pointer;
  padding: 0;
  font: 700 12px/1 var(--font-body);
}
.dashboardStatusPanel {
  color: #ff7a1a;
  font-weight: 700;
}
:root[data-theme="night"] .directorySubmitDialogCard,
:root[data-theme="night"] .dashboardActivityRow,
:root[data-theme="night"] .dashboardSubmissionRow,
:root[data-theme="night"] .dashboardSettingsPanel input {
  background: var(--bg-card) !important;
  border-color: var(--border-main) !important;
  color: var(--text-secondary) !important;
}
:root[data-theme="night"] .chatRailActionButton,
:root[data-theme="night"] .chatRailHistory .chatHistoryRow,
:root[data-theme="night"] .dashboardSettingsPanel > div:last-child button:last-child {
  background: var(--bg-card) !important;
  border-color: var(--border-main) !important;
  color: var(--text-secondary) !important;
}
:root[data-theme="night"] .dashboardHeroPanel h1,
:root[data-theme="night"] .dashboardPlanPanel h2,
:root[data-theme="night"] .dashboardActivityRow strong,
:root[data-theme="night"] .dashboardSubmissionRow strong,
:root[data-theme="night"] .dashboardUsageBar span,
:root[data-theme="night"] .dashboardSettingsPanel input {
  color: var(--text-main) !important;
}
:root[data-theme="night"] .dashboardActivityRow em,
:root[data-theme="night"] .dashboardSubmissionRow em,
:root[data-theme="night"] .dashboardSubmissionRow small,
:root[data-theme="night"] .dashboardEmpty,
:root[data-theme="night"] .dashboardSettingsPanel label span,
:root[data-theme="night"] .dashboardHeroPanel p,
:root[data-theme="night"] .dashboardPlanPanel > span,
:root[data-theme="night"] .dashboardPlanPanel p,
:root[data-theme="night"] .dashboardPlanPanel em,
:root[data-theme="night"] .dashboardUsageBar em {
  color: var(--text-muted) !important;
}
@media (max-width: 760px) {
  .directoryRail {
    position: sticky;
    top: 0;
    z-index: 120;
    padding: 10px 10px 8px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .directoryBrand {
    height: 44px;
    margin-bottom: 8px;
  }
  .directorySidePrimaryNav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
  }
  .directorySidePrimaryNav .directoryPrimaryNavItem {
    height: 44px;
    min-width: 0;
    gap: 6px;
    padding: 0 6px;
  }
  .directorySidePrimaryNav .directoryPrimaryNavItem span {
    display: inline-flex;
  }
  .directorySidePrimaryNav .directoryPrimaryNavItem strong {
    font-size: 13px;
  }
  .directoryCategoryToggle,
  .directoryCategoryList,
  .directorySubmitEntry {
    display: none !important;
  }
  .directoryMain {
    padding: 14px 12px 84px;
  }
  .newsHeaderPanel {
    gap: 14px;
  }
  .newsHeaderPanel h1 {
    font-size: 28px;
  }
  .newsHeroCard {
    min-height: 0;
    padding: 20px;
  }
  .newsHeroCard h2 {
    width: 100%;
    margin: 16px 0 10px;
    font-size: 24px;
  }
  .newsHeroCard div {
    flex-wrap: wrap;
    margin-top: 16px;
  }
  .newsArticleRow {
    padding: 18px;
    border-radius: 13px;
  }
  .newsArticleRow h3 {
    font-size: 19px;
  }
  .newsDetailPanel {
    padding: 20px;
    border-radius: 14px;
  }
  .newsDetailPanel h2 {
    font-size: 27px;
    line-height: 1.24;
  }
  .newsDetailBody {
    gap: 12px;
  }
  .newsDetailBody p {
    font-size: 16px;
    line-height: 1.8;
  }
  .chatUnifiedPage {
    display: block;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
  }
  .chatHistoryPanelDock {
    display: block !important;
    height: auto;
    max-height: 220px;
    padding: 14px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--chat-line);
  }
  .chatUnifiedMain {
    min-height: calc(100dvh - 170px);
  }
  .chatUnifiedComposer {
    width: calc(100% - 24px);
    min-height: 132px;
    margin-bottom: 74px;
  }
  .chatPromptRow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  .dashboardDirectoryPage {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .dashboardAside {
    display: none;
  }
  .dashboardGrid {
    grid-template-columns: 1fr;
  }
  .newsHeroButton:has(.newsHeroMedia) {
    grid-template-columns: minmax(0, 1fr);
  }
  .newsHeroMedia {
    order: -1;
    height: 190px;
    min-height: 190px;
  }
}

@media (max-width: 760px) {
  .dashboardHeroPanel {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .dashboardHeroPanel button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .dashboardAvatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 21px;
  }
  .dashboardHeroPanel h1 {
    font-size: 21px;
  }
  .dashboardSubmissionRow,
  .dashboardActivityRow {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .dashboardSubmissionRow b,
  .dashboardSubmissionRow small,
  .dashboardSubmissionRow button,
  .dashboardActivityRow time {
    grid-column: 2;
    width: fit-content;
  }
  .newsArticleRow.hasImage {
    grid-template-columns: minmax(0, 1fr);
  }
  .newsArticleThumb {
    width: 100% !important;
    height: 170px !important;
  }
}

.directoryPage,
.chatUnifiedPage,
.imageStudioPage,
.dashboardDirectoryPage {
  --dir-bg: #fff;
  --dir-line: rgba(226,232,240,.72);
  --dir-muted: #8490a3;
  background: #fff;
}
.directoryPage {
  grid-template-columns: 236px minmax(0, 1fr) 390px;
}
.chatUnifiedPage {
  grid-template-columns: 236px minmax(0, 1fr);
}
.imageStudioPage,
.dashboardDirectoryPage {
  grid-template-columns: 236px minmax(0, 1fr) 360px;
}
.directoryRail {
  padding: 20px 16px 86px;
  background: #fff;
  border-right: 0;
}
.directoryBrand {
  min-height: 62px;
  margin-bottom: 16px;
  background: #fff7f0;
  border: 0;
  border-radius: 12px;
}
.directoryPrimaryNav {
  gap: 8px;
  margin-bottom: 24px;
}
.directoryPrimaryNavItem,
.directoryAllTools {
  height: 52px;
  border: 0;
  background: transparent;
  border-radius: 12px;
}
.directoryPrimaryNavItem::after {
  display: none;
}
.directoryPrimaryNavItem.active,
.directoryPrimaryNavItem:hover,
.directoryCategoryItem.active,
.directoryCategoryItem:hover {
  background: color-mix(in oklch, var(--item-color, #ff8a1c) 10%, #fff);
  box-shadow: none;
}
.directorySubmitEntry,
.directoryRailToggle {
  display: none !important;
}
.directoryCategoryTitle {
  padding: 14px 10px 8px;
}
.directoryCategoryList {
  gap: 4px;
}
.directoryCategoryItem {
  height: 42px;
  border-radius: 11px;
}
.directoryMain {
  border-right: 0;
  background: #fff;
  padding: 32px 36px 92px;
}
.directoryAside {
  background: #fff;
  padding: 32px 24px 92px;
}
.directoryPanel,
.newsHeaderPanel,
.newsArticlePanel,
.directoryToolCard,
.directoryToolRow,
.directoryCategoryGrid button,
.directorySearchWrap,
.newsSearchWrap,
.directoryAskBox,
.newsTopicPanel,
.newsFeaturePanel,
.newsSubscribePanel,
.newsRelatedPanel,
.chatUnifiedComposer,
.chatUnifiedThinking div,
.chatUnifiedEmpty,
.chatHeaderActions button,
.chatHeaderModelSelect,
.chatRailHistory .chatHistoryRow,
.chatRailActionButton,
.chatHistoryRowActions button,
.newsBreadcrumb button,
.newsPagination button,
.newsDetailPanel,
.dashboardActivityRow,
.dashboardSubmissionRow,
.dashboardSettingsPanel input {
  border-color: transparent !important;
  box-shadow: none !important;
}
.directoryPanel {
  background: transparent;
  padding: 0;
}
.directoryHeroPanel,
.directoryPanel:not(.newsTopicPanel):not(.newsFeaturePanel):not(.newsSubscribePanel):not(.newsRelatedPanel) {
  background: transparent;
}
.directoryToolCard,
.directoryToolRow,
.directoryCategoryGrid button,
.directoryAskBox,
.chatRailHistory .chatHistoryRow {
  background: #fff;
}
.directoryToolCard:hover,
.directoryToolRow:hover {
  transform: none;
  box-shadow: none;
}
.directoryToolCard,
.directoryCategoryGrid button {
  background: #fff;
}
.directoryBottomBar {
  border-top: 0;
  background: rgba(255,255,255,.95);
  box-shadow: none;
}
.newsPage {
  grid-template-columns: 236px minmax(0, 1fr) 390px;
}
.newsMain {
  gap: 20px;
}
.newsHeaderPanel {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: center;
  padding: 0;
  background: transparent;
}
.newsHeaderPanel h1 {
  font-size: 30px;
  font-weight: 650;
}
.newsSearchWrap {
  height: 48px;
  margin: 0;
  background: #fff;
  outline: 1px solid rgba(226,232,240,.72);
  outline-offset: -1px;
}
.newsFilterRow {
  gap: 10px;
}
.newsFilterRow button {
  height: 36px;
  border: 0;
  background: var(--bg-soft);
}
.newsFilterRow button.active {
  background: var(--text-main);
  color: #fff;
}
.newsHeroButton {
  min-height: 290px;
  position: relative;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  padding: 30px;
  background: linear-gradient(135deg, #0f172a, #1f2a5c);
  color: #fff;
}
.newsHeroButton.hasImage .newsHeroMedia {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  border: 0;
  border-radius: inherit;
  opacity: .78;
}
.newsHeroButton.hasImage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(2,6,23,.88), rgba(2,6,23,.48), rgba(2,6,23,.12));
}
.newsHeroContent {
  position: relative;
  z-index: 2;
  max-width: 660px;
}
.newsHeroCard span {
  border: 0;
  background: var(--text-main);
  color: #fff;
}
.newsHeroButton h2 {
  width: 100%;
  color: #fff;
  font-size: 34px;
  line-height: 1.18;
}
.newsHeroButton p,
.newsHeroButton div {
  color: rgba(255,255,255,.82);
}
.newsArticlePanelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.newsArticlePanelHead h2 {
  margin: 0;
}
.newsArticlePanelHead button {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  background: var(--bg-soft);
  color: #64748b;
  cursor: pointer;
  font: 650 13px/1 var(--font-body);
  padding: 0 13px;
}
.newsArticleList {
  gap: 8px;
}
.newsArticleRow,
.newsArticleRow.hasImage {
  grid-template-columns: 180px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.newsArticleRow:not(.hasImage) {
  grid-template-columns: minmax(0, 1fr) auto;
}
.newsArticleThumb {
  width: 180px !important;
  height: 94px !important;
  border: 0 !important;
  border-radius: 10px;
}
.newsArticleRow h3 {
  font-size: 19px;
}
.newsArticleRow p {
  margin: 7px 0;
}
.newsTopicPanel,
.newsFeaturePanel,
.newsSubscribePanel,
.newsRelatedPanel {
  background: transparent;
}
.newsTopicPanel > div,
.newsFeaturePanel > div,
.newsRelatedPanel > div {
  gap: 14px;
  margin-top: 18px;
}
.newsTopicPanel button span {
  border: 0;
  background: var(--bg-soft);
}
.newsFeaturePanel button {
  grid-template-columns: minmax(0, 1fr) 18px;
}
.newsRelatedPanel button {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.newsRelatedPanel img {
  width: 84px;
  height: 58px;
  border-radius: 9px;
  object-fit: cover;
}
.newsRelatedPanel strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #111827;
  font-weight: 650;
}
.newsRelatedPanel em {
  display: block;
  margin-top: 5px;
  color: var(--dir-muted);
  font-style: normal;
}
.newsSubscribePanel div {
  border: 0;
  background: var(--bg-soft);
}
.newsDetailPanel {
  max-width: none;
  padding: 0;
  background: transparent;
}
.newsDetailImage {
  max-height: 360px;
  border: 0;
}
.newsDetailSummary {
  margin-top: 26px;
  padding: 22px;
  border-radius: 14px;
  background: #f7f3ff;
}
.newsDetailSummary h3 {
  margin: 0 0 12px;
  color: #111827;
  font-size: 20px;
  font-weight: 650;
}
.newsDetailSummary ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  color: #475569;
  line-height: 1.75;
}
.chatUnifiedMain {
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #fff;
}
.chatUnifiedHeader {
  padding: 28px 36px 16px;
  border: 0;
}
.chatHeaderModelSelect {
  height: 34px;
  max-width: 260px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #111827;
  outline: none;
  cursor: pointer;
  font: 650 16px/1 var(--font-body);
}
.chatCurrentAssistant > span {
  border-radius: 12px;
  background: #f1edff;
}
.chatCurrentAssistant em {
  margin-top: 3px;
}
.chatHeaderActions button {
  width: auto;
  height: 40px;
  gap: 8px;
  border: 0;
  background: var(--bg-soft);
  color: #64748b;
  font: 650 13px/1 var(--font-body);
  padding: 0 14px;
}
.chatHeaderActions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.chatUnifiedScroll {
  padding: 18px 36px 16px;
}
.chatUnifiedContent {
  max-width: 1120px;
}
.chatUnifiedEmpty {
  display: none;
}
.chatUnifiedComposer {
  width: min(1120px, calc(100% - 72px));
  min-height: 104px;
  gap: 7px;
  margin: 0 auto 82px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  outline: 1px solid rgba(226,232,240,.72);
  outline-offset: -1px;
}
.chatUnifiedComposer textarea {
  min-height: 38px;
  font: 550 15px/1.45 var(--font-body);
}
.chatComposerFooter button {
  height: 34px;
  border: 0;
  background: var(--bg-soft);
}
.chatComposerFooter .chatUnifiedSend {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
.chatRailCreateButton {
  min-height: 42px;
  border-radius: 11px;
}
.chatRailActionButton {
  background: var(--bg-soft);
}
@media (max-width: 1360px) {
  .directoryPage,
  .newsPage,
  .imageStudioPage,
  .dashboardDirectoryPage {
    grid-template-columns: 236px minmax(0, 1fr);
  }
  .chatUnifiedPage {
    grid-template-columns: 236px minmax(0, 1fr);
  }
}
@media (max-width: 1080px) {
  .newsHeaderPanel {
    grid-template-columns: 1fr;
  }
  .newsArticleRow.hasImage {
    grid-template-columns: 140px minmax(0, 1fr);
  }
  .newsArticleRow b {
    grid-column: 2;
    justify-self: start;
  }
  .newsArticleThumb {
    width: 140px !important;
  }
}
@media (max-width: 760px) {
  .directoryRail {
    padding: 12px 12px 10px;
    border-bottom: 0;
  }
  .directoryBrand {
    min-height: 48px;
  }
  .directoryPrimaryNavItem {
    height: 46px;
  }
  .directoryMain {
    padding: 18px 16px 82px;
  }
  .chatUnifiedHeader {
    padding: 18px 16px 10px;
  }
  .chatHeaderActions {
    display: none;
  }
  .chatUnifiedScroll {
    padding: 12px 16px;
  }
  .chatUnifiedComposer {
    width: calc(100% - 32px);
    min-height: 96px;
    margin-bottom: 76px;
  }
  .newsHeroButton {
    min-height: 240px;
    padding: 22px;
  }
  .newsHeroButton h2 {
    font-size: 26px;
  }
  .newsArticleRow.hasImage,
  .newsArticleRow:not(.hasImage) {
    grid-template-columns: 1fr;
  }
  .newsArticleRow b {
    grid-column: 1;
  }
  .newsArticleThumb {
    width: 100% !important;
    height: 170px !important;
  }
}
:root[data-theme="night"] .directoryPage,
:root[data-theme="night"] .chatUnifiedPage,
:root[data-theme="night"] .imageStudioPage,
:root[data-theme="night"] .dashboardDirectoryPage,
:root[data-theme="night"] .directoryRail,
:root[data-theme="night"] .directoryMain,
:root[data-theme="night"] .directoryAside,
:root[data-theme="night"] .chatUnifiedMain {
  background: var(--bg-page) !important;
  border-color: transparent !important;
}
:root[data-theme="night"] .directoryPanel,
:root[data-theme="night"] .newsHeaderPanel,
:root[data-theme="night"] .newsArticlePanel,
:root[data-theme="night"] .newsTopicPanel,
:root[data-theme="night"] .newsFeaturePanel,
:root[data-theme="night"] .newsSubscribePanel,
:root[data-theme="night"] .newsRelatedPanel,
:root[data-theme="night"] .newsDetailPanel {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
:root[data-theme="night"] .directoryPrimaryNavItem,
:root[data-theme="night"] .directoryToolCard,
:root[data-theme="night"] .directoryToolRow,
:root[data-theme="night"] .directoryCategoryGrid button,
:root[data-theme="night"] .newsArticleRow,
:root[data-theme="night"] .chatHeaderActions button,
:root[data-theme="night"] .chatRailActionButton,
:root[data-theme="night"] .chatRailHistory .chatHistoryRow,
:root[data-theme="night"] .chatUnifiedComposer,
:root[data-theme="night"] .chatComposerFooter button,
:root[data-theme="night"] .newsSearchWrap,
:root[data-theme="night"] .directorySearchWrap {
  background: var(--bg-card) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
:root[data-theme="night"] .directoryBrand,
:root[data-theme="night"] .directoryPrimaryNavItem.active,
:root[data-theme="night"] .directoryPrimaryNavItem:hover,
:root[data-theme="night"] .directoryCategoryItem.active,
:root[data-theme="night"] .directoryCategoryItem:hover {
  background: rgba(32,33,36,0.08) !important;
  color: var(--text-secondary) !important;
}
:root[data-theme="night"] .chatHeaderModelSelect {
  background: transparent !important;
  color: var(--text-main) !important;
}
:root[data-theme="night"] .newsArticleRow,
:root[data-theme="night"] .newsArticleRow h3,
:root[data-theme="night"] .newsRelatedPanel strong {
  color: var(--text-main) !important;
}
:root[data-theme="night"] .newsDetailSummary {
  background: rgba(32,33,36,0.08);
}
.newsPage {
  --news-purple: var(--text-main);
  --news-orange: var(--text-secondary);
  --news-purple-soft: var(--bg-soft);
  --news-line: #EEF0F6;
  --news-shadow: 0 12px 32px rgba(80, 70, 120, 0.06);
  grid-template-columns: 230px minmax(720px, 1fr) 430px;
  background: #FFFFFF;
}
.newsPage .directoryRail {
  padding: 24px 16px 86px;
  border-right: 1px solid var(--news-line);
  background: #FFFFFF;
}
.newsPage .directoryBrand {
  display: none;
}
.newsPage .directoryPrimaryNav {
  gap: 10px;
  margin-bottom: 76px;
}
.newsPage .directoryPrimaryNavItem,
.newsPage .directoryCategoryItem {
  border-radius: 12px;
  color: #586174;
  font-weight: 600;
}
.newsPage .directoryPrimaryNavItem span,
.newsPage .directoryCategoryItem svg {
  color: #7C8598;
  background: transparent;
}
.newsPage .directoryPrimaryNavItem.active,
.newsPage .directoryCategoryItem.active {
  background: var(--news-purple-soft) !important;
  color: var(--news-purple) !important;
}
.newsPage .directoryPrimaryNavItem.active span,
.newsPage .directoryCategoryItem.active svg {
  color: var(--news-purple) !important;
}
.newsPage .directoryCategoryTitle {
  padding: 14px 0 12px;
  color: #344054;
  font-size: 14px;
  font-weight: 600;
}
.newsMain {
  gap: 20px;
  padding: 42px 40px 96px;
}
.newsAside {
  gap: 18px;
  padding: 32px 28px 96px;
  border-left: 1px solid var(--news-line);
  background: #FFFFFF;
}
.newsHeaderPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 24px;
  align-items: start;
  padding: 0;
  background: transparent !important;
}
.newsHeaderPanel h1 {
  margin: 0 0 8px;
  color: #111827;
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}
.newsHeaderPanel p {
  margin: 0;
  color: #768197;
  font-size: 16px;
  font-weight: 500;
}
.newsSearchWrap {
  height: 48px;
  border-radius: 14px;
  background: #FFFFFF !important;
  outline: 1px solid var(--news-line);
  outline-offset: -1px;
  box-shadow: 0 8px 24px rgba(15,23,42,.025) !important;
}
.newsSearchWrap input {
  color: #111827;
  font-weight: 500;
}
.newsFilterRow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.newsFilterRow button {
  height: 38px;
  border: 0 !important;
  border-radius: 999px;
  background: #FFFFFF !important;
  color: #5D6678;
  padding: 0 20px;
  font-weight: 600;
  outline: 1px solid var(--news-line);
  outline-offset: -1px;
  box-shadow: 0 8px 22px rgba(15,23,42,.025) !important;
}
.newsFilterRow button.active {
  background: var(--news-purple) !important;
  color: #FFFFFF !important;
  outline-color: transparent;
}
.newsHeroButton {
  height: 260px;
  min-height: 260px;
  border: 0 !important;
  border-radius: 24px;
  background:
    radial-gradient(circle at 68% 45%, rgba(32,33,36,0.12), transparent 20%),
    radial-gradient(circle at 80% 30%, rgba(44,129,255,.28), transparent 24%),
    linear-gradient(135deg, #030A25 0%, #07133A 52%, #050817 100%) !important;
  box-shadow: var(--news-shadow) !important;
  padding: 30px;
}
.newsHeroButton.hasImage .newsHeroMedia {
  opacity: .72;
  filter: saturate(1.08) contrast(1.05);
}
.newsHeroButton.hasImage::before {
  background: linear-gradient(90deg, rgba(3,8,27,.92) 0%, rgba(3,8,27,.68) 48%, rgba(3,8,27,.2) 100%);
}
.newsHeroButton::after {
  content: 'AI';
  position: absolute;
  right: 86px;
  top: 50%;
  z-index: 1;
  width: 124px;
  height: 124px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255,255,255,.88);
  font: 700 38px/1 var(--font-mono);
  background: radial-gradient(circle, rgba(32,33,36,0.12), rgba(32,33,36,0.12) 58%, transparent 60%);
  outline: 8px solid rgba(255,255,255,.12);
  box-shadow: 0 0 52px rgba(32,33,36,0.12);
  pointer-events: none;
}
.newsHeroButton .newsHeroContent {
  max-width: 660px;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 0;
  margin-top: 0 !important;
}
.newsHeroPill {
  width: max-content;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--news-purple) !important;
  color: #FFFFFF !important;
  padding: 7px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.newsHeroButton h2 {
  display: -webkit-box;
  margin: 22px 0 8px;
  color: #FFFFFF;
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.28;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.newsHeroButton p {
  display: -webkit-box;
  max-width: 620px;
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.newsHeroButton .newsHeroMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 14px;
  font-weight: 600;
}
.newsHeroCard .newsHeroMeta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.78) !important;
  padding: 0 !important;
  font: inherit !important;
}
.newsHeroMeta i,
.newsArticleMeta i {
  color: #A6AEC0;
  font-style: normal;
}
.newsHeroButton .newsHeroDots {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 3;
  display: flex;
  gap: 12px;
  transform: translateX(-50%);
  margin-top: 0 !important;
}
.newsHeroCard .newsHeroDots span {
  width: 10px;
  height: 10px;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.76) !important;
  padding: 0 !important;
}
.newsHeroCard .newsHeroDots span.active {
  background: var(--news-purple) !important;
}
.newsArticlePanel {
  background: transparent !important;
}
.newsArticlePanelHead {
  margin: 12px 0 14px;
}
.newsArticlePanelHead h2 {
  color: #111827;
  font-size: 20px;
  font-weight: 700;
}
.newsArticlePanelHead button,
.newsPagination button {
  border-radius: 12px;
  background: #FFFFFF !important;
  color: #667085;
  outline: 1px solid var(--news-line);
  outline-offset: -1px;
}
.newsArticleList {
  gap: 0;
}
.newsArticleRow,
.newsArticleRow.hasImage {
  min-height: 120px;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: 22px;
  padding: 18px 6px;
  border: 0 !important;
  border-bottom: 1px solid var(--news-line) !important;
  border-radius: 0;
  background: transparent !important;
  transition: transform .16s ease, background .16s ease, padding .16s ease;
}
.newsArticleRow:hover {
  transform: translateY(-2px);
  background: #FCFAFF !important;
  padding-left: 14px;
  padding-right: 14px;
}
.newsArticleThumb {
  width: 180px !important;
  height: 100px !important;
  border: 0 !important;
  border-radius: 12px;
  object-fit: cover;
}
.newsArticleThumbFallback {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 68% 42%, rgba(32,33,36,0.12), transparent 24%),
    linear-gradient(135deg, #06112F, #0B1E4A);
  color: rgba(255,255,255,.88);
  font: 700 24px/1 var(--font-mono);
}
.newsArticleThumbFallback span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  outline: 5px solid rgba(255,255,255,.12);
}
.newsArticleBody h3 {
  color: #111827;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}
.newsArticleBody p {
  margin: 8px 0 12px;
  color: #667085;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}
.newsArticleMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  color: #98A2B3 !important;
  font-size: 13px;
  font-weight: 600;
}
.newsArticleMeta em:last-child {
  font-family: var(--font-mono);
}
.newsArticleRow b,
.newsDetailKicker {
  border-radius: 8px;
  background: var(--bg-soft) !important;
  color: var(--text-secondary) !important;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 700;
}
.newsEmptyState {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: #98A2B3;
  font-weight: 600;
}
.newsTopicPanel,
.newsFeaturePanel,
.newsSubscribePanel,
.newsRelatedPanel {
  border: 1px solid var(--news-line) !important;
  border-radius: 24px !important;
  background: #FFFFFF !important;
  box-shadow: var(--news-shadow) !important;
  padding: 24px !important;
}
.newsTopicPanel h2,
.newsFeaturePanel h2,
.newsSubscribePanel h2,
.newsRelatedPanel h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #111827;
  font-size: 21px;
  font-weight: 700;
}
.newsTopicPanel h2 svg {
  color: var(--news-orange);
}
.newsFeaturePanel h2 svg,
.newsSubscribePanel h2 svg,
.newsRelatedPanel h2 svg {
  color: var(--news-purple);
}
.newsTopicPanel > div,
.newsFeaturePanel > div,
.newsRelatedPanel > div {
  gap: 16px;
  margin-top: 22px;
}
.newsTopicPanel button:not(.newsPanelAction) {
  min-height: 36px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  color: #111827;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.newsTopicRank {
  width: 26px;
  height: 26px;
  display: grid !important;
  place-items: center;
  border-radius: 7px !important;
  background: #F5F7FB !important;
  color: #344054 !important;
  padding: 0 !important;
  font: 700 13px/1 var(--font-mono) !important;
}
.newsTopicPanel button:nth-child(-n+3) .newsTopicRank {
  background: linear-gradient(135deg, #FF6A2D, #FFC84D) !important;
  color: #FFFFFF !important;
}
.newsTopicPanel strong,
.newsFeaturePanel strong,
.newsRelatedPanel strong {
  min-width: 0;
  color: #263244;
  font-size: 15px;
  font-weight: 700;
}
.newsTopicPanel em,
.newsFeaturePanel em,
.newsRelatedPanel em {
  color: #98A2B3;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
}
.newsTopicPanel em {
  font-family: var(--font-mono);
}
.newsPanelAction {
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  border: 0;
  border-radius: 12px;
  background: #FFFFFF;
  color: #667085;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
  outline: 1px solid var(--news-line);
  outline-offset: -1px;
}
.newsTopicPanel .newsPanelAction,
.newsFeaturePanel .newsPanelAction {
  display: flex !important;
}
.newsFeaturePanel button {
  min-height: 35px;
  border: 0;
  background: transparent;
  padding: 0;
}
.newsFeaturePanel button > span {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.newsSubscribePanel p {
  margin: 16px 0 20px;
  color: #667085;
  font-size: 14px;
  font-weight: 500;
}
.newsSubscribePanel div {
  height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 10px;
  border: 0 !important;
  background: transparent !important;
}
.newsSubscribePanel input {
  height: 52px;
  border: 0;
  border-radius: 12px;
  background: #FFFFFF;
  color: #111827;
  padding: 0 16px;
  font-weight: 500;
  outline: 1px solid var(--news-line);
  outline-offset: -1px;
}
.newsSubscribePanel button {
  height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--news-purple) !important;
  color: #FFFFFF;
  cursor: pointer;
  font-weight: 700;
}
.newsSubscribeStatus {
  display: block;
  margin-top: 10px;
  color: var(--news-purple);
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
}
.newsRelatedPanel button {
  min-height: 64px;
}
.newsBreadcrumb {
  margin: 0;
}
.newsBreadcrumb button,
.newsBreadcrumb strong {
  color: #667085;
  font-size: 14px;
  font-weight: 700;
}
.newsDetailPanel {
  width: min(880px, 100%);
  max-width: 880px;
  padding: 0 !important;
  background: transparent !important;
}
.newsDetailTopline {
  margin-bottom: 22px;
}
.newsDetailPanel h2 {
  margin: 0 0 18px;
  color: #111827;
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.35;
}
.newsDetailMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-bottom: 24px;
}
.newsDetailMeta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #667085;
  font-size: 13px;
  font-weight: 600;
}
.newsDetailMeta span:nth-last-child(2) em {
  font-family: var(--font-mono);
}
.newsDetailImage {
  width: 100%;
  height: 340px;
  max-height: 340px;
  border: 0 !important;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: var(--news-shadow);
}
.newsDetailImageFallback {
  background:
    radial-gradient(circle at 70% 46%, rgba(32,33,36,0.12), transparent 22%),
    linear-gradient(135deg, #030A25, #081442);
}
.newsDetailBody {
  max-width: 880px;
  margin-top: 28px;
}
.newsDetailBody p {
  color: #344054;
  font-size: 17px;
  line-height: 1.9;
}
.newsDetailSummary {
  border-radius: 24px;
  background: var(--news-purple-soft);
  padding: 24px;
}
.newsDetailSummary h3 {
  font-size: 20px;
  font-weight: 700;
}
.newsDetailActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.newsDetailActions button,
.newsDetailActions a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: #FFFFFF;
  color: #667085;
  cursor: pointer;
  padding: 0 16px;
  text-decoration: none;
  font: 700 14px/1 var(--font-body);
  outline: 1px solid var(--news-line);
  outline-offset: -1px;
}
.newsDetailActions button.active {
  background: var(--news-purple-soft);
  color: var(--news-purple);
}
@media (max-width: 1500px) {
  .newsPage {
    grid-template-columns: 230px minmax(0, 1fr) 380px;
  }
  .newsAside {
    padding-left: 22px;
    padding-right: 22px;
  }
}
@media (max-width: 1360px) {
  .newsPage {
    grid-template-columns: 230px minmax(0, 1fr);
  }
  .newsAside {
    display: none;
  }
}
@media (max-width: 920px) {
  .newsHeaderPanel {
    grid-template-columns: 1fr;
  }
  .newsArticleRow,
  .newsArticleRow.hasImage {
    grid-template-columns: 150px minmax(0, 1fr);
  }
  .newsArticleRow b {
    grid-column: 2;
    justify-self: start;
  }
  .newsArticleThumb {
    width: 150px !important;
  }
}
@media (max-width: 760px) {
  .newsPage {
    display: block;
  }
  .newsPage .directoryRail {
    padding-bottom: 14px;
  }
  .newsPage .directoryPrimaryNav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
  }
  .newsPage .directoryPrimaryNavItem {
    height: 46px;
    padding: 0 8px;
  }
  .newsPage .directoryPrimaryNavItem strong {
    font-size: 12px;
  }
  .newsMain {
    padding: 22px 16px 86px;
  }
  .newsHeroButton {
    height: 250px;
    min-height: 250px;
    padding: 22px;
  }
  .newsHeroButton::after {
    right: 22px;
    width: 86px;
    height: 86px;
    font-size: 26px;
  }
  .newsHeroButton h2 {
    font-size: 25px;
  }
  .newsHeroButton p {
    -webkit-line-clamp: 2;
  }
  .newsArticleRow,
  .newsArticleRow.hasImage,
  .newsArticleRow:not(.hasImage) {
    grid-template-columns: 1fr;
  }
  .newsArticleRow b {
    grid-column: 1;
  }
  .newsArticleThumb {
    width: 100% !important;
    height: 178px !important;
  }
  .newsDetailPanel h2 {
    font-size: 28px;
  }
  .newsDetailImage {
    height: 230px;
  }
}

html,
body {
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-page) 100%);
}

.directoryPage.directoryPortal {
  --dir-bg: var(--bg-page);
  --dir-line: var(--border-main);
  --dir-muted: #8b95aa;
  --dir-text: #141827;
  width: 100%;
  min-height: 100dvh; /* 自然文档流：整页随内容增高，底部栏 fixed 不占文档高度 */
  margin: 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 320px;
  gap: 0 20px;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-page) 100%);
  color: var(--dir-text);
  overflow: visible;
}

.directoryTopTabs {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: end;
  gap: 10px;
  height: 72px;
}

.directoryTopTab {
  width: 190px;
  height: 72px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 28px;
  border-radius: 24px 24px 0 0;
  background: var(--tab-fold);
  color: #4b5366;
  font: 600 18px/1 var(--font-body);
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(242,235,255,.75);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}

.directoryTopTab::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 0 9px 0 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88) 0 49%, rgba(255,255,255,0) 50%),
    var(--tab-fold);
  box-shadow: inset -1px -1px 0 rgba(32,33,36,0.12);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.directoryTopTab.active {
  background: #fff;
  color: #151827;
  box-shadow: inset 0 0 0 1px var(--border-main), 0 -6px 24px rgba(32,33,36,0.06);
}

.directoryPage.directoryPortal .directoryRail {
  grid-column: 1;
  grid-row: 1;
  width: 240px;
  min-height: 0;
  padding: 0 0 8px;
  background: transparent;
  border: 0;
  position: sticky;
  top: var(--top-pad, 32px);
  align-self: start;
  overflow: visible;
}

.directoryPage.directoryPortal .directorySidePrimaryNav {
  gap: 8px;
  margin: 0 0 30px;
}

.directoryPage.directoryPortal .directoryPrimaryNavItem {
  height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #222838;
  box-shadow: none;
  transition: transform var(--duration-normal) var(--ease-out-expo), background var(--duration-normal) var(--ease-smooth), color var(--duration-normal) var(--ease-smooth);
}

.directoryPage.directoryPortal .directoryPrimaryNavItem span {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--text-main);
  background: transparent;
}

.directoryPage.directoryPortal .directoryPrimaryNavItem strong {
  font-size: 16px;
  font-weight: 600;
}

.directoryPage.directoryPortal .directoryPrimaryNavItem.active {
  background: var(--bg-soft);
  color: var(--text-main);
}

.directoryPage.directoryPortal .directoryPrimaryNavItem:hover {
  background: var(--bg-soft);
  transform: translateX(2px);
}

.directoryPage.directoryPortal .directoryCategoryTitle {
  padding: 0 14px 12px;
  color: #8f98ab;
  font-size: 15px;
  font-weight: 600;
}

.directoryPage.directoryPortal .directoryCategoryList {
  display: grid;
  gap: 8px;
  padding: 0;
}

.directoryPage.directoryPortal .directoryCategoryItem {
  height: 46px;
  padding: 0 16px;
  border-radius: 15px;
  background: transparent;
  color: #2b3142;
  font: 600 15px/1.2 var(--font-body);
  transition: transform var(--duration-normal) var(--ease-out-expo), background var(--duration-normal) var(--ease-smooth), color var(--duration-normal) var(--ease-smooth);
}

.directoryPage.directoryPortal .directoryCategoryItem svg {
  flex: 0 0 24px;
  color: #7f89a1;
}

.directoryPage.directoryPortal .directoryCategoryItem.active {
  background: var(--bg-soft);
  color: var(--text-main);
}

.directoryPage.directoryPortal .directoryCategoryItem:hover {
  background: var(--bg-soft);
  transform: translateX(2px);
}

.directoryPage.directoryPortal .directoryMain {
  grid-column: 2;
  grid-row: 1;
  height: auto;
  min-height: 0;
  align-self: start; /* 不被高的右栏拉伸，内容贴顶 */
  display: block;
  padding: 0 0 4px; /* 顶部/底部安全距离由 AppShell 统一控制 */
  background: transparent;
  border: 0;
  overflow: visible; /* 整页滚动，不再内部滚动，避免短内容时底部大空白 */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: no-preference) {
  .directoryPage.directoryPortal .directoryHeroPanel {
    animation: capykaRevealUp var(--duration-slow) var(--ease-out-expo) both;
  }
  .directoryPage.directoryPortal .directorySection {
    animation: capykaRevealUp var(--duration-slow) var(--ease-out-expo) both;
    animation-delay: 0.08s;
  }
  .directoryPage.directoryPortal .directorySection + .directorySection {
    animation-delay: 0.14s;
  }
  .directoryPage.directoryPortal .directorySection + .directorySection + .directorySection {
    animation-delay: 0.2s;
  }
  .directoryPage.directoryPortal .directoryToolCard {
    animation: capykaRevealUp var(--duration-normal) var(--ease-out-expo) both;
  }
  .directoryPage.directoryPortal .directoryToolGrid .directoryToolCard:nth-child(1) { animation-delay: 0.06s; }
  .directoryPage.directoryPortal .directoryToolGrid .directoryToolCard:nth-child(2) { animation-delay: 0.1s; }
  .directoryPage.directoryPortal .directoryToolGrid .directoryToolCard:nth-child(3) { animation-delay: 0.14s; }
  .directoryPage.directoryPortal .directoryToolGrid .directoryToolCard:nth-child(4) { animation-delay: 0.18s; }
  .directoryPage.directoryPortal .directoryToolGrid .directoryToolCard:nth-child(n+5) { animation-delay: 0.22s; }
  .newsPage .newsHeaderPanel {
    animation: capykaRevealUp var(--duration-slow) var(--ease-out-expo) both;
  }
  .newsPage .newsArticlePanel {
    animation: capykaRevealUp var(--duration-slow) var(--ease-out-expo) both;
    animation-delay: 0.1s;
  }
}

.directoryHeroPanel,
.directorySection {
  padding: 0;
  background: transparent;
}

.directorySection {
  margin-top: 40px;
}

.directoryHeroCopy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  align-items: start;
  gap: 28px;
}

.directoryHeroCopy h1 {
  margin: 0;
  color: #111827;
  font-size: 48px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: 0;
}

.directoryHeroCopy p {
  margin: 14px 0 0;
  color: #8490a3;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 500;
}

.directorySearchWrap {
  height: 58px;
  margin: 0;
  padding: 0 18px 0 22px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border-main), 0 12px 30px rgba(18,24,40,.035) !important;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}

.directorySearchWrap:focus-within {
  box-shadow: inset 0 0 0 1px #e6dcff, 0 0 0 4px rgba(32,33,36,0.12) !important;
}

.directorySearchWrap input {
  font-size: 15px;
  font-weight: 500;
}

.directorySectionHead.compact {
  margin: 0 0 24px;
}

.directorySectionHead h2,
.directoryPanelTitle h2 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
}

.directorySectionHead button {
  color: #8a94a8;
  font-weight: 600;
}

.directoryToolGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.directoryToolCard {
  height: 190px;
  min-height: 190px;
  padding: 24px;
  border: 0;
  border-radius: 28px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border-main) !important;
  transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) var(--ease-smooth), background var(--duration-normal) var(--ease-smooth);
  will-change: transform;
}

.directoryToolCard:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: inset 0 0 0 1px #e6dcff !important;
}

.directoryToolTop {
  gap: 16px;
}

.directoryToolCard img {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
}

.directoryToolCard strong {
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
}

.directoryToolCard p {
  min-height: 54px;
  margin: 18px 0;
  color: #778297;
  font-size: 14px;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.directoryToolCard span,
.directoryLatestCard b {
  border-radius: 9px;
  background: #f5f3ff;
  color: #8d6bff;
  font-weight: 600;
}

.directoryCategoryGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.directoryCategoryGrid button {
  height: 110px;
  min-height: 110px;
  grid-template-columns: 46px minmax(0, 1fr) 22px;
  gap: 4px 16px;
  padding: 24px;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: #151b2c;
  box-shadow: inset 0 0 0 1px var(--border-main) !important;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}

.directoryCategoryGrid button:hover,
.directoryCategoryGrid button.active {
  background: #fcfaff;
  box-shadow: inset 0 0 0 1px #e6dcff !important;
}

.directoryCategoryGrid button > svg:first-child {
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 15px;
  color: var(--text-main);
  background: #f5f1ff;
}

.directoryCategoryGrid button > svg:last-child {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  color: #9aa4b8;
}

.directoryCategoryGrid button strong {
  align-self: end;
  font-size: 17px;
  font-weight: 600;
}

.directoryCategoryGrid button span {
  grid-column: 2;
  color: #8994a8;
  font-size: 14px;
  font-weight: 500;
}

.directoryLatestGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.directoryLatestCard {
  height: 120px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 16px;
  padding: 22px;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: #141827;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border-main);
  transition: all .25s cubic-bezier(.4,0,.2,1);
  content-visibility: auto;
  contain-intrinsic-size: 120px;
}

.directoryLatestCard:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px #e6dcff;
}

.directoryLatestCard img {
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: none;
}

.directoryLatestCard strong {
  display: block;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}

.directoryLatestCard em {
  display: block;
  margin-top: 7px;
  color: #828da2;
  font: normal 13px/1.35 var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.directoryLatestCard b {
  width: fit-content;
  padding: 6px 10px;
  font: 600 12px/1 var(--font-mono);
}

.directoryPage.directoryPortal .directoryAside {
  grid-column: 3;
  grid-row: 1;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 40px;
  padding: 0 0 8px;
  background: transparent;
  border: 0;
  position: sticky;
  top: var(--top-pad, 32px);
  align-self: start;
  overflow: visible;
}

.directoryAside .directoryPanel {
  padding: 0;
  background: transparent;
}

.directoryPanelTitle {
  margin-bottom: 20px;
}

.directoryPanelTitle > svg {
  color: var(--text-main);
}

.directoryPanelTitle p {
  margin-top: 7px;
  color: #8994a8;
  font-size: 14px;
  line-height: 1.55;
}

.directoryAskBox {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.directoryAskBox strong {
  margin: 0 0 14px;
  color: #6f798d;
  font-size: 14px;
  font-weight: 500;
}

.directoryAskBox div {
  grid-template-columns: 1fr;
  gap: 10px;
}

.directoryAskBox button {
  height: 52px;
  min-height: 52px;
  justify-content: flex-start;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #283044;
  box-shadow: inset 0 0 0 1px #f0ebff;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}

.directoryAskBox button:hover {
  background: var(--bg-soft);
}

.directoryAskInput {
  height: 58px;
  margin-top: 18px;
  grid-template-columns: minmax(0, 1fr) 44px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #f0ebff;
}

.directoryAskInput button {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--text-main);
}

.directoryNewsList {
  gap: 10px;
}

.directoryNewsList button {
  height: 88px;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  padding: 10px;
  border-radius: 18px;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}

.directoryNewsList button:hover {
  background: #faf9ff;
}

.directoryNewsList img {
  width: 76px;
  height: 64px;
  border: 0;
  border-radius: 14px;
}

.directoryNewsList strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.directoryNewsList em {
  margin-top: 7px;
  color: #8994a8;
  font: normal 12px/1.3 var(--font-mono);
}

.directoryWideAction {
  height: 46px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border-main);
}

.backToTopBtn {
  position: fixed;
  right: max(28px, env(safe-area-inset-right));
  bottom: max(88px, calc(78px + env(safe-area-inset-bottom)));
  z-index: 220;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 2px solid var(--border-strong, rgba(15, 23, 42, 0.14));
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--ink, #18181b);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 12px, 0);
  transition: transform var(--duration-normal) var(--ease-spring), background var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth), opacity var(--duration-normal) var(--ease-out-expo);
}

.backToTopBtn.isVisible {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.backToTopBtnGlyph {
  font: 700 22px/1 var(--font-body, system-ui, sans-serif);
}

.backToTopBtn:hover {
  transform: translateY(-2px);
  background: var(--amber, #f6c84c);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
}

.backToTopBtn.isVisible:hover {
  transform: translateY(-2px);
}

.backToTopBtn:active {
  transform: translateY(0);
}

:root[data-theme="night"] .backToTopBtn {
  background: #1c1c22;
  color: #f4f4f5;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
}

:root[data-theme="night"] .backToTopBtn:hover {
  background: #f6c84c;
  color: #1a1a1a;
}

@media (max-width: 768px) {
  .backToTopBtn {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(78px, calc(64px + env(safe-area-inset-bottom)));
    width: 42px;
    height: 42px;
  }
}

.directoryPage.directoryPortal .directoryBottomBar {
  grid-column: 1 / -1;
  grid-row: 2;
  position: static;
  min-height: 64px;
  padding: 0;
  border-top: 1px solid var(--border-main);
  background: transparent;
  backdrop-filter: none;
}

:root[data-theme="night"] .directoryPage.directoryPortal .directoryBottomBar {
  border-color: var(--border-main);
}

.directoryPage.directoryPortal .directoryBottomBar > div {
  gap: 28px;
}

.directoryPage.directoryPortal .directoryBottomBar button,
.directoryBottomStatusButton {
  height: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0 !important;
  background: transparent !important;
  color: #707b91;
  font: 600 14px/1 var(--font-body);
  padding: 0 !important;
}

.directoryBottomStatusButton span {
  font: 600 14px/1 var(--font-body);
}

.directoryLanguageMenu {
  border: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--border-main), 0 18px 50px rgba(18,24,40,.08);
}

@media (max-width: 1360px) {
  .directoryPage.directoryPortal {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .directoryPage.directoryPortal .directoryAside {
    display: none;
  }
  .directoryToolGrid,
  .directoryLatestGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .directoryPage.directoryPortal {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) 64px;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .directoryTopTabs {
    overflow-x: auto;
  }
  .directoryPage.directoryPortal .directoryRail {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    padding: 18px 0 6px;
  }
  .directoryPage.directoryPortal .directorySidePrimaryNav,
  .directoryPage.directoryPortal .directoryCategoryList {
    display: flex;
    gap: 8px;
    overflow-x: auto;
  }
  .directoryPage.directoryPortal .directoryPrimaryNavItem,
  .directoryPage.directoryPortal .directoryCategoryItem {
    flex: 0 0 auto;
  }
  .directoryPage.directoryPortal .directoryMain {
    grid-column: 1;
    grid-row: 2;
    overflow: visible;
    padding: 28px 0 40px;
  }
  .directoryPage.directoryPortal .directoryBottomBar {
    grid-row: 3;
  }
  .directoryHeroCopy {
    grid-template-columns: 1fr;
  }
  .directorySearchWrap {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .directoryPage.directoryPortal {
    padding: 12px 14px 0;
    display: grid;
  }
  .directoryTopTab {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 62px;
    padding: 0 16px;
    font-size: 16px;
  }
  .directoryTopTabs {
    gap: 8px;
    overflow: visible;
  }
  .directoryHeroCopy h1 {
    font-size: 34px;
  }
  .directoryToolGrid,
  .directoryCategoryGrid,
  .directoryLatestGrid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .directorySection {
    margin-top: 32px;
  }
  .directoryToolCard {
    height: auto;
    min-height: 176px;
  }
  .directoryCategoryGrid button,
  .directoryLatestCard {
    height: 108px;
  }
  .directoryPage.directoryPortal .directoryBottomBar {
    gap: 10px;
  }
  .directoryPage.directoryPortal .directoryBottomBar > div {
    gap: 12px;
  }
  .directoryPage.directoryPortal .directoryBottomBar button {
    font-size: 0;
  }
  .directoryBottomStatusButton span {
    display: none;
  }
}

.chatWorkbenchPage {
  --chat-line: var(--border-main);
  --chat-text: #141827;
  --chat-muted: #8b95aa;
  width: 100%;
  height: 100dvh;
  min-height: 760px;
  margin: 0;
  padding: var(--top-pad, 32px) 20px calc(var(--bottom-bar-h, 56px) + 12px);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) !important; /* 右侧辅助栏已并入聊天框 */
  grid-template-rows: minmax(0, 1fr);
  gap: 0 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-page) 100%);
  color: var(--chat-text);
}

.chatWorkbenchPage .directoryTopTabs {
  grid-column: 1 / -1;
  grid-row: 1;
  height: 72px;
  gap: 10px;
  align-items: end;
}

.chatWorkbenchPage .directoryTopTab {
  width: 180px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: var(--tab-fold);
  color: #4b5366;
  box-shadow: inset 0 0 0 1px rgba(242,235,255,.72);
  font: 600 18px/1 var(--font-body);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}

.chatWorkbenchPage .directoryTopTab::after {
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 0 10px 0 10px;
  background:
    radial-gradient(circle at 0 100%, rgba(255,255,255,0) 0 48%, #f6ecff 49% 100%);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.04);
  clip-path: none;
}

.chatWorkbenchPage .directoryTopTab.active {
  border-color: #efe7ff;
  background: #fff;
  color: #151827;
  box-shadow: 0 -8px 30px rgba(120,80,255,.06);
}

.chatWorkbenchPage .directoryRail {
  grid-column: 1;
  grid-row: 1;
  width: 240px;
  height: auto;
  min-height: 0;
  padding: 24px 18px;
  overflow: hidden;
  border: 1px solid var(--border-main);
  border-radius: 28px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(32,33,36,0.08);
}

.chatWorkbenchPage .directoryBrand {
  display: none;
}

.chatWorkbenchPage .directorySidePrimaryNav {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
}

.chatWorkbenchPage .directoryPrimaryNavItem {
  min-height: 42px;
  border-radius: 12px;
  padding: 0 10px;
}

.chatWorkbenchPage .directoryPrimaryNavItem.active {
  background: var(--bg-soft);
  color: var(--text-main);
}

.chatWorkbenchPage .directoryCategoryTitle {
  height: 30px;
  margin: 0 0 14px;
  padding: 0 2px;
  background: transparent;
  color: #151827;
  font: 600 20px/1 var(--font-body);
}

.chatWorkbenchPage .directoryCategoryTitle svg {
  display: none;
}

.chatWorkbenchPage .chatRailHistory {
  min-height: calc(100dvh - 424px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chatWorkbenchPage .chatRailCreateButton {
  height: 52px;
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #8c52ff, #6b4eff);
  color: #fff;
  box-shadow: 0 14px 26px rgba(107,78,255,.18);
  font-weight: 600;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}

.chatWorkbenchPage .chatRailCreateButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(107,78,255,.22);
}

.chatWorkbenchPage .chatRailGroup {
  display: grid;
  gap: 8px;
}

.chatWorkbenchPage .chatRailGroup h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 4px 4px;
  color: #7d879b;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}

.chatWorkbenchPage .chatRailGroup h3::before {
  width: 3px;
  height: 14px;
  border-radius: 99px;
  background: var(--text-main);
  content: "";
}

.chatWorkbenchPage .chatRailGroup h3::after {
  height: 1px;
  flex: 1;
  background: #eeeaf7;
  content: "";
}

.chatWorkbenchPage .chatRailHistory .chatHistoryRow {
  min-height: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent !important;
  border-radius: 14px;
  background: transparent;
  box-shadow: none !important;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}

.chatWorkbenchPage .chatRailHistory .chatHistoryRow:hover {
  background: var(--bg-soft);
}

.chatWorkbenchPage .chatRailHistory .chatHistoryRow.active {
  border-color: #e9ddff !important;
  background: #f5f0ff;
}

.chatWorkbenchPage .chatHistoryRowMain {
  height: 100% !important;
  padding: 0 12px !important;
}

.chatWorkbenchPage .chatHistoryRowMain strong {
  color: #454b5e;
  font-size: 14px;
  font-weight: 500;
}

.chatWorkbenchPage .chatHistoryRowMain span,
.chatWorkbenchPage .chatHistoryRowActions {
  display: none;
}

.chatWorkbenchPage .chatRailRecycleButton {
  height: 44px;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  font: 500 14px/1 var(--font-body);
  padding: 0 12px;
}

.chatWorkbenchPage .chatRailRecycleButton:hover {
  background: var(--bg-soft);
  color: var(--text-main);
}

.chatWorkbenchPage .chatUnifiedMain {
  grid-column: 2;
  grid-row: 1;
  height: 100%;       /* 填满高度，下方不留大空白 */
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--border-main);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: none; /* 平铺，无大阴影 */
}

.chatWorkbenchPage .chatUnifiedHeader {
  display: none;
}

.chatWorkbenchPage .chatUnifiedScroll {
  min-height: 0;
  padding: 42px 34px 18px;
}

.chatWorkbenchPage .chatUnifiedContent {
  max-width: 920px;
}

.chatWorkbenchPage .chatUnifiedEmpty {
  display: block;
  width: min(640px, 100%);
  margin: 96px auto 24px;
  padding: 34px;
  border: 1px solid #f0ebff !important;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(32,33,36,0.08) !important;
}

.chatWorkbenchPage .chatUnifiedEmpty h2 {
  font-size: 26px;
  font-weight: 600;
}

.chatWorkbenchPage .chatMessageRowAssistant {
  width: 100%;
}

.chatWorkbenchPage .chatMessageRowAssistant > div {
  width: 100%;
}

.chatWorkbenchPage .chatMessageRowUser {
  padding-right: 4px;
}

.chatWorkbenchPage .chatMessageBubbleUser {
  min-height: 54px;
}

.chatWorkbenchPage .chatAssistantCardHead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}

.chatWorkbenchPage .chatAssistantCardHead span {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #f1edff;
  color: var(--text-main);
}

.chatWorkbenchPage .chatAssistantCardHead strong {
  color: #1f2433;
  font-size: 16px;
  font-weight: 600;
}

.chatWorkbenchPage .chatAssistantMarkdown {
  color: #2b2b2b;
}

.chatWorkbenchPage .chatAssistantMarkdown > :first-child {
  margin-top: 0 !important;
}

.chatWorkbenchPage .chatAssistantMarkdown > :last-child {
  margin-bottom: 0 !important;
}

.chatWorkbenchPage .chatMessageMeta > span {
  color: #a0a8b8 !important;
}

.chatWorkbenchPage .chatAssistantActionBar {
  padding-left: 2px;
}

.chatWorkbenchPage .chatMessageActionButton {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 12px;
  background: var(--bg-soft);
  color: #6d7485;
  cursor: pointer;
  font: 500 13px/1 var(--font-body);
  padding: 0 14px;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}

.chatWorkbenchPage .chatMessageActionButton.iconOnly {
  width: 36px;
  padding: 0;
}

.chatWorkbenchPage .chatMessageActionButton:hover,
.chatWorkbenchPage .chatMessageActionButton.active {
  background: #f3eeff;
  color: var(--text-main);
}

.chatWorkbenchPage .chatPromptRow {
  width: min(920px, calc(100% - 68px));
  max-width: 920px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 auto 18px;
  padding: 0;
}

.chatWorkbenchPage .chatPromptRow button {
  height: 42px;
  min-height: 42px;
  border: 1px solid var(--border-main);
  border-radius: 999px;
  background: #fff;
  color: #596174;
  box-shadow: 0 8px 20px rgba(32,33,36,0.08);
  cursor: pointer;
  font: 500 14px/1 var(--font-body);
  padding: 0 18px;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}

.chatWorkbenchPage .chatPromptRow button:hover {
  transform: translateY(-2px);
  background: var(--bg-soft);
}

.chatWorkbenchPage .chatPromptRow .chatPromptRefresh {
  width: 42px;
  padding: 0;
}

.chatWorkbenchPage .chatUnifiedComposer {
  position: sticky;
  bottom: 20px;
  width: min(920px, calc(100% - 68px));
  max-width: 920px;
  min-height: 120px;
  margin: 0 auto 20px;
  padding: 16px;
  border: 1px solid var(--border-main) !important;
  border-radius: 28px;
  outline: 0;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(32,33,36,0.08) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: border-color .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1);
}

.chatWorkbenchPage .chatUnifiedComposer:focus-within {
  border-color: var(--border-strong) !important;
  box-shadow: 0 0 0 4px rgba(32,33,36,0.12), 0 10px 30px rgba(32,33,36,0.08) !important;
}

.chatWorkbenchPage .chatUnifiedComposer textarea {
  min-height: 64px;
  color: #202434;
  background: transparent;
  font: 500 16px/1.65 var(--font-body);
}

.chatWorkbenchPage .chatComposerFooter {
  gap: 10px;
}

.chatWorkbenchPage .chatComposerFooter button {
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #f7f7fb;
  color: #626b7d;
  font: 500 13px/1 var(--font-body);
  padding: 0 14px;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}

.chatWorkbenchPage .chatComposerFooter button:hover,
.chatWorkbenchPage .chatComposerFooter button.active {
  background: var(--bg-soft) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-main) !important;
}

.chatWorkbenchPage .chatComposerFooter .chatUnifiedSend {
  width: 54px;
  height: 54px;
  margin-left: auto;
  border-radius: 10px !important;
  background: var(--text-main) !important;
  color: var(--bg-card) !important;
  padding: 0;
  border: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
}

.chatWorkbenchPage .chatComposerFooter .chatUnifiedSend:hover:not(:disabled) {
  box-shadow: 4px 5px 0 var(--shadow-strong) !important;
  transform: translate(-1px, -1px) !important;
}

.chatWorkbenchPage .chatUnifiedThinking {
  width: min(920px, 100%);
  margin: 0 auto 22px;
}

.chatWorkbenchPage .chatUnifiedThinking div {
  border: 1px solid #f0ebff !important;
  border-radius: 18px;
  background: #fff;
}

.chatAssistantAside {
  grid-column: 3;
  grid-row: 1;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  overflow-y: auto;
  padding: 0;
}

.chatAsidePanel {
  border: 1px solid var(--border-main);
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 30px rgba(32,33,36,0.08);
  padding: 20px;
}

.chatAsidePanel h3 {
  margin: 0 0 14px;
  color: #2b3040;
  font-size: 15px;
  font-weight: 600;
}

.chatAsideModelSelect {
  width: 100%;
  height: 44px;
  border: 1px solid var(--border-main);
  border-radius: 14px;
  background: #fff;
  color: #202434;
  outline: 0;
  font: 600 14px/1 var(--font-body);
  padding: 0 12px;
}

.chatAsideMetricGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.chatAsideMetricGrid div,
.chatTokenRows div {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 6px;
  border-radius: 16px;
  background: var(--bg-soft);
  padding: 12px;
}

.chatAsideMetricGrid span,
.chatTokenRows span {
  color: #8b95aa;
  font-size: 12px;
  font-weight: 500;
}

.chatAsideMetricGrid strong,
.chatTokenRows strong {
  color: #1f2433;
  font: 600 16px/1 var(--font-mono);
}

.chatAbilityChips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.chatAbilityChips span {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: #f7f7fb;
  color: #747d90;
  font: 500 13px/1 var(--font-body);
  padding: 0 12px;
}

.chatAbilityChips span.active {
  background: var(--bg-soft);
  color: var(--text-main);
}

.chatQuickTools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.chatQuickTools button {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 0;
  border-radius: 14px;
  background: #f7f7fb;
  color: #4d5568;
  cursor: pointer;
  font: 500 13px/1 var(--font-body);
  padding: 0 12px;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}

.chatQuickTools button:hover {
  transform: translateY(-2px);
  background: #f3eeff;
  color: var(--text-main);
}

.chatTokenRows {
  display: grid;
  gap: 10px;
}

.chatWorkbenchPage .directoryBottomBar {
  display: none;
}

@media (max-width: 1180px) {
  .chatWorkbenchPage {
    grid-template-columns: 230px minmax(0, 1fr) !important;
  }
  .chatAssistantAside {
    display: none;
  }
}

@media (max-width: 900px) {
  .chatWorkbenchPage {
    height: auto;
    min-height: 100dvh;
    display: block;
    overflow: visible;
    padding: 14px;
  }
  .chatWorkbenchPage .directoryTopTabs {
    height: 62px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    padding: 0 0 0;
    gap: 6px;
  }
  .chatWorkbenchPage .directoryTopTab {
    width: 100%;
    min-width: 0;
    height: 62px;
    padding: 0 12px;
    font-size: 15px;
    justify-content: center;
  }
  .chatWorkbenchPage .directoryRail {
    width: 100%;
    height: auto;
    margin: 14px 0;
    padding: 16px;
  }
  .chatWorkbenchPage .chatRailHistory {
    min-height: 0;
  }
  .chatWorkbenchPage .chatUnifiedMain {
    min-height: 680px;
  }
  .chatWorkbenchPage .chatUnifiedScroll {
    padding: 24px 16px 14px;
  }
  .chatWorkbenchPage .chatPromptRow,
  .chatWorkbenchPage .chatUnifiedComposer {
    width: calc(100% - 28px);
  }
  .chatWorkbenchPage .chatUnifiedComposer {
    bottom: 12px;
  }
  .chatWorkbenchPage .chatComposerFooter {
    flex-wrap: wrap;
  }
}

:root[data-theme="night"] .directoryPage.directoryPortal,
:root[data-theme="night"] .newsPage,
:root[data-theme="night"] .newsPage .directoryRail,
:root[data-theme="night"] .newsAside {
  background: var(--bg-page) !important;
}

:root[data-theme="night"] .directoryLatestCard,
:root[data-theme="night"] .directoryAskBox button,
:root[data-theme="night"] .directoryAskInput,
:root[data-theme="night"] .directoryWideAction,
:root[data-theme="night"] .newsSearchWrap,
:root[data-theme="night"] .newsFilterRow button,
:root[data-theme="night"] .newsArticlePanelHead button,
:root[data-theme="night"] .newsPagination button,
:root[data-theme="night"] .newsTopicPanel,
:root[data-theme="night"] .newsFeaturePanel,
:root[data-theme="night"] .newsSubscribePanel,
:root[data-theme="night"] .newsRelatedPanel {
  background: var(--bg-card) !important;
  border-color: var(--border-main) !important;
  outline-color: var(--border-main) !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="night"] .directoryLatestCard strong,
:root[data-theme="night"] .directoryAskBox strong,
:root[data-theme="night"] .directoryHeroCopy h1,
:root[data-theme="night"] .newsArticlePanelHead h2,
:root[data-theme="night"] .newsTopicPanel h2,
:root[data-theme="night"] .newsFeaturePanel h2,
:root[data-theme="night"] .newsSubscribePanel h2,
:root[data-theme="night"] .newsRelatedPanel h2,
:root[data-theme="night"] .newsTopicPanel strong,
:root[data-theme="night"] .newsFeaturePanel strong,
:root[data-theme="night"] .newsRelatedPanel strong {
  color: var(--text-main) !important;
}

:root[data-theme="night"] .directoryHeroCopy p,
:root[data-theme="night"] .directoryLatestCard em,
:root[data-theme="night"] .newsFilterRow button,
:root[data-theme="night"] .newsArticlePanelHead button {
  color: var(--text-muted) !important;
}

:root[data-theme="night"] .directoryLatestCard b {
  background: rgba(32,33,36,0.12) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="night"] .newsFilterRow button.active {
  background: var(--text-main) !important;
  color: #fff !important;
  outline-color: transparent !important;
}

:root[data-theme="night"] .directoryDetailPageHero a {
  color: #fff !important;
}

:root[data-theme="night"] .chatWorkbenchPage .directoryRail,
:root[data-theme="night"] .chatAsidePanel,
:root[data-theme="night"] .chatAsideModelSelect,
:root[data-theme="night"] .chatAsideMetricGrid div,
:root[data-theme="night"] .chatTokenRows div,
:root[data-theme="night"] .chatAbilityChips span,
:root[data-theme="night"] .chatQuickTools button {
  background: var(--bg-card) !important;
  border-color: var(--border-main) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="night"] .chatWorkbenchPage .directoryPrimaryNavItem.active,
:root[data-theme="night"] .chatAbilityChips span.active {
  background: rgba(32,33,36,0.12) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="night"] .chatAsidePanel h3,
:root[data-theme="night"] .chatAsideMetricGrid strong,
:root[data-theme="night"] .chatTokenRows strong {
  color: var(--text-main) !important;
}

:root[data-theme="night"] .chatAsideMetricGrid span,
:root[data-theme="night"] .chatTokenRows span {
  color: var(--text-muted) !important;
}

.directoryPage > .directoryRail,
.chatWorkbenchPage > .directoryRail {
  width: 240px;
  padding: 24px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.directoryPage .directorySidePrimaryNav,
.chatWorkbenchPage .directorySidePrimaryNav {
  display: grid;
  gap: 8px;
  margin: 0 0 30px;
}

.directoryPage .directorySidePrimaryNav .directoryPrimaryNavItem,
.chatWorkbenchPage .directorySidePrimaryNav .directoryPrimaryNavItem {
  height: 56px;
  min-height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #222838;
  box-shadow: none;
}

.directoryPage .directorySidePrimaryNav .directoryPrimaryNavItem span,
.chatWorkbenchPage .directorySidePrimaryNav .directoryPrimaryNavItem span {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--text-main);
  background: rgba(32,33,36,0.12);
}

.directoryPage .directorySidePrimaryNav .directoryPrimaryNavItem strong,
.chatWorkbenchPage .directorySidePrimaryNav .directoryPrimaryNavItem strong {
  font-size: 16px;
  font-weight: 600;
}

.directoryPage .directorySidePrimaryNav .directoryPrimaryNavItem.active,
.directoryPage .directorySidePrimaryNav .directoryPrimaryNavItem:hover,
.chatWorkbenchPage .directorySidePrimaryNav .directoryPrimaryNavItem.active,
.chatWorkbenchPage .directorySidePrimaryNav .directoryPrimaryNavItem:hover {
  background: var(--bg-soft);
  color: var(--text-main);
}

.directoryPage .directoryCategoryTitle,
.chatWorkbenchPage .directoryCategoryTitle {
  height: auto;
  margin: 0;
  padding: 0 14px 12px;
  background: transparent;
  color: #8f98ab;
  font: 600 15px/1.2 var(--font-body);
}

.directoryPage .directoryCategoryTitle svg,
.chatWorkbenchPage .directoryCategoryTitle svg {
  display: block;
}

.directoryPage .directoryCategoryList,
.chatWorkbenchPage .directoryCategoryList {
  display: grid;
  gap: 8px;
  padding: 0;
}

.directoryPage .directoryCategoryItem,
.chatWorkbenchPage .directoryCategoryItem {
  height: 46px;
  padding: 0 16px;
  border-radius: 15px;
  background: transparent;
  color: #2b3142;
  font: 600 15px/1.2 var(--font-body);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}

.directoryPage .directoryCategoryItem svg,
.chatWorkbenchPage .directoryCategoryItem svg {
  flex: 0 0 24px;
  color: #7f89a1;
}

.directoryPage .directoryCategoryItem.active,
.chatWorkbenchPage .directoryCategoryItem.active {
  background: var(--bg-soft);
  color: var(--text-main);
}

.directoryPage .directoryCategoryItem:hover,
.chatWorkbenchPage .directoryCategoryItem:hover {
  background: var(--bg-soft);
  transform: translateX(2px);
}

.newsPage {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 20px 20px 0;
  grid-template-columns: 240px minmax(0, 1fr) 390px;
  grid-template-rows: auto;
  gap: 0 20px;
  overflow: visible;
}

.newsPage > .directoryRail,
.newsPage > .newsMain,
.newsPage > .newsAside {
  height: auto;
  min-height: 0;
}

.newsPage > .directoryRail,
.newsPage > .newsMain,
.newsPage > .newsAside {
  grid-row: 1;
}

.newsPage > .directoryRail {
  grid-column: 1;
}

.newsPage > .newsMain {
  grid-column: 2;
  overflow-y: visible;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.newsPage > .newsAside {
  grid-column: 3;
}

.newsHeroButton::after {
  display: none;
}

.newsHeroButton .newsHeroMedia {
  animation: newsHeroMediaEnter .5s cubic-bezier(.2,.7,.25,1);
}

.newsHeroButton .newsHeroContent {
  animation: newsHeroContentEnter .42s cubic-bezier(.2,.7,.25,1);
}

.newsHeroButton .newsHeroDots {
  right: 30px;
  bottom: 24px;
  left: auto;
  gap: 8px;
  transform: none;
}

.newsHeroCard .newsHeroDots span {
  width: 8px;
  height: 8px;
  transition: width .25s ease, background .25s ease;
}

.newsHeroCard .newsHeroDots span.active {
  width: 24px;
}

@keyframes newsHeroMediaEnter {
  from {
    opacity: .35;
    transform: scale(1.04);
  }
  to {
    opacity: .72;
    transform: scale(1);
  }
}

@keyframes newsHeroContentEnter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chatWorkbenchPage .chatUnifiedMain {
  grid-template-rows: minmax(0, 1fr) auto;
}

:root[data-theme="night"] .chatWorkbenchPage .chatMessageBubbleAssistant {
  background: var(--bg-card) !important;
  border-color: var(--border-main) !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="night"] .chatWorkbenchPage .chatAssistantMarkdown,
:root[data-theme="night"] .chatWorkbenchPage .chatAssistantCardHead strong {
  color: var(--text-secondary) !important;
}

:root[data-theme="night"] .chatWorkbenchPage .chatAssistantCardHead span {
  background: rgba(32,33,36,0.12) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="night"] .chatWorkbenchPage .chatMessageActionButton {
  background: var(--bg-soft) !important;
  color: #aebed4 !important;
}

:root[data-theme="night"] .chatWorkbenchPage .chatMessageActionButton:hover,
:root[data-theme="night"] .chatWorkbenchPage .chatMessageActionButton.active {
  background: rgba(32,33,36,0.12) !important;
  color: var(--text-secondary) !important;
}

.dashboardDirectoryPage,
.pricingDirectoryPage,
.helpDirectoryPage,
.legalDirectoryPage,
.historyDirectoryPage,
.humanizerDirectoryPage,
.videoDirectoryPage {
  width: 100%;
  height: 100dvh;
  min-height: 720px;
  margin: 0;
  padding: 20px 20px 0;
  grid-template-columns: 240px minmax(0, 1fr) 320px;
  grid-template-rows: minmax(0, 1fr) 64px;
  gap: 0 20px;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-page) 100%);
  overflow: hidden;
}

.dashboardDirectoryMain,
.pricingMain,
.helpMain,
.legalDirectoryMain,
.historyDirectoryMain,
.humanizerDirectoryMain,
.videoDirectoryMain {
  height: auto;
  min-height: 0;
  padding: 28px 30px 92px;
  border: 0;
  background: transparent;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.helpAside {
  height: auto;
  min-height: 0;
  padding: 28px 0 92px;
  background: transparent;
  overflow-y: auto;
}

.helpDirectoryPage .directoryPanel {
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--border-main);
}

.helpHeroPanel {
  padding: 24px 26px 26px;
  margin-bottom: 18px;
}

.dashboardAside {
  height: auto;
  min-height: 0;
  padding: 28px 0 92px;
  background: transparent;
}

.dashboardDirectoryPage .directoryPanel {
  border-color: var(--border-main);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(32,33,36,0.08);
}

.dashboardHeroPanel {
  padding: 22px;
}

.dashboardAvatar {
  background: var(--text-main);
  color: #fff;
}

.dashboardHeroPanel button,
.dashboardPlanPanel button,
.dashboardSubmissionRow button,
.dashboardSettingsPanel button {
  background: var(--text-main);
  color: #fff;
}

.dashboardGrid {
  margin-top: 20px;
}

.dashboardListPanel {
  padding: 20px;
}

.dashboardActivityRow,
.dashboardSubmissionRow {
  border-color: var(--border-main);
  border-radius: 14px;
  background: var(--bg-soft);
}

.dashboardActivityRow {
  grid-template-columns: 38px minmax(0, 1fr) minmax(112px, auto) max-content;
}

.dashboardActivityRow span,
.dashboardSubmissionRow > span {
  background: rgba(32,33,36,0.12);
  color: var(--text-main);
}

.dashboardUsageBar i {
  background: var(--text-main);
}

.dashboardUsageBar button,
.dashboardStatusPanel {
  color: var(--text-secondary);
}

.pricingDirectoryPage {
  --surface: #fff;
  --surface2: var(--bg-soft);
  --card-hov: var(--bg-soft);
  --border: var(--border-main);
  --t1: #1f2433;
  --t2: #7a8497;
  --t3: #9ba5b7;
  --amber: var(--text-main);
  --ink: var(--text-main);
  grid-template-columns: 240px minmax(0, 1fr);
}

.pricingMain > div:first-child {
  max-width: 1320px !important;
  padding: 28px 30px 92px !important;
}

.pricingMain h1 {
  color: #1f2433;
  font-size: 42px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.pricingDirectoryPage .badge-purple {
  border: 0;
  background: var(--bg-soft);
  color: var(--text-secondary);
}

.pricingDirectoryPage .grad-text {
  color: var(--text-main);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.pricingLiftCard {
  border-color: var(--border-main) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(32,33,36,0.08) !important;
}

.pricingLiftCard:hover {
  border-color: rgba(32,33,36,0.12) !important;
  box-shadow: 0 18px 42px rgba(32,33,36,0.08) !important;
}

.pricingDirectoryPage .btn-primary {
  border: 0 !important;
  background: var(--text-main) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(32,33,36,0.12) !important;
}

.legalDirectoryPage,
.historyDirectoryPage,
.humanizerDirectoryPage,
.videoDirectoryPage {
  --surface: #fff;
  --surface2: var(--bg-soft);
  --card-hov: var(--bg-soft);
  --border: var(--border-main);
  --t1: #1f2433;
  --t2: #707b90;
  --t3: #929db0;
  --amber: var(--text-main);
  --ink: var(--text-main);
  grid-template-columns: 240px minmax(0, 1fr);
  background: linear-gradient(180deg, #fff 0%, var(--bg-page) 100%);
}

.legalDirectoryMain,
.historyDirectoryMain,
.humanizerDirectoryMain,
.videoDirectoryMain {
  height: auto;
  min-height: 0;
  padding: 28px 30px 92px;
  border: 0;
  background: transparent;
}

.legalDirectoryPage .directoryPanel,
.historyDirectoryPage .directoryPanel,
.humanizerDirectoryPage .directoryPanel,
.videoDirectoryPage .directoryPanel {
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--border-main), 0 12px 34px rgba(32,33,36,0.08) !important;
}

.directoryEyebrow {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  color: var(--text-secondary);
  font: 600 12px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.legalHeroPanel,
.historyHeroPanel,
.humanizerHeroPanel,
.videoHeroPanel {
  padding: 28px 30px !important;
}

.legalHeroPanel .directorySectionHead,
.historyHeroPanel .directorySectionHead,
.humanizerHeroPanel .directorySectionHead,
.videoHeroPanel .directorySectionHead {
  align-items: flex-end;
}

.legalUpdatedAt {
  flex: 0 0 auto;
  color: #929db0;
  font: 600 12px/1.4 var(--font-mono);
}

.legalPolicyGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.legalPolicyCard {
  min-height: 150px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 22px !important;
}

.legalPolicyCard > span {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--bg-soft);
  color: var(--text-main);
}

.legalPolicyCard h2,
.legalContactPanel h2,
.videoEmptyState h2 {
  margin: 0 0 8px;
  color: #1f2433;
  font-size: 17px;
  font-weight: 600;
}

.legalPolicyCard p,
.legalContactPanel p,
.videoEmptyState p {
  margin: 0;
  color: #707b90;
  font-size: 14px;
  line-height: 1.7;
}

.legalContactPanel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px !important;
}

.legalContactPanel a {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--text-main);
  color: #fff;
  font: 600 13px/1 var(--font-mono);
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(32,33,36,0.12);
}

.historyToolbarPanel {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 16px;
  padding: 18px !important;
}

.historySearchField {
  min-height: 46px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 13px;
  background: var(--bg-soft);
  color: #929db0;
  box-shadow: 0 0 0 1px var(--border-main);
}

.historySearchField input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #1f2433;
  font: 500 14px/1.2 var(--font-body);
}

.historyToolbarActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.historyFilterTabs {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.historyFilterTabs button {
  min-height: 38px;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: var(--bg-soft);
  color: #707b90;
  cursor: pointer;
  font: 600 13px/1 var(--font-body);
  box-shadow: 0 0 0 1px var(--border-main);
}

.historyFilterTabs button.active {
  background: var(--text-main);
  color: #fff;
  box-shadow: none;
}

.historyResultsPanel {
  min-height: 420px;
  padding: 20px !important;
}

.historyEmptyState,
.videoEmptyState {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.historyEmptyState > span,
.videoEmptyState > span {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: 18px;
  background: var(--bg-soft);
  color: var(--text-main);
}

.historyEmptyState h2 {
  margin: 0 0 8px;
  color: #1f2433;
  font-size: 19px;
  font-weight: 600;
}

.historyEmptyState p {
  margin: 0 0 20px;
  color: #707b90;
  font-size: 14px;
}

.historyEmptyState button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--text-main);
  color: #fff;
  cursor: pointer;
  font: 600 14px/1 var(--font-body);
}

.historyGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.historyList {
  display: grid;
  gap: 10px;
}

.humanizerControlsPanel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  padding: 18px !important;
}

.humanizerEditorGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.humanizerEditorPanel {
  display: flex;
  flex-direction: column;
  padding: 20px !important;
}

.humanizerPanelTitle {
  color: #596376;
  font-size: 13px;
  font-weight: 600;
}

.humanizerNotice {
  margin: 0;
  padding: 0 4px;
  color: #929db0;
  font-size: 12px;
  line-height: 1.65;
}

.videoDirectoryMain {
  grid-template-rows: auto minmax(0, 1fr);
}

.videoWorkspacePanel {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 0 !important;
  overflow: hidden;
}

.videoMessageList {
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
}

.videoEmptyState {
  min-height: 100%;
}

.videoComposerPanel {
  padding: 16px;
  background: var(--bg-soft);
  box-shadow: 0 -1px 0 var(--border-main);
}

.videoComposerPanel .capykaComposerInputGrid textarea,
.videoComposerPanel .capykaComposerChip,
.videoComposerPanel .capykaModelGroupButton,
.videoComposerPanel .capykaComposerIconButton {
  background: #fff !important;
  box-shadow: 0 0 0 1px var(--border-main) !important;
}

:root[data-theme="night"] .directoryPage .directorySidePrimaryNav .directoryPrimaryNavItem,
:root[data-theme="night"] .chatWorkbenchPage .directorySidePrimaryNav .directoryPrimaryNavItem {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="night"] .directoryPage .directorySidePrimaryNav .directoryPrimaryNavItem span,
:root[data-theme="night"] .chatWorkbenchPage .directorySidePrimaryNav .directoryPrimaryNavItem span {
  background: rgba(32,33,36,0.12) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="night"] .directoryPage .directorySidePrimaryNav .directoryPrimaryNavItem.active,
:root[data-theme="night"] .directoryPage .directorySidePrimaryNav .directoryPrimaryNavItem:hover,
:root[data-theme="night"] .chatWorkbenchPage .directorySidePrimaryNav .directoryPrimaryNavItem.active,
:root[data-theme="night"] .chatWorkbenchPage .directorySidePrimaryNav .directoryPrimaryNavItem:hover {
  background: rgba(32,33,36,0.12) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="night"] .dashboardDirectoryPage,
:root[data-theme="night"] .pricingDirectoryPage,
:root[data-theme="night"] .helpDirectoryPage,
:root[data-theme="night"] .legalDirectoryPage,
:root[data-theme="night"] .historyDirectoryPage,
:root[data-theme="night"] .humanizerDirectoryPage,
:root[data-theme="night"] .videoDirectoryPage,
:root[data-theme="night"] .humanizerDirectoryPage,
:root[data-theme="night"] .videoDirectoryPage {
  --surface: var(--bg-card);
  --surface2: var(--bg-soft);
  --card-hov: rgba(32,33,36,0.12);
  --border: var(--border-main);
  --t1: var(--text-main);
  --t2: #aebed4;
  --t3: var(--text-muted);
  background: var(--bg-page) !important;
}

:root[data-theme="night"] .legalDirectoryPage .directoryPanel,
:root[data-theme="night"] .historyDirectoryPage .directoryPanel,
:root[data-theme="night"] .humanizerDirectoryPage .directoryPanel,
:root[data-theme="night"] .videoDirectoryPage .directoryPanel {
  background: var(--bg-card) !important;
  box-shadow: 0 0 0 1px var(--border-main) !important;
  color: var(--text-secondary);
}

:root[data-theme="night"] .legalPolicyCard > span,
:root[data-theme="night"] .historyEmptyState > span,
:root[data-theme="night"] .videoEmptyState > span {
  background: rgba(32,33,36,0.12);
  color: var(--text-secondary);
}

:root[data-theme="night"] .legalPolicyCard h2,
:root[data-theme="night"] .legalContactPanel h2,
:root[data-theme="night"] .historyEmptyState h2,
:root[data-theme="night"] .videoEmptyState h2 {
  color: var(--text-main);
}

:root[data-theme="night"] .legalPolicyCard p,
:root[data-theme="night"] .legalContactPanel p,
:root[data-theme="night"] .historyEmptyState p,
:root[data-theme="night"] .videoEmptyState p,
:root[data-theme="night"] .humanizerPanelTitle {
  color: #aebed4;
}

:root[data-theme="night"] .historySearchField,
:root[data-theme="night"] .historyFilterTabs button,
:root[data-theme="night"] .videoComposerPanel {
  background: var(--bg-soft);
  box-shadow: 0 0 0 1px var(--border-main);
}

:root[data-theme="night"] .historySearchField input {
  color: var(--text-main);
}

:root[data-theme="night"] .historyFilterTabs button.active {
  background: var(--text-main);
  color: #fff;
  box-shadow: none;
}

:root[data-theme="night"] .videoComposerPanel .capykaComposerInputGrid textarea,
:root[data-theme="night"] .videoComposerPanel .capykaComposerChip,
:root[data-theme="night"] .videoComposerPanel .capykaModelGroupButton,
:root[data-theme="night"] .videoComposerPanel .capykaComposerIconButton {
  background: var(--bg-card) !important;
  box-shadow: 0 0 0 1px var(--border-main) !important;
  color: var(--text-main) !important;
}

:root[data-theme="night"] .dashboardDirectoryPage .directoryPanel,
:root[data-theme="night"] .dashboardActivityRow,
:root[data-theme="night"] .dashboardSubmissionRow,
:root[data-theme="night"] .pricingLiftCard {
  border-color: var(--border-main) !important;
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="night"] .dashboardActivityRow,
:root[data-theme="night"] .dashboardSubmissionRow {
  background: var(--bg-soft) !important;
}

:root[data-theme="night"] .pricingMain h1 {
  color: var(--text-main);
}

@media (max-width: 1080px) {
  .dashboardDirectoryPage,
  .pricingDirectoryPage {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .dashboardAside {
    display: none;
  }
}

@media (max-width: 1360px) {
  .newsPage {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .dashboardDirectoryPage {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .dashboardAside {
    display: none;
  }
}

@media (max-width: 900px) {
  .chatWorkbenchPage > .directoryRail {
    width: 100%;
    padding: 16px;
  }
}

@media (max-width: 760px) {
  .directoryPage > .directoryRail {
    width: 100%;
    padding: 12px 12px 10px;
  }

  .directoryPage .directorySidePrimaryNav,
  .chatWorkbenchPage .directorySidePrimaryNav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 16px;
  }

  .directoryPage .directorySidePrimaryNav .directoryPrimaryNavItem,
  .chatWorkbenchPage .directorySidePrimaryNav .directoryPrimaryNavItem {
    height: 46px;
    min-height: 46px;
    gap: 6px;
    padding: 0 8px;
  }

  .directoryPage .directorySidePrimaryNav .directoryPrimaryNavItem span,
  .chatWorkbenchPage .directorySidePrimaryNav .directoryPrimaryNavItem span {
    width: 24px;
    height: 24px;
  }

  .directoryPage .directorySidePrimaryNav .directoryPrimaryNavItem strong,
  .chatWorkbenchPage .directorySidePrimaryNav .directoryPrimaryNavItem strong {
    font-size: 12px;
  }

  .dashboardDirectoryPage,
  .pricingDirectoryPage,
  .legalDirectoryPage,
  .historyDirectoryPage,
  .humanizerDirectoryPage,
  .videoDirectoryPage {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding: 0;
  }

  .newsPage {
    padding: 0;
  }

  .dashboardDirectoryMain,
  .pricingMain,
  .legalDirectoryMain,
  .historyDirectoryMain,
  .humanizerDirectoryMain,
  .videoDirectoryMain {
    padding: 18px 16px 82px;
  }

  .legalPolicyGrid,
  .humanizerEditorGrid {
    grid-template-columns: 1fr;
  }

  .legalHeroPanel .directorySectionHead,
  .historyHeroPanel .directorySectionHead,
  .humanizerHeroPanel .directorySectionHead,
  .videoHeroPanel .directorySectionHead,
  .legalContactPanel {
    align-items: flex-start;
    flex-direction: column;
  }

  .legalContactPanel a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

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

  .historyToolbarActions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .videoWorkspacePanel {
    min-height: 620px;
  }

  .videoMessageList {
    padding: 16px;
  }

  .newsHeroButton .newsHeroDots {
    right: 20px;
    bottom: 18px;
  }
}

.directoryPage:not(.directoryPortal) {
  width: 100%;
  height: 100dvh;
  min-height: 720px;
  margin: 0;
  padding: 20px 20px 0;
  grid-template-columns: 240px minmax(0, 1fr) 390px;
  grid-template-rows: minmax(0, 1fr) 64px;
  gap: 0 20px;
  overflow: hidden;
}

.directoryPage:not(.directoryPortal) > .directoryRail {
  grid-column: 1;
  grid-row: 1;
  width: 240px;
  height: auto;
  min-height: 0;
  padding: 24px 0;
  overflow-y: auto;
}

.directoryPage:not(.directoryPortal) > .directoryMain,
.directoryPage:not(.directoryPortal) > .imageStudioMain {
  grid-column: 2;
  grid-row: 1;
  height: auto;
  min-height: 0;
}

.directoryPage:not(.directoryPortal) > .directoryAside,
.directoryPage:not(.directoryPortal) > .imageStudioAside {
  grid-column: 3;
  grid-row: 1;
  height: auto;
  min-height: 0;
}

.directoryPage:not(.directoryPortal) > .directoryBottomBar {
  grid-column: 1 / -1;
  grid-row: 2;
  position: static;
  min-height: 64px;
  padding: 0;
  border-top: 1px solid var(--border-main);
  background: transparent;
  backdrop-filter: none;
}

.dashboardTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 4px;
}

.dashboardTabs .directoryCategoryItem {
  width: auto;
  min-width: 116px;
  padding: 0 14px;
}

:root[data-theme="night"] .directoryPage:not(.directoryPortal) > .directoryBottomBar {
  border-color: var(--border-main);
}

@media (max-width: 1360px) {
  .directoryPage:not(.directoryPortal) {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .directoryPage:not(.directoryPortal) > .directoryAside,
  .directoryPage:not(.directoryPortal) > .imageStudioAside {
    display: none;
  }
}

@media (max-width: 760px) {
  .directoryPage:not(.directoryPortal) {
    display: block;
    height: auto;
    min-height: 100dvh;
    padding: 0;
    overflow: visible;
  }

  .directoryPage:not(.directoryPortal) > .directoryRail {
    width: 100%;
    padding: 12px 12px 10px;
  }

  .directoryPage:not(.directoryPortal) > .directoryBottomBar {
    position: fixed;
    min-height: 58px;
    padding: 8px 12px;
  }
}

:root[data-theme="night"] .newsDetailPanel h2,
:root[data-theme="night"] .newsDetailSummary h3 {
  color: var(--text-main) !important;
}

:root[data-theme="night"] .newsDetailBody p,
:root[data-theme="night"] .newsDetailSummary li {
  color: #b8c7dc !important;
}

:root[data-theme="night"] .newsDetailMeta,
:root[data-theme="night"] .newsDetailMeta span,
:root[data-theme="night"] .newsBreadcrumb button,
:root[data-theme="night"] .newsBreadcrumb strong {
  color: var(--text-muted) !important;
}

:root[data-theme="night"] .newsDetailSummary {
  border: 1px solid var(--border-main);
  background: var(--bg-card) !important;
}

:root[data-theme="night"] .newsDetailKicker {
  background: rgba(32,33,36,0.12) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="night"] .newsDetailActions button,
:root[data-theme="night"] .newsDetailActions a,
:root[data-theme="night"] .newsDetailPanel .directoryBackButton {
  border-color: var(--border-main) !important;
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  outline-color: var(--border-main) !important;
}

:root[data-theme="night"] .newsDetailActions button.active {
  background: rgba(32,33,36,0.12) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="night"] .chatWorkbenchPage .chatRailGroup h3 {
  color: var(--text-muted);
}

:root[data-theme="night"] .chatWorkbenchPage .chatRailGroup h3::after {
  background: var(--border-main);
}

:root[data-theme="night"] .chatWorkbenchPage > .directoryRail {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* =============================================
   RETRO PAPER — Components + Portal overrides
   ============================================= */

body.retroSite {
  background: var(--paper-bg);
  color: var(--ink);
  font-family: var(--font-body);
}

.retroPageShell {
  width: min(var(--page-max), 100%);
  margin: 0 auto;
}

.retroBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-main);
  font: 600 14px/1 var(--font-body);
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  transition: transform var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth), background var(--duration-fast) var(--ease-smooth);
}

@media (hover: hover) {
  .retroBtn:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-retro-hover);
    background: var(--bg-card);
  }

  .retroBtn--ghost:hover:not(:disabled) {
    border-color: var(--border-strong);
    color: var(--text-main);
  }
}

.retroBtn:active:not(:disabled) {
  transform: translate(0, 0);
  box-shadow: var(--shadow-retro-active);
}

.retroBtn--primary {
  background: var(--bg-card);
  border-color: var(--border-main) !important;
}

.retroBtn--ghost {
  background: transparent;
  box-shadow: none;
  border-color: var(--border-main);
  color: var(--text-secondary);
  font-weight: 500;
}

.retroBtn--secondary {
  background: var(--bg-card);
  border-color: var(--border-strong);
  color: var(--text-main);
}

.retroBtn--sm {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

.retroBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.retroCard {
  border: 1px solid var(--border-main);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  padding: var(--space-card);
  box-shadow: none;
}

.retroCard--flat {
  padding: 0;
}

.retroTag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-tag);
  border: 1px solid var(--border-retro);
  background: var(--paper-bg-alt);
  color: var(--ink-muted);
  font: 600 12px/1.2 var(--font-body);
}

.retroTag.isActive {
  border-color: var(--text-main);
  color: var(--bg-card);
  background: var(--text-main);
}

.retroSearchBar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid var(--border-main);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: none;
}

.retroSearchBar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: 500 16px/1.4 var(--font-body);
}

.retroSearchBar input::placeholder {
  color: var(--ink-muted);
}

.retroSearchBarClear {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-retro);
  border-radius: 999px;
  background: var(--paper-bg-alt);
  color: var(--ink-muted);
  cursor: pointer;
}

.retroCategoryTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.retroCategoryTabs button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border-main);
  border-radius: var(--radius-tag);
  background: var(--bg-soft);
  color: var(--text-secondary);
  font: 600 13px/1 var(--font-body);
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: transform var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth), background var(--duration-fast) var(--ease-smooth), color var(--duration-fast) var(--ease-smooth);
}

@media (hover: hover) {
  .retroCategoryTabs button:hover:not(.isActive) {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-retro-hover);
    border-color: var(--border-strong);
    color: var(--text-main);
  }
}

.retroCategoryTabs button.isActive {
  border-color: var(--text-main);
  color: var(--bg-card);
  background: var(--text-main);
  box-shadow: none;
  transform: none;
}

.retroCategoryTabs button:active:not(.isActive) {
  transform: translate(0, 0);
  box-shadow: var(--shadow-retro-active);
}

.retroCategoryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.retroCategoryTile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 96px;
  padding: 14px 10px;
  border: 1px solid var(--border-main);
  border-radius: var(--radius-card, 16px);
  background: var(--bg-soft);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  box-shadow: none;
  transform: none;
  transition: transform var(--duration-fast) var(--ease-out-expo, ease),
              box-shadow var(--duration-fast) var(--ease-out-expo, ease),
              border-color var(--duration-fast) var(--ease-smooth, ease),
              background var(--duration-fast) var(--ease-smooth, ease),
              color var(--duration-fast) var(--ease-smooth, ease);
}

.retroCategoryTile strong {
  font: 700 13px/1 var(--font-body);
  color: inherit;
}

.retroCategoryTileIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-main);
  background: var(--bg-card);
  color: var(--text-main);
  transition: inherit;
}

@media (hover: hover) {
  .retroCategoryTile:hover:not(.isActive) {
    transform: translate(-3px, -3px);
    box-shadow: var(--shadow-retro-hover);
    border-color: var(--border-strong);
    color: var(--text-main);
  }
}

.retroCategoryTile:active:not(.isActive) {
  transform: translate(0, 0);
  box-shadow: var(--shadow-retro-active);
}

.retroCategoryTile.isActive {
  border-color: var(--text-main);
  background: var(--text-main);
  color: var(--bg-card);
  box-shadow: none;
  transform: none;
}

.retroCategoryTile.isActive .retroCategoryTileIcon {
  background: var(--bg-card);
  color: var(--text-main);
  border-color: var(--bg-card);
}

.retroCategoryTileAd {
  border-style: dashed;
  opacity: .82;
}

.retroToolGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-section);
}

.retroToolCard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--border-main);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.retroToolCardMain {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.retroToolCardTop {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.retroToolCardTop img,
.retroToolCardTop .directoryToolIcon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid var(--border-retro);
  flex: 0 0 auto;
}

.retroToolCardCopy h3 {
  margin: 0 0 8px;
  font: 700 clamp(18px, 2vw, 22px)/1.25 var(--font-head);
  color: var(--ink);
}

.retroToolCardCopy p {
  margin: 0;
  color: var(--ink-muted);
  font: 400 14px/1.7 var(--font-body);
}

.retroToolCardTags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.retroToolCardActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--border-retro);
}

.retroHeroCard {
  margin-bottom: var(--space-section);
}

.retroHeroCard h1 {
  margin: 0 0 10px;
  font: 700 clamp(30px, 4vw, 44px)/1.12 var(--font-head);
  color: var(--ink);
}

.retroHeroCard p {
  margin: 0 0 18px;
  color: var(--ink-muted);
  font: 400 16px/1.72 var(--font-body);
}

.retroSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
}

.retroSectionHead h2 {
  margin: 0;
  font: 700 24px/1.2 var(--font-head);
  color: var(--ink);
}

.retroArticleLayout {
  padding: 28px 30px 34px;
}

.retroArticleTop {
  margin-bottom: 16px;
}

.retroArticleKicker {
  margin-bottom: 12px;
}

.retroArticleTitle {
  margin: 0 0 16px;
  font: 700 clamp(28px, 4.5vw, 42px)/1.15 var(--font-head);
  color: var(--ink);
}

.retroArticleMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 22px;
  color: var(--ink-muted);
  font: 500 13px/1.5 var(--font-body);
}

.retroArticleMeta span + span::before {
  content: '· ';
  color: var(--ink-muted);
}

.retroArticleHero {
  width: 100%;
  border-radius: 18px;
  border: 1px solid var(--border-retro);
  margin-bottom: 22px;
}

.retroArticleBody {
  color: var(--ink);
  font: 400 16px/1.75 var(--font-body);
}

.retroArticleBody p + p {
  margin-top: 16px;
}

.retroArticleFooter {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-retro);
}

.retroRelatedBlock + .retroRelatedBlock {
  margin-top: 22px;
}

.retroRelatedBlock h2 {
  margin: 0 0 14px;
  font: 700 20px/1.25 var(--font-head);
}

.retroRelatedGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.retroRelatedCard {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border-retro);
  border-radius: 16px;
  background: var(--paper-bg-alt);
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast) var(--ease-smooth);
}

@media (hover: hover) {
  .retroRelatedCard:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-retro-hover);
  }
}

.retroRelatedCard:active {
  transform: translate(0, 0);
  box-shadow: var(--shadow-retro-active);
}

.retroRelatedCard strong {
  font: 600 15px/1.35 var(--font-body);
  color: var(--ink);
}

.retroRelatedCard p {
  margin: 0;
  color: var(--ink-muted);
  font: 400 13px/1.6 var(--font-body);
}

body.retroSite .directoryPage.directoryPortal,
body.retroSite .directoryPage.newsPage,
body.retroSite .dashboardDirectoryPage,
body.retroSite .pricingDirectoryPage,
body.retroSite .helpDirectoryPage,
body.retroSite .legalDirectoryPage,
body.retroSite .historyDirectoryPage {
  background: var(--paper-bg) !important;
  color: var(--ink);
}

body.retroSite .directoryPanel,
body.retroSite .directoryPage.directoryPortal .directoryToolCard,
body.retroSite .newsHeroCard {
  border: 1px solid var(--border-retro) !important;
  border-radius: var(--radius-card) !important;
  background: var(--bg-card) !important;
  box-shadow: none !important;
}

body.retroSite .newsArticlePanel.news-list-card {
  background: var(--bg-card) !important;
  padding: 0 !important;
}

@media (max-width: 960px) {
  .retroToolGrid,
  .retroRelatedGrid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .retroBtn,
  .retroRelatedCard,
  .retroCategoryTabs button {
    transition: none;
  }
}

/* ===== Unified AppShell geometry — fixed sidebar & centered shell on every page ===== */
body.retroSite .directoryPage.app-shell {
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 28px !important;
  grid-template-columns: 260px minmax(0, 1fr) 320px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  padding-top: var(--top-pad, 32px) !important;
  padding-bottom: var(--bottom-safe, 88px) !important;
  box-sizing: border-box;
}
body.retroSite .directoryPage.app-shell:not(:has(.directoryAside)):not(:has(.right-panel)):not(:has(> aside)) {
  grid-template-columns: 260px minmax(0, 1fr) !important;
}
body.retroSite .directoryPage.app-shell > .sidebar,
body.retroSite .directoryPage.app-shell > .directoryRail {
  width: 260px;
  min-width: 260px;
  max-width: 260px;
}

/* ───────── 夜间模式：侧栏选中态统一为暖色反白；底部固定栏留白 ───────── */
:root[data-theme="night"] .directoryPage .directoryPrimaryNavItem.active,
:root[data-theme="night"] .directoryPage .directoryCategoryItem.active,
:root[data-theme="night"] .newsPage .directoryPrimaryNavItem.active,
:root[data-theme="night"] .newsPage .directoryCategoryItem.active {
  background: var(--text-main) !important;
  color: var(--bg-card) !important;
  border-color: var(--border-strong) !important;
}
:root[data-theme="night"] .directoryPage .directoryPrimaryNavItem.active span,
:root[data-theme="night"] .directoryPage .directoryPrimaryNavItem.active strong,
:root[data-theme="night"] .directoryPage .directoryCategoryItem.active span,
:root[data-theme="night"] .directoryPage .directoryCategoryItem.active svg,
:root[data-theme="night"] .newsPage .directoryPrimaryNavItem.active span,
:root[data-theme="night"] .newsPage .directoryCategoryItem.active svg {
  color: var(--bg-card) !important;
  background: transparent !important;
}
:root[data-theme="night"] .directoryPage .directoryPrimaryNavItem:hover:not(.active),
:root[data-theme="night"] .directoryPage .directoryCategoryItem:hover:not(.active) {
  background: var(--bg-soft) !important;
  color: var(--text-main) !important;
}

/* 左/右栏直接铺下来，内容到底部固定栏前留出空间，避免被遮挡 */
body.retroSite .directoryPage.directoryPortal {
  padding-bottom: calc(var(--bottom-bar-h, 72px) + 24px) !important;
}
body.retroSite .directoryPage.directoryPortal .directoryRail,
body.retroSite .directoryPage.directoryPortal .directoryAside {
  max-height: none !important;
  overflow: visible !important;
}

body.retroSite .directoryPage.directoryPortal > .directoryBottomBar {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 220 !important;
  width: 100dvw !important;
  max-width: none !important;
  height: var(--bottom-bar-h, 56px) !important;
  min-height: var(--bottom-bar-h, 56px) !important;
  margin: 0 !important;
  transform: none !important;
  padding: 10px 28px calc(10px + env(safe-area-inset-bottom)) !important;
  background: var(--bg-page) !important;
  border-top: 1px solid var(--border-main) !important;
}

body.retroSite .directoryPage.directoryPortal.newsPage > .directoryBottomBar,
body.retroSite .directoryPage.directoryPortal.app-shell > .directoryBottomBar {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 240 !important;
  width: 100dvw !important;
  max-width: none !important;
  height: var(--bottom-bar-h, 56px) !important;
  min-height: var(--bottom-bar-h, 56px) !important;
  margin: 0 !important;
  transform: none !important;
  padding: 10px 28px calc(10px + env(safe-area-inset-bottom)) !important;
  background: var(--bg-page) !important;
  border-top: 1px solid var(--border-main) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

body.retroSite .directoryPage.directoryPortal > .directoryBottomBar > div,
body.retroSite .directoryPage.directoryPortal.newsPage > .directoryBottomBar > div,
body.retroSite .directoryPage.directoryPortal.app-shell > .directoryBottomBar > div {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
}

body.retroSite .directoryPage.directoryPortal > .directoryBottomBar button,
body.retroSite .directoryPage.directoryPortal.newsPage > .directoryBottomBar button,
body.retroSite .directoryPage.directoryPortal.app-shell > .directoryBottomBar button {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  font: 600 14px/1 var(--font-body) !important;
}

body.retroSite .directoryPage.directoryPortal > .directoryBottomBar svg,
body.retroSite .directoryPage.directoryPortal.newsPage > .directoryBottomBar svg,
body.retroSite .directoryPage.directoryPortal.app-shell > .directoryBottomBar svg {
  color: var(--text-secondary) !important;
}

body.retroSite .directoryPage.directoryPortal.page-enter {
  animation: none !important;
  transform: none !important;
}

@media (min-width: 981px) {
  body.retroSite .directoryPage.directoryPortal {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.retroSite .directoryPage.directoryPortal > .directoryMain,
  body.retroSite .directoryPage.directoryPortal > .newsMain {
    height: calc(100dvh - var(--top-pad, 32px) - var(--bottom-bar-h, 56px) - 16px) !important;
    max-height: calc(100dvh - var(--top-pad, 32px) - var(--bottom-bar-h, 56px) - 16px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  body.retroSite .directoryPage.directoryPortal > .directoryRail {
    position: fixed !important;
    top: var(--top-pad, 32px) !important;
    bottom: calc(var(--bottom-bar-h, 56px) + 16px) !important;
    left: max(28px, calc((100vw - 1600px) / 2 + 28px)) !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    height: calc(100dvh - var(--top-pad, 32px) - var(--bottom-bar-h, 56px) - 16px) !important;
    max-height: calc(100dvh - var(--top-pad, 32px) - var(--bottom-bar-h, 56px) - 16px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    z-index: 120 !important;
  }

  body.retroSite .directoryPage.directoryPortal > .directoryAside,
  body.retroSite .directoryPage.directoryPortal > .newsAside {
    position: fixed !important;
    top: var(--top-pad, 32px) !important;
    bottom: calc(var(--bottom-bar-h, 56px) + 16px) !important;
    right: max(28px, calc((100vw - 1600px) / 2 + 28px)) !important;
    width: var(--shell-aside, 320px) !important;
    min-width: var(--shell-aside, 320px) !important;
    max-width: var(--shell-aside, 320px) !important;
    height: calc(100dvh - var(--top-pad, 32px) - var(--bottom-bar-h, 56px) - 16px) !important;
    max-height: calc(100dvh - var(--top-pad, 32px) - var(--bottom-bar-h, 56px) - 16px) !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    z-index: 110 !important;
  }
}

body.retroSite .retroToolGrid {
  align-items: stretch !important;
}

body.retroSite .retroToolCard {
  min-height: 252px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

body.retroSite .retroToolCardMain {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

body.retroSite .retroToolCardTop {
  align-items: flex-start !important;
}

body.retroSite .retroToolCardTags {
  margin-top: auto !important;
  padding-top: 16px !important;
}

body.retroSite .newsPage .news-hero {
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

body.retroSite .newsPage .news-hero:active {
  cursor: grabbing;
}

body.retroSite .newsPage .news-hero-media,
body.retroSite .newsPage .news-hero-content {
  animation-duration: 360ms;
  animation-timing-function: var(--ease-smooth);
  animation-fill-mode: both;
}

body.retroSite .newsPage .news-hero.is-next .news-hero-media,
body.retroSite .newsPage .news-hero.is-next .news-hero-content {
  animation-name: capykaHeroNextIn;
}

body.retroSite .newsPage .news-hero.is-prev .news-hero-media,
body.retroSite .newsPage .news-hero.is-prev .news-hero-content {
  animation-name: capykaHeroPrevIn;
}

body.retroSite .newsPage .banner-dot {
  transition: width 180ms ease, background 180ms ease;
}

body.retroSite .newsPage .banner-dot.active {
  width: 22px;
}

@keyframes capykaHeroNextIn {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes capykaHeroPrevIn {
  from { opacity: 0; transform: translateX(-26px); }
  to { opacity: 1; transform: translateX(0); }
}

body.retroSite .retroRelatedBlock {
  margin-top: 34px !important;
}

body.retroSite .retroRelatedBlock h2 {
  margin-bottom: 16px !important;
  font-weight: 600 !important;
}

body.retroSite .retroRelatedGrid {
  gap: 18px !important;
}

body.retroSite .retroRelatedCard {
  min-height: 156px !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 12px !important;
  border: 0 !important;
  box-shadow: 0 0 0 1px var(--border-main) !important;
  background: var(--bg-card) !important;
}

body.retroSite .retroRelatedCard .retroTag {
  width: fit-content !important;
  padding: 6px 11px !important;
  font-size: 12px !important;
}

body.retroSite .retroRelatedCard strong {
  font-weight: 600 !important;
  line-height: 1.42 !important;
}

body.retroSite .retroRelatedCard p {
  margin: 0 !important;
  line-height: 1.65 !important;
}

body.retroSite .pricing-grid {
  gap: 30px !important;
  margin-bottom: 78px !important;
}

body.retroSite .pricing-card,
body.retroSite .pricingLiftCard.pricing-card {
  padding: 34px !important;
  min-height: 560px !important;
  border: 0 !important;
  box-shadow: 0 0 0 1px var(--border-main) !important;
}

body.retroSite .pricing-card-header {
  margin-bottom: 24px !important;
}

body.retroSite .pricing-card-price {
  margin-bottom: 30px !important;
  padding-bottom: 26px !important;
}

body.retroSite .pricing-features {
  gap: 18px !important;
}

body.retroSite .pricing-benefits-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.retroSite .pricing-benefits-grid {
  place-items: center !important;
}

body.retroSite .pricingFaqSection {
  max-width: 760px;
  margin: 64px auto 0;
}

body.retroSite .pricingFaqSection h2 {
  margin: 0 0 28px;
  color: var(--text-main);
  text-align: center;
  font: 600 22px/1.25 var(--font-head);
}

body.retroSite .pricingFaqItem {
  margin-bottom: 14px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--border-main);
}

body.retroSite .pricingFaqButton {
  width: 100% !important;
  min-height: 62px !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: left !important;
}

body.retroSite .pricingFaqAnswer {
  margin: 0;
  padding: 0 20px 22px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.8;
}

:root[data-theme="night"],
:root[data-theme="dark"] {
  --bg-page: #07111f;
  --bg-card: #0c1a2f;
  --bg-soft: #13243d;
  --text-main: #eaf2ff;
  --text-secondary: #b7c7df;
  --text-muted: #7f93ad;
  --border-main: rgba(148, 163, 184, 0.24);
  --border-strong: #dbeafe;
  --shadow-strong: rgba(0, 0, 0, 0.42);
  --t4: #5f7590;
}

:root[data-theme="night"] body.retroSite,
:root[data-theme="night"] body.retroSite .directoryPage,
:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal,
:root[data-theme="night"] body.retroSite .newsPage,
:root[data-theme="night"] body.retroSite .chatUnifiedPage,
:root[data-theme="night"] body.retroSite .dashboardDirectoryPage,
:root[data-theme="night"] body.retroSite .pricingDirectoryPage,
:root[data-theme="night"] body.retroSite .helpDirectoryPage,
:root[data-theme="night"] body.retroSite .legalDirectoryPage,
:root[data-theme="night"] body.retroSite .historyDirectoryPage,
:root[data-theme="night"] body.retroSite .humanizerDirectoryPage,
:root[data-theme="night"] body.retroSite .videoDirectoryPage,
:root[data-theme="night"] body.retroSite .capykaBootShell {
  background: var(--bg-page) !important;
  color: var(--text-main) !important;
}

:root[data-theme="night"] body.retroSite .retroCard,
:root[data-theme="night"] body.retroSite .retroToolCard,
:root[data-theme="night"] body.retroSite .directoryPanel,
:root[data-theme="night"] body.retroSite .directoryToolCard,
:root[data-theme="night"] body.retroSite .directoryLatestCard,
:root[data-theme="night"] body.retroSite .news-card,
:root[data-theme="night"] body.retroSite .newsTopicPanel,
:root[data-theme="night"] body.retroSite .newsFeaturePanel,
:root[data-theme="night"] body.retroSite .newsRelatedPanel,
:root[data-theme="night"] body.retroSite .pricing-card,
:root[data-theme="night"] body.retroSite .pricingFaqItem,
:root[data-theme="night"] body.retroSite .authCard,
:root[data-theme="night"] body.retroSite .settingsModalShell,
:root[data-theme="night"] body.retroSite .directoryBottomBar button {
  background: var(--bg-card) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 1px var(--border-main) !important;
  color: var(--text-main) !important;
}

:root[data-theme="night"] body.retroSite .directoryRail,
:root[data-theme="night"] body.retroSite .directoryAside,
:root[data-theme="night"] body.retroSite .newsAside,
:root[data-theme="night"] body.retroSite .directoryMain,
:root[data-theme="night"] body.retroSite .newsMain,
:root[data-theme="night"] body.retroSite .pricingMain,
:root[data-theme="night"] body.retroSite .helpMain {
  background: transparent !important;
}

:root[data-theme="night"] body.retroSite .directoryPrimaryNavItem,
:root[data-theme="night"] body.retroSite .directoryCategoryItem,
:root[data-theme="night"] body.retroSite .filter-tab,
:root[data-theme="night"] body.retroSite .retroTag,
:root[data-theme="night"] body.retroSite .news-card-tag,
:root[data-theme="night"] body.retroSite .news-card-bookmark,
:root[data-theme="night"] body.retroSite .pricingBillingToggle,
:root[data-theme="night"] body.retroSite .pricingRedeemForm,
:root[data-theme="night"] body.retroSite .directoryAskBox,
:root[data-theme="night"] body.retroSite .directoryAskInput,
:root[data-theme="night"] body.retroSite .retroAskInput,
:root[data-theme="night"] body.retroSite .authInput,
:root[data-theme="night"] body.retroSite .authProviderButton,
:root[data-theme="night"] body.retroSite .authTabs,
:root[data-theme="night"] body.retroSite .directoryLanguageMenu {
  background: var(--bg-soft) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 1px var(--border-main) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="night"] body.retroSite .directoryPrimaryNavItem.active,
:root[data-theme="night"] body.retroSite .directoryCategoryItem.active,
:root[data-theme="night"] body.retroSite .filter-tab.active,
:root[data-theme="night"] body.retroSite .authCard .authTabs .tab.active,
:root[data-theme="night"] body.retroSite .retroBtn--primary,
:root[data-theme="night"] body.retroSite .btn-primary {
  background: var(--text-main) !important;
  color: var(--bg-page) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 1px var(--text-main) !important;
}

:root[data-theme="night"] body.retroSite .directoryPrimaryNavItem.active span,
:root[data-theme="night"] body.retroSite .directoryPrimaryNavItem.active strong,
:root[data-theme="night"] body.retroSite .directoryPrimaryNavItem.active svg,
:root[data-theme="night"] body.retroSite .directoryCategoryItem.active span,
:root[data-theme="night"] body.retroSite .directoryCategoryItem.active svg,
:root[data-theme="night"] body.retroSite .filter-tab.active,
:root[data-theme="night"] body.retroSite .authCard .authTabs .tab.active {
  color: var(--bg-page) !important;
  background: transparent !important;
}

:root[data-theme="night"] body.retroSite .directoryBottomBar,
:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal > .directoryBottomBar {
  background: rgba(7, 17, 31, 0.94) !important;
  border-top-color: var(--border-main) !important;
}

:root[data-theme="night"] body.retroSite .directoryBottomBar button,
:root[data-theme="night"] body.retroSite .directoryBottomBar svg {
  color: var(--text-secondary) !important;
}

:root[data-theme="night"] body.retroSite .newsPage .filter-tab {
  background: var(--bg-soft) !important;
  color: var(--text-secondary) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 1px var(--border-main) !important;
}

:root[data-theme="night"] body.retroSite .newsPage .filter-tab:hover:not(.active) {
  background: color-mix(in srgb, var(--bg-soft) 82%, var(--text-main) 18%) !important;
  color: var(--text-main) !important;
}

:root[data-theme="night"] body.retroSite .newsPage .filter-tab.active {
  background: var(--text-main) !important;
  color: var(--bg-page) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 1px var(--text-main) !important;
}

:root[data-theme="night"] body.retroSite .authOverlay {
  background: rgba(7, 17, 31, 0.82) !important;
}

:root[data-theme="night"] body.retroSite .pricing-benefits-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (min-width: 1381px) {
  body.retroSite .directoryPage.directoryPortal,
  body.retroSite .directoryPage.app-shell {
    display: grid !important;
    min-width: 0 !important;
    width: 100% !important;
    grid-template-columns: 260px minmax(0, 1fr) 320px !important;
    gap: 28px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  body.retroSite .directoryPage.directoryPortal:not(:has(.right-panel, .directoryAside, .newsAside)),
  body.retroSite .directoryPage.app-shell:not(:has(.right-panel, .directoryAside, .newsAside)) {
    grid-template-columns: 260px minmax(0, 1fr) !important;
  }

  body.retroSite .directoryPage.directoryPortal > .directoryRail,
  body.retroSite .directoryPage.app-shell > .directoryRail {
    display: block !important;
    grid-column: 1 !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    height: calc(100dvh - var(--top-pad, 32px) - var(--bottom-bar-h, 56px) - 16px) !important;
    max-height: calc(100dvh - var(--top-pad, 32px) - var(--bottom-bar-h, 56px) - 16px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.retroSite .directoryPage.directoryPortal > .directoryMain,
  body.retroSite .directoryPage.directoryPortal > .newsMain,
  body.retroSite .directoryPage.app-shell > .directoryMain {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  body.retroSite .directoryPage.directoryPortal > .directoryAside,
  body.retroSite .directoryPage.directoryPortal > .newsAside,
  body.retroSite .directoryPage.directoryPortal > .right-panel,
  body.retroSite .directoryPage.app-shell > .directoryAside,
  body.retroSite .directoryPage.app-shell > .right-panel {
    display: grid !important;
    align-content: start !important;
    gap: 40px !important;
    grid-column: 3 !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    height: calc(100dvh - var(--top-pad, 32px) - var(--bottom-bar-h, 56px) - 16px) !important;
    max-height: calc(100dvh - var(--top-pad, 32px) - var(--bottom-bar-h, 56px) - 16px) !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
  }

  body.retroSite .directoryPage.directoryPortal > .directoryBottomBar,
  body.retroSite .directoryPage.app-shell > .directoryBottomBar {
    min-width: 0 !important;
  }
}

@media (min-width: 981px) and (max-width: 1380px) {
  html,
  body.retroSite,
  body.retroSite #root {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.retroSite .directoryPage.directoryPortal,
  body.retroSite .directoryPage.app-shell {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: clamp(190px, 19vw, 230px) minmax(0, 1fr) !important;
    gap: clamp(16px, 2vw, 24px) !important;
    padding-inline: clamp(16px, 2vw, 28px) !important;
  }

  body.retroSite .directoryPage.directoryPortal > .directoryRail,
  body.retroSite .directoryPage.app-shell > .directoryRail {
    grid-column: 1 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: calc(100dvh - var(--bottom-bar-h, 56px)) !important;
    max-height: calc(100dvh - var(--bottom-bar-h, 56px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.retroSite .directoryPage.directoryPortal .directorySidePrimaryNav,
  body.retroSite .directoryPage.directoryPortal .directoryCategoryList,
  body.retroSite .directoryPage.app-shell .directorySidePrimaryNav,
  body.retroSite .directoryPage.app-shell .directoryCategoryList {
    display: grid !important;
    overflow: visible !important;
  }

  body.retroSite .directoryPage.directoryPortal .directoryPrimaryNavItem,
  body.retroSite .directoryPage.directoryPortal .directoryCategoryItem,
  body.retroSite .directoryPage.app-shell .directoryPrimaryNavItem,
  body.retroSite .directoryPage.app-shell .directoryCategoryItem {
    width: 100% !important;
  }

  body.retroSite .directoryPage.directoryPortal > .directoryMain,
  body.retroSite .directoryPage.directoryPortal > .newsMain,
  body.retroSite .directoryPage.directoryPortal > .chatUnifiedMain,
  body.retroSite .directoryPage.app-shell > .directoryMain,
  body.retroSite .directoryPage.app-shell > .chatUnifiedMain {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.retroSite .directoryPage.directoryPortal > .directoryAside,
  body.retroSite .directoryPage.directoryPortal > .newsAside,
  body.retroSite .directoryPage.directoryPortal > .right-panel,
  body.retroSite .directoryPage.app-shell > .directoryAside,
  body.retroSite .directoryPage.app-shell > .right-panel {
    display: none !important;
  }

  body.retroSite .directoryPage.directoryPortal > .directoryBottomBar,
  body.retroSite .directoryPage.app-shell > .directoryBottomBar {
    min-width: 0 !important;
    width: 100% !important;
  }
}

body.retroSite .newsPage .newsMain:has(.newsDetailPanel) {
  padding-left: clamp(18px, 2.2vw, 42px) !important;
  padding-right: clamp(12px, 1.4vw, 24px) !important;
}

body.retroSite .newsPage .newsDetailPanel.retroArticleLayout {
  --news-detail-shift: clamp(16px, 1.8vw, 34px);
  width: min(930px, calc(100% - var(--news-detail-shift))) !important;
  max-width: 930px !important;
  margin: 0 auto 56px var(--news-detail-shift) !important;
  padding: clamp(34px, 3vw, 52px) clamp(36px, 3.4vw, 58px) clamp(42px, 3.6vw, 64px) !important;
  border: 1px solid color-mix(in srgb, var(--border-main) 72%, transparent) !important;
  border-radius: 22px !important;
  background: var(--bg-card) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.04) !important;
}

body.retroSite .newsPage .newsDetailPanel .retroArticleTop {
  margin-bottom: 22px !important;
}

body.retroSite .newsPage .newsDetailPanel .retroArticleTitle {
  margin-bottom: 18px !important;
}

body.retroSite .newsPage .newsDetailPanel .retroArticleMeta {
  margin-bottom: 28px !important;
}

body.retroSite .newsPage .newsDetailPanel .retroArticleHero {
  border-radius: 18px !important;
  margin-bottom: 28px !important;
}

:root[data-theme="night"] body.retroSite .newsPage .newsDetailPanel.retroArticleLayout {
  background: var(--bg-card) !important;
  border-color: var(--border-main) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22) !important;
}

@media (max-width: 760px) {
  body.retroSite .newsPage .newsMain:has(.newsDetailPanel) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.retroSite .newsPage .newsDetailPanel.retroArticleLayout {
    --news-detail-shift: 0px;
    width: 100% !important;
    margin: 0 0 40px !important;
    padding: 24px 20px 32px !important;
    border-radius: 18px !important;
  }
}

body.retroSite .newsPage .newsRelatedPanel {
  padding: 22px !important;
}

body.retroSite .newsPage .newsRelatedPanel > div {
  display: grid !important;
  gap: 14px !important;
  margin-top: 20px !important;
}

body.retroSite .newsPage .newsRelatedPanel button {
  min-height: 96px !important;
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: var(--bg-soft) !important;
  border: 1px solid color-mix(in srgb, var(--border-main) 78%, transparent) !important;
}

body.retroSite .newsPage .newsRelatedPanel img {
  width: 96px !important;
  height: 72px !important;
  border-radius: 12px !important;
}

body.retroSite .newsPage .newsRelatedPanel span {
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
}

body.retroSite .newsPage .newsRelatedPanel strong {
  line-height: 1.42 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  -webkit-line-clamp: 2 !important;
}

body.retroSite .newsPage .newsRelatedPanel em {
  margin-top: 0 !important;
  line-height: 1.2 !important;
  font-size: 12px !important;
}

body.retroSite .chatWorkbenchPage .chatUnifiedComposer {
  gap: 12px !important;
  padding: 14px !important;
}

body.retroSite .chatWorkbenchPage .chatUnifiedComposer textarea {
  min-height: 48px !important;
  padding: 2px 8px 0 !important;
  line-height: 1.55 !important;
}

body.retroSite .chatWorkbenchPage .chatComposerFooter {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.retroSite .chatWorkbenchPage .chatComposerToolbar {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
}

body.retroSite .chatWorkbenchPage .chatComposerToolbar::-webkit-scrollbar {
  display: none !important;
}

body.retroSite .chatWorkbenchPage .chatComposerMeta {
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
  padding: 0 10px !important;
  border: 1px solid var(--border-main) !important;
  border-radius: 12px !important;
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
}

body.retroSite .chatWorkbenchPage .chatComposerModel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.retroSite .chatWorkbenchPage .chatComposerModel select {
  width: auto !important;
  max-width: 118px !important;
  height: 30px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--text-main) !important;
  font: 600 12px/1 var(--font-body) !important;
}

body.retroSite .chatWorkbenchPage .chatComposerCtx {
  flex: 0 0 auto !important;
  color: var(--text-secondary) !important;
  font: 600 12px/1 var(--font-mono) !important;
}

body.retroSite .chatWorkbenchPage .chatComposerQuota {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 5px !important;
  color: var(--text-muted) !important;
}

body.retroSite .chatWorkbenchPage .chatComposerQuota strong {
  color: var(--text-secondary) !important;
  font: 600 11px/1 var(--font-body) !important;
  white-space: nowrap !important;
}

body.retroSite .chatWorkbenchPage .chatQuotaBar {
  width: 28px !important;
  height: 4px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: var(--bg-soft) !important;
}

body.retroSite .chatWorkbenchPage .chatQuotaBar i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: var(--text-main) !important;
}

body.retroSite .chatWorkbenchPage .chatComposerQuota em {
  font: 600 11px/1 var(--font-mono) !important;
  color: var(--text-muted) !important;
}

@media (min-width: 981px) {
  body.retroSite .directoryPage.directoryPortal > .directoryMain,
  body.retroSite .directoryPage.directoryPortal > .newsMain {
    padding-inline: 6px !important;
  }
}

body.retroSite .chatWorkbenchPage .chatComposerToolbar > button {
  flex: 0 0 auto !important;
  height: 36px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
}

body.retroSite .chatWorkbenchPage .chatComposerFooter .chatUnifiedSend {
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  margin-left: 0 !important;
  padding: 0 !important;
}

@media (max-width: 760px) {
  body.retroSite .chatWorkbenchPage .chatComposerToolbar > button {
    width: 38px !important;
    padding: 0 !important;
    font-size: 0 !important;
    gap: 0 !important;
  }

  body.retroSite .chatWorkbenchPage .chatComposerModel select {
    max-width: 92px !important;
  }

  body.retroSite .chatWorkbenchPage .chatComposerCtx {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.retroSite .newsPage .news-hero-media,
  body.retroSite .newsPage .news-hero-content {
    animation: none !important;
  }
}

@media (min-width: 981px) {
  body.retroSite .directoryPage.directoryPortal,
  body.retroSite .directoryPage.app-shell {
    padding-top: 0 !important;
    padding-bottom: var(--bottom-bar-h, 56px) !important;
  }

  body.retroSite .directoryPage.directoryPortal > .directoryRail,
  body.retroSite .directoryPage.app-shell > .directoryRail,
  body.retroSite .directoryPage.directoryPortal > .directoryMain,
  body.retroSite .directoryPage.directoryPortal > .newsMain,
  body.retroSite .directoryPage.directoryPortal > .chatUnifiedMain,
  body.retroSite .directoryPage.app-shell > .directoryMain,
  body.retroSite .directoryPage.app-shell > .chatUnifiedMain,
  body.retroSite .directoryPage.directoryPortal > .directoryAside,
  body.retroSite .directoryPage.directoryPortal > .newsAside,
  body.retroSite .directoryPage.directoryPortal > .right-panel,
  body.retroSite .directoryPage.app-shell > .directoryAside,
  body.retroSite .directoryPage.app-shell > .right-panel {
    height: calc(100dvh - var(--bottom-bar-h, 56px)) !important;
    max-height: calc(100dvh - var(--bottom-bar-h, 56px)) !important;
  }

  body.retroSite .directoryPage.directoryPortal > .directoryRail,
  body.retroSite .directoryPage.app-shell > .directoryRail,
  body.retroSite .directoryPage.directoryPortal > .directoryMain,
  body.retroSite .directoryPage.directoryPortal > .newsMain,
  body.retroSite .directoryPage.directoryPortal > .chatUnifiedMain,
  body.retroSite .directoryPage.app-shell > .directoryMain,
  body.retroSite .directoryPage.app-shell > .chatUnifiedMain,
  body.retroSite .directoryPage.directoryPortal > .directoryAside,
  body.retroSite .directoryPage.directoryPortal > .newsAside,
  body.retroSite .directoryPage.directoryPortal > .right-panel,
  body.retroSite .directoryPage.app-shell > .directoryAside,
  body.retroSite .directoryPage.app-shell > .right-panel {
    padding-top: var(--top-pad, 32px) !important;
  }
}

body.retroSite .helpContentStack,
body.retroSite .helpArticleDetail {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.retroSite .chatWorkbenchPage .chatComposerAttach {
  width: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}

:root[data-theme="night"] body.retroSite {
  --night-action-bg: #1d4269;
  --night-action-hover: #27547f;
  --night-action-text: #e6f0ff;
  --night-action-ring: rgba(125, 177, 232, 0.42);
}

:root[data-theme="night"] body.retroSite .directoryPrimaryNavItem.active,
:root[data-theme="night"] body.retroSite .directoryCategoryItem.active,
:root[data-theme="night"] body.retroSite .directoryTopTab.active,
:root[data-theme="night"] body.retroSite .filter-tab.active,
:root[data-theme="night"] body.retroSite .newsFilterRow button.active,
:root[data-theme="night"] body.retroSite .retroCategoryTabs button.isActive,
:root[data-theme="night"] body.retroSite .retroCategoryTile.isActive,
:root[data-theme="night"] body.retroSite .historyFilterTabs button.active,
:root[data-theme="night"] body.retroSite .capykaModelOption.active,
:root[data-theme="night"] body.retroSite .chatComposerFooter button.active,
:root[data-theme="night"] body.retroSite .authCard .authTabs .tab.active,
:root[data-theme="night"] body.retroSite .retroBtn--primary,
:root[data-theme="night"] body.retroSite .btn-primary,
:root[data-theme="night"] body.retroSite .authCard .authSubmit,
:root[data-theme="night"] body.retroSite .directoryDetailAction {
  background: var(--night-action-bg) !important;
  border-color: transparent !important;
  color: var(--night-action-text) !important;
  box-shadow: 0 0 0 1px var(--night-action-ring) !important;
}

:root[data-theme="night"] body.retroSite .directoryPrimaryNavItem.active span,
:root[data-theme="night"] body.retroSite .directoryPrimaryNavItem.active strong,
:root[data-theme="night"] body.retroSite .directoryPrimaryNavItem.active svg,
:root[data-theme="night"] body.retroSite .directoryCategoryItem.active span,
:root[data-theme="night"] body.retroSite .directoryCategoryItem.active svg,
:root[data-theme="night"] body.retroSite .filter-tab.active,
:root[data-theme="night"] body.retroSite .newsFilterRow button.active,
:root[data-theme="night"] body.retroSite .retroCategoryTile.isActive,
:root[data-theme="night"] body.retroSite .retroCategoryTile.isActive .retroCategoryTileIcon,
:root[data-theme="night"] body.retroSite .authCard .authTabs .tab.active,
:root[data-theme="night"] body.retroSite .retroBtn--primary,
:root[data-theme="night"] body.retroSite .btn-primary,
:root[data-theme="night"] body.retroSite .authCard .authSubmit {
  color: var(--night-action-text) !important;
}

:root[data-theme="night"] body.retroSite .retroCategoryTile.isActive .retroCategoryTileIcon {
  background: rgba(7, 17, 31, 0.34) !important;
  border-color: var(--night-action-ring) !important;
}

:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .directoryPrimaryNavItem.active,
:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .directoryCategoryItem.active,
:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .directoryTopTab.active,
:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .retroCategoryTabs button.isActive,
:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .retroCategoryTile.isActive,
:root[data-theme="night"] body.retroSite .newsPage .filter-tab.active,
:root[data-theme="night"] body.retroSite .newsPage .newsFilterRow button.active,
:root[data-theme="night"] body.retroSite .authOverlay .authCard .authTabs .tab.active {
  background: var(--night-action-bg) !important;
  border-color: transparent !important;
  color: var(--night-action-text) !important;
  box-shadow: 0 0 0 1px var(--night-action-ring) !important;
}

:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .directoryPrimaryNavItem.active span,
:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .directoryPrimaryNavItem.active strong,
:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .directoryPrimaryNavItem.active svg,
:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .directoryCategoryItem.active span,
:root[data-theme="night"] body.retroSite .directoryPage.directoryPortal .directoryCategoryItem.active svg,
:root[data-theme="night"] body.retroSite .newsPage .filter-tab.active,
:root[data-theme="night"] body.retroSite .newsPage .newsFilterRow button.active,
:root[data-theme="night"] body.retroSite .authOverlay .authCard .authTabs .tab.active {
  color: var(--night-action-text) !important;
}

:root[data-theme="night"] body.retroSite .chatWorkbenchPage .chatComposerAttach {
  background: var(--bg-soft) !important;
  border-color: var(--border-main) !important;
  color: var(--text-secondary) !important;
  box-shadow: 0 0 0 1px var(--border-main) !important;
}

:root[data-theme="night"] body.retroSite .chatWorkbenchPage .chatUnifiedSend {
  background: var(--night-action-bg) !important;
  border-color: transparent !important;
  color: var(--night-action-text) !important;
  box-shadow: 0 0 0 1px var(--night-action-ring) !important;
}

:root[data-theme="night"] body.retroSite .chatWorkbenchPage .chatUnifiedSend:disabled {
  background: var(--bg-soft) !important;
  border-color: var(--border-main) !important;
  color: var(--text-muted) !important;
  box-shadow: 0 0 0 1px var(--border-main) !important;
  opacity: 1 !important;
}

@media (hover: hover) {
  :root[data-theme="night"] body.retroSite .retroBtn--primary:hover:not(:disabled),
  :root[data-theme="night"] body.retroSite .btn-primary:hover:not(:disabled),
  :root[data-theme="night"] body.retroSite .authCard .authSubmit:hover:not(:disabled),
  :root[data-theme="night"] body.retroSite .directoryDetailAction:hover {
    background: var(--night-action-hover) !important;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 981px) and (max-width: 1379px) {
  html:has(body.retroSite .chatWorkbenchPage),
  body.retroSite:has(.chatWorkbenchPage),
  body.retroSite:has(.chatWorkbenchPage) #root {
    min-width: 0 !important;
  }

  body.retroSite .chatWorkbenchPage.directoryPage.app-shell {
    --desktop-min-width: 0px;
    min-width: 0 !important;
    width: 100% !important;
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body.retroSite .chatWorkbenchPage.directoryPage.app-shell > .directoryRail {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }

  body.retroSite .chatWorkbenchPage.directoryPage.app-shell > .chatUnifiedMain,
  body.retroSite .chatWorkbenchPage.directoryPage.app-shell > .directoryBottomBar {
    min-width: 0 !important;
  }
}

body.retroSite .directoryBrandIdentity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 12px;
  color: var(--text-main);
}

body.retroSite .directoryBrandLogo {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

body.retroSite .directoryBrandLogo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: scale(1.46);
  transform-origin: top left;
}

body.retroSite .directoryBrandIdentity strong {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.topicPromoSection {
  margin-top: 24px;
}

.topicPromoGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.topicPromoCard {
  min-height: 190px;
  padding: 20px;
  border: 0;
  border-radius: 18px;
  background-position: center;
  background-size: cover;
  color: #fff;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 0 0 1px rgba(20, 24, 31, .12);
  transition: transform .18s ease, box-shadow .18s ease;
}

.topicPromoCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .45), 0 12px 28px rgba(16, 24, 40, .16);
}

.topicPromoCard > span {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: #15171a;
  font-size: 11px;
  font-weight: 600;
}

.topicPromoCard > strong {
  margin-top: 12px;
  font: 600 22px/1.2 var(--font-display);
  color: #fff !important;
}

.topicPromoCard > p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, .88) !important;
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topicPromoCard > em {
  margin-top: auto;
  padding-top: 12px;
  color: #fff !important;
  font: 600 12px/1 var(--font-mono);
}

.topicPromoCard > b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 9px;
  background: #fff;
  color: #15171a;
  font-size: 12px;
  font-weight: 600;
}

.topicMain {
  padding-bottom: 32px !important;
}

.topicBreadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 13px;
}

.topicBreadcrumb button {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.topicBreadcrumb strong {
  color: var(--text-main);
  font-weight: 600;
}

.topicBackButton {
  width: fit-content;
  margin-bottom: 12px;
  padding-inline: 14px;
}

.topicHero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 360px;
  padding: 42px;
  border-radius: 24px;
  background-position: center;
  background-size: cover;
  color: #fff;
  display: flex;
  align-items: center;
  box-shadow: 0 0 0 1px rgba(10, 15, 20, .16);
}

.topicHero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(2, 5, 9, .36) 0%, rgba(2, 5, 9, .18) 54%, rgba(2, 5, 9, .04) 78%);
}

:root[data-theme="night"] .topicHero::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .1) 54%, transparent 78%);
}

.topicHero > div {
  position: relative;
  z-index: 1;
  max-width: 660px;
}

body.retroSite .topicPage .topicHero h1 {
  margin: 0;
  font: 600 clamp(38px, 4vw, 58px)/1.08 var(--font-display);
  letter-spacing: -.035em;
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .58);
}

body.retroSite .topicPage .topicHero p {
  max-width: 560px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .96) !important;
  font-size: 16px;
  line-height: 1.7;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .72);
}

.topicHeroStats {
  display: flex;
  gap: 1px;
  width: fit-content;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
}

body.retroSite .topicPage .topicHeroStats span {
  min-width: 116px;
  padding: 13px 16px;
  background: rgba(8, 12, 15, .32);
  color: rgba(255, 255, 255, .92) !important;
  font-size: 12px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .68);
}

body.retroSite .topicPage .topicHeroStats b {
  display: block;
  margin-bottom: 4px;
  color: #fff !important;
  font: 600 20px/1 var(--font-mono);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .68);
}

.topicHeroActions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.topicHeroActions a {
  padding: 11px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .36);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.topicHeroActions a:first-child {
  background: #fff;
  color: #17191d;
}

.topicStickyNav {
  position: sticky;
  top: -1px;
  z-index: 30;
  display: flex;
  gap: 5px;
  margin: 18px 0 0;
  padding: 8px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-page) 92%, transparent);
  box-shadow: 0 0 0 1px var(--border-main), 0 8px 24px rgba(16, 24, 40, .06);
  backdrop-filter: blur(16px);
}

.topicStickyNav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 9px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.topicStickyNav a:hover {
  background: var(--bg-card);
  color: var(--text-main);
}

.topicSection {
  scroll-margin-top: 72px;
  margin-top: 34px;
}

.topicSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.topicSectionHead h2 {
  margin: 0;
  font: 600 25px/1.2 var(--font-display);
  color: var(--text-main);
}

.topicToolGrid,
.topicContentGrid,
.topicNewsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.topicToolCard {
  min-width: 0;
  min-height: 260px;
  padding: 18px;
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--border-main);
  display: flex;
  flex-direction: column;
}

.topicToolCard > div:first-child {
  display: flex;
  align-items: center;
  gap: 11px;
}

.topicToolCard img {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  box-shadow: 0 0 0 1px var(--border-main);
}

.topicToolCard strong {
  color: var(--text-main);
  font-size: 16px;
  font-weight: 600;
}

.topicToolCard > p {
  margin: 14px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topicToolTags {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.topicToolTags span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-size: 11px;
}

.topicToolActions {
  display: flex;
  gap: 8px;
  margin-top: 13px;
}

.topicToolActions button,
.topicTextButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: var(--text-main);
  color: var(--bg-card);
  box-shadow: 0 0 0 1px var(--border-main);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}

.topicToolActions button + button,
.topicTextButton {
  background: var(--bg-card);
  color: var(--text-main);
}

body.retroSite .retroHeroCard .topicPromoCard > strong,
body.retroSite .retroHeroCard .topicPromoCard > p,
body.retroSite .retroHeroCard .topicPromoCard > em {
  color: #fff !important;
  opacity: 1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}

.topicRankingFilters {
  display: flex;
  gap: 8px;
}

.topicRankingFilters input,
.topicRankingFilters select,
.topicSubscribe input {
  height: 36px;
  border: 0;
  border-radius: 9px;
  outline: 0;
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: 0 0 0 1px var(--border-main);
  padding: 0 11px;
  font: 500 12px/1 var(--font-body);
}

.topicRankingTable {
  overflow: hidden;
  border-radius: 15px;
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--border-main);
}

.topicRankingTable > div {
  display: grid;
  grid-template-columns: 64px minmax(160px, 1.5fr) 100px 110px 80px 90px 70px;
  align-items: center;
  min-height: 54px;
  padding: 0 14px;
  color: var(--text-secondary);
  font-size: 12px;
  border-top: 1px solid var(--border-main);
}

.topicRankingTable .head {
  min-height: 44px;
  border-top: 0;
  background: var(--bg-soft);
  color: var(--text-muted);
  font-weight: 600;
}

.topicRankingTable > div > span:nth-child(2) {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-main);
  font-weight: 600;
}

.topicRankingTable img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.topicRankingTable b,
.topicRankingTable strong {
  font-family: var(--font-mono);
}

.topicContentCard {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card);
  color: inherit;
  box-shadow: 0 0 0 1px var(--border-main);
  text-align: left;
  cursor: pointer;
}

.topicContentCard > img,
.topicContentPlaceholder {
  width: 100%;
  height: 132px;
  object-fit: cover;
}

.topicContentPlaceholder {
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  color: var(--text-muted);
}

.topicContentCard > div {
  padding: 15px;
}

.topicContentCard em {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}

.topicContentCard strong {
  display: block;
  margin-top: 7px;
  color: var(--text-main);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.topicContentCard p {
  margin: 7px 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.topicContentCard small {
  color: var(--text-muted);
  font: 500 11px/1.4 var(--font-mono);
}

.topicNewsGrid article,
.topicNewsGrid > a {
  min-height: 160px;
  padding: 17px;
  border-radius: 15px;
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--border-main);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.topicNewsGrid > a:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--border-main), 0 12px 28px rgba(15, 23, 42, .08);
}

.topicNewsGrid span,
.topicNewsGrid p,
.topicNewsGrid em {
  color: var(--text-muted);
  font-size: 11px;
}

.topicNewsGrid strong {
  margin-top: 10px;
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}

.topicNewsGrid p {
  margin: auto 0 0;
  padding-top: 12px;
}

.topicNewsGrid em {
  margin-top: 5px;
  font-family: var(--font-mono);
}

.topicWikiList {
  overflow: hidden;
  border-radius: 15px;
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--border-main);
}

.topicWikiList button {
  width: 100%;
  padding: 16px 18px;
  border: 0;
  border-top: 1px solid var(--border-main);
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
}

.topicWikiList button:first-child {
  border-top: 0;
}

.topicWikiList button span {
  flex: 1;
}

.topicWikiList strong {
  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
}

.topicWikiList p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

.topicAside {
  display: grid;
  align-content: start;
  gap: 16px !important;
}

.topicAside > section {
  padding: 18px;
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--border-main);
}

.topicAsideHead h2,
.topicSubscribe h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
}

.topicAside > section > button {
  width: 100%;
  min-height: 48px;
  padding: 9px 0;
  border: 0;
  border-top: 1px solid var(--border-main);
  background: transparent;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  cursor: pointer;
}

.topicAside > section > button:first-of-type {
  border-top: 0;
}

.topicAside > section > button > b,
.topicAside > section > button > em {
  font: 600 11px/1 var(--font-mono);
  color: var(--text-muted);
}

.topicAside > section > button > img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.topicAside > section > button > span {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
}

.topicAside > section > button small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font: 500 10px/1.3 var(--font-mono);
}

.topicSubscribe p {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.topicSubscribe form {
  display: grid;
  gap: 8px;
}

.topicSubscribe button {
  height: 36px;
  border: 0;
  border-radius: 9px;
  background: var(--text-main);
  color: var(--bg-card);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.topicSubscribe > small {
  display: block;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 11px;
}

.topicSideLinks {
  display: grid;
  gap: 5px;
}

.topicSideLinks a {
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.topicSideLinks a:hover {
  background: var(--bg-soft);
  color: var(--text-main);
}

.topicEntryPage {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 0 60px;
}

.topicEntryCover {
  width: 100%;
  max-height: 420px;
  margin: 22px 0;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--border-main);
}

.topicEntryPage > span {
  display: block;
  margin-top: 28px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}

.topicEntryPage h1 {
  margin: 10px 0 0;
  font: 600 clamp(34px, 5vw, 54px)/1.12 var(--font-display);
  letter-spacing: -.035em;
}

.topicEntryLead {
  margin: 18px 0 0;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.7;
}

.topicEntryMeta {
  display: flex;
  gap: 18px;
  margin-top: 18px;
  color: var(--text-muted);
  font: 500 12px/1 var(--font-mono);
}

.topicEntryPage section {
  margin-top: 34px;
}

.topicEntryPage h2 {
  font-size: 24px;
  font-weight: 600;
}

.topicEntryPage section p {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.9;
}

.topicEntryPage pre {
  padding: 18px;
  overflow: auto;
  border-radius: 14px;
  background: var(--bg-soft);
  box-shadow: 0 0 0 1px var(--border-main);
  font-family: var(--font-mono);
}

.topicEntryTools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topicEntryTools span {
  padding: 8px 11px;
  border-radius: 9px;
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--border-main);
  font-size: 13px;
  font-weight: 600;
}

.topicLoading,
.topicEmpty {
  min-height: 60vh;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 15px;
}

@media (max-width: 1280px) {
  .topicToolGrid,
  .topicContentGrid,
  .topicNewsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topicRankingTable {
    overflow-x: auto;
  }

  .topicRankingTable > div {
    min-width: 760px;
  }
}

@media (max-width: 980px) {
  body.retroSite .topicPage.app-shell {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 14px calc(var(--bottom-bar-h, 56px) + 24px) !important;
    overflow-x: hidden !important;
  }

  body.retroSite .topicPage.app-shell > .directoryRail,
  body.retroSite .topicPage.app-shell > .topicAside {
    display: none !important;
  }

  body.retroSite .topicPage.app-shell > .topicMain {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .topicPromoGrid,
  .topicToolGrid,
  .topicContentGrid,
  .topicNewsGrid {
    grid-template-columns: 1fr;
  }

  .topicHero {
    min-height: 420px;
    padding: 28px;
  }

  .topicHeroStats,
  .topicHeroActions,
  .topicStickyNav {
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  .topicHero {
    min-height: 390px;
    padding: 22px;
    border-radius: 18px;
  }

  .topicHero h1 {
    font-size: 34px;
  }

  .topicHeroStats {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .topicHeroStats span {
    min-width: 0;
    padding: 12px 9px;
  }

  .topicHeroActions a {
    flex: 1 1 120px;
    text-align: center;
  }

  .topicStickyNav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .topicStickyNav a {
    justify-content: center;
    padding: 9px 6px;
  }
}

@media (max-width: 760px) {
  body.retroSite .directoryPage.directoryPortal > .directoryBottomBar,
  body.retroSite .directoryPage.app-shell > .directoryBottomBar {
    justify-content: space-around !important;
    padding-inline: 12px !important;
  }

  body.retroSite .directoryPage.directoryPortal > .directoryBottomBar > div,
  body.retroSite .directoryPage.app-shell > .directoryBottomBar > div {
    gap: 0 !important;
  }

  body.retroSite .directoryPage.directoryPortal > .directoryBottomBar > div > button,
  body.retroSite .directoryPage.directoryPortal > .directoryBottomBar > div > .directoryLanguagePicker > button,
  body.retroSite .directoryPage.directoryPortal.app-shell > footer.directoryBottomBar > div > button,
  body.retroSite .directoryPage.directoryPortal.app-shell > footer.directoryBottomBar > div > .directoryLanguagePicker > button {
    width: 44px !important;
    min-width: 44px !important;
    justify-content: center !important;
    gap: 0 !important;
    font: 0/0 var(--font-body) !important;
  }

  body.retroSite .directoryBottomBar .directoryBottomStatusButton span,
  body.retroSite .directoryBottomBar .directoryLanguagePicker > button svg:last-child {
    display: none !important;
  }
}

/* ===== 专题主题色 + 布局预设（后台可配） ===== */
.topicPage { --topic-accent: #ff8a1c; }
.topicPage .topicHeroActions a:first-child { background: var(--topic-accent); color: #fff; box-shadow: none; }
.topicPage .topicHeroStats b { color: var(--topic-accent); }
.topicPage .topicStickyNav a:hover { color: var(--topic-accent); }
.topicPage .topicStickyNav a:hover svg { color: var(--topic-accent); }
.topicPage .topicSectionHead h2 { display: flex; align-items: center; gap: 11px; }
.topicPage .topicSectionHead h2::before { content: ''; width: 5px; height: 22px; border-radius: 3px; background: var(--topic-accent); flex: 0 0 auto; }
.topicPage .topicContentCard:hover,
.topicPage .topicToolCard:hover,
.topicPage .topicNewsGrid > a:hover,
.topicPage .topicWikiList button:hover {
  border-color: var(--topic-accent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--topic-accent) 17%, transparent);
}
.topicPage .topicContentCard em { color: var(--topic-accent); }
.topicPage .topicContentPlaceholder { color: var(--topic-accent); background: color-mix(in srgb, var(--topic-accent) 12%, var(--bg-card)); }

/* 布局：紧凑（更密、卡片更小） */
.topicPage.topic-layout-compact .topicContentGrid,
.topicPage.topic-layout-compact .topicNewsGrid { gap: 10px; }
.topicPage.topic-layout-compact .topicToolCard { min-height: 210px; padding: 14px; }
.topicPage.topic-layout-compact .topicContentCard > img,
.topicPage.topic-layout-compact .topicContentCard > .topicContentPlaceholder { aspect-ratio: 2 / 1; }

/* 布局：杂志（强调封面、两列大图） */
.topicPage.topic-layout-magazine .topicContentGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.topicPage.topic-layout-magazine .topicContentCard > img,
.topicPage.topic-layout-magazine .topicContentCard > .topicContentPlaceholder { aspect-ratio: 16 / 9; min-height: 200px; }
.topicPage.topic-layout-magazine .topicSectionHead h2 { font-size: 28px; }

/* ===== 滚动性能优化（减少横向/纵向滚动卡顿） ===== */
/* 固定背景层 + 噪点层独立 GPU 合成，滚动时不再触发整页重绘 */
.mesh-bg,
.noise { transform: translateZ(0); will-change: transform; }

/* 固定/sticky 栏去掉昂贵的 backdrop-filter 模糊（背景本就近乎不透明），
   滚动时不再每帧重新采样模糊整页 —— 这是横向/纵向滚动卡顿的主因 */
.directoryBottomBar,
.topicStickyNav,
.directoryTopTabs {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 长页面里的纵向重复卡片：离屏的不渲染，大幅降低超长页面（首页 300+ 卡片）的滚动开销。
   注意：横向滑动条的卡片（.topicPromoCard）不能加，否则滑动时会忽隐忽现、宽度跳动。 */
.retroToolCard,
.directoryToolCard,
.topicToolCard,
.topicContentCard,
.topicNewsGrid > a {
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
}

/* 工具列表「加载更多」（无限滚动哨兵 + 兜底按钮） */
.directoryLoadMore {
  display: flex;
  justify-content: center;
  padding: 22px 0 8px;
}
.directoryLoadMoreBtn {
  padding: 11px 26px;
  border-radius: 12px;
  border: 1px solid var(--dir-line, #e5dfd5);
  background: var(--dir-card, #fff);
  color: var(--dir-text, #1c334f);
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.directoryLoadMoreBtn:hover {
  border-color: color-mix(in srgb, var(--item-color, #ff8a1c) 60%, var(--dir-line, #e5dfd5));
  background: color-mix(in srgb, var(--item-color, #ff8a1c) 8%, var(--dir-card, #fff));
}