:root {
  color-scheme: light;
  --nh-bg: #dfeff6;
  --nh-ink: #0c1c2e;
  --nh-muted: #5c718a;
  --nh-panel: rgba(248, 253, 255, .52);
  --nh-panel-strong: rgba(255, 255, 255, .72);
  --nh-panel-soft: rgba(255, 255, 255, .34);
  --nh-line: rgba(111, 158, 205, .34);
  --nh-line-strong: rgba(255, 255, 255, .72);
  --nh-blue: #1677ff;
  --nh-cyan: #13c8de;
  --nh-violet: #6f6df5;
  --nh-rose: #ef6294;
  --nh-green: #25c48e;
  --nh-amber: #f5b64b;
  --nh-shadow: 0 26px 74px rgba(35, 66, 102, .22);
  --nh-shadow-soft: 0 14px 38px rgba(35, 66, 102, .14);
  --nh-inner: inset 0 1px 0 rgba(255, 255, 255, .78), inset 0 -1px 0 rgba(255, 255, 255, .18);
  --nh-scene-bg: url("/assets/theme/rain-day-poster.jpg");
  --nh-scene-4k: url("/assets/theme/rain-day-4k.jpg");
  --nh-girl: url("/assets/theme/girl-light.png");
  --nh-girl-width: clamp(138px, 12vw, 238px);
  --semi-border-radius-small: 10px;
  --semi-border-radius-medium: 12px;
  --semi-border-radius-large: 14px;
}

html[data-theme="dark"],
html.nh-dark,
body.semi-always-dark {
  color-scheme: dark;
  --nh-bg: #07111d;
  --nh-ink: #eef7ff;
  --nh-muted: #afc1d5;
  --nh-panel: rgba(12, 24, 42, .48);
  --nh-panel-strong: rgba(13, 27, 48, .70);
  --nh-panel-soft: rgba(14, 30, 52, .32);
  --nh-line: rgba(163, 207, 255, .22);
  --nh-line-strong: rgba(255, 255, 255, .18);
  --nh-shadow: 0 28px 82px rgba(0, 0, 0, .42);
  --nh-shadow-soft: 0 16px 44px rgba(0, 0, 0, .30);
  --nh-scene-bg: url("/assets/theme/rain-night-poster.jpg");
  --nh-scene-4k: url("/assets/theme/rain-night-4k.jpg");
  --nh-girl: url("/assets/theme/girl-dark.png");
}

html.nh-glass-ready,
html.nh-glass-ready body {
  min-height: 100%;
  background: var(--nh-bg) !important;
  color: var(--nh-ink);
}

html.nh-glass-ready body {
  overflow-x: hidden;
}

html.nh-glass-ready body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -30;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(246, 252, 255, .52), rgba(214, 232, 244, .22) 44%, rgba(219, 233, 242, .60)),
    radial-gradient(circle at calc(50% + var(--nh-parallax-x, 0px)) calc(8% + var(--nh-parallax-y, 0px)), rgba(255, 255, 255, .70), transparent 40%),
    var(--nh-scene-4k),
    var(--nh-scene-bg);
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center;
  filter: saturate(.92) brightness(1.05);
  transform: translate3d(calc(var(--nh-parallax-x, 0px) * -0.20), calc(var(--nh-parallax-y, 0px) * -0.15), 0) scale(1.018);
  transition: background-image .35s ease, filter .35s ease, opacity .35s ease;
}

html[data-theme="dark"].nh-glass-ready body::before,
html.nh-dark.nh-glass-ready body::before,
html.nh-glass-ready body.semi-always-dark::before {
  background-image:
    linear-gradient(180deg, rgba(5, 12, 23, .42), rgba(4, 10, 19, .18) 40%, rgba(5, 11, 20, .58)),
    radial-gradient(circle at calc(70% + var(--nh-parallax-x, 0px)) calc(16% + var(--nh-parallax-y, 0px)), rgba(48, 118, 178, .30), transparent 42%),
    var(--nh-scene-4k),
    var(--nh-scene-bg);
  filter: saturate(1.04) brightness(.84);
}

