/* OCTOPUS KING public theme — aligned with wechat-helper */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Oswald:wght@500;600;700&display=swap");

:root {
  --ok-bg: #050506;
  --ok-panel: #121214;
  --ok-line: rgba(255, 255, 255, 0.08);
  --ok-text: #f3f3f3;
  --ok-muted: #9a9aa3;
  --ok-red: #e11d2e;
  --ok-gold: #f5c518;
  --octopus-primary: #e11d2e;
  --octopus-primary-hover: #ff2a3c;
  --octopus-primary-soft: rgba(225, 29, 46, 0.16);
  --octopus-background: #050506;
  --octopus-border: rgba(255, 255, 255, 0.08);
  --semi-color-primary: #e11d2e !important;
  --semi-color-primary-hover: #ff2a3c !important;
  --semi-color-primary-active: #c41626 !important;
}

/* —— public dark shell —— */
html.octopus-force-dark {
  color-scheme: dark !important;
  --semi-color-bg-0: #050506 !important;
  --semi-color-bg-1: #121214 !important;
  --semi-color-bg-2: #1a1a1e !important;
  --semi-color-text-0: #f3f3f3 !important;
  --semi-color-text-1: #c8c8d0 !important;
  --semi-color-text-2: #9a9aa3 !important;
  --semi-color-border: rgba(255, 255, 255, 0.08) !important;
}

html.octopus-force-dark,
html.octopus-force-dark body,
body.octopus-public-page,
body.octopus-brand.octopus-public-page {
  background: #050506 !important;
  color: var(--ok-text) !important;
}

body.octopus-public-page {
  min-height: 100vh;
  font-family: "Noto Sans SC", "Microsoft YaHei UI", sans-serif !important;
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(225, 29, 46, 0.22), transparent 55%),
    radial-gradient(700px 420px at 95% 0%, rgba(245, 197, 24, 0.1), transparent 50%),
    linear-gradient(180deg, #0a0a0c 0%, #050506 100%) !important;
}

body.octopus-public-page header {
  background: rgba(5, 5, 6, 0.82) !important;
  border-bottom: 1px solid var(--ok-line) !important;
  backdrop-filter: blur(16px);
}

body.octopus-public-page header a,
body.octopus-public-page header button,
body.octopus-public-page header span,
body.octopus-public-page nav a {
  color: var(--ok-text) !important;
}

body.octopus-public-page a[data-octopus-custom-nav]:hover {
  color: var(--ok-gold) !important;
  background: rgba(245, 197, 24, 0.08) !important;
}

/* pricing / models shell */
body.octopus-public-page.octopus-models-page main,
body.octopus-public-page.octopus-models-page [class*="card"],
body.octopus-public-page.octopus-models-page [class*="Card"] {
  background: var(--ok-panel) !important;
  border-color: var(--ok-line) !important;
  color: var(--ok-text) !important;
}

/* —— KING homepage surface —— */
#octopus-king-home {
  position: relative;
  width: 100%;
  margin: 0;
  color: var(--ok-text);
  font-family: "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
}

body.octopus-king-home-active:has(#octopus-king-home) main > *:not(#octopus-king-home),
body.octopus-king-home-active:has(#octopus-king-home) #root main > *:not(#octopus-king-home),
body.octopus-king-home-active:has(#octopus-king-home) #root > div > main > *:not(#octopus-king-home),
body.octopus-king-home-active .octopus-legacy-home {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.octopus-king-home-active:has(#octopus-king-home) main {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.ok-hero-plane {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 55% at 70% 40%, rgba(225, 29, 46, 0.22), transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 80%, rgba(245, 197, 24, 0.08), transparent 55%),
    linear-gradient(165deg, #0c0c0e 0%, #050506 55%, #08080a 100%);
  min-height: calc(100vh - 64px);
}

.ok-hero-plane::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  pointer-events: none;
  animation: okGridPulse 8s ease-in-out infinite;
}

@keyframes okGridPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.75; }
}

.ok-hero {
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(40px, 8vh, 88px) 0 36px;
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 900px) {
  .ok-hero {
    grid-template-columns: 1.1fr 0.9fr;
    min-height: 68vh;
  }
}

.ok-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--ok-gold);
  font-family: Oswald, "Noto Sans SC", sans-serif;
  letter-spacing: 0.18em;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.ok-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: okPing 1.8s ease infinite;
}

