@font-face {
  font-family: "Alimama ShuHeiTi";
  src: url("https://lzcdn.dianpusoft.cn/fonts/AlimamaShuHeiTi/AlimamaShuHeiTi-Bold.woff2") format("woff2");
  font-display: swap;
}

:root {
  --ai-blue: #0b6ff5;
  --ai-violet: #7357e6;
  --ai-mint: #36bea3;
  --ai-ink: #09263d;
  --ai-glow: 0 24px 60px rgba(29, 76, 137, .12);
}

.brand-wordmark-text,
.rail-brand-text,
.gate-wordmark-text,
.home-logo-wrap .brand-wordmark-text,
.footer .hf-name .brand-wordmark-text {
  font-family: "Alimama ShuHeiTi", "PingFang SC", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
}

body.member-shell {
  background:
    radial-gradient(circle at 38% -10%, rgba(111, 166, 255, .16), transparent 29rem),
    radial-gradient(circle at 84% 96%, rgba(81, 210, 179, .11), transparent 28rem),
    #f5f8fc;
}

.member-shell .agent-layout {
  background-image:
    linear-gradient(rgba(40, 111, 202, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 111, 202, .035) 1px, transparent 1px);
  background-size: 32px 32px;
}

.agent-rail {
  background:
    radial-gradient(circle at 18% 6%, rgba(78, 145, 255, .22), transparent 14rem),
    radial-gradient(circle at 70% 72%, rgba(116, 89, 229, .10), transparent 15rem),
    linear-gradient(180deg, rgba(247,251,255,.97), rgba(255,255,255,.96)) !important;
  border-right-color: rgba(96, 134, 178, .16) !important;
  box-shadow: 12px 0 42px rgba(26, 63, 105, .06);
}

.agent-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(circle, rgba(47, 111, 214, .2) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: linear-gradient(#000, transparent 42%);
}

.agent-rail > * { position: relative; }
.agent-rail .rail-item,
.agent-rail .rail-home { border-radius: 10px; }
.agent-rail .rail-item.active {
  border-radius: 10px;
  background: linear-gradient(100deg, rgba(255,255,255,.96), rgba(228,239,255,.86));
  box-shadow: inset 3px 0 0 var(--ai-blue), 0 8px 20px rgba(39, 91, 153, .08);
}

.agents-hero {
  width: min(1120px, calc(100% - 48px));
  min-height: 300px !important;
  margin: 24px auto 38px;
  border: 1px solid rgba(132, 172, 216, .38);
  border-radius: 28px;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 12%, rgba(65,145,255,.42), transparent 28%),
    radial-gradient(circle at 96% 100%, rgba(71,211,175,.24), transparent 34%),
    radial-gradient(circle at 48% 118%, rgba(135,94,242,.26), transparent 42%),
    linear-gradient(135deg, #e9f3ff, #f8f7ff 52%, #edfff9);
  box-shadow: var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.82);
}

.agents-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .32;
  background-image:
    linear-gradient(rgba(38,111,210,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,111,210,.12) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(100deg, transparent 12%, #000 58%, transparent);
}

.agents-hero::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: 7%;
  top: 50%;
  border: 1px dashed rgba(54, 112, 221, .26);
  border-radius: 50%;
  box-shadow: inset 0 0 38px rgba(90, 104, 234, .12), 0 0 40px rgba(57, 135, 245, .13);
  animation: aiOrbit 15s linear infinite;
}

.agents-eyebrow {
  border: 1px solid rgba(87, 132, 217, .24);
  background: rgba(255,255,255,.58) !important;
  backdrop-filter: blur(12px);
}

.agents-hero h1 .hl {
  background: linear-gradient(90deg, var(--ai-blue), var(--ai-violet), var(--ai-mint)) !important;
  background-size: 180% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: aiTextFlow 6s ease infinite;
}