html.nh-glass-ready body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -29;
  pointer-events: none;
  background:
    linear-gradient(100deg, transparent 0 30%, rgba(255, 255, 255, .22) 30.4% 30.8%, transparent 31.2% 100%),
    linear-gradient(70deg, transparent 0 64%, rgba(40, 120, 220, .12) 64.4% 64.8%, transparent 65.2% 100%),
    radial-gradient(circle at 18% 12%, rgba(17, 197, 222, .22), transparent 34%),
    radial-gradient(circle at 84% 14%, rgba(239, 98, 148, .16), transparent 32%);
  background-size: 620px 620px, 760px 760px, cover, cover;
  opacity: .58;
  animation: nhGlassLines 42s linear infinite;
}

@keyframes nhGlassLines {
  to { background-position: 620px 620px, -760px 760px, center, center; }
}

@media (prefers-reduced-motion: reduce) {
  html.nh-glass-ready body::after { animation: none; }
}

#nh-rain-canvas {
  position: fixed;
  inset: 0;
  z-index: -20;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: .70;
  mix-blend-mode: multiply;
}

html[data-theme="dark"] #nh-rain-canvas,
html.nh-dark #nh-rain-canvas,
body.semi-always-dark #nh-rain-canvas {
  opacity: .54;
  mix-blend-mode: screen;
}

#root {
  position: relative;
  z-index: 0;
}

.semi-portal {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 30000 !important;
}

.semi-portal-inner {
  position: absolute !important;
  z-index: inherit !important;
}

/* Keep portaled controls above the glass table layers and fixed action columns. */
.semi-dropdown,
.semi-dropdown-wrapper,
.semi-select-dropdown,
.semi-select-option-list,
.semi-select-option-list-wrapper,
.semi-select-popover,
.semi-popover,
.semi-popover-wrapper,
.semi-popconfirm,
.semi-popconfirm-wrapper,
.semi-tooltip-wrapper,
.semi-tooltip,
.semi-cascader,
.semi-cascader-popover,
.semi-cascader-option-lists,
.semi-tree-select-popover,
.semi-tree-select-dropdown,
.semi-datepicker,
.semi-datepicker-panel,
.semi-timepicker-panel,
.semi-picker-panel,
[data-slot="dropdown-menu-content"],
[data-slot="popover-content"],
[data-slot="select-content"],
[data-slot="tooltip-content"],
[data-slot="command-dialog"] {
  pointer-events: auto !important;
  z-index: 30000 !important;
}

.semi-toast-wrapper {
  z-index: 10050 !important;
}

#root,
.semi-layout,
.semi-layout-content,
.semi-layout-header,
.semi-layout-footer,
.semi-layout-sider,
.semi-tabs-content,
.semi-spin,
.semi-spin-children {
  background: transparent !important;
}

.semi-layout-header,
header[class*="Header"],
nav[class*="nav"],
.site-nav {
  background: color-mix(in srgb, var(--nh-panel-strong) 78%, transparent) !important;
  border-bottom: 1px solid var(--nh-line) !important;
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  box-shadow: 0 12px 36px rgba(33, 76, 122, .12), var(--nh-inner);
}

.semi-navigation,
.semi-layout-sider,
aside[class*="sider"],
[class*="sidebar"],
.semi-sidesheet-content {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--nh-panel-strong) 88%, transparent), color-mix(in srgb, var(--nh-panel) 84%, transparent)) !important;
  border-right: 1px solid var(--nh-line) !important;
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  box-shadow: 14px 0 42px rgba(34, 76, 122, .16), var(--nh-inner);
}

.semi-navigation-item,
.semi-navigation-sub-wrap,
.semi-dropdown-item,
.semi-select-option,
.semi-tree-option {
  border-radius: 12px !important;
}

.semi-navigation-item:hover,
.semi-navigation-item-selected,
.semi-dropdown-item:hover,
.semi-select-option-focused,
.semi-select-option-selected {
  background: linear-gradient(135deg, rgba(22, 119, 255, .16), rgba(19, 200, 222, .10)) !important;
  color: var(--nh-blue) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48);
}

.semi-card,
.semi-table-container,
.semi-modal-content,
.semi-drawer-content,
.semi-popover-content,
.semi-popconfirm,
.semi-collapse,
.semi-list,
.semi-descriptions,
.semi-upload,
.semi-banner,
.semi-calendar,
.semi-transfer,
.semi-tree,
.semi-cascader,
.semi-datepicker-panel,
.semi-timepicker-panel,
.semi-picker-panel,
.semi-chat-chatBox,
.doc-panel,
.metric-panel,
.panel,
.code-wrap {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--nh-panel-strong) 74%, transparent), color-mix(in srgb, var(--nh-panel) 88%, transparent)) !important;
  border: 1px solid var(--nh-line) !important;
  border-top-color: var(--nh-line-strong) !important;
  backdrop-filter: blur(30px) saturate(172%);
  -webkit-backdrop-filter: blur(30px) saturate(172%);
  box-shadow: var(--nh-shadow), var(--nh-inner);
  border-radius: 14px !important;
}

