/* Haike Technology visual system. Presentation only; product flows stay in the existing components. */
:root {
  --haike-brand-orange: #f64b00;
  --haike-brand-orange-deep: #d84100;
  --haike-brand-yellow: #ffdc00;
  --haike-brand-ink: #242424;
  --haike-brand-muted: #696a68;
  --haike-brand-canvas: #f8f7f4;
  --haike-brand-line: #eae7e1;
  --haike-brand-soft: #fff1e6;
  --primary: var(--haike-brand-orange);
  --cw-blue: var(--haike-brand-orange);
  --haike-orange: var(--haike-brand-orange);
  --haike-orange-dark: var(--haike-brand-orange-deep);
  --haike-ui-ink: var(--haike-brand-ink);
  --haike-ui-ink-soft: #666865;
  --haike-ui-muted: #858682;
  --haike-ui-line: var(--haike-brand-line);
  --haike-ui-line-soft: #f1eee8;
  --haike-ui-bg: var(--haike-brand-canvas);
  --haike-ui-blue: var(--haike-brand-orange);
  --haike-ui-blue-strong: var(--haike-brand-orange-deep);
  --haike-ui-blue-soft: var(--haike-brand-soft);
  --haike-ui-blue-line: #f6d2bb;
  --haike-ui-orange: var(--haike-brand-orange);
}