.agent-filter-btn {
  border-radius: 12px !important;
  background: rgba(255,255,255,.76) !important;
  backdrop-filter: blur(14px);
}
.agent-filter-btn.active {
  background: linear-gradient(120deg, var(--ai-blue), var(--ai-violet) 72%, var(--ai-mint)) !important;
  background-size: 170% 100% !important;
  box-shadow: 0 12px 26px rgba(65, 83, 214, .22) !important;
  animation: aiTextFlow 6s ease infinite;
}

.agent-cards-grid { gap: 16px !important; }
.acard {
  overflow: hidden;
  border: 1px solid rgba(152, 177, 205, .34) !important;
  border-radius: 18px !important;
  background: linear-gradient(150deg, rgba(255,255,255,.97), rgba(248,251,255,.92)) !important;
  box-shadow: 0 12px 34px rgba(22, 58, 103, .07), inset 0 1px 0 #fff !important;
}
.acard::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -45px;
  bottom: -52px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cat) 18%, transparent), transparent 68%);
  transition: transform .35s ease;
}
.acard:hover { transform: translateY(-5px) !important; box-shadow: 0 20px 46px rgba(23, 69, 123, .13) !important; }
.acard:hover::after { transform: scale(1.45); }
.acard-avatar.agent-avatar-img {
  width: 66px !important;
  height: 66px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 7px 11px rgba(23, 52, 99, .22));
  transition: transform .28s ease, filter .28s ease;
}
.acard:hover .acard-avatar.agent-avatar-img { transform: translateY(-5px) rotate(2deg) scale(1.04); filter: drop-shadow(0 12px 15px rgba(48, 75, 137, .28)); }

.nova-right-panel {
  background:
    radial-gradient(circle at 70% 4%, rgba(88, 157, 255, .24), transparent 13rem),
    radial-gradient(circle at 20% 84%, rgba(115, 87, 230, .10), transparent 15rem),
    linear-gradient(180deg, rgba(246,251,255,.96), rgba(255,255,255,.98)) !important;
  border-color: rgba(91, 139, 195, .22) !important;
  box-shadow: 0 22px 60px rgba(22, 62, 111, .13) !important;
  backdrop-filter: blur(18px);
}
.rp-card, .rp-hint-item, .workflow-card {
  border-color: rgba(102, 145, 193, .18) !important;
  background: rgba(255,255,255,.7) !important;
  backdrop-filter: blur(12px);
}

.agent-head {
  background:
    radial-gradient(circle at 84% 0, rgba(99, 211, 190, .24), transparent 28%),
    linear-gradient(110deg, #0b61dd, #5c57d9 72%, #319f93) !important;
  box-shadow: 0 14px 34px rgba(41, 77, 171, .18);
}
.agent-head .a-ic img { filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); animation: aiAvatarFloat 4.4s ease-in-out infinite; }
.greeting, .msg.assistant {
  border-color: rgba(105, 145, 190, .22) !important;
  box-shadow: 0 10px 30px rgba(24, 59, 102, .06) !important;
}
.composer {
  background: rgba(247,250,254,.82) !important;
  backdrop-filter: blur(18px);
}
.composer textarea:focus { border-color: var(--ai-blue) !important; box-shadow: 0 0 0 4px rgba(11,111,245,.11) !important; }
.composer .send, .rp-newchat, .acard-btn.primary {
  background: linear-gradient(120deg, var(--ai-blue), var(--ai-violet) 72%, var(--ai-mint)) !important;
  background-size: 180% 100% !important;
  animation: aiTextFlow 6s ease infinite;
}

@keyframes aiOrbit { to { transform: rotate(360deg); } }
@keyframes aiTextFlow { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
@keyframes aiAvatarFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(2deg); } }

@media (max-width: 900px) {
  .agents-hero { width: calc(100% - 24px); margin-top: 12px; border-radius: 22px; }
  .agents-hero::after { opacity: .42; right: -50px; }
  .acard-avatar.agent-avatar-img { width: 58px !important; height: 58px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .agents-hero::after, .agents-hero h1 .hl, .agent-filter-btn.active, .agent-head .a-ic img, .composer .send, .rp-newchat, .acard-btn.primary { animation: none !important; }
  .acard, .acard::after, .acard-avatar.agent-avatar-img { transition: none !important; }
}