/*
 * Hanhai Home Brand Skin 0.1.1
 * Visual-only homepage CSS. It avoids event handlers and does not change form field names.
 */

:root {
  --hhv-abyss: #06111f;
  --hhv-panel: rgba(5, 18, 32, .78);
  --hhv-line: rgba(218, 175, 101, .34);
  --hhv-gold: #d9ad63;
  --hhv-gold-soft: #f1c887;
  --hhv-blue: #4fa6ff;
  --hhv-text: #edf6ff;
  --hhv-muted: #98aac1;
  --hhv-shadow: 0 28px 90px rgba(0, 0, 0, .34);
}

html:has(body.hhv-home-visual),
body.hhv-home-visual {
  background:
    radial-gradient(circle at 50% -10%, rgba(85, 157, 255, .28), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(217, 173, 99, .14), transparent 26%),
    linear-gradient(180deg, #030814 0%, #06111f 45%, #081624 100%) !important;
  color: var(--hhv-text) !important;
}

body.hhv-home-visual::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(91, 174, 255, .20) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 8%, rgba(255, 255, 255, .40) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 34%, rgba(217, 173, 99, .32) 0 1px, transparent 2px),
    linear-gradient(90deg, transparent, rgba(79, 166, 255, .07), transparent);
  background-size: 160px 160px, 240px 240px, 190px 190px, 100% 100%;
  opacity: .72 !important;
}

body.hhv-home-visual::after {
  content: "" !important;
  position: fixed !important;
  left: var(--hh-rail, 76px) !important;
  right: 0 !important;
  top: 0 !important;
  height: 430px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(64, 149, 255, .24), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(9, 35, 59, .92), transparent 72%),
    linear-gradient(180deg, rgba(2, 8, 18, .45), transparent 72%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}

body.hhv-home-visual .hh-main,
body.hhv-home-visual .hh-page,
body.hhv-home-visual .hh-home,
body.hhv-home-visual .hh-home-v22 {
  background: transparent !important;
  color: var(--hhv-text) !important;
}

body.hhv-home-visual .hh-rail {
  background: linear-gradient(180deg, rgba(4, 13, 24, .92), rgba(6, 17, 31, .72)) !important;
  border-right: 1px solid rgba(217, 173, 99, .22) !important;
  box-shadow: 12px 0 42px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(22px) !important;
}

body.hhv-home-visual .hh-logo,
body.hhv-home-visual .hh-logo span {
  background: linear-gradient(135deg, #f3d394, #c9943f) !important;
  color: #071423 !important;
  box-shadow: 0 14px 38px rgba(217, 173, 99, .26) !important;
}

body.hhv-home-visual .hh-rail-nav a {
  color: rgba(237, 246, 255, .72) !important;
  border: 1px solid transparent !important;
}

body.hhv-home-visual .hh-rail-nav a:hover,
body.hhv-home-visual .hh-rail-nav a.is-active {
  background: rgba(79, 166, 255, .12) !important;
  color: #fff !important;
  border-color: rgba(217, 173, 99, .24) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .26) !important;
}

body.hhv-home-visual .hh-points-mini,
body.hhv-home-visual .hh-help {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(217, 173, 99, .28) !important;
  color: var(--hhv-gold-soft) !important;
}

body.hhv-home-visual .hh-top-banner,
body.hhv-home-visual .hh-notice-v22 {
  background: linear-gradient(90deg, rgba(217, 173, 99, .16), rgba(79, 166, 255, .20), rgba(217, 173, 99, .12)) !important;
  color: #f7d7a1 !important;
  border-bottom: 1px solid rgba(217, 173, 99, .22) !important;
}

body.hhv-home-visual .hh-home-title,
body.hhv-home-visual .hh-hero-v22 h1 {
  color: var(--hhv-gold-soft) !important;
  text-shadow: 0 8px 38px rgba(217, 173, 99, .18) !important;
  letter-spacing: 0 !important;
}

body.hhv-home-visual .hh-home-title span,
body.hhv-home-visual .hh-hero-v22 h1 span {
  color: #8cc9ff !important;
}

