:root {
  --brand-primary: #2563eb;
  --brand-accent: #0f766e;
  --brand-ink: #0f172a;
  --brand-muted: #64748b;
  --brand-line: #e2e8f0;
  --brand-panel: #ffffff;
  --brand-soft: #f6f8fb;
}

html,
body {
  background: var(--brand-soft) !important;
  color: var(--brand-ink);
  letter-spacing: 0;
}

body {
  min-height: 100vh;
}

html.dark body {
  background: #0b1120 !important;
}

#app {
  min-height: 100vh;
}

html[data-brand-route="home"] .bg-gradient-to-br {
  background: linear-gradient(180deg, #f8fafc 0%, #eef7f5 52%, #f6f8fb 100%) !important;
}

html[data-brand-route="home"] .pointer-events-none .rounded-full.blur-3xl {
  display: none !important;
}

html[data-brand-route="home"] .pointer-events-none .bg-\[linear-gradient\(rgba\(20\,184\,166\,0\.03\)_1px\,transparent_1px\)\,linear-gradient\(90deg\,rgba\(20\,184\,166\,0\.03\)_1px\,transparent_1px\)\] {
  opacity: .75;
}

html[data-brand-route="home"] header nav {
  min-height: 58px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  padding: 10px 12px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .07);
  backdrop-filter: blur(16px);
}

html[data-brand-route="home"] header img[alt="Logo"] {
  border-radius: 8px;
}

html[data-brand-route="home"] main h1 {
  max-width: 720px;
  letter-spacing: 0 !important;
  line-height: 1.04 !important;
  color: #0f172a !important;
}

html[data-brand-route="home"] main p {
  max-width: 680px;
  color: #475569 !important;
}

html[data-brand-route="home"] .btn-primary {
  border: 0 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent)) !important;
  box-shadow: 0 14px 24px rgba(37, 99, 235, .18) !important;
}

html[data-brand-route="home"] .terminal-container {
  width: min(100%, 520px);
}

html[data-brand-route="home"] .terminal-window {
  overflow: hidden;
  border: 1px solid rgba(30, 41, 59, .12);
  border-radius: 8px;
  background: #0f172a;
  box-shadow: 0 24px 54px rgba(15, 23, 42, .22);
}

html[data-brand-route="home"] .terminal-header {
  border-bottom: 1px solid rgba(148, 163, 184, .18);
  background: #111827;
}

html[data-brand-route="home"] .terminal-body {
  background: linear-gradient(180deg, #0f172a, #111827);
}

html[data-brand-route="home"] .code-url,
html[data-brand-route="home"] .code-success {
  color: #5eead4 !important;
}

html[data-brand-route="home"] .code-cmd,
html[data-brand-route="home"] .code-flag {
  color: #93c5fd !important;
}

html[data-brand-route="home"] .rounded-2xl,
html[data-brand-route="home"] .rounded-xl {
  border-radius: 8px !important;
}

html[data-brand-route="home"] .shadow-xl,
html[data-brand-route="home"] .shadow-lg {
  box-shadow: 0 16px 32px rgba(15, 23, 42, .10) !important;
}

html[data-brand-route="home"] footer {
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(12px);
}

html.dark[data-brand-route="home"] .bg-gradient-to-br {
  background: linear-gradient(180deg, #0b1120 0%, #101827 100%) !important;
}

html.dark[data-brand-route="home"] header nav,
html.dark[data-brand-route="home"] footer {
  border-color: rgba(71, 85, 105, .45);
  background: rgba(15, 23, 42, .78);
}

html.dark[data-brand-route="home"] main h1 {
  color: #f8fafc !important;
}

html.dark[data-brand-route="home"] main p {
  color: #cbd5e1 !important;
}

html:not([data-brand-route="home"]) main,
html:not([data-brand-route="home"]) [class*="lg\\:ml-64"] {
  background: var(--brand-soft);
}

html:not([data-brand-route="home"]) .card,
html:not([data-brand-route="home"]) [class*="rounded-2xl"][class*="border"],
html:not([data-brand-route="home"]) [class*="rounded-xl"][class*="border"] {
  border-color: var(--brand-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .04) !important;
}

html:not([data-brand-route="home"]) button,
html:not([data-brand-route="home"]) a {
  letter-spacing: 0 !important;
}

html:not([data-brand-route="home"]) input,
html:not([data-brand-route="home"]) textarea,
html:not([data-brand-route="home"]) select {
  border-radius: 8px !important;
}

html:not([data-brand-route="home"]) table {
  border-radius: 8px;
}

@media (max-width: 768px) {
  html[data-brand-route="home"] header nav {
    border-radius: 8px;
  }

  html[data-brand-route="home"] main h1 {
    font-size: clamp(2rem, 11vw, 3rem) !important;
  }
}

html[data-user-shell="true"],
html[data-user-shell="true"] body {
  background: #f3f6fb !important;
}

html[data-user-shell="true"] body {
  min-height: 100vh;
}

html[data-user-shell="true"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(37, 99, 235, .10), transparent 36%),
    linear-gradient(245deg, rgba(15, 118, 110, .10), transparent 38%),
    linear-gradient(180deg, #f8fafc 0%, #eef5f8 48%, #f6f8fb 100%);
}

html[data-user-shell="true"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(rgba(15, 23, 42, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}

html[data-user-shell="true"] .ai-user-topbar {
  position: fixed;
  top: 14px;
  left: 16px;
  right: 16px;
  z-index: 90;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 8px;
  background: rgba(8, 13, 27, .86);
  padding: 9px 10px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .24);
  backdrop-filter: blur(18px);
}

html[data-user-shell="true"] .ai-user-brand,
html[data-user-shell="true"] .ai-user-nav,
html[data-user-shell="true"] .ai-user-actions,
html[data-user-shell="true"] .ai-user-pill,
html[data-user-shell="true"] .ai-user-avatar {
  display: inline-flex;
  align-items: center;
}

html[data-user-shell="true"] .ai-user-brand {
  gap: 10px;
  min-width: 178px;
  color: #f8fafc;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}

html[data-user-shell="true"] .ai-user-brand img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  box-shadow: 0 0 22px rgba(94, 234, 212, .24);
}

html[data-user-shell="true"] .ai-user-nav {
  justify-content: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

html[data-user-shell="true"] .ai-user-nav::-webkit-scrollbar {
  display: none;
}

html[data-user-shell="true"] .ai-user-nav a {
  flex: 0 0 auto;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #cbd5e1;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 820;
  text-decoration: none;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}

html[data-user-shell="true"] .ai-user-nav a:hover {
  border-color: rgba(148, 163, 184, .28);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

html[data-user-shell="true"] .ai-user-nav a.active {
  border-color: rgba(94, 234, 212, .42);
  background: linear-gradient(135deg, rgba(20, 184, 166, .28), rgba(37, 99, 235, .24));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

html[data-user-shell="true"] .ai-user-actions {
  gap: 8px;
}

html[data-user-shell="true"] .ai-user-pill {
  min-height: 36px;
  border: 1px solid rgba(94, 234, 212, .42);
  border-radius: 8px;
  background: linear-gradient(135deg, #14b8a6, #2563eb);
  color: #fff;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 880;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .22);
}

html[data-user-shell="true"] .ai-user-avatar {
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 8px;
  background: rgba(255, 255, 255, .10);
  color: #f8fafc;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

html[data-user-shell="true"] .sidebar {
  display: none !important;
}

html[data-user-shell="true"] [class*="lg:ml-64"] {
  margin-left: 0 !important;
  padding-top: 88px;
}

html[data-user-shell="true"] .glass.sticky {
  top: 88px !important;
  width: min(1180px, calc(100% - 32px));
  min-height: 112px;
  margin: 0 auto 18px;
  border: 1px solid rgba(148, 163, 184, .20) !important;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(15, 118, 110, .74)),
    linear-gradient(90deg, rgba(94, 234, 212, .12), transparent 54%) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
  color: #f8fafc;
  overflow: hidden;
}

html[data-user-shell="true"] .glass.sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, transparent 0 30%, rgba(255, 255, 255, .12) 30% 30.5%, transparent 30.5%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0, rgba(255, 255, 255, .06) 1px, transparent 1px, transparent 28px);
  opacity: .42;
}

html[data-user-shell="true"] .glass.sticky > * {
  position: relative;
  z-index: 1;
}

html[data-user-shell="true"] .glass.sticky h1,
html[data-user-shell="true"] .glass.sticky h2,
html[data-user-shell="true"] .glass.sticky h3 {
  color: #fff !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
}

html[data-user-shell="true"] .glass.sticky p,
html[data-user-shell="true"] .glass.sticky span {
  color: rgba(226, 232, 240, .86) !important;
}

html[data-user-shell="true"] main.p-4,
html[data-user-shell="true"] main[class*="md:p-6"],
html[data-user-shell="true"] main[class*="lg:p-8"] {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0 0 42px !important;
}

html[data-user-shell="true"] main > * + * {
  margin-top: 16px;
}

html[data-user-shell="true"] main .grid {
  gap: 14px !important;
}

html[data-user-shell="true"] main [class*="rounded-2xl"],
html[data-user-shell="true"] main [class*="rounded-xl"],
html[data-user-shell="true"] main .card,
html[data-user-shell="true"] main .empty-state,
html[data-user-shell="true"] main table {
  border-radius: 8px !important;
}

html[data-user-shell="true"] main [class*="border"],
html[data-user-shell="true"] main .card,
html[data-user-shell="true"] main table {
  border-color: rgba(148, 163, 184, .22) !important;
}

html[data-user-shell="true"] main [class*="bg-white"],
html[data-user-shell="true"] main .card,
html[data-user-shell="true"] main .empty-state,
html[data-user-shell="true"] main table {
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06) !important;
  backdrop-filter: blur(12px);
}

html[data-user-shell="true"] main button,
html[data-user-shell="true"] main a,
html[data-user-shell="true"] main input,
html[data-user-shell="true"] main select,
html[data-user-shell="true"] main textarea {
  border-radius: 8px !important;
}

html[data-user-shell="true"] main button[class*="primary"],
html[data-user-shell="true"] main .btn-primary,
html[data-user-shell="true"] main a[class*="primary"] {
  background: linear-gradient(135deg, #14b8a6, #2563eb) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .18) !important;
}

html[data-user-shell="true"] main table {
  overflow: hidden;
}

html[data-user-shell="true"] main th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-weight: 850 !important;
}

html[data-user-shell="true"] main td,
html[data-user-shell="true"] main th {
  border-color: rgba(226, 232, 240, .9) !important;
}

html[data-user-shell="true"] .model-marketplace {
  gap: 20px;
}

html[data-user-shell="true"] .mm-hero {
  background: linear-gradient(135deg, #0f172a 0%, #164e63 46%, #2563eb 100%);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
}

html[data-user-shell="true"] .mm-sidebar,
html[data-user-shell="true"] .mm-card,
html[data-user-shell="true"] .mm-table,
html[data-user-shell="true"] .mm-empty {
  border-color: rgba(148, 163, 184, .22);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

html.dark[data-user-shell="true"],
html.dark[data-user-shell="true"] body {
  background: #07111f !important;
}

html.dark[data-user-shell="true"] body::before {
  background:
    linear-gradient(115deg, rgba(37, 99, 235, .18), transparent 38%),
    linear-gradient(245deg, rgba(15, 118, 110, .18), transparent 40%),
    linear-gradient(180deg, #07111f 0%, #0f172a 100%);
}

html.dark[data-user-shell="true"] body::after {
  background-image:
    linear-gradient(rgba(226, 232, 240, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 232, 240, .045) 1px, transparent 1px);
}

html.dark[data-user-shell="true"] main [class*="bg-white"],
html.dark[data-user-shell="true"] main .card,
html.dark[data-user-shell="true"] main .empty-state,
html.dark[data-user-shell="true"] main table {
  background: rgba(15, 23, 42, .78) !important;
  border-color: rgba(71, 85, 105, .55) !important;
}

html.dark[data-user-shell="true"] main th {
  background: rgba(30, 41, 59, .8) !important;
  color: #cbd5e1 !important;
}

@media (max-width: 980px) {
  html[data-user-shell="true"] .ai-user-topbar {
    grid-template-columns: 1fr max-content;
    align-items: start;
  }

  html[data-user-shell="true"] .ai-user-nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    order: 3;
    width: 100%;
    padding-top: 4px;
  }

  html[data-user-shell="true"] [class*="lg:ml-64"] {
    padding-top: 132px;
  }

  html[data-user-shell="true"] .glass.sticky {
    top: 132px !important;
    width: min(100% - 24px, 1180px);
  }

  html[data-user-shell="true"] main.p-4,
  html[data-user-shell="true"] main[class*="md:p-6"],
  html[data-user-shell="true"] main[class*="lg:p-8"] {
    width: min(100% - 24px, 1180px);
  }
}

@media (max-width: 640px) {
  html[data-user-shell="true"] .ai-user-topbar {
    left: 10px;
    right: 10px;
    top: 10px;
  }

  html[data-user-shell="true"] .ai-user-brand {
    min-width: 0;
  }

  html[data-user-shell="true"] .ai-user-brand span {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-user-shell="true"] .ai-user-pill {
    display: none;
  }

  html[data-user-shell="true"] [class*="lg:ml-64"] {
    padding-top: 128px;
  }

  html[data-user-shell="true"] .glass.sticky {
    min-height: 94px;
    top: 128px !important;
  }

  html[data-user-shell="true"] .glass.sticky h1,
  html[data-user-shell="true"] .glass.sticky h2,
  html[data-user-shell="true"] .glass.sticky h3 {
    font-size: 20px !important;
  }
}

/* User shell v2: clean SaaS console layout */
html[data-user-shell="true"] .ai-user-topbar {
  display: none !important;
}

html[data-user-shell="true"],
html[data-user-shell="true"] body {
  background: #f6f7f9 !important;
}

html[data-user-shell="true"] body::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,247,249,.94)),
    linear-gradient(90deg, rgba(37,99,235,.055), transparent 34%, rgba(15,118,110,.045)) !important;
}

html[data-user-shell="true"] body::after {
  opacity: .34 !important;
  background-image:
    linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

html[data-user-shell="true"] .sidebar {
  display: flex !important;
  position: fixed !important;
  left: 16px !important;
  top: 16px !important;
  bottom: 16px !important;
  z-index: 60 !important;
  width: 248px !important;
  height: auto !important;
  transform: none !important;
  border: 1px solid rgba(226, 232, 240, .92) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .08) !important;
  backdrop-filter: blur(18px);
  overflow: hidden;
}

html[data-user-shell="true"] .sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

html[data-user-shell="true"] .sidebar img {
  border-radius: 8px !important;
}

html[data-user-shell="true"] .sidebar-nav {
  padding: 10px 10px 12px !important;
}

html[data-user-shell="true"] .sidebar-link {
  min-height: 38px !important;
  margin-bottom: 4px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}

html[data-user-shell="true"] .sidebar-link:hover {
  border-color: #e2e8f0 !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  transform: translateX(1px);
}

html[data-user-shell="true"] .sidebar-link-active {
  border-color: #dbeafe !important;
  background: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .12) !important;
}

html[data-user-shell="true"] .sidebar button {
  border-radius: 8px !important;
}

html[data-user-shell="true"] [class*="lg:ml-64"] {
  margin-left: 280px !important;
  padding-top: 0 !important;
  background: transparent !important;
}

html[data-user-shell="true"] .glass.sticky {
  top: 0 !important;
  width: 100% !important;
  min-height: 76px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(226, 232, 240, .82) !important;
  border-radius: 0 !important;
  background: rgba(246, 247, 249, .82) !important;
  box-shadow: none !important;
  color: #0f172a !important;
  backdrop-filter: blur(18px);
  overflow: visible !important;
}

html[data-user-shell="true"] .glass.sticky::before {
  display: none !important;
}

html[data-user-shell="true"] .glass.sticky h1,
html[data-user-shell="true"] .glass.sticky h2,
html[data-user-shell="true"] .glass.sticky h3 {
  color: #0f172a !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  font-weight: 820 !important;
}

html[data-user-shell="true"] .glass.sticky p,
html[data-user-shell="true"] .glass.sticky span {
  color: #64748b !important;
}

html[data-user-shell="true"] main.p-4,
html[data-user-shell="true"] main[class*="md:p-6"],
html[data-user-shell="true"] main[class*="lg:p-8"] {
  width: min(1160px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  padding: 24px 0 56px !important;
}

html[data-user-shell="true"] main .grid {
  gap: 16px !important;
}

html[data-user-shell="true"] main [class*="rounded-2xl"],
html[data-user-shell="true"] main [class*="rounded-xl"],
html[data-user-shell="true"] main .card,
html[data-user-shell="true"] main .empty-state,
html[data-user-shell="true"] main table,
html[data-user-shell="true"] .mm-card,
html[data-user-shell="true"] .mm-sidebar,
html[data-user-shell="true"] .mm-table,
html[data-user-shell="true"] .mm-empty {
  border-radius: 8px !important;
}

html[data-user-shell="true"] main [class*="bg-white"],
html[data-user-shell="true"] main .card,
html[data-user-shell="true"] main .empty-state,
html[data-user-shell="true"] main table,
html[data-user-shell="true"] .mm-card,
html[data-user-shell="true"] .mm-sidebar,
html[data-user-shell="true"] .mm-table,
html[data-user-shell="true"] .mm-empty {
  border-color: #e5e7eb !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  backdrop-filter: blur(10px);
}

html[data-user-shell="true"] main [class*="bg-white"]:hover,
html[data-user-shell="true"] main .card:hover,
html[data-user-shell="true"] .mm-card:hover {
  box-shadow: 0 10px 22px rgba(15, 23, 42, .07) !important;
}

html[data-user-shell="true"] main button,
html[data-user-shell="true"] main a,
html[data-user-shell="true"] main input,
html[data-user-shell="true"] main select,
html[data-user-shell="true"] main textarea {
  border-radius: 8px !important;
}

html[data-user-shell="true"] main input,
html[data-user-shell="true"] main select,
html[data-user-shell="true"] main textarea {
  border-color: #dbe3ef !important;
  background: #fff !important;
}

html[data-user-shell="true"] main button[class*="primary"],
html[data-user-shell="true"] main .btn-primary,
html[data-user-shell="true"] main a[class*="primary"] {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .12) !important;
}

html[data-user-shell="true"] main th {
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

html[data-user-shell="true"] main td,
html[data-user-shell="true"] main th {
  border-color: #edf2f7 !important;
}

html[data-user-shell="true"] .model-marketplace {
  grid-template-columns: 264px minmax(0, 1fr) !important;
  gap: 18px !important;
}

html[data-user-shell="true"] .mm-sidebar {
  top: 92px !important;
  background: rgba(255, 255, 255, .94) !important;
}

html[data-user-shell="true"] .mm-hero {
  min-height: 116px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

html[data-user-shell="true"] .mm-hero::before,
html[data-user-shell="true"] .mm-hero::after {
  display: none !important;
}

html[data-user-shell="true"] .mm-hero-title {
  color: #0f172a !important;
}

html[data-user-shell="true"] .mm-hero-copy {
  color: #64748b !important;
}

html[data-user-shell="true"] .mm-count-pill {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

html[data-user-shell="true"] .mm-hero-mark {
  background: #f8fafc !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

html[data-user-shell="true"] .mm-filter-button.active,
html[data-user-shell="true"] .mm-switch.on {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #fff !important;
}

html.dark[data-user-shell="true"],
html.dark[data-user-shell="true"] body {
  background: #0b1120 !important;
}

html.dark[data-user-shell="true"] body::before {
  background: linear-gradient(180deg, #0b1120, #111827) !important;
}

html.dark[data-user-shell="true"] .sidebar,
html.dark[data-user-shell="true"] main [class*="bg-white"],
html.dark[data-user-shell="true"] main .card,
html.dark[data-user-shell="true"] main .empty-state,
html.dark[data-user-shell="true"] main table,
html.dark[data-user-shell="true"] .mm-card,
html.dark[data-user-shell="true"] .mm-sidebar,
html.dark[data-user-shell="true"] .mm-table,
html.dark[data-user-shell="true"] .mm-empty,
html.dark[data-user-shell="true"] .mm-hero {
  border-color: #243244 !important;
  background: rgba(15, 23, 42, .92) !important;
}

html.dark[data-user-shell="true"] .glass.sticky {
  border-bottom-color: #243244 !important;
  background: rgba(11, 17, 32, .82) !important;
}

html.dark[data-user-shell="true"] .glass.sticky h1,
html.dark[data-user-shell="true"] .glass.sticky h2,
html.dark[data-user-shell="true"] .glass.sticky h3,
html.dark[data-user-shell="true"] .mm-hero-title {
  color: #f8fafc !important;
}

html.dark[data-user-shell="true"] .glass.sticky p,
html.dark[data-user-shell="true"] .glass.sticky span,
html.dark[data-user-shell="true"] .mm-hero-copy {
  color: #94a3b8 !important;
}

html.dark[data-user-shell="true"] .sidebar-link {
  color: #cbd5e1 !important;
}

html.dark[data-user-shell="true"] .sidebar-link:hover {
  border-color: #334155 !important;
  background: #111827 !important;
  color: #f8fafc !important;
}

@media (max-width: 1024px) {
  html[data-user-shell="true"] .sidebar {
    display: none !important;
  }

  html[data-user-shell="true"] [class*="lg:ml-64"] {
    margin-left: 0 !important;
  }

  html[data-user-shell="true"] main.p-4,
  html[data-user-shell="true"] main[class*="md:p-6"],
  html[data-user-shell="true"] main[class*="lg:p-8"] {
    width: min(100% - 24px, 1160px) !important;
    padding: 18px 0 42px !important;
  }

  html[data-user-shell="true"] .model-marketplace {
    grid-template-columns: 1fr !important;
  }
}

/* Softer model marketplace filters */
html[data-user-shell="true"] .model-marketplace {
  grid-template-columns: 292px minmax(0, 1fr) !important;
  align-items: start !important;
}

html[data-user-shell="true"] .mm-sidebar {
  top: 92px !important;
  max-height: calc(100vh - 112px) !important;
  border: 1px solid #e6edf5 !important;
  border-radius: 8px !important;
  background: rgba(250, 252, 255, .94) !important;
  padding: 12px !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .045) !important;
  backdrop-filter: none !important;
}

html[data-user-shell="true"] .mm-sidebar::-webkit-scrollbar {
  width: 5px !important;
}

html[data-user-shell="true"] .mm-sidebar::-webkit-scrollbar-thumb {
  background: #d7e1ee !important;
}

html[data-user-shell="true"] .mm-filter-head {
  margin-bottom: 10px !important;
  padding: 2px 2px 8px !important;
}

html[data-user-shell="true"] .mm-filter-title {
  gap: 7px !important;
  font-size: 16px !important;
  font-weight: 780 !important;
  color: #172033 !important;
}

html[data-user-shell="true"] .mm-filter-title::before {
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: #38bdf8 !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .12) !important;
}

html[data-user-shell="true"] .mm-reset-button {
  height: 30px !important;
  border-color: #dce5f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #64748b !important;
  font-weight: 650 !important;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .03) !important;
}

html[data-user-shell="true"] .mm-reset-button:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  color: #334155 !important;
}

html[data-user-shell="true"] .mm-filter-section {
  margin-top: 10px !important;
  padding: 12px !important;
  border: 1px solid #e8eef6 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .86) !important;
}

html[data-user-shell="true"] .mm-filter-section:first-of-type {
  margin-top: 0 !important;
  border-top: 1px solid #e8eef6 !important;
}

html[data-user-shell="true"] .mm-filter-heading {
  margin-bottom: 10px !important;
  gap: 8px !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

html[data-user-shell="true"] .mm-filter-heading::before {
  width: 4px !important;
  height: 4px !important;
  background: #9fb1c8 !important;
}

html[data-user-shell="true"] .mm-filter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html[data-user-shell="true"] .mm-filter-button {
  height: 34px !important;
  border: 1px solid #dfe7f1 !important;
  border-radius: 8px !important;
  background: #fbfdff !important;
  color: #475569 !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .025) !important;
  transform: none !important;
  transition: background .12s ease, border-color .12s ease, color .12s ease !important;
}

html[data-user-shell="true"] .mm-filter-button:hover {
  border-color: #cbd8e6 !important;
  background: #f3f7fb !important;
  color: #1f2937 !important;
  transform: none !important;
}

html[data-user-shell="true"] .mm-filter-button.active {
  border-color: #b9d4ff !important;
  background: #eef6ff !important;
  color: #1d4ed8 !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .06) !important;
}

html[data-user-shell="true"] .mm-filter-section:nth-of-type(4) .mm-filter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html[data-user-shell="true"] .mm-card,
html[data-user-shell="true"] .mm-sidebar,
html[data-user-shell="true"] .mm-table,
html[data-user-shell="true"] .mm-empty {
  transition: border-color .12s ease, box-shadow .12s ease !important;
}

html[data-user-shell="true"] .mm-card:hover {
  transform: none !important;
}

html.dark[data-user-shell="true"] .mm-sidebar {
  background: rgba(15, 23, 42, .92) !important;
  border-color: #263448 !important;
}

html.dark[data-user-shell="true"] .mm-filter-section {
  background: rgba(17, 24, 39, .74) !important;
  border-color: #263448 !important;
}

html.dark[data-user-shell="true"] .mm-filter-title,
html.dark[data-user-shell="true"] .mm-filter-heading {
  color: #e5e7eb !important;
}

html.dark[data-user-shell="true"] .mm-filter-button {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html.dark[data-user-shell="true"] .mm-filter-button:hover {
  background: #172033 !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

html.dark[data-user-shell="true"] .mm-filter-button.active {
  background: #1e3a8a !important;
  border-color: #3b82f6 !important;
  color: #dbeafe !important;
}

@media (max-width: 1024px) {
  html[data-user-shell="true"] .model-marketplace {
    grid-template-columns: 1fr !important;
  }

  html[data-user-shell="true"] .mm-sidebar {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
  }
}