@keyframes okPing {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

body.octopus-home h1.ok-brand-huge,
body.octopus-king-home-active h1.ok-brand-huge,
#octopus-king-home .ok-brand-huge {
  margin: 0;
  font-weight: 900;
  font-size: clamp(2.4rem, 6.5vw, 4.2rem);
  letter-spacing: 0.04em;
  line-height: 1.08;
  color: #f3f3f3 !important;
  animation: okFadeUp 0.7s ease both;
}

#octopus-king-home h2,
#octopus-king-home h3,
body.octopus-king-home-active .ok-section-head {
  color: #f3f3f3 !important;
}

.ok-brand-huge em {
  font-style: normal;
  color: var(--ok-gold);
  font-family: Oswald, "Noto Sans SC", sans-serif;
  letter-spacing: 0.06em;
}

.ok-lead {
  margin: 16px 0 0;
  max-width: 32rem;
  color: var(--ok-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 500;
  animation: okFadeUp 0.75s 0.08s ease both;
}

.ok-cta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  animation: okFadeUp 0.75s 0.16s ease both;
}

.ok-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 12px 20px;
  font: inherit;
  font-weight: 700;
  text-decoration: none !important;
  border: 0;
  cursor: pointer;
}

.ok-btn-main {
  background: linear-gradient(135deg, #ff2a3c, var(--ok-red));
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(225, 29, 46, 0.35);
}

.ok-btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ok-text) !important;
  border: 1px solid var(--ok-line);
}

.ok-note {
  margin: 14px 0 0;
  color: var(--ok-muted);
  font-size: 0.86rem;
  animation: okFadeUp 0.75s 0.24s ease both;
}

.ok-mark {
  justify-self: center;
  width: min(400px, 82vw);
  position: relative;
  animation: okFadeUp 0.75s 0.12s ease both;
}

.ok-mark::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 4%;
  height: 18%;
  background: radial-gradient(ellipse at center, rgba(225, 29, 46, 0.45), transparent 70%);
  filter: blur(18px);
  z-index: 0;
  animation: okGlowBreath 4s ease-in-out infinite;
}

.ok-mark img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 28px 56px rgba(225, 29, 46, 0.28));
  animation: okMarkFloat 5s ease-in-out infinite;
}

@keyframes okMarkFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes okGlowBreath {
  0%, 100% { opacity: 0.7; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.08); }
}

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

.ok-scroll-hint {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: 28px;
  color: var(--ok-muted);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

.ok-scroll-hint span {
  display: inline-block;
  animation: okBounce 2s ease infinite;
}

@keyframes okBounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(6px); opacity: 1; }
}

.ok-section {
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 64px;
}

.ok-section-head {
  margin: 0 0 8px;
  font-size: 1.45rem;
  font-weight: 800;
}

.ok-section-head em {
  font-style: normal;
  color: var(--ok-gold);
  font-family: Oswald, "Noto Sans SC", sans-serif;
}

.ok-section-sub {
  margin: 0 0 20px;
  color: var(--ok-muted);
  line-height: 1.6;
}

.ok-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .ok-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.ok-card {
  background: var(--ok-panel);
  border: 1px solid var(--ok-line);
  border-radius: 14px;
  padding: 20px 18px;
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.ok-card:hover {
  border-color: rgba(245, 197, 24, 0.35);
  transform: translateY(-2px);
}

.ok-card h3 {
  margin: 0 0 8px;
  color: var(--ok-gold);
  font-size: 1.05rem;
}

.ok-card p {
  margin: 0;
  color: var(--ok-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .ok-hero-plane::before,
  .ok-mark img,
  .ok-mark::after,
  .ok-live-dot,
  .ok-scroll-hint span {
    animation: none !important;
  }
}

/* mobile menu dark */
#octopus-mobile-menu-v5 {
  background: #0c0c0e !important;
  border-color: var(--ok-line) !important;
  color: var(--ok-text) !important;
}

#octopus-mobile-menu-v5 a {
  color: var(--ok-text) !important;
}