body.hhv-home-visual .hh-home-sub,
body.hhv-home-visual .hh-hero-v22 p,
body.hhv-home-visual .hh-block-head-v22 p {
  color: var(--hhv-muted) !important;
}

body.hhv-home-visual .hh-command,
body.hhv-home-visual .hh-command-pro,
body.hhv-home-visual .hh-home-generator-v22,
body.hhv-home-visual .hanhai-home-generator-card,
body.hhv-home-visual .hanhai-home-generator-wrap {
  background: linear-gradient(180deg, rgba(10, 30, 50, .88), rgba(5, 17, 30, .84)) !important;
  border: 1px solid rgba(217, 173, 99, .34) !important;
  box-shadow: var(--hhv-shadow), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  color: var(--hhv-text) !important;
  backdrop-filter: blur(18px) !important;
}

body.hhv-home-visual .hh-command:focus-within,
body.hhv-home-visual .hh-home-generator-v22:focus-within {
  border-color: rgba(79, 166, 255, .52) !important;
  box-shadow: 0 32px 96px rgba(0, 0, 0, .42), 0 0 0 1px rgba(79, 166, 255, .18) inset !important;
}

body.hhv-home-visual textarea,
body.hhv-home-visual .hh-command textarea,
body.hhv-home-visual .hh-home-generator-v22 textarea {
  color: #f5f9ff !important;
  background: transparent !important;
}

body.hhv-home-visual textarea::placeholder,
body.hhv-home-visual .hh-command textarea::placeholder,
body.hhv-home-visual .hh-home-generator-v22 textarea::placeholder {
  color: rgba(198, 212, 232, .72) !important;
}