.semi-card:hover,
.metric-panel:hover,
.doc-panel:hover,
.panel:hover {
  transform: translateY(-1px);
  box-shadow: 0 34px 86px rgba(35, 66, 102, .24), var(--nh-inner);
}

.semi-card,
.metric-panel,
.doc-panel,
.panel {
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.semi-table,
.semi-table-thead,
.semi-table-tbody,
.semi-table-row,
.semi-table-cell,
.semi-calendar,
.semi-calendar-month,
.semi-calendar-week,
.semi-calendar-day {
  background: transparent !important;
}

.semi-table-container,
.semi-table-wrapper,
.semi-table-body,
.semi-table-fixed,
.semi-table-fixed-left,
.semi-table-fixed-right {
  position: relative;
  z-index: 0 !important;
}

.semi-table-fixed-left,
.semi-table-fixed-right,
.semi-table-cell-fixed-left,
.semi-table-cell-fixed-right,
.semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left,
.semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right {
  z-index: 2 !important;
}

.semi-table-thead > .semi-table-row > .semi-table-row-head,
.semi-table-thead > .semi-table-row > .semi-table-row-head-fixed-left,
.semi-table-thead > .semi-table-row > .semi-table-row-head-fixed-right {
  z-index: 3 !important;
}

.semi-layout,
.semi-layout-content,
.semi-layout-header,
.semi-layout-sider,
.semi-navigation,
.semi-table-container {
  z-index: auto !important;
}

.semi-table-thead > .semi-table-row > .semi-table-row-head,
.semi-table-header,
.semi-table-fixed-header table thead tr th {
  background: color-mix(in srgb, var(--nh-panel-strong) 82%, transparent) !important;
  color: var(--nh-muted) !important;
  backdrop-filter: blur(18px);
}

.semi-table-row:hover > .semi-table-cell,
.semi-table-row-hover > .semi-table-cell {
  background: rgba(19, 200, 222, .10) !important;
}

.semi-button,
.semi-tag,
.semi-badge-count,
.semi-tabs-tab,
.semi-radio-buttonRadioGroup .semi-radio-addon,
.semi-checkbox-inner,
.semi-switch,
.semi-page-item {
  border-radius: 12px !important;
}

.semi-button {
  border-color: var(--nh-line) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .34)) !important;
  box-shadow: 0 12px 30px rgba(23, 68, 120, .12), var(--nh-inner);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

html[data-theme="dark"] .semi-button,
html.nh-dark .semi-button,
body.semi-always-dark .semi-button {
  background: linear-gradient(145deg, rgba(24, 44, 72, .72), rgba(13, 28, 48, .46)) !important;
}

.semi-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(23, 68, 120, .20), var(--nh-inner);
}

.semi-button-primary,
.semi-button-primary:not(.semi-button-light),
.btn.primary {
  color: #fff !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--nh-blue), var(--nh-cyan)) !important;
  box-shadow: 0 18px 42px rgba(22, 119, 255, .34), inset 0 1px 0 rgba(255, 255, 255, .34);
}

.semi-input-wrapper,
.semi-input-textarea-wrapper,
.semi-select,
.semi-select-selection,
.semi-datepicker,
.semi-timepicker,
.semi-input-number,
.semi-cascader-selection,
.semi-tree-select-selection,
input,
textarea {
  background: color-mix(in srgb, var(--nh-panel-strong) 72%, transparent) !important;
  border-color: var(--nh-line) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--nh-inner);
  border-radius: 12px !important;
}

.semi-modal-mask,
.semi-drawer-mask {
  position: fixed !important;
  z-index: 20000 !important;
  background: rgba(6, 14, 26, .42) !important;
  backdrop-filter: blur(14px);
}

.semi-sidesheet-mask {
  position: absolute !important;
  z-index: 20000 !important;
  background: rgba(6, 14, 26, .42) !important;
  backdrop-filter: blur(14px);
}

.semi-modal,
.semi-modal-wrap,
.semi-modal-content,
.semi-drawer,
.semi-drawer-content,
.semi-sidesheet,
.semi-sidesheet-inner,
.semi-sidesheet-inner-wrap,
.semi-sidesheet-wrapper,
.semi-sidesheet-content,
[data-slot="dialog-content"],
[data-slot="sheet-content"] {
  pointer-events: auto !important;
  z-index: 20100 !important;
}

.semi-sidesheet {
  position: fixed !important;
}

.semi-sidesheet-inner-wrap {
  position: absolute !important;
  z-index: 20120 !important;
}

.semi-sidesheet-inner,
.semi-sidesheet-content {
  position: relative !important;
  pointer-events: auto !important;
  z-index: 20130 !important;
}

.semi-modal-content,
.semi-drawer-content,
.semi-sidesheet-content,
[data-slot="dialog-content"],
[data-slot="sheet-content"] {
  position: relative;
  z-index: 20110 !important;
}

.semi-modal-mask,
.semi-drawer-mask,
.semi-sidesheet-mask {
  pointer-events: auto;
}

.semi-drawer-content [data-slot="dropdown-menu-content"],
.semi-drawer-content [data-slot="popover-content"],
.semi-sidesheet-content [data-slot="dropdown-menu-content"],
.semi-sidesheet-content [data-slot="popover-content"],
.semi-modal-content [data-slot="dropdown-menu-content"],
.semi-modal-content [data-slot="popover-content"],
[data-slot="sheet-content"] [data-slot="dropdown-menu-content"],
[data-slot="sheet-content"] [data-slot="popover-content"],
[data-slot="dialog-content"] [data-slot="dropdown-menu-content"],
[data-slot="dialog-content"] [data-slot="popover-content"] {
  pointer-events: auto !important;
  z-index: 30000 !important;
}

.semi-modal-content,
.semi-drawer-content {
  transform-style: preserve-3d;
}

.semi-modal-header,
.semi-modal-footer,
.semi-drawer-header,
.semi-drawer-footer,
.semi-card-header,
.semi-card-footer {
  border-color: var(--nh-line) !important;
  background: transparent !important;
}

.semi-tabs-tab-active,
.semi-tabs-tab:hover {
  color: var(--nh-blue) !important;
}

.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active::before,
.semi-tabs-bar-line.semi-tabs-bar-bottom .semi-tabs-tab-active::before {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--nh-blue), var(--nh-cyan), var(--nh-green)) !important;
  box-shadow: 0 8px 18px rgba(19, 200, 222, .32);
}

.semi-avatar,
.semi-avatar-img,
.semi-image,
.semi-image-img,
.semi-typography img,
img {
  border-radius: 12px;
}

.semi-badge-count {
  background: linear-gradient(135deg, var(--nh-rose), #ff93ba) !important;
  box-shadow: 0 10px 26px rgba(239, 98, 148, .32);
}

.semi-tag {
  background: color-mix(in srgb, var(--nh-panel-strong) 78%, transparent) !important;
  border-color: var(--nh-line) !important;
  backdrop-filter: blur(16px);
}

.semi-calendar table,
.semi-calendar .semi-calendar-month,
.semi-calendar .semi-calendar-day,
.semi-calendar .semi-calendar-date {
  border-color: rgba(98, 126, 160, .18) !important;
}

.semi-calendar .semi-calendar-today,
.semi-calendar .semi-calendar-day-today {
  background: rgba(22, 119, 255, .16) !important;
}

.semi-typography,
.semi-typography-paragraph,
.semi-typography-title,
.semi-form-field-label,
.semi-table-cell,
.semi-navigation-item-text,
.semi-breadcrumb-item {
  letter-spacing: 0 !important;
}

.semi-typography-secondary,
.semi-descriptions-key,
.semi-breadcrumb,
.semi-form-field-extra,
.semi-form-field-helpText,
.semi-table-row-head {
  color: var(--nh-muted) !important;
}

.site-shell,
.hero-content,
.doc-content,
.doc-panel,
.panel,
.metric-panel,
.code-wrap,
.feature-table {
  min-width: 0;
  max-width: 100%;
}

.flow-hero,
.section {
  background: transparent !important;
}

.hero-art,
.flow-hero img,
.nh4-embed img {
  box-shadow: 0 30px 80px rgba(19, 52, 88, .24);
  transform: translateZ(0);
}

.nh-compliance-ribbon {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid rgba(239, 98, 148, .30);
  border-radius: 12px;
  background: color-mix(in srgb, var(--nh-panel-strong) 84%, transparent);
  color: var(--nh-ink);
  box-shadow: 0 16px 36px rgba(239, 98, 148, .12), var(--nh-inner);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-weight: 650;
  line-height: 1.62;
}

.nh-compliance-ribbon strong { color: var(--nh-rose); }
.nh-legal-list { margin: 10px 0 0; padding-left: 1.2em; }
.nh-legal-list li { margin: 6px 0; }

.nh-live2d {
  position: fixed;
  right: clamp(6px, 1.4vw, 20px);
  bottom: clamp(4px, 1.2vw, 18px);
  z-index: 1;
  width: var(--nh-girl-width);
  height: calc(var(--nh-girl-width) * 1.52);
  pointer-events: none;
  transform:
    translate3d(calc(var(--nh-parallax-x, 0px) * .18), calc(var(--nh-parallax-y, 0px) * .10), 0)
    rotateX(calc(var(--nh-parallax-y, 0px) * -.035deg))
    rotateY(calc(var(--nh-parallax-x, 0px) * .035deg));
  transform-origin: 50% 88%;
  opacity: .96;
  filter: drop-shadow(0 24px 34px rgba(10, 24, 42, .34));
}

body.nh-console .nh-live2d { --nh-girl-width: clamp(92px, 7.5vw, 160px); opacity: .88; }
body.nh-auth .nh-live2d { --nh-girl-width: clamp(150px, 16vw, 310px); }

.nh-live2d::before {
  content: "";
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: 2%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(18, 45, 78, .28), transparent 68%);
  filter: blur(10px);
  animation: nhShadowBreath 5.4s ease-in-out infinite;
}

.nh-live2d::after {
  content: "";
  position: absolute;
  inset: 9% 10% 4%;
  border-radius: 44% 46% 48% 42%;
  background: radial-gradient(circle at 50% 26%, rgba(255,255,255,.22), transparent 18%),
              linear-gradient(115deg, transparent 32%, rgba(255,255,255,.16), transparent 52%);
  opacity: .42;
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: nhLiveSheen 6.8s ease-in-out infinite;
}

.nh-live2d__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  border-radius: 0;
  transform-origin: 50% 88%;
  animation: nhLiveBreathe 5.4s ease-in-out infinite;
}

.nh-live2d__halo {
  position: absolute;
  inset: 14% 8% 9%;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(19, 200, 222, .28), transparent 62%);
  filter: blur(22px);
  animation: nhHalo 7s ease-in-out infinite;
}

html[data-theme="dark"] .nh-live2d__halo,
html.nh-dark .nh-live2d__halo,
body.semi-always-dark .nh-live2d__halo {
  background: radial-gradient(circle, rgba(111, 109, 245, .28), rgba(19, 200, 222, .16), transparent 64%);
}

.nh-live2d__blink {
  position: absolute;
  top: 15%;
  left: 35%;
  width: 30%;
  height: 10%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  opacity: 0;
  transform: scaleY(.1);
  animation: nhBlink 6.2s infinite;
  mix-blend-mode: screen;
}

@keyframes nhLiveBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.018); }
}

@keyframes nhShadowBreath {
  0%, 100% { transform: scaleX(.92); opacity: .50; }
  50% { transform: scaleX(1.08); opacity: .30; }
}

@keyframes nhHalo {
  0%, 100% { transform: scale(.96); opacity: .70; }
  50% { transform: scale(1.08); opacity: .95; }
}

@keyframes nhLiveSheen {
  0%, 100% { transform: translateX(-6%); opacity: .20; }
  50% { transform: translateX(6%); opacity: .48; }
}

@keyframes nhBlink {
  0%, 92%, 100% { opacity: 0; transform: scaleY(.1); }
  94%, 95% { opacity: .34; transform: scaleY(1); }
}

@media (min-width: 1400px) {
  body:not(.nh-console) .nh-live2d { --nh-girl-width: clamp(180px, 14vw, 300px); }
}

@media (max-width: 900px) {
  .nh-live2d { --nh-girl-width: 104px; opacity: .76; }
  body.nh-console .nh-live2d { opacity: .55; }
}

@media (max-width: 640px) {
  .nh-live2d { display: none; }
  #nh-rain-canvas { opacity: .48; }
  .semi-card,
  .semi-table-container,
  .semi-modal-content,
  .semi-drawer-content,
  .doc-panel,
  .metric-panel {
    border-radius: 12px !important;
  }
}
