:root {
  --v3-bg: #020615;
  --v3-bg-soft: #050b20;
  --v3-panel: rgba(7, 16, 39, .92);
  --v3-panel-2: rgba(10, 22, 53, .9);
  --v3-border: rgba(94, 111, 188, .34);
  --v3-text: #f8f9ff;
  --v3-muted: #939cb8;
  --v3-purple: #7947ff;
  --v3-blue: #2e5cff;
  --v3-cyan: #00e5c4;
  --v3-shadow: 0 0 34px rgba(77, 54, 255, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.v3-page {
  margin: 0;
  min-width: 320px;
  color: var(--v3-text);
  background:
    radial-gradient(circle at 83% 13%, rgba(30, 34, 205, .22), transparent 23%),
    radial-gradient(circle at 45% 26%, rgba(75, 22, 196, .18), transparent 28%),
    var(--v3-bg);
  font: 15px/1.65 Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  overflow-x: hidden;
}

button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
.v3-container { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.v3-aurora {
  position: fixed;
  z-index: -1;
  inset: -20%;
  pointer-events: none;
  background: radial-gradient(circle at 72% 15%, rgba(47, 33, 255, .14), transparent 22%);
  animation: v3Aurora 9s ease-in-out infinite alternate;
}

.v3-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 76px;
  border-bottom: 1px solid rgba(84, 102, 171, .13);
  background: rgba(2, 6, 21, .82);
  backdrop-filter: blur(18px);
}
.v3-header-inner { height: 100%; display: flex; align-items: center; gap: 38px; }
.v3-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 230px; }
.v3-brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 26px;
  background: linear-gradient(145deg, #184dff, #713cff);
  box-shadow: 0 0 25px rgba(68, 67, 255, .55), inset 0 1px rgba(255,255,255,.35);
}
.v3-brand b { display: block; font-size: 19px; line-height: 1.25; }
.v3-brand small { display: block; color: var(--v3-muted); font-size: 11px; letter-spacing: .5px; }
.v3-nav { display: flex; align-items: center; justify-content: center; gap: 38px; flex: 1; }
.v3-nav a { position: relative; padding: 26px 0 22px; font-weight: 650; color: #e1e4f0; white-space: nowrap; }
.v3-nav a:hover, .v3-nav a.active { color: #a985ff; }
.v3-nav a.active::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 14px;
  height: 2px;
  background: #8456ff;
  box-shadow: 0 0 12px #7848ff;
}
.v3-header-actions { display: flex; align-items: center; gap: 18px; }
.v3-language { border: 0; background: none; color: #c8cede; cursor: pointer; white-space: nowrap; }
.v3-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 22px;
  border: 1px solid rgba(142, 120, 255, .55);
  border-radius: 10px;
  color: #fff;
  background: transparent;
  font-weight: 750;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.v3-button:hover { transform: translateY(-2px); border-color: #9b7bff; }
.v3-button-primary {
  background: linear-gradient(135deg, #5d31ef, #704bff 55%, #4d5eff);
  box-shadow: 0 0 24px rgba(100, 63, 255, .46), inset 0 1px rgba(255,255,255,.35);
}
.v3-button-primary:hover { box-shadow: 0 0 36px rgba(105, 70, 255, .66); }
.v3-button-large { min-height: 48px; padding: 0 28px; }
.v3-button-ghost { background: rgba(5, 12, 31, .55); border-color: rgba(148, 158, 205, .4); }

.v3-hero { position: relative; min-height: 570px; padding: 76px 0 46px; overflow: hidden; }
.v3-hero::before {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  right: -120px;
  top: -60px;
  opacity: .55;
  background: repeating-radial-gradient(ellipse at center, transparent 0 21px, rgba(72,69,255,.09) 22px 23px);
  transform: rotate(-16deg);
}
.v3-grid-floor {
  position: absolute;
  left: 28%;
  right: -12%;
  bottom: -170px;
  height: 430px;
  transform: perspective(400px) rotateX(61deg);
  transform-origin: bottom;
  background-image: linear-gradient(rgba(30,48,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(30,48,255,.22) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to top, #000, transparent 78%);
}
.v3-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 38% 62%; align-items: center; }
.v3-hero-copy { position: relative; z-index: 5; padding: 0 8px 0 0; }
.v3-kicker { display: none; color: #8363ff; font-size: 11px; letter-spacing: 2px; }
.v3-hero h1 { margin: 0 0 22px; font-size: clamp(34px, 3.3vw, 49px); line-height: 1.34; letter-spacing: -1.5px; }
.v3-hero h1 em { color: #7e4dff; font-style: normal; text-shadow: 0 0 25px rgba(114, 66, 255, .4); }
.v3-hero-copy > p { max-width: 400px; margin: 0 0 28px; color: #9aa3bc; font-size: 16px; line-height: 2; }
.v3-hero-actions { display: flex; gap: 14px; }
.v3-trust { display: flex; gap: 23px; margin-top: 28px; color: #a6afc6; font-size: 12px; }
.v3-trust i { color: #00bfe8; margin-right: 5px; text-shadow: 0 0 9px #00bfe8; }

.v3-dashboard-stage { position: relative; height: 440px; margin-left: 15px; }
.v3-dashboard {
  position: absolute;
  z-index: 3;
  width: 590px;
  height: 365px;
  top: 0;
  right: 12px;
  overflow: hidden;
  border: 1px solid rgba(87, 90, 255, .75);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(9,16,46,.97), rgba(4,10,30,.98));
  box-shadow: 0 0 10px rgba(53,66,255,.8), 0 0 62px rgba(43,36,255,.34), inset 0 1px rgba(255,255,255,.12);
  transform: perspective(1100px) rotateY(-1.5deg);
}
.v3-dash-head { display: flex; align-items: center; height: 43px; padding: 0 15px; border-bottom: 1px solid rgba(78,94,160,.2); }
.v3-mini-brand { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 750; }
.v3-mini-brand i { color: #7256ff; }
.v3-dash-body { display: grid; grid-template-columns: 105px 1fr; height: calc(100% - 43px); }
.v3-dash-side { padding: 15px 9px; border-right: 1px solid rgba(73,90,155,.2); }
.v3-dash-side b, .v3-dash-side span { display: block; padding: 8px 10px; border-radius: 6px; color: #8993b2; font-size: 9px; }
.v3-dash-side b { color: #fff; background: linear-gradient(90deg, #482bb8, #3033a9); }
.v3-dash-main { padding: 13px; }
.v3-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.v3-metrics > div { min-height: 58px; padding: 8px 10px; border: 1px solid rgba(77,94,157,.2); border-radius: 7px; background: rgba(8,18,43,.72); }
.v3-metrics small { display: block; color: #8f99b7; font-size: 8px; }
.v3-metrics strong { display: block; margin: 3px 0; font-size: 16px; line-height: 1; }
.v3-metrics em { color: #00dc99; font-size: 7px; font-style: normal; }
.v3-charts { display: grid; grid-template-columns: 1.65fr 1fr; gap: 9px; margin-top: 9px; }
.v3-line-panel, .v3-donut-panel, .v3-lower-panels > div { border: 1px solid rgba(77,94,157,.2); border-radius: 8px; background: rgba(8,18,43,.76); }
.v3-line-panel, .v3-donut-panel { height: 127px; padding: 10px; }
.v3-panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; color: #dce1f1; font-size: 9px; }
.v3-line-panel svg { width: 100%; height: 88px; overflow: visible; filter: drop-shadow(0 0 4px rgba(119,68,255,.55)); }
.v3-donut-wrap { display: flex; align-items: center; gap: 10px; height: 88px; }
.v3-donut { position: relative; width: 68px; aspect-ratio: 1; flex: 0 0 68px; border-radius: 50%; background: conic-gradient(#7144ff 0 66%, #2557ff 66% 86%, #00d6c5 86%); box-shadow: 0 0 18px rgba(93,61,255,.35); }
.v3-donut::after { content: "12,842\A 活跃成员"; white-space: pre; position: absolute; inset: 12px; display: grid; place-items: center; text-align: center; border-radius: 50%; background: #08132d; font-size: 8px; line-height: 1.35; }
.v3-donut-panel ul { margin: 0; padding: 0; list-style: none; color: #a3acc4; font-size: 7px; line-height: 2; }
.v3-lower-panels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 9px; }
.v3-lower-panels > div { height: 75px; padding: 9px; color: #9aa4c1; font-size: 7px; }
.v3-lower-panels strong { display: block; margin-bottom: 7px; color: #fff; font-size: 9px; }
.v3-video-thumb { height: 35px; border-radius: 5px; background: linear-gradient(135deg, rgba(0,181,255,.25), rgba(87,31,255,.7)), radial-gradient(circle at 70% 40%, #00def2, transparent 25%), #101646; }

.v3-float-card {
  position: absolute;
  z-index: 7;
  border: 1px solid rgba(64,89,177,.45);
  border-radius: 10px;
  color: #aab3cb;
  background: linear-gradient(145deg, rgba(9,21,50,.96), rgba(4,11,29,.97));
  box-shadow: 0 12px 35px rgba(0,0,0,.4), 0 0 22px rgba(54,54,255,.2);
  animation: v3Float 4.5s ease-in-out infinite;
}
.v3-float-card strong { display: block; color: #fff; }
.v3-float-one { right: -94px; top: 122px; width: 106px; padding: 14px; font-size: 9px; }
.v3-float-one strong { margin: 6px 0; font-size: 16px; }
.v3-mini-donut { width: 50px; height: 50px; margin: 8px auto 0; border-radius: 50%; background: conic-gradient(#e58d16 0 60%, #172951 60%); mask: radial-gradient(circle, transparent 47%, #000 49%); }
.v3-float-publish { left: -56px; bottom: 5px; width: 106px; padding: 14px; font-size: 9px; }
.v3-float-publish strong { margin: 5px 0; font-size: 20px; }
.v3-float-two { right: -94px; top: 245px; width: 106px; padding: 14px; font-size: 9px; animation-delay: -2s; }
.v3-float-two strong { margin: 6px 0; font-size: 15px; }

.v3-section { position: relative; padding: 36px 0 52px; border-top: 1px solid rgba(69,80,147,.2); }
.v3-section-head { margin: 0 auto 30px; text-align: center; }
.v3-section-head h2 { margin: 0 0 8px; font-size: 28px; }
.v3-section-head p { margin: 0; color: var(--v3-muted); }
.v3-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.v3-chain article, .v3-plugin-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--v3-border);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(10,19,48,.88), rgba(3,9,28,.95));
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.v3-chain article { min-height: 150px; padding: 22px 20px; }
.v3-chain article::after, .v3-plugin-grid article::after { content: ""; position: absolute; width: 90px; height: 90px; right: -40px; top: -42px; border-radius: 50%; background: rgba(83,51,255,.09); }
.v3-chain article:hover, .v3-plugin-grid article:hover { transform: translateY(-5px); border-color: rgba(112,77,255,.8); box-shadow: var(--v3-shadow); }
.v3-chain i, .v3-plugin-top i { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 13px; border-radius: 11px; color: #fff; font-size: 23px; background: linear-gradient(145deg, #6039db, #353fc9); box-shadow: 0 0 18px rgba(92,57,231,.35); }
.v3-chain h3, .v3-plugin-grid h3 { margin: 0 0 7px; font-size: 17px; }
.v3-chain p, .v3-plugin-grid p { margin: 0; color: #929cb5; font-size: 12px; line-height: 1.8; }
.v3-chain a, .v3-plugin-grid a { display: inline-block; margin-top: 13px; color: #8b58ff; font-size: 11px; font-weight: 700; }

.v3-plugins { padding-top: 30px; background: linear-gradient(180deg, transparent, rgba(4,10,27,.65)); }
.v3-plugin-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.v3-plugin-grid article { min-height: 162px; padding: 17px; }
.v3-plugin-top { display: flex; align-items: flex-start; justify-content: space-between; }
.v3-plugin-top i { width: 38px; height: 38px; margin: 0; font-size: 19px; }
.v3-plugin-top span { color: #00e6bd; font-size: 9px; font-weight: 700; }
.v3-plugin-grid small { position: absolute; left: 17px; bottom: 15px; color: #7d87a3; }

.v3-cta-section { padding: 35px 0 46px; }
.v3-cta {
  position: relative;
  min-height: 120px;
  padding: 24px 280px 24px 215px;
  display: flex;
  align-items: center;
  border: 1px solid #4935e1;
  border-radius: 14px;
  background: radial-gradient(circle at 15% 50%, rgba(57,65,255,.35), transparent 22%), linear-gradient(100deg, #091039, #100d48 48%, #121458);
  box-shadow: 0 0 35px rgba(52,44,243,.24);
  overflow: hidden;
}
.v3-cta h2 { margin: 0 0 4px; font-size: 25px; }
.v3-cta p { margin: 0; color: #aab2c8; }
.v3-cta > .v3-button { position: absolute; right: 40px; top: 35px; min-width: 200px; }
.v3-cta-art { position: absolute; left: 35px; width: 145px; height: 100px; }
.v3-cta-art::before { content: "✈"; position: absolute; left: 37px; top: 16px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 15px; font-size: 31px; background: linear-gradient(145deg,#185fff,#7240ff); box-shadow: 0 0 28px #4c3cff; transform: rotate(-10deg); }
.v3-cta-art::after { content: "✦  ◇  ✧"; position: absolute; top: 28px; left: 0; color: #8374ff; font-size: 22px; letter-spacing: 24px; opacity: .75; }

.v3-footer { border-top: 1px solid rgba(76,88,147,.22); padding: 23px 0; color: #747e9a; font-size: 11px; }
.v3-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.v3-footer-brand { display: inline-flex; align-items: center; gap: 10px; color: #e8ebf5; font-weight: 700; }
.v3-footer-brand i { color: #7a4dff; font-size: 20px; }
.v3-footer nav, .v3-role-links { display: flex; gap: 24px; }
.v3-footer a:hover { color: #9a73ff; }
.v3-role-links a { color: #a890ff; }

.landing-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 22px; visibility: hidden; opacity: 0; transition: opacity .18s ease, visibility .18s ease; }
.landing-modal.is-open { visibility: visible; opacity: 1; }
.landing-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0,3,14,.82); backdrop-filter: blur(10px); cursor: default; }
.landing-login-panel { position: relative; z-index: 1; width: min(430px,100%); padding: 30px; border: 1px solid rgba(103,81,238,.75); border-radius: 16px; background: #081127; box-shadow: 0 0 55px rgba(73,52,255,.38); transform: translateY(12px); transition: transform .2s ease; }
.landing-modal.is-open .landing-login-panel { transform: translateY(0); }
.landing-login-close { position: absolute; right: 15px; top: 14px; width: 36px; height: 36px; border: 0; border-radius: 9px; background: #111d37; color: #a5aec5; font-size: 20px; cursor: pointer; }
.landing-login-close:hover { color: #fff; background: #1c2947; }
.landing-login-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg,#7049ff,#4d7cff); font-size: 22px; }
.landing-login-panel h2 { margin: 18px 0 5px; color: #fff; }
.landing-login-panel > p { margin: 0 0 20px; color: #929cb8; }
.landing-login-panel label { display: block; margin: 13px 0 6px; color: #e9edfa; font-weight: 650; }
.landing-input { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 13px; border: 1px solid #2a3658; border-radius: 9px; background: #071024; }
.landing-input:focus-within { border-color: #7654ff; box-shadow: 0 0 0 3px rgba(112,73,255,.13); }
.landing-input > i { color: #7885a3; }
.landing-input input { width: 100%; height: 44px; padding: 0; border: 0; outline: 0; color: #fff; background: transparent; font: inherit; }
.landing-input input::placeholder { color: #6f7a96; }
.landing-input button { border: 0; color: #8f9ab5; background: transparent; cursor: pointer; }
.landing-login-submit { width: 100%; min-height: 46px; margin-top: 20px; border: 1px solid #8464ff; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#7049ff,#565cff); font: inherit; font-weight: 750; cursor: pointer; }
.landing-login-submit:hover { filter: brightness(1.08); }
.landing-error { margin-bottom: 10px; padding: 10px 12px; border: 1px solid #713a45; border-radius: 9px; color: #ffabb8; background: #351c25; }
.landing-login-foot { display: flex; justify-content: center; gap: 20px; margin-top: 17px; font-size: 13px; }
.landing-login-foot a { color: #a890ff; }
.landing-modal-open { overflow: hidden; }

@keyframes v3Float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes v3Aurora { from { transform: translate3d(-1%,0,0) scale(1); } to { transform: translate3d(2%,1%,0) scale(1.04); } }

@media (max-width: 1040px) {
  .v3-nav { gap: 20px; }
  .v3-language { display: none; }
  .v3-brand { min-width: 190px; }
  .v3-hero-inner { grid-template-columns: 40% 60%; }
  .v3-dashboard-stage { transform: scale(.84); transform-origin: left center; width: 119%; }
  .v3-plugin-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .v3-container { width: min(100% - 30px, 680px); }
  .v3-header { height: 66px; }
  .v3-header-inner { gap: 12px; }
  .v3-brand { min-width: 0; }
  .v3-brand small, .v3-nav, .v3-language { display: none; }
  .v3-header-actions { margin-left: auto; }
  .v3-login-button { padding: 0 14px; min-height: 38px; }
  .v3-hero { padding-top: 50px; }
  .v3-hero-inner { display: block; }
  .v3-hero-copy { max-width: 600px; text-align: center; margin: 0 auto 36px; }
  .v3-hero-copy > p { margin-left: auto; margin-right: auto; }
  .v3-hero-actions, .v3-trust { justify-content: center; }
  .v3-dashboard-stage { width: 590px; max-width: 100%; height: 405px; margin: 0 auto; transform: scale(.92); transform-origin: top center; }
  .v3-dashboard { right: 0; left: 0; margin: auto; max-width: 100%; }
  .v3-float-one, .v3-float-two { right: -10px; }
  .v3-float-publish { left: -10px; }
  .v3-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .v3-plugin-grid { grid-template-columns: repeat(2, 1fr); }
  .v3-cta { padding: 26px 28px; display: block; text-align: center; }
  .v3-cta-art { display: none; }
  .v3-cta > .v3-button { position: static; margin-top: 18px; }
  .v3-footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 560px) {
  .v3-brand-mark { width: 39px; height: 39px; font-size: 22px; }
  .v3-brand b { font-size: 16px; }
  .v3-header .v3-button { font-size: 12px; }
  .v3-hero h1 { font-size: 31px; }
  .v3-hero-actions { flex-direction: column; }
  .v3-trust { gap: 10px; flex-wrap: wrap; }
  .v3-dashboard-stage { height: 298px; transform: scale(.66); width: 590px; max-width: none; margin-left: 50%; translate: -50% 0; }
  .v3-float-one, .v3-float-two { right: 0; }
  .v3-feature-grid, .v3-plugin-grid { grid-template-columns: 1fr; }
  .v3-section-head h2 { font-size: 23px; }
  .v3-footer nav, .v3-role-links { gap: 14px; flex-wrap: wrap; justify-content: center; }
}