/* —— beat octopus-main.css light public rules (must load after) —— */
html.octopus-force-dark.dark,
html.octopus-force-dark body.octopus-public-page,
html.octopus-force-dark body.octopus-brand.octopus-public-page,
body.octopus-brand.octopus-public-page.octopus-home,
body.octopus-public-page.octopus-king-home-active {
  --octopus-primary-soft: rgba(225, 29, 46, 0.16) !important;
  --octopus-background: #050506 !important;
  --octopus-border: rgba(255, 255, 255, 0.08) !important;
  --semi-color-bg-0: #050506 !important;
  --semi-color-bg-1: #121214 !important;
  --semi-color-bg-2: #1a1a1e !important;
  --semi-color-text-0: #f3f3f3 !important;
  --semi-color-text-1: #c8c8d0 !important;
  --semi-color-text-2: #9a9aa3 !important;
  --semi-color-border: rgba(255, 255, 255, 0.08) !important;
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(225, 29, 46, 0.22), transparent 55%),
    radial-gradient(700px 420px at 95% 0%, rgba(245, 197, 24, 0.1), transparent 50%),
    linear-gradient(180deg, #0a0a0c 0%, #050506 100%) !important;
  color: #f3f3f3 !important;
}

html.octopus-force-dark body.octopus-public-page header,
html.octopus-force-dark body.octopus-public-page nav,
body.octopus-public-page.octopus-king-home-active header {
  background: rgba(5, 5, 6, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f3f3f3 !important;
}

html.octopus-force-dark body.octopus-public-page header a,
html.octopus-force-dark body.octopus-public-page header button,
html.octopus-force-dark body.octopus-public-page header span,
html.octopus-force-dark body.octopus-public-page header svg {
  color: #f3f3f3 !important;
  fill: currentColor !important;
}

/* —— site-wide KING shell (all SPA routes) —— */
html.octopus-force-dark,
html.octopus-force-dark body,
body.octopus-site-dark {
  --background: #050506 !important;
  --foreground: #f3f3f3 !important;
  --card: #121214 !important;
  --card-foreground: #f3f3f3 !important;
  --popover: #121214 !important;
  --popover-foreground: #f3f3f3 !important;
  --primary: #e11d2e !important;
  --primary-foreground: #ffffff !important;
  --secondary: #1a1a1e !important;
  --secondary-foreground: #f3f3f3 !important;
  --muted: #1a1a1e !important;
  --muted-foreground: #9a9aa3 !important;
  --accent: rgba(245, 197, 24, 0.12) !important;
  --accent-foreground: #f5c518 !important;
  --border: rgba(255, 255, 255, 0.08) !important;
  --input: rgba(255, 255, 255, 0.08) !important;
  --ring: #e11d2e !important;
  --octopus-primary-soft: rgba(225, 29, 46, 0.16) !important;
  --octopus-background: #050506 !important;
  --octopus-border: rgba(255, 255, 255, 0.08) !important;
  --semi-color-bg-0: #050506 !important;
  --semi-color-bg-1: #121214 !important;
  --semi-color-bg-2: #1a1a1e !important;
  --semi-color-bg-3: #222228 !important;
  --semi-color-text-0: #f3f3f3 !important;
  --semi-color-text-1: #c8c8d0 !important;
  --semi-color-text-2: #9a9aa3 !important;
  --semi-color-border: rgba(255, 255, 255, 0.08) !important;
  --semi-color-fill-0: #121214 !important;
  --semi-color-fill-1: #1a1a1e !important;
  --semi-color-fill-2: #222228 !important;
  color-scheme: dark !important;
}

html.octopus-force-dark body,
body.octopus-site-dark {
  background: #050506 !important;
  color: #f3f3f3 !important;
}

html.octopus-force-dark header,
html.octopus-force-dark nav,
body.octopus-site-dark header,
body.octopus-site-dark nav {
  background: rgba(5, 5, 6, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f3f3f3 !important;
}

html.octopus-force-dark header a,
html.octopus-force-dark header button,
html.octopus-force-dark header span,
html.octopus-force-dark nav a,
html.octopus-force-dark nav button {
  color: #f3f3f3 !important;
}

/* auth pages */
body.octopus-auth-page,
html.octopus-force-dark body.octopus-auth-page {
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(225, 29, 46, 0.2), transparent 55%),
    radial-gradient(700px 420px at 95% 0%, rgba(245, 197, 24, 0.08), transparent 50%),
    #050506 !important;
}

body.octopus-auth-page [class*="card"],
body.octopus-auth-page form,
body.octopus-auth-page [class*="Card"] {
  background: #121214 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f3f3f3 !important;
  box-shadow: none !important;
}

body.octopus-auth-page input,
body.octopus-auth-page textarea,
body.octopus-auth-page .semi-input,
body.octopus-auth-page .semi-input-wrapper {
  background: #1a1a1e !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f3f3f3 !important;
}

body.octopus-auth-page label,
body.octopus-auth-page h1,
body.octopus-auth-page h2,
body.octopus-auth-page p,
body.octopus-auth-page span {
  color: #f3f3f3 !important;
}

body.octopus-auth-page a {
  color: #f5c518 !important;
}

body.octopus-auth-page button[type="submit"],
body.octopus-auth-page button.semi-button-primary,
body.octopus-auth-page .semi-button-primary {
  background: #e11d2e !important;
  border-color: #e11d2e !important;
  color: #fff !important;
}

/* pricing / models / rankings */
body.octopus-models-page main,
body.octopus-models-page [class*="card"],
body.octopus-models-page [class*="Card"],
body.octopus-models-page table,
body.octopus-models-page .semi-table,
body.octopus-models-page .semi-table-wrapper {
  background: #121214 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f3f3f3 !important;
}

/* console shell */
body.octopus-console-page .semi-layout,
body.octopus-console-page .semi-layout-content,
body.octopus-console-page .semi-layout-header,
body.octopus-console-page .semi-layout-sider,
body.octopus-console-page [class*="Layout"],
body.octopus-console-page [class*="Sider"] {
  background: #050506 !important;
  color: #f3f3f3 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.octopus-console-page .semi-layout-sider,
body.octopus-console-page aside,
body.octopus-console-page nav[class*="side"] {
  background: #0c0c0e !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.octopus-console-page .semi-card,
body.octopus-console-page [class*="card"],
body.octopus-console-page [class*="Card"],
body.octopus-console-page .semi-table,
body.octopus-console-page .semi-table-wrapper,
body.octopus-console-page .semi-tabs-bar,
body.octopus-console-page .semi-modal-content,
body.octopus-console-page .semi-sidesheet-content {
  background: #121214 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f3f3f3 !important;
}

body.octopus-console-page .semi-navigation-item,
body.octopus-console-page .semi-navigation-item-text,
body.octopus-console-page .semi-navigation-sub-title {
  color: #c8c8d0 !important;
}

body.octopus-console-page .semi-navigation-item-selected,
body.octopus-console-page .semi-navigation-item:hover {
  background: rgba(225, 29, 46, 0.12) !important;
  color: #f5c518 !important;
}

body.octopus-console-page input,
body.octopus-console-page textarea,
body.octopus-console-page select,
body.octopus-console-page .semi-input,
body.octopus-console-page .semi-input-wrapper,
body.octopus-console-page .semi-select,
body.octopus-console-page .semi-inputNumber {
  background: #1a1a1e !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f3f3f3 !important;
}

body.octopus-console-page .semi-button-primary,
html.octopus-force-dark .semi-button-primary {
  background: #e11d2e !important;
  border-color: #e11d2e !important;
  color: #fff !important;
}

/* generic surfaces under force-dark */
html.octopus-force-dark .bg-background,
html.octopus-force-dark .bg-card,
html.octopus-force-dark .bg-muted,
html.octopus-force-dark .bg-popover {
  background-color: #121214 !important;
}

html.octopus-force-dark .text-foreground,
html.octopus-force-dark .text-card-foreground {
  color: #f3f3f3 !important;
}

html.octopus-force-dark .text-muted-foreground {
  color: #9a9aa3 !important;
}

html.octopus-force-dark .border,
html.octopus-force-dark .border-border {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.octopus-force-dark input,
html.octopus-force-dark textarea,
html.octopus-force-dark select {
  background: #1a1a1e !important;
  color: #f3f3f3 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}