body { color: var(--haike-brand-ink); background: var(--haike-brand-canvas); }
::selection { color: #40200e; background: #ffdfbd; }

/* Login: warm editorial composition, using the same official logo and mascot as CreatorHub. */
.login-page {
  --login-blue: var(--haike-brand-orange);
  --login-blue-deep: var(--haike-brand-orange-deep);
  --login-ink: var(--haike-brand-ink);
  --login-muted: #747572;
  grid-template-columns: minmax(0, 54fr) minmax(430px, 46fr);
  background: #ffffff;
}
.login-page > .ocean-stage,
.login-page > .ocean-stage__light { display: none; }
.login-page .login-story {
  min-height: 100dvh;
  padding: 42px clamp(38px, 5vw, 78px) 34px;
  color: var(--haike-brand-ink);
  background:
    radial-gradient(circle at 88% 80%, rgba(255,220,0,.26), transparent 34%),
    radial-gradient(circle at 1% 12%, rgba(246,75,0,.11), transparent 34%),
    #fff8ef;
  border-right: 1px solid #f0e8dd;
}
.login-page .login-story::before { display: block; inset: 0 auto 0 0; width: 5px; background: linear-gradient(#f64b00, #ffdc00); }
.login-page .login-story__logo {
  width: clamp(186px, 19vw, 254px);
  max-height: 74px;
  object-position: left center;
  filter: none;
  mix-blend-mode: multiply;
}
.login-page .login-story__copy { max-width: 510px; margin: auto 0 38px; padding-bottom: 100px; }
.login-page .login-story__copy > span {
  margin-bottom: 24px;
  color: #b4460d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .19em;
  text-shadow: none;
}
.login-page .login-story__copy h2 {
  margin: 0;
  color: #282521;
  font-size: clamp(37px, 4vw, 61px);
  font-weight: 850;
  line-height: 1.16;
  letter-spacing: -.055em;
  text-shadow: none;
}
.login-page .login-story__copy > p {
  max-width: 430px;
  margin-top: 22px;
  color: #676660;
  font-size: 15px;
  line-height: 1.9;
  text-shadow: none;
}
.login-page .login-feature-list { gap: 9px; margin-top: 29px; }
.login-page .login-feature-list span {
  min-height: 35px;
  color: #754326;
  border: 1px solid #f3d9bf;
  background: rgba(255,255,255,.78);
  box-shadow: none;
  backdrop-filter: none;
}
.login-page .login-feature-list svg { color: var(--haike-brand-orange); }
.login-page .login-story__mascot {
  position: absolute;
  right: clamp(25px, 4vw, 70px);
  bottom: 64px;
  z-index: 0;
  width: 195px;
  height: 245px;
  border: 1px solid rgba(236,218,196,.8);
  border-radius: 120px 120px 24px 24px;
  background: #fff url('/assets/haike-robot.jpg') no-repeat -18px -42px / 620px 620px;
  box-shadow: 0 22px 52px rgba(92,51,20,.12);
  pointer-events: none;
}
.login-page .login-story__foot { color: #8a7a6b; text-shadow: none; }
.login-page .login-panel {
  min-height: 100dvh;
  max-height: 100dvh;
  padding: clamp(48px, 8vh, 84px) clamp(38px, 5vw, 85px) 28px;
  background: #fff;
}
.login-panel__intro > span {
  color: #b94408;
  border-color: #f6d8bd;
  background: #fff5ec;
  backdrop-filter: none;
}
.login-panel__intro h1 { color: #252525; letter-spacing: -.055em; }
.login-panel__intro p { color: #777874; }
.login-page .login-card {
  border-color: #eae5df;
  background: #fff;
  box-shadow: 0 14px 48px rgba(68,48,30,.09);
  backdrop-filter: none;
}
.login-page .login-mode-switch { border-bottom-color: #ebe5de; }
.login-page .login-mode-switch button { color: #74716d; }
.login-page .login-mode-switch button:hover,
.login-page .login-mode-switch button.is-active { color: var(--haike-brand-orange-deep); }
.login-page .login-mode-switch button.is-active { border-bottom-color: var(--haike-brand-orange); }
.login-page .login-card form > label { color: #43413d; }
.login-page .login-input { border-color: #e3ddd5; background: #fff; box-shadow: none; }
.login-page .login-input:hover { border-color: #f2b990; }
.login-page .login-input:focus-within { border-color: #f64b00; box-shadow: 0 0 0 4px rgba(246,75,0,.1); }
.login-page .login-input > svg { color: #988c81; }
.login-page .login-submit {
  border-color: var(--haike-brand-orange);
  background: linear-gradient(100deg,#ed4700 0%,#f64b00 75%,#fb801c 100%);
  box-shadow: 0 12px 28px rgba(246,75,0,.2);
}
.login-page .login-submit:hover:not(:disabled) { background: #d84100; box-shadow: 0 15px 32px rgba(246,75,0,.26); }
.login-page .login-captcha-image,
.login-page .trial-benefits { border-color: #e9e1d8; background: #fffaf5; }
.login-page .login-legal { color: #898680; }
.login-page :is(button, input):focus-visible { outline: 2px solid var(--haike-brand-orange); outline-offset: 2px; }

/* Signed-in shell: shared across tasks, creation, resources, publishing and settings. */
.cw-app {
  --cw-bg: var(--haike-brand-canvas);
  background:
    radial-gradient(760px 300px at 83% 0%,rgba(255,220,0,.065),transparent 70%),
    var(--haike-brand-canvas);
  color: var(--haike-brand-ink);
}
.cw-sidebar {
  border-right-color: #e9e5dd;
  background: #fffdfa;
  box-shadow: 3px 0 18px rgba(53,43,31,.035);
}
.cw-brand { min-height: 112px; padding-bottom: 20px; }
.cw-brand img { width: 184px; max-width: 100%; max-height: 62px; object-position: left center; mix-blend-mode: multiply; }
.cw-brand > span { color: #a07760; letter-spacing: .14em; }
.cw-sidebar nav button { color: #686966; }
.cw-sidebar nav button svg { color: #9a938b; }
.cw-sidebar nav button:hover {
  color: #b74408;
  border-color: #f6e5d6;
  background: #fff3e8;
}
.cw-sidebar nav button:hover svg,
.cw-sidebar nav button.is-active svg { color: var(--haike-brand-orange); }
.cw-sidebar nav button.is-active {
  color: #af3d06;
  border-color: #f5d4bb;
  background: #fff0e3;
  box-shadow: none;
}
.cw-sidebar nav button.is-active::before { background: var(--haike-brand-orange); }
.cw-sidefoot > button,
.cw-sidefoot > div { border-color: #eee8e0; color: #625d57; background: #fffaf5; }
.cw-sidefoot > button:hover { border-color: #f2c7aa; background: #fff1e6; }
.cw-sidefoot svg { color: var(--haike-brand-orange); }
.cw-sidefoot small { color: #938e88; }
.cw-top { border-bottom-color: #eae7e1; background: rgba(255,255,255,.96); }
.cw-top::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg,#f64b00 0%,#ff8b12 55%,#ffdc00 100%);
  pointer-events: none;
}
.cw-top > div:first-of-type strong { color: #292929; }
.cw-top > div:first-of-type small { color: #85837f; }
.cw-top > div:last-child > button:not(.cw-admin-entry),
.cw-menu { border-color: #e7e2da; color: #6e6a64; background: #fff; }
.cw-top > div:last-child > button:not(.cw-admin-entry):hover,
.cw-menu:hover { border-color: #f0bd9a; color: #b94306; background: #fff6ee; }
.cw-top > div:last-child > span,
.cw-admin-entry { border-color: #f0dfd1 !important; color: #8f4b24 !important; background: #fff8f1 !important; }
.cw-top > div:last-child > .cw-quota-pill { border-color: #efe1d2 !important; color: #86502a !important; background: #fffaf5 !important; }
.cw-top > div:last-child > button.cw-account-metric,
.cw-top > div:last-child > div.cw-account-metric {
  color: #3d3630;
  border-color: #eee4d9;
  background: #fffdfa;
  box-shadow: 0 5px 18px rgba(68,49,26,.04);
}
.cw-account-metric__icon { color: #cc4a0a; background: #fff0e1; }
.cw-account-metric__copy strong { color: #3a332d; }
.cw-account-metric__action { color: #b54307; }
.cw-account-metric.is-cyan .cw-account-metric__icon { color: #b85a05; background: #fff5df; }
.cw-shell main { max-width: 1500px; }

/* Common controls and panels. Status/error/success colors retain their semantics. */
.cw-app :is(.cw-items,.cw-editor,.cw-config,.cw-card,.cw-table,.cw-timeline,.cw-calendar,.cw-ingress,.cw-upload,.cw-link-extractor,.cw-topic-queue,.cw-import-panel,.cw-inspiration-panel,.cw-sound-main,.cw-sound-step,.cw-publish-material,.cw-generated-video,.wb-ocean-panel,.wb-panel,.wb-entry-card) {
  border-color: #eae6df;
  box-shadow: 0 9px 28px rgba(53,44,34,.045);
}
.cw-app .wb-page-heading p,
.cw-app .creator-page-heading p { color: #b8480c; }
.cw-app .wb-page-heading h2,
.cw-app .creator-page-heading h2 { color: #242424; }
.cw-app .cw-btn,
.cw-app .wb-button { border-color: #e4ded5; color: #554f48; background: #fff; }
.cw-app .cw-btn:hover,
.cw-app .wb-button:hover { border-color: #edb993; color: #b84208; background: #fff8f2; }
.cw-app .cw-btn.primary,
.cw-app .wb-button.primary,
.cw-app .creator-primary,
.cw-app .cp-button--primary,
.cw-app .wb-ocean-create {
  border-color: #ed4900;
  color: #fff;
  background: linear-gradient(105deg,#ef4900,#f64b00 76%,#f57915);
  box-shadow: 0 10px 24px rgba(246,75,0,.17);
}
.cw-app .cw-btn.primary:hover,
.cw-app .wb-button.primary:hover,
.cw-app .creator-primary:hover,
.cw-app .cp-button--primary:hover:not(:disabled),
.cw-app .wb-ocean-create:hover { border-color: #d84100; background: #d84100; box-shadow: 0 12px 28px rgba(246,75,0,.23); }
.cw-app :is(input,textarea,select) { border-color: #dfdad2; color: #33312e; background-color: #fff; }
.cw-app :is(input,textarea,select):hover { border-color: #edbf9e; }
.cw-app :is(input,textarea,select):focus { border-color: #f64b00; outline-color: rgba(246,75,0,.14); }
.cw-app :is(button,a,input,textarea,select):focus-visible { outline: 2px solid #f64b00; outline-offset: 2px; }
.cw-app .cw-steps { border-color: #e9e4dc; box-shadow: 0 7px 22px rgba(61,45,26,.04); }
.cw-app .cw-steps .is-active { color: #c04707; }
.cw-app .cw-steps .is-active i { border-color: #f64b00; background: #f64b00; }
.cw-app :is(.cw-modes button,.cw-tabs button,.cw-ratios button,.cw-platforms > button).is-active {
  color: #b74306;
  border-color: #f4d0b5;
  background: #fff1e6;
  box-shadow: none;
}
.cw-app .cw-tabs button:hover { color: #b74306; background: #fff7f0; }
.cw-app .cw-table > button:hover { background: #fffaf5; box-shadow: inset 3px 0 0 #f64b00; }
.cw-app .cw-task-type-tabs button { border-color: #e7e1d8; color: #66645f; background: #fff; }
.cw-app .cw-task-type-tabs button:hover { border-color: #efbe9c; color: #af4009; background: #fff9f4; }
.cw-app .cw-task-type-tabs button.is-active { border-color: #f2bd99; color: #ad3d04; background: #fff0e4; }
.cw-app .cw-tabs button.is-active { border-color: #f2cfb6; color: #af4009; background: #fff0e4; box-shadow: inset 0 0 0 1px #f8dbc6; }
.cw-app .cw-task-progress > i { background: #f3ece4; }
.cw-app .cw-task-progress > i > b { background: linear-gradient(90deg,#f64b00,#ffb71b); }
.cw-app .cw-empty,
.cw-app .wb-empty { border-color: #e9e2d8; background: #fffdfa; }
.cw-app .wb-empty > span { color: #e14a07; background: #fff0e3; }
.cw-app .cw-quota-card { border-color: #f2ddc7; background: linear-gradient(110deg,#fffdfa,#fff3e8); box-shadow: 0 10px 28px rgba(80,51,25,.05); }
.cw-quota-card__icon { color: #d64b09; box-shadow: none; }
.cw-quota-card__copy > span,
.cw-quota-card__meter > span { color: #a84d16; }
.cw-quota-card__meter > i { background: #f2e1cf; }
.cw-quota-card__meter > i > b { background: linear-gradient(90deg,#f64b00,#ffb71b); }
.cw-app .cp-page {
  --cp-primary: #f64b00;
  --cp-primary-strong: #d84100;
  --cp-primary-soft: #fff1e6;
  --cp-ink: #282827;
  --cp-ink-soft: #686966;
  --cp-line: #eae6df;
  --cp-line-soft: #f2eee7;
  --cp-surface-soft: #fffaf5;
}
.cw-app .creation-mode { color: #2c2b29; }
.creation-mode__heading > div > span,
.creation-mode__heading > small,
.creation-mode > p { color: #77736e; }
.cw-app .creation-mode__options > button { color: #5d5b56; border-color: #e7e0d7; background: #fff; }
.cw-app .creation-mode__options > button:hover { border-color: #ecb58d; background: #fffaf5; }
.cw-app .creation-mode__options > button[aria-pressed=true] {
  color: #b94306;
  border-color: #f28d50;
  background: #fff2e7;
  box-shadow: 0 0 0 2px rgba(246,75,0,.07);
}
.cw-app .creation-mode__icon { color: #846d5b; background: #f7f2ec; }
.cw-app .creation-mode__options > button[aria-pressed=true] .creation-mode__icon { color: #e6500b; background: #ffe2cc; }
.cw-app .creation-mode__copy > span,
.cw-app .creation-mode__tag { color: #777570; }
.cw-app .creation-mode__options > button:focus-visible { outline-color: #f64b00; }

/* Workspace hero speaks the same visual language as the new login surface. */
.cw-app .wb-ocean-hero {
  border-color: #efdac2;
  background: radial-gradient(circle at 88% 83%,rgba(255,209,83,.38),transparent 40%),linear-gradient(115deg,#fffdfa,#fff5e8 68%,#ffe9cc);
  box-shadow: 0 18px 48px rgba(130,78,24,.09);
}
.cw-app .wb-ocean-hero:hover { box-shadow: 0 22px 56px rgba(130,78,24,.13); }
.cw-app .wb-ocean-hero::after {
  display: block;
  inset: 30px 40px auto auto;
  z-index: 0;
  width: 248px;
  height: 282px;
  border: 5px solid rgba(255,255,255,.7);
  border-radius: 128px 128px 26px 26px;
  background: #fff url('/assets/haike-robot.jpg') no-repeat -18px -68px / 800px 800px;
  box-shadow: 0 22px 42px rgba(161,94,27,.14);
  opacity: 1;
  transform: none;
}
.cw-app .wb-ocean-hero:hover::after { opacity: 1; transform: none; }
.cw-app .wb-ocean-hero__copy p { color: #b74a0d; }
.cw-app .wb-ocean-hero__copy h2 { color: #272723; }
.cw-app .wb-ocean-hero__copy > span { color: #665f57; }
.cw-app .wb-ocean-composer { border-color: #e7d9ca; box-shadow: 0 10px 28px rgba(0,0,0,.1); }
.cw-app .wb-ocean-composer > label,
.cw-app .wb-ocean-panel > header button { color: #b94307; }
.cw-app .wb-platform-selector { border-color: #e8dccc; }
.cw-app .wb-platform-selector__options > button.is-active { color: #ac3d08; border-color: #f2bc97; background: #fff0e3; }
.cw-app .wb-ocean-hero__action small { color: #766d62; }
.cw-app .wb-ocean-hero__status span { color: #665f57; border-color: #ead8c4; background: rgba(255,255,255,.78); }
.cw-app .wb-ocean-hero__status b { color: #b74a0d; }
.cw-app .wb-ocean-task-list__icon { color: #d54a09; background: #fff1e6; }
.cw-app .wb-ocean-publish-list > button { background: #fffaf5; }
.cw-app .wb-ocean-publish-list__date { color: #bd4508; }

@media (max-width: 1100px) {
  .login-page { grid-template-columns: minmax(0,52fr) minmax(420px,48fr); }
  .login-page .login-story__copy { padding-bottom: 115px; }
  .login-page .login-story__mascot { width: 155px; height: 194px; background-size: 510px 510px; background-position: -14px -34px; }
}
@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; background: #fff; }
  .login-page .login-story { min-height: 330px; padding: 28px 30px; }
  .login-page .login-story__copy { display: block; max-width: 540px; margin: 34px 0 0; padding: 0; }
  .login-page .login-story__copy h2 { font-size: clamp(30px,5vw,40px); }
  .login-page .login-story__copy > p { margin-top: 12px; font-size: 13px; }
  .login-page .login-feature-list { margin-top: 14px; }
  .login-page .login-story__mascot { right: 25px; bottom: 18px; width: 118px; height: 143px; background-size: 390px 390px; background-position: -12px -26px; }
  .login-page .login-panel { min-height: auto; max-height: none; padding: 38px 28px 42px; background: #fff; }
  .cw-app .wb-ocean-hero::after { inset: 28px 25px auto auto; width: 158px; height: 186px; background-size: 520px 520px; background-position: -13px -40px; }
}
@media (max-width: 760px) {
  :root {
    --h5-canvas: #f8f7f4;
    --h5-surface-soft: #fffaf5;
    --h5-ink: #292826;
    --h5-copy: #6c6c69;
    --h5-muted: #92908b;
    --h5-blue: #f64b00;
    --h5-blue-strong: #d84100;
    --h5-blue-soft: #fff0e3;
    --h5-line: #e9e3da;
    --h5-shadow: 0 14px 34px rgba(48,35,22,.08);
  }
  body { background: var(--h5-canvas); }
  .cw-sidebar { background: #fffdfa; }
  .cw-top { background: rgba(255,255,255,.96); }
  .cw-mobile-bottom-nav { border-color: #e9e2d8; box-shadow: 0 15px 34px rgba(47,31,20,.13); }
  .cw-mobile-bottom-nav button.is-active { color: #bd4206; background: #fff0e3; }
  .cw-mobile-bottom-nav button:nth-child(2),
  .cw-mobile-bottom-nav button:nth-child(2).is-active { color: #fff; background: #f64b00; box-shadow: 0 8px 18px rgba(246,75,0,.22); }
  .cw-app .wb-page-heading p,
  .cw-app .creator-page-heading p { color: #b8480c; }
}
@media (max-width: 560px) {
  .login-page .login-story { min-height: 294px; padding: 22px; }
  .login-page .login-story__logo { width: 172px; }
  .login-page .login-story__copy { margin-top: 27px; }
  .login-page .login-story__copy > span { margin-bottom: 9px; font-size: 9px; }
  .login-page .login-story__copy h2 { font-size: 29px; }
  .login-page .login-story__copy > p { max-width: 270px; margin-top: 8px; font-size: 11px; line-height: 1.6; }
  .login-page .login-feature-list { display: none; }
  .login-page .login-story__mascot { right: 8px; bottom: 12px; width: 90px; height: 112px; background-size: 300px 300px; background-position: -9px -20px; }
  .login-page .login-panel { padding: 30px 18px 30px; }
  .login-page .login-card { padding: 22px 18px; }
  .cw-app .wb-ocean-hero { padding-top: 185px; }
  .cw-app .wb-ocean-hero::after { inset: 18px 18px auto auto; width: 112px; height: 138px; background-size: 390px 390px; background-position: -12px -29px; }
}

/* Compatibility for the currently deployed frontend bundle. Presentation only. */
.login-page .login-story__logo,
.cw-brand img {
  content: url('/assets/haike-tech-logo.png');
}

.login-page .login-story__copy:not(:has(h2)) {
  display: flex;
  flex-direction: column;
}
.login-page .login-story__copy:not(:has(h2)) > span { order: 0; }
.login-page .login-story__copy:not(:has(h2))::before {
  content: '让每个灵感，\A都有抵达世界的力量。';
  order: 1;
  margin: 0;
  color: #282521;
  font-size: clamp(37px, 4vw, 61px);
  font-weight: 850;
  line-height: 1.16;
  letter-spacing: -.055em;
  white-space: pre-line;
}
.login-page .login-story__copy:not(:has(h2))::after {
  content: '从一个想法开始，把内容创作、视频制作与多平台分发，串成一条清晰的路。';
  order: 2;
  max-width: 430px;
  margin-top: 22px;
  color: #676660;
  font-size: 15px;
  line-height: 1.9;
}
.login-page .login-story__copy:not(:has(h2)) .login-feature-list { order: 3; }
.login-page .login-story:not(:has(.login-story__mascot))::after {
  content: '';
  position: absolute;
  right: clamp(25px, 4vw, 70px);
  bottom: 64px;
  width: 195px;
  height: 245px;
  border: 1px solid rgba(236,218,196,.8);
  border-radius: 120px 120px 24px 24px;
  background: #fff url('/assets/haike-robot.jpg') no-repeat -18px -42px / 620px 620px;
  box-shadow: 0 22px 52px rgba(92,51,20,.12);
  pointer-events: none;
}
@media (max-width: 1100px) {
  .login-page .login-story:not(:has(.login-story__mascot))::after {
    width: 155px;
    height: 194px;
    background-size: 510px 510px;
    background-position: -14px -34px;
  }
}
@media (max-width: 760px) {
  .login-page .login-story__copy:not(:has(h2))::before { font-size: 27px; }
  .login-page .login-story__copy:not(:has(h2))::after {
    max-width: 270px;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.6;
  }
  .login-page .login-story:not(:has(.login-story__mascot))::after {
    right: 8px;
    bottom: 12px;
    width: 90px;
    height: 112px;
    background-size: 300px 300px;
    background-position: -9px -20px;
  }
}