body.hhv-home-visual .hh-ref-add,
body.hhv-home-visual .hh-ref-add-v22,
body.hhv-home-visual .hh-ref-trigger,
body.hhv-home-visual .hhsw-generic-upload {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(217, 173, 99, .26) !important;
  color: var(--hhv-gold-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

body.hhv-home-visual .hh-chip,
body.hhv-home-visual .hh-drop-btn,
body.hhv-home-visual .hhc-safe-btn,
body.hhv-home-visual .hanhai-home-param-button,
body.hhv-home-visual .hh-segment-v22 button {
  background: rgba(255, 255, 255, .075) !important;
  border-color: rgba(91, 174, 255, .26) !important;
  color: #dbeeff !important;
  box-shadow: none !important;
}

body.hhv-home-visual .hh-chip.active,
body.hhv-home-visual .hh-chip:hover,
body.hhv-home-visual .hh-drop-btn.active,
body.hhv-home-visual .hh-drop-btn:hover,
body.hhv-home-visual .hhc-safe-btn.active,
body.hhv-home-visual .hhc-safe-btn:hover,
body.hhv-home-visual .hanhai-home-param-button:hover,
body.hhv-home-visual .hanhai-home-param-button.active,
body.hhv-home-visual .hh-segment-v22 button.active {
  background: linear-gradient(135deg, rgba(79, 166, 255, .20), rgba(217, 173, 99, .13)) !important;
  border-color: rgba(217, 173, 99, .42) !important;
  color: #fff !important;
}

body.hhv-home-visual .hh-submit-round,
body.hhv-home-visual .hh-submit-v22,
body.hhv-home-visual [data-submit-task],
body.hhv-home-visual .hhc-safe-generate,
body.hhv-home-visual .hh-home-submit {
  background: linear-gradient(135deg, #e9c178, #b98235) !important;
  color: #071423 !important;
  border: 0 !important;
  box-shadow: 0 14px 32px rgba(217, 173, 99, .24) !important;
}

body.hhv-home-visual .hhc-safe-points,
body.hhv-home-visual [data-hhc-estimate],
body.hhv-home-visual [data-credit-label],
body.hhv-home-visual .hanhai-home-points {
  background: rgba(255, 255, 255, .075) !important;
  border-color: rgba(217, 173, 99, .28) !important;
  color: #f6d196 !important;
}

body.hhv-home-visual .hhc-safe-popover,
body.hhv-home-visual .hh-menu,
body.hhv-home-visual .hh-dropdown-menu,
body.hhv-home-visual .hanhai-home-menu,
body.hhv-home-visual .hanhai-home-model-menu,
body.hhv-home-visual .hanhai-home-spec-menu {
  background: rgba(7, 20, 35, .96) !important;
  border-color: rgba(217, 173, 99, .30) !important;
  color: var(--hhv-text) !important;
  box-shadow: 0 26px 80px rgba(0, 0, 0, .46) !important;
}

body.hhv-home-visual .hhc-safe-popover button,
body.hhv-home-visual .hh-menu button,
body.hhv-home-visual .hh-dropdown-menu button,
body.hhv-home-visual .hanhai-home-menu button {
  color: #e6f2ff !important;
}

body.hhv-home-visual .hhc-safe-popover button:hover,
body.hhv-home-visual .hhc-safe-popover button.active,
body.hhv-home-visual .hh-menu button:hover,
body.hhv-home-visual .hh-menu button.active,
body.hhv-home-visual .hh-dropdown-menu button:hover,
body.hhv-home-visual .hh-dropdown-menu button.active {
  background: rgba(79, 166, 255, .14) !important;
  color: #fff !important;
}

body.hhv-home-visual .hh-feature-card,
body.hhv-home-visual .hh-mode-card-v22,
body.hhv-home-visual .hh-template-card-v22,
body.hhv-home-visual .hh-asset-card,
body.hhv-home-visual .hh-inspire-card-v22 {
  background: linear-gradient(180deg, rgba(11, 30, 50, .82), rgba(5, 16, 28, .86)) !important;
  border: 1px solid rgba(217, 173, 99, .22) !important;
  color: var(--hhv-text) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .26) !important;
}

body.hhv-home-visual .hh-feature-card:hover,
body.hhv-home-visual .hh-mode-card-v22:hover,
body.hhv-home-visual .hh-template-card-v22:hover,
body.hhv-home-visual .hh-inspire-card-v22:hover {
  border-color: rgba(217, 173, 99, .46) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .36) !important;
}

body.hhv-home-visual .hh-feature-icon {
  background: linear-gradient(135deg, rgba(79, 166, 255, .95), rgba(217, 173, 99, .76)) !important;
  color: #06111f !important;
}

body.hhv-home-visual .hh-block-head-v22 h2,
body.hhv-home-visual .hh-home-block-v22 h2 {
  color: var(--hhv-gold-soft) !important;
}

body.hhv-home-visual .hh-small-blue,
body.hhv-home-visual .hh-inspire-tabs-v22 button,
body.hhv-home-visual .hh-asset-actions a,
body.hhv-home-visual .hh-asset-actions button {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(91, 174, 255, .24) !important;
  color: #dceeff !important;
}

body.hhv-home-visual .hh-inspire-tabs-v22 .active,
body.hhv-home-visual .hh-small-blue:hover,
body.hhv-home-visual .hh-inspire-tabs-v22 button:hover {
  background: linear-gradient(135deg, rgba(217, 173, 99, .86), rgba(167, 111, 43, .86)) !important;
  color: #06111f !important;
  border-color: rgba(217, 173, 99, .65) !important;
}

body.hhv-home-visual .hh-empty,
body.hhv-home-visual .hh-empty-small,
body.hhv-home-visual .hh-empty-state {
  background: rgba(255, 255, 255, .055) !important;
  border-color: rgba(217, 173, 99, .25) !important;
  color: var(--hhv-muted) !important;
}

body.hhv-home-visual .hh-inspire-info-v22 p,
body.hhv-home-visual .hh-asset-meta,
body.hhv-home-visual small {
  color: var(--hhv-muted) !important;
}

@media (max-width: 900px) {
  body.hhv-home-visual::after {
    left: 0 !important;
  }

  body.hhv-home-visual .hh-rail {
    background: rgba(5, 18, 32, .94) !important;
  }
}