@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/kanit-300.ttf") format("truetype");
}

@font-face { font-family: "Kanit"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/kanit-400.ttf") format("truetype"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/kanit-500.ttf") format("truetype"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/kanit-600.ttf") format("truetype"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/kanit-700.ttf") format("truetype"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/kanit-800.ttf") format("truetype"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/fonts/kanit-900.ttf") format("truetype"); }

:root {
  --aa-bg: #0c0c0c;
  --aa-panel: #151515;
  --aa-panel-raised: #1b1b1b;
  --aa-line: rgba(215, 226, 234, 0.16);
  --aa-line-strong: rgba(215, 226, 234, 0.34);
  --aa-text: #d7e2ea;
  --aa-muted: #8b949b;
  --aa-white: #f6f8f9;
  --aa-magenta: #b600a8;
  --aa-violet: #7621b0;
  --aa-orange: #be4c00;
  --aa-green: #79d6a5;
  --body: "Kanit", "Microsoft YaHei", "PingFang SC", sans-serif;
  --heading: "Kanit", "Microsoft YaHei", sans-serif;
  --ink: var(--aa-text);
  letter-spacing: 0;
}

html,
body {
  color: var(--aa-text);
  background: var(--aa-bg);
  font-family: var(--body);
  letter-spacing: 0;
}

body::selection {
  color: #0c0c0c;
  background: var(--aa-text);
}

.aa-version {
  position: fixed;
  z-index: 170;
  right: 14px;
  bottom: 12px;
  padding: 4px 7px;
  border: 1px solid var(--aa-line);
  border-radius: 4px;
  color: #8f969c;
  background: rgba(12, 12, 12, 0.78);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  backdrop-filter: blur(12px);
}

.brand {
  color: var(--aa-text) !important;
  text-shadow: none !important;
}

.brand-mark {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid var(--aa-line-strong) !important;
  border-radius: 5px !important;
  color: #0c0c0c !important;
  background: var(--aa-text) !important;
  box-shadow: none !important;
  font-size: 22px;
  font-weight: 800 !important;
  line-height: 1;
}

.brand strong {
  font-size: 17px !important;
  font-weight: 600 !important;
  text-transform: lowercase;
}

.liquid-glass,
.liquid-glass-strong {
  border: 1px solid var(--aa-line) !important;
  border-radius: 6px !important;
  background: rgba(18, 18, 18, 0.76) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
}

.site-nav,
.page-nav {
  color: var(--aa-text);
}

.nav-links,
.site-nav.is-scrolled .nav-links,
.page-nav .nav-links {
  border: 1px solid var(--aa-line) !important;
  border-radius: 6px !important;
  background: rgba(12, 12, 12, 0.82) !important;
  box-shadow: none !important;
}

.nav-links a,
.site-nav.is-scrolled .nav-links a,
.page-nav .nav-links a {
  border-radius: 4px !important;
  color: rgba(215, 226, 234, 0.74) !important;
  text-shadow: none !important;
}

.nav-links a:hover,
.nav-links a.is-active,
.site-nav.is-scrolled .nav-links a:hover,
.site-nav.is-scrolled .nav-links a.is-active {
  color: var(--aa-white) !important;
  background: rgba(215, 226, 234, 0.11) !important;
}

.nav-links .nav-claim,
.site-nav.is-scrolled .nav-links .nav-claim,
.standalone-page .page-nav .nav-links .nav-claim,
.generate-page .page-nav .nav-links .nav-claim {
  color: #0c0c0c !important;
  background: var(--aa-text) !important;
}

.nav-login {
  border: 1px solid var(--aa-line-strong) !important;
  border-radius: 5px !important;
  color: var(--aa-text) !important;
  background: rgba(12, 12, 12, 0.72) !important;
  text-shadow: none !important;
}

.model-filters {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.model-filters::-webkit-scrollbar {
  display: none;
}

/* Home */
.home-only {
  min-height: 100svh;
  overflow-x: clip;
  overflow-y: auto;
  background: var(--aa-bg);
}

.home-only main,
.hero {
  min-height: 94svh;
  height: auto;
}

.hero {
  align-items: flex-start;
  justify-content: center;
  background: var(--aa-bg) !important;
}

.hero-video {
  display: none !important;
}

.hero-overlay {
  z-index: 0 !important;
  background:
    linear-gradient(180deg, rgba(12, 12, 12, 0) 55%, rgba(12, 12, 12, 0.92) 92%),
    linear-gradient(90deg, rgba(12, 12, 12, 0.76), transparent 33%, transparent 67%, rgba(12, 12, 12, 0.72)) !important;
}

.aa-hero-portrait {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  width: min(44vw, 590px);
  max-height: 78svh;
  object-fit: contain;
  transform: translateX(-50%);
  filter: saturate(0.86) contrast(1.04);
  pointer-events: none;
}

.aa-hero-object {
  position: absolute;
  z-index: 1;
  width: clamp(84px, 10vw, 160px);
  object-fit: contain;
  pointer-events: none;
}

.aa-hero-object.moon { top: 18%; left: 3%; }
.aa-hero-object.lego { top: 22%; right: 3%; }
.aa-hero-object.shape { right: 10%; bottom: 14%; width: clamp(74px, 8vw, 130px); }

.hero-center {
  z-index: 3;
  width: 100% !important;
  align-items: stretch !important;
  padding: clamp(98px, 12vh, 148px) clamp(22px, 4.5vw, 68px) 180px !important;
  text-align: left !important;
  pointer-events: none;
}

.hero-badge {
  width: fit-content;
  align-self: flex-start;
  pointer-events: auto;
}

.hero-badge span {
  border-radius: 3px !important;
  color: #0c0c0c !important;
  background: var(--aa-text) !important;
}

.hero h1 {
  width: 100% !important;
  margin: 16px 0 0 !important;
  font-family: var(--heading) !important;
  font-size: clamp(78px, 15vw, 260px) !important;
  font-weight: 900 !important;
  line-height: 0.82 !important;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #646973 0%, #bbccd7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
}

.hero h1 b {
  justify-content: flex-start !important;
  gap: 0 !important;
}

.hero-copy {
  width: min(330px, 84vw);
  margin: 30px 0 0 !important;
  color: var(--aa-text) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.65 !important;
  text-transform: uppercase;
  text-shadow: none !important;
}

.hero-actions {
  pointer-events: auto;
}

.primary-action,
.app-button:not(.secondary) {
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 5px !important;
  color: #fff !important;
  background: linear-gradient(123deg, #18011f 7%, #b600a8 37%, #7621b0 72%, #be4c00 100%) !important;
  box-shadow: inset 4px 4px 12px rgba(119, 33, 177, 0.72) !important;
}

.secondary-action { color: var(--aa-text); }

.hero-bottom {
  z-index: 4;
}

.hero-live {
  border-radius: 6px !important;
  background: rgba(12, 12, 12, 0.76) !important;
}

.live-title i { background: var(--aa-green) !important; }

.hero-partners span {
  color: rgba(215, 226, 234, 0.72);
  font-family: var(--body) !important;
  font-style: normal !important;
  font-weight: 500;
  text-transform: uppercase;
}

/* Auth */
.auth-page {
  background: var(--aa-bg) !important;
}

.auth-page .auth-image {
  background-color: var(--aa-bg) !important;
  background-image: url("/assets/jack/portrait.png") !important;
  background-position: center bottom !important;
  background-size: min(54vw, 700px) auto !important;
  background-repeat: no-repeat !important;
  filter: saturate(0.8);
}

.auth-page .auth-shade {
  background: linear-gradient(90deg, rgba(12, 12, 12, 0.18), rgba(12, 12, 12, 0.72) 52%, #0c0c0c 76%) !important;
}

.auth-card {
  border: 1px solid var(--aa-line) !important;
  border-radius: 6px !important;
  color: var(--aa-text) !important;
  background: rgba(18, 18, 18, 0.9) !important;
  box-shadow: none !important;
}

.auth-card h1,
.view-heading h1,
.page-hero h1,
.standalone-page h1 {
  color: var(--aa-text) !important;
  font-family: var(--heading) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.auth-card h1 em,
.view-heading h1 em,
.page-hero h1 em {
  color: #aebcc6 !important;
  font-style: normal !important;
}

.auth-tabs,
.auth-trust,
.auth-code-row,
.field input,
.field select,
.app-input,
.app-select {
  border-color: var(--aa-line) !important;
  border-radius: 5px !important;
  color: var(--aa-text) !important;
  background: #111 !important;
}

/* Console and app pages */
.app-page,
.generate-page,
.standalone-page,
.legal-page,
.notice-page {
  color: var(--aa-text) !important;
  background: var(--aa-bg) !important;
}

.app-backdrop {
  opacity: 0.13 !important;
  filter: grayscale(1) contrast(1.1);
}

.app-header {
  border-bottom: 1px solid var(--aa-line) !important;
  background: rgba(12, 12, 12, 0.92) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
}

.app-layout {
  background: transparent !important;
}

.app-sidebar {
  border-right: 1px solid var(--aa-line) !important;
  border-radius: 0 !important;
  background: rgba(12, 12, 12, 0.95) !important;
  box-shadow: none !important;
}

.sidebar-label,
.view-heading p,
.panel-head p {
  color: #7f878e !important;
  letter-spacing: 0 !important;
}

.app-nav button,
.app-nav a {
  border-radius: 4px !important;
  color: #9ca5ac !important;
  background: transparent !important;
}

.app-nav button:hover,
.app-nav a:hover {
  color: var(--aa-white) !important;
  background: rgba(215, 226, 234, 0.08) !important;
}

.app-nav button.is-active {
  color: #0c0c0c !important;
  background: var(--aa-text) !important;
}

.sidebar-card {
  border: 1px solid var(--aa-line) !important;
  border-radius: 5px !important;
  color: var(--aa-text) !important;
  background: #171717 url("/assets/jack/object.png") no-repeat right -12px bottom -18px / 92px auto !important;
  box-shadow: none !important;
}

.app-main,
.view-panel {
  background: transparent !important;
}

.app-panel,
.metric-card,
.key-card,
.wallet-summary article,
.affiliate-stat,
.invite-card,
.usage-cost-summary > div,
.generate-workspace,
.generation-history-card,
.models-shell,
.status-shell,
.docs-sidebar,
.legal-content {
  border: 1px solid var(--aa-line) !important;
  border-radius: 6px !important;
  color: var(--aa-text) !important;
  background: rgba(21, 21, 21, 0.92) !important;
  box-shadow: none !important;
}

.metric-card b,
.wallet-summary b,
.usage-cost-summary strong {
  color: var(--aa-white) !important;
}

.data-table th {
  color: #89939a !important;
  background: #111 !important;
}

.data-table td {
  border-color: var(--aa-line) !important;
  color: #c4cdd3 !important;
  background: transparent !important;
}

.data-table tr:hover td {
  background: rgba(215, 226, 234, 0.04) !important;
}

.app-button.secondary,
.app-icon-button,
.pagination-row button {
  border: 1px solid var(--aa-line-strong) !important;
  border-radius: 4px !important;
  color: var(--aa-text) !important;
  background: #151515 !important;
  box-shadow: none !important;
}

.status-pill {
  border-radius: 4px !important;
}

.rank-media-settings,
[class*="ranking-"],
#card-shop-link {
  display: none !important;
}

.site-announcement-dialog,
.app-modal {
  border: 1px solid var(--aa-line-strong) !important;
  border-radius: 6px !important;
  color: var(--aa-text) !important;
  background: #151515 !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.52) !important;
}

@media (max-width: 1080px) {
  .nav-links { background: rgba(12, 12, 12, 0.96) !important; }
  .aa-hero-portrait { width: min(60vw, 520px); }
  .aa-hero-object { display: none; }
}

@media (max-width: 700px) {
  .hero { min-height: 96svh; }
  .hero-center { padding: 92px 14px 245px !important; }
  .hero h1 { font-size: 20vw !important; white-space: normal; overflow-wrap: anywhere; }
  .hero-copy { margin-top: 18px !important; font-size: 12px !important; }
  .aa-hero-portrait { width: min(94vw, 470px); max-height: 63svh; opacity: 0.82; }
  .hero-bottom { left: 12px !important; right: 12px !important; }
  .hero-partners { display: none !important; }
  .auth-page .auth-image { opacity: 0.24; background-size: auto 78svh !important; }
  .auth-page .auth-shade { background: rgba(12, 12, 12, 0.58) !important; }
  .app-sidebar { border: 1px solid var(--aa-line) !important; border-radius: 6px !important; }
  .aa-version { bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}