.xgrc-dev,
.xgrc-dev * { box-sizing: border-box; }

.xgrc-dev {
  --xgrc-dev-bg: #050813;
  --xgrc-dev-panel: rgba(13, 20, 39, .78);
  --xgrc-dev-card: rgba(18, 28, 51, .72);
  --xgrc-dev-line: rgba(151, 177, 224, .16);
  --xgrc-dev-muted: #91a2bf;
  --xgrc-dev-text: #f4f8ff;
  --xgrc-dev-violet: #8a7dff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  color: var(--xgrc-dev-text);
  border: 1px solid rgba(132, 161, 214, .14);
  border-radius: 32px;
  background:
    radial-gradient(circle at 77% 8%, color-mix(in srgb, var(--xgrc-dev-accent) 16%, transparent), transparent 29%),
    radial-gradient(circle at 16% 28%, rgba(99, 81, 255, .13), transparent 26%),
    linear-gradient(145deg, #070b18 0%, #050813 55%, #080d1c 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .035);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

.xgrc-dev button,
.xgrc-dev input,
.xgrc-dev textarea { font: inherit; }
.xgrc-dev button,
.xgrc-dev a { -webkit-tap-highlight-color: transparent; }
.xgrc-dev a { color: inherit; }
.xgrc-dev [hidden] { display: none !important; }

.xgrc-dev__backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9; }
.xgrc-dev__backdrop::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(120, 158, 220, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 158, 220, .045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000, transparent 64%);
}
.xgrc-dev__backdrop::after {
  content: ""; position: absolute; width: 40%; height: 1px; top: 32%; left: -42%;
  background: linear-gradient(90deg, transparent, var(--xgrc-dev-accent), transparent);
  box-shadow: 0 0 26px var(--xgrc-dev-accent); opacity: .6; animation: xgrc-dev-scan 8s ease-in-out infinite;
}
.xgrc-dev__backdrop > i { position: absolute; display: block; border-radius: 999px; filter: blur(70px); opacity: .12; }
.xgrc-dev__backdrop > i:nth-child(1) { width: 320px; height: 320px; right: 4%; top: 80px; background: var(--xgrc-dev-accent); animation: xgrc-dev-float 9s ease-in-out infinite; }
.xgrc-dev__backdrop > i:nth-child(2) { width: 240px; height: 240px; left: 8%; top: 380px; background: #745cff; animation: xgrc-dev-float 11s ease-in-out -3s infinite; }
.xgrc-dev__backdrop > i:nth-child(3) { width: 180px; height: 180px; right: 25%; bottom: 14%; background: #1f70ff; }

.xgrc-dev__platform-bar {
  min-height: 78px; padding: 0 42px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-bottom: 1px solid var(--xgrc-dev-line); background: rgba(4, 7, 17, .58); backdrop-filter: blur(18px);
}
.xgrc-dev__brand { display: flex; align-items: center; gap: 13px; }
.xgrc-dev__brand-mark {
  width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--xgrc-dev-accent) 50%, transparent);
  border-radius: 13px; background: linear-gradient(145deg, #7567ff, #27cfee);
  box-shadow: 0 0 28px color-mix(in srgb, var(--xgrc-dev-accent) 28%, transparent);
}
.xgrc-dev__brand-mark > i { width: 9px; height: 9px; border-radius: 2px; background: #fff; box-shadow: 0 0 14px rgba(255,255,255,.55); transform: rotate(45deg); }
.xgrc-dev__brand div { display: grid; gap: 2px; }
.xgrc-dev__brand strong { font-size: 15px; letter-spacing: .02em; }
.xgrc-dev__brand small { color: #72829d; font-size: 9px; letter-spacing: .18em; }
.xgrc-dev__platform-state { display: flex; align-items: center; gap: 9px; color: #99a9c3; font-size: 12px; }
.xgrc-dev__platform-state > i { width: 7px; height: 7px; border-radius: 50%; background: #4ef3a6; box-shadow: 0 0 14px #4ef3a6; animation: xgrc-dev-pulse 2s ease-in-out infinite; }
.xgrc-dev__platform-state > b { padding: 7px 10px; border: 1px solid var(--xgrc-dev-line); border-radius: 8px; color: var(--xgrc-dev-accent); font-size: 10px; letter-spacing: .08em; }

.xgrc-dev__hero { min-height: 510px; padding: 76px 7%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); align-items: center; gap: clamp(48px, 8vw, 120px); }
.xgrc-dev__hero-copy { position: relative; z-index: 2; }
.xgrc-dev__eyebrow { display: flex; align-items: center; gap: 9px; color: var(--xgrc-dev-accent); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.xgrc-dev__eyebrow > i { width: 28px; height: 1px; background: var(--xgrc-dev-accent); box-shadow: 0 0 12px var(--xgrc-dev-accent); }
.xgrc-dev__hero h2 { margin: 18px 0 20px; font-size: clamp(48px, 7vw, 82px); line-height: .98; letter-spacing: -.065em; color: #fff; text-shadow: 0 8px 40px rgba(105, 157, 255, .12); }
.xgrc-dev__hero-copy > p { max-width: 650px; margin: 0; color: #afbdd4; font-size: clamp(16px, 1.55vw, 19px); line-height: 1.9; }
.xgrc-dev__hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.xgrc-dev__primary,
.xgrc-dev__secondary {
  min-height: 50px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 28px;
  border-radius: 12px; text-decoration: none !important; cursor: pointer; font-weight: 750; transition: .25s ease;
}
.xgrc-dev__primary { border: 1px solid transparent; color: #061018 !important; background: linear-gradient(135deg, #e4fbff, var(--xgrc-dev-accent)); box-shadow: 0 14px 34px color-mix(in srgb, var(--xgrc-dev-accent) 18%, transparent); }
.xgrc-dev__primary:hover { transform: translateY(-2px); box-shadow: 0 18px 42px color-mix(in srgb, var(--xgrc-dev-accent) 28%, transparent); }
.xgrc-dev__primary span { font-size: 20px; line-height: 1; }
.xgrc-dev__secondary { border: 1px solid rgba(166, 188, 227, .24); color: #dce8fa; background: rgba(18, 27, 48, .64); }
.xgrc-dev__secondary:hover { border-color: rgba(166, 214, 255, .48); background: rgba(25, 39, 68, .78); }
.xgrc-dev__hero-trust { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; color: #7485a1; font-size: 11px; }
.xgrc-dev__hero-trust span { display: flex; align-items: center; gap: 6px; }
.xgrc-dev__hero-trust i { color: #51e8ab; font-style: normal; }

.xgrc-dev__hero-visual { position: relative; min-height: 350px; display: grid; place-items: center; perspective: 1000px; }
.xgrc-dev__hero-visual::before { content: ""; position: absolute; width: 84%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--xgrc-dev-accent) 14%, transparent), transparent 66%); filter: blur(2px); }
.xgrc-dev__orbit { position: absolute; width: 82%; aspect-ratio: 1; border: 1px solid rgba(111, 173, 255, .11); border-radius: 50%; transform: rotateX(64deg) rotateZ(-16deg); }
.xgrc-dev__orbit::before { content: ""; position: absolute; width: 7px; height: 7px; top: 48%; left: -4px; border-radius: 50%; background: var(--xgrc-dev-accent); box-shadow: 0 0 18px var(--xgrc-dev-accent); }
.xgrc-dev__orbit--two { width: 60%; transform: rotateX(68deg) rotateZ(34deg); opacity: .7; }
.xgrc-dev__console { position: relative; z-index: 2; width: min(100%, 455px); overflow: hidden; border: 1px solid rgba(154, 190, 246, .23); border-radius: 20px; background: rgba(7, 12, 27, .84); box-shadow: 0 38px 80px rgba(0, 0, 0, .42), 0 0 70px color-mix(in srgb, var(--xgrc-dev-accent) 9%, transparent); backdrop-filter: blur(20px); transform: rotateY(-5deg) rotateX(2deg); }
.xgrc-dev__console-head { min-height: 48px; padding: 0 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--xgrc-dev-line); background: rgba(255,255,255,.025); }
.xgrc-dev__console-head > span { display: flex; gap: 5px; }
.xgrc-dev__console-head > span i { width: 6px; height: 6px; border-radius: 50%; background: #42516c; }
.xgrc-dev__console-head b { color: #8999b4; font: 500 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.xgrc-dev__console-head em { justify-self: end; color: #50e9a9; font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.xgrc-dev__console-body { padding: 28px 18px; display: grid; gap: 11px; background: linear-gradient(135deg, rgba(79, 225, 255, .025), transparent); }
.xgrc-dev__code-line { display: grid; grid-template-columns: 24px 1fr; gap: 10px; color: #8391a9; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.xgrc-dev__code-line > b { color: #3f4d68; font-weight: 400; }
.xgrc-dev__code-line code { padding: 0; color: #bac8dc; background: none; white-space: nowrap; }
.xgrc-dev__code-line code i { color: var(--xgrc-dev-accent); font-style: normal; }
.xgrc-dev__console-result { min-height: 52px; padding: 0 18px; display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--xgrc-dev-line); color: #71809a; font-size: 9px; letter-spacing: .12em; }
.xgrc-dev__console-result > i { width: 7px; height: 7px; border-radius: 50%; background: #4cf0a5; box-shadow: 0 0 12px #4cf0a5; }
.xgrc-dev__console-result strong { margin-left: auto; color: #4cf0a5; font: 700 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.xgrc-dev__float-card { position: absolute; z-index: 3; min-width: 120px; padding: 13px 14px; display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; border: 1px solid rgba(152, 191, 247, .22); border-radius: 14px; background: rgba(9, 16, 34, .88); box-shadow: 0 20px 45px rgba(0,0,0,.32); backdrop-filter: blur(16px); animation: xgrc-dev-float 5s ease-in-out infinite; }
.xgrc-dev__float-card > i { grid-row: 1/3; align-self: center; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--xgrc-dev-accent); background: color-mix(in srgb, var(--xgrc-dev-accent) 10%, transparent); font: 700 11px/1 ui-monospace, monospace; }
.xgrc-dev__float-card span { color: #61708a; font-size: 8px; letter-spacing: .1em; }
.xgrc-dev__float-card strong { color: #dce8f8; font-size: 11px; }
.xgrc-dev__float-card--api { right: -6%; top: 12%; }
.xgrc-dev__float-card--safe { left: -7%; bottom: 8%; animation-delay: -2.4s; }

.xgrc-dev__bulletin { min-height: 62px; margin: 0 4%; padding: 0 20px; display: flex; align-items: center; gap: 18px; border: 1px solid var(--xgrc-dev-line); border-radius: 15px; background: linear-gradient(90deg, rgba(82, 113, 255, .09), rgba(79, 225, 255, .045), rgba(255,255,255,.025)); color: #8d9eb8; font-size: 12px; }
.xgrc-dev__bulletin > span { flex: 0 0 auto; padding: 7px 9px; border-radius: 7px; color: var(--xgrc-dev-accent); background: color-mix(in srgb, var(--xgrc-dev-accent) 9%, transparent); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.xgrc-dev__bulletin p { margin: 0; flex: 1; }
.xgrc-dev__bulletin p strong { color: #e2ecfa; }
.xgrc-dev__bulletin > i { color: #5c6b84; font-style: normal; font: 10px/1 ui-monospace, monospace; }

.xgrc-dev__login { margin: 38px 4% 54px; padding: 55px 24px; text-align: center; border: 1px solid var(--xgrc-dev-line); border-radius: 22px; background: var(--xgrc-dev-panel); }
.xgrc-dev__login-icon { width: 60px; height: 60px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 18px; color: #051019; background: var(--xgrc-dev-accent); font: 800 15px/1 ui-monospace, monospace; box-shadow: 0 0 35px color-mix(in srgb, var(--xgrc-dev-accent) 26%, transparent); }
.xgrc-dev__login h3 { margin: 0 0 8px; font-size: 24px; }
.xgrc-dev__login p { margin: 0 auto 22px; max-width: 600px; color: var(--xgrc-dev-muted); line-height: 1.75; }
.xgrc-dev__login a { display: inline-flex; min-height: 46px; padding: 0 20px; align-items: center; border-radius: 11px; color: #041118; background: var(--xgrc-dev-accent); text-decoration: none; font-weight: 800; }

.xgrc-dev__account { margin: 32px 4% 0; padding: 16px 18px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--xgrc-dev-line); border-radius: 16px; background: rgba(14, 22, 42, .72); backdrop-filter: blur(14px); }
.xgrc-dev__account-avatar { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #071019; background: linear-gradient(145deg, #e8fdff, var(--xgrc-dev-accent)); font-size: 15px; font-weight: 900; }
.xgrc-dev__account-copy { min-width: 0; display: grid; grid-template-columns: auto auto; align-items: end; gap: 2px 10px; }
.xgrc-dev__account-copy > span { grid-column: 1/-1; color: #63738f; font-size: 8px; letter-spacing: .14em; }
.xgrc-dev__account-copy > strong { color: #f1f6ff; font-size: 14px; }
.xgrc-dev__account-copy > code { padding: 0; color: #8191aa; background: none; font-size: 11px; }
.xgrc-dev__loading { margin-left: auto; color: #899ab5; font-size: 11px; }
.xgrc-dev__loading::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #4ceaa3; box-shadow: 0 0 10px #4ceaa3; }
.xgrc-dev__loading.is-busy::before { background: #ffbf5c; box-shadow: 0 0 10px #ffbf5c; }

.xgrc-dev__tabs { position: sticky; top: 10px; z-index: 10; margin: 14px 4% 0; padding: 7px; display: flex; gap: 4px; overflow-x: auto; border: 1px solid var(--xgrc-dev-line); border-radius: 15px; background: rgba(7, 12, 25, .84); backdrop-filter: blur(20px); scrollbar-width: none; }
.xgrc-dev__tabs::-webkit-scrollbar { display: none; }
.xgrc-dev__tabs button { flex: 1 0 auto; min-height: 42px; padding: 0 16px; border: 0 !important; border-radius: 10px; color: #8798b4 !important; background: transparent !important; box-shadow: none !important; cursor: pointer; font-size: 12px; font-weight: 700; transition: .22s ease; }
.xgrc-dev__tabs button:hover { color: #dce9fa !important; background: rgba(255,255,255,.04) !important; }
.xgrc-dev__tabs button.is-active { color: #f3fbff !important; background: linear-gradient(135deg, color-mix(in srgb, var(--xgrc-dev-accent) 16%, transparent), rgba(115, 93, 255, .12)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--xgrc-dev-accent) 22%, transparent) !important; }
.xgrc-dev__tabs button span { min-width: 18px; height: 18px; margin-left: 5px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 9px; color: #bdcae0; background: rgba(255,255,255,.08); font-size: 9px; }

.xgrc-dev__notice { position: sticky; top: 74px; z-index: 12; margin: 12px 4% 0; padding: 13px 15px; border: 1px solid; border-radius: 12px; font-size: 12px; backdrop-filter: blur(18px); }
.xgrc-dev__notice--info { border-color: #4d8dd1; color: #b7dafe; background: rgba(24, 65, 105, .88); }
.xgrc-dev__notice--success { border-color: #35a578; color: #bdf8dd; background: rgba(21, 76, 57, .9); }
.xgrc-dev__notice--error { border-color: #c85567; color: #ffd4da; background: rgba(90, 29, 40, .92); }

.xgrc-dev__view { padding: 58px 4% 64px; }
.xgrc-dev__section-head { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.xgrc-dev__section-head span,
.xgrc-dev__capability-title > span { color: var(--xgrc-dev-accent); font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.xgrc-dev__section-head h3,
.xgrc-dev__capability-title h3 { margin: 7px 0 5px; color: #f4f8ff; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.035em; }
.xgrc-dev__section-head p,
.xgrc-dev__capability-title p { margin: 0; color: var(--xgrc-dev-muted); font-size: 13px; line-height: 1.7; }
.xgrc-dev__section-head--overview > strong { display: flex; align-items: center; gap: 8px; color: #6f819e; font-size: 9px; letter-spacing: .14em; }
.xgrc-dev__section-head--overview > strong i { width: 7px; height: 7px; border-radius: 50%; background: #4ceaa3; box-shadow: 0 0 12px #4ceaa3; }

.xgrc-dev__metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.xgrc-dev__metrics article { position: relative; min-height: 148px; padding: 22px; overflow: hidden; border: 1px solid var(--xgrc-dev-line); border-radius: 18px; background: linear-gradient(145deg, rgba(19, 31, 56, .76), rgba(11, 17, 34, .72)); transition: .25s ease; }
.xgrc-dev__metrics article::after { content: ""; position: absolute; width: 95px; height: 95px; right: -35px; top: -35px; border: 1px solid color-mix(in srgb, var(--xgrc-dev-accent) 16%, transparent); border-radius: 50%; box-shadow: 0 0 40px color-mix(in srgb, var(--xgrc-dev-accent) 7%, transparent); }
.xgrc-dev__metrics article:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--xgrc-dev-accent) 32%, transparent); }
.xgrc-dev__metrics span { color: #8596b2; font-size: 11px; }
.xgrc-dev__metrics strong { display: block; margin: 10px 0 5px; color: #f7fbff; font-size: 34px; line-height: 1; letter-spacing: -.045em; }
.xgrc-dev__metrics small { color: #60708b; font-size: 10px; line-height: 1.5; }
.xgrc-dev__capability-title { margin: 55px 0 24px; }
.xgrc-dev__overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.xgrc-dev__feature { min-height: 225px; padding: 24px; border: 1px solid var(--xgrc-dev-line); border-radius: 18px; background: rgba(14, 22, 42, .66); transition: .25s ease; }
.xgrc-dev__feature:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--xgrc-dev-accent) 35%, transparent); background: rgba(18, 29, 53, .8); }
.xgrc-dev__feature i { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--xgrc-dev-accent) 22%, transparent); border-radius: 11px; color: var(--xgrc-dev-accent); background: color-mix(in srgb, var(--xgrc-dev-accent) 7%, transparent); font: 700 10px/1 ui-monospace, monospace; }
.xgrc-dev__feature h3 { margin: 34px 0 10px; color: #eaf2ff; font-size: 15px; }
.xgrc-dev__feature p { margin: 0; color: #8394b0; font-size: 12px; line-height: 1.75; }
.xgrc-dev__flow { margin-top: 16px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-around; gap: 10px; border: 1px solid var(--xgrc-dev-line); border-radius: 16px; color: #adbbd0; background: rgba(9, 15, 30, .7); font-size: 11px; }
.xgrc-dev__flow span { flex: 1; text-align: center; }
.xgrc-dev__flow b { color: var(--xgrc-dev-accent); font-weight: 400; }

.xgrc-dev__form { padding: clamp(20px, 3vw, 34px); border: 1px solid var(--xgrc-dev-line); border-radius: 22px; background: var(--xgrc-dev-panel); }
.xgrc-dev__form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.xgrc-dev__form > label { display: block; margin-top: 18px; }
.xgrc-dev__form label > span { display: block; margin-bottom: 8px; color: #aebcd1; font-size: 11px; font-weight: 650; }
.xgrc-dev__form input[type="text"],
.xgrc-dev__form input[type="email"],
.xgrc-dev__form input[type="url"],
.xgrc-dev__form textarea { width: 100%; padding: 13px 14px; border: 1px solid rgba(151,177,224,.18); border-radius: 11px; outline: 0; color: #edf5ff; background: rgba(4, 9, 20, .76); font-size: 13px; transition: .2s; }
.xgrc-dev__form textarea { resize: vertical; }
.xgrc-dev__form input:focus,
.xgrc-dev__form textarea:focus { border-color: color-mix(in srgb, var(--xgrc-dev-accent) 65%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--xgrc-dev-accent) 8%, transparent); }
.xgrc-dev__capabilities { margin: 24px 0 0; padding: 18px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; border: 1px solid var(--xgrc-dev-line); border-radius: 16px; }
.xgrc-dev__capabilities legend { padding: 0 8px; color: #c8d5e8; font-size: 12px; font-weight: 700; }
.xgrc-dev__capabilities label { padding: 11px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid rgba(151,177,224,.1); border-radius: 11px; background: rgba(255,255,255,.02); cursor: pointer; }
.xgrc-dev__capabilities label:hover { border-color: rgba(151,205,255,.27); }
.xgrc-dev__capabilities label span { margin: 0; color: #96a7c0; font-size: 11px; line-height: 1.5; }
.xgrc-dev__capabilities code { display: block; margin-bottom: 2px; color: var(--xgrc-dev-accent); background: none; font-size: 10px; }
.xgrc-dev__agreement { padding: 16px; display: flex !important; gap: 10px; border: 1px solid rgba(242, 188, 80, .18); border-radius: 13px; background: rgba(97, 65, 12, .13); }
.xgrc-dev__agreement span { margin: 0 !important; color: #bbaa88 !important; font-weight: 400 !important; line-height: 1.7; }
.xgrc-dev__form-actions { margin-top: 22px; display: flex; align-items: center; gap: 14px; }
.xgrc-dev__form-actions button,
.xgrc-dev__docs article > button,
.xgrc-dev__docs article > a { min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; color: #061118; background: var(--xgrc-dev-accent); text-decoration: none; cursor: pointer; font-size: 12px; font-weight: 800; }
.xgrc-dev__form-actions small { color: #74849d; font-size: 10px; }

.xgrc-dev__list,
.xgrc-dev__demo-grid { display: grid; gap: 14px; }
.xgrc-dev__application-card,
.xgrc-dev__project-card,
.xgrc-dev__demo-card,
.xgrc-dev__empty { padding: 24px; border: 1px solid var(--xgrc-dev-line); border-radius: 19px; background: linear-gradient(145deg, rgba(18, 28, 51, .78), rgba(10, 16, 32, .75)); }
.xgrc-dev__application-card > header,
.xgrc-dev__project-card > header,
.xgrc-dev__demo-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.xgrc-dev__application-card header span,
.xgrc-dev__project-card header span,
.xgrc-dev__demo-card header span { color: var(--xgrc-dev-accent); font-size: 9px; letter-spacing: .08em; }
.xgrc-dev__application-card h4,
.xgrc-dev__project-card h4,
.xgrc-dev__demo-card h4 { margin: 5px 0; color: #eff6ff; font-size: 18px; }
.xgrc-dev__application-card header p,
.xgrc-dev__project-card header p,
.xgrc-dev__demo-card header p { margin: 0; color: #7e8da6; font-size: 11px; }
.xgrc-dev__status { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; color: #b9c8dc; background: rgba(255,255,255,.06); font-size: 9px; }
.xgrc-dev__status--approved,
.xgrc-dev__status--active,
.xgrc-dev__status--online { color: #72efb6; background: rgba(54, 206, 143, .1); }
.xgrc-dev__status--pending,
.xgrc-dev__status--in_review { color: #ffd27d; background: rgba(255, 182, 52, .1); }
.xgrc-dev__status--rejected,
.xgrc-dev__status--withdrawn { color: #ff9ca9; background: rgba(255, 89, 112, .1); }
.xgrc-dev__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.xgrc-dev__chips code { padding: 6px 8px; border: 1px solid rgba(151,177,224,.12); border-radius: 7px; color: #9eb0ca; background: rgba(255,255,255,.025); font-size: 9px; }
.xgrc-dev__admin-note,
.xgrc-dev__project-warning,
.xgrc-dev__demo-safe { margin-top: 16px; padding: 13px 14px; border: 1px solid rgba(255,197,95,.16); border-radius: 11px; color: #ad9c7c; background: rgba(111,72,9,.1); font-size: 10px; line-height: 1.6; }
.xgrc-dev__admin-note span { color: #d8bd86; font-size: 9px; font-weight: 800; }
.xgrc-dev__admin-note p { margin: 4px 0 0; }
.xgrc-dev__application-card > footer,
.xgrc-dev__project-actions { margin-top: 18px; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--xgrc-dev-line); color: #74839c; font-size: 10px; }
.xgrc-dev__ghost { min-height: 34px; padding: 0 12px; border: 1px solid rgba(154,181,222,.2); border-radius: 9px; color: #b8c7da; background: rgba(255,255,255,.025); cursor: pointer; font-size: 10px; }
.xgrc-dev__ghost:hover { border-color: rgba(170,211,255,.4); background: rgba(255,255,255,.05); }
.xgrc-dev__project-data,
.xgrc-dev__demo-telemetry { margin-top: 18px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.xgrc-dev__project-data > div,
.xgrc-dev__demo-telemetry > div { padding: 13px; border: 1px solid rgba(151,177,224,.1); border-radius: 11px; background: rgba(4,9,20,.4); }
.xgrc-dev__project-data span,
.xgrc-dev__demo-telemetry span { display: block; margin-bottom: 4px; color: #687a96; font-size: 9px; }
.xgrc-dev__project-data strong,
.xgrc-dev__demo-telemetry strong { color: #dfe9f7; font-size: 11px; word-break: break-word; }
.xgrc-dev__demo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.xgrc-dev__demo-card.is-featured { border-color: color-mix(in srgb, var(--xgrc-dev-accent) 30%, transparent); box-shadow: inset 0 0 50px color-mix(in srgb, var(--xgrc-dev-accent) 3%, transparent); }
.xgrc-dev__demo-description { color: #8f9fba; font-size: 12px; line-height: 1.7; }
.xgrc-dev__demo-telemetry { grid-template-columns: repeat(2,minmax(0,1fr)); }
.xgrc-dev__demo-controls { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.xgrc-dev__demo-controls button { min-height: 34px; padding: 0 11px; border: 1px solid rgba(151,177,224,.16); border-radius: 8px; color: #b3c3d9; background: rgba(255,255,255,.03); cursor: pointer; font-size: 9px; }
.xgrc-dev__demo-controls button:hover { border-color: color-mix(in srgb, var(--xgrc-dev-accent) 45%, transparent); color: #effaff; }
.xgrc-dev__demo-controls button:disabled { opacity: .4; cursor: not-allowed; }
.xgrc-dev__demo-controls .xgrc-dev__demo-reset { margin-left: auto; color: #ffb6c0; }
.xgrc-dev__empty { text-align: center; }
.xgrc-dev__empty strong { color: #e2ebf8; }
.xgrc-dev__empty p { margin: 7px 0 0; color: #7b8ca7; font-size: 12px; }

.xgrc-dev__docs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.xgrc-dev__docs article { padding: 24px; border: 1px solid var(--xgrc-dev-line); border-radius: 18px; background: var(--xgrc-dev-card); }
.xgrc-dev__docs h4 { margin: 0 0 10px; color: #eaf2ff; font-size: 15px; }
.xgrc-dev__docs p,
.xgrc-dev__docs li { color: #899ab4; font-size: 11px; line-height: 1.75; }
.xgrc-dev__docs article > code { display: block; margin: 12px 0; padding: 13px; overflow-wrap: anywhere; border: 1px solid rgba(151,177,224,.12); border-radius: 10px; color: var(--xgrc-dev-accent); background: rgba(4,9,20,.5); font-size: 10px; }
.xgrc-dev__docs-wide { grid-column: 1/-1; }
.xgrc-dev__docs ul { margin: 0; padding-left: 18px; }
.xgrc-dev__docs li + li { margin-top: 5px; }

@keyframes xgrc-dev-scan { 0%, 10% { transform: translateX(0); opacity: 0; } 45% { opacity: .55; } 90%, 100% { transform: translateX(360%); opacity: 0; } }
@keyframes xgrc-dev-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes xgrc-dev-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

@media (max-width: 1024px) {
  .xgrc-dev__hero { padding: 60px 5%; grid-template-columns: 1fr 420px; gap: 45px; }
  .xgrc-dev__overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .xgrc-dev__feature { min-height: 200px; }
  .xgrc-dev__metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .xgrc-dev { border-radius: 24px; }
  .xgrc-dev__platform-bar { padding: 0 24px; }
  .xgrc-dev__hero { min-height: auto; padding: 58px 7% 68px; grid-template-columns: 1fr; }
  .xgrc-dev__hero-copy { text-align: center; }
  .xgrc-dev__eyebrow,
  .xgrc-dev__hero-actions,
  .xgrc-dev__hero-trust { justify-content: center; }
  .xgrc-dev__hero-copy > p { margin-inline: auto; }
  .xgrc-dev__hero-visual { width: min(100%, 520px); margin: 0 auto; }
  .xgrc-dev__float-card--api { right: 0; }
  .xgrc-dev__float-card--safe { left: 0; }
  .xgrc-dev__demo-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .xgrc-dev { margin-inline: -4px; width: calc(100% + 8px); border-radius: 20px; }
  .xgrc-dev__platform-bar { min-height: 68px; padding: 0 16px; }
  .xgrc-dev__platform-state span { display: none; }
  .xgrc-dev__hero { padding: 48px 18px 54px; gap: 32px; }
  .xgrc-dev__hero h2 { font-size: clamp(44px, 17vw, 64px); }
  .xgrc-dev__hero-copy > p { font-size: 15px; line-height: 1.75; }
  .xgrc-dev__hero-actions { display: grid; }
  .xgrc-dev__primary,
  .xgrc-dev__secondary { width: 100%; }
  .xgrc-dev__hero-trust { gap: 10px 16px; }
  .xgrc-dev__hero-visual { min-height: 275px; }
  .xgrc-dev__console { width: 94%; transform: none; }
  .xgrc-dev__console-body { padding: 22px 13px; }
  .xgrc-dev__code-line { grid-template-columns: 18px 1fr; gap: 5px; font-size: 9px; }
  .xgrc-dev__float-card { min-width: 105px; padding: 10px; }
  .xgrc-dev__float-card--api { top: 0; }
  .xgrc-dev__float-card--safe { bottom: -4px; }
  .xgrc-dev__bulletin { margin-inline: 14px; padding: 13px; align-items: flex-start; flex-wrap: wrap; gap: 8px 10px; }
  .xgrc-dev__bulletin p { flex-basis: calc(100% - 85px); line-height: 1.55; }
  .xgrc-dev__bulletin > i { display: none; }
  .xgrc-dev__account { margin: 24px 14px 0; }
  .xgrc-dev__account-copy { display: grid; grid-template-columns: 1fr; }
  .xgrc-dev__account-copy > span { grid-column: auto; }
  .xgrc-dev__account-copy code { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .xgrc-dev__loading { font-size: 0; }
  .xgrc-dev__loading::before { margin: 0; }
  .xgrc-dev__tabs { top: 6px; margin-inline: 14px; }
  .xgrc-dev__tabs button { flex: 0 0 auto; padding-inline: 14px; }
  .xgrc-dev__view { padding: 44px 14px 50px; }
  .xgrc-dev__section-head { align-items: flex-start; }
  .xgrc-dev__section-head--overview > strong { display: none; }
  .xgrc-dev__metrics,
  .xgrc-dev__overview-grid,
  .xgrc-dev__form-grid,
  .xgrc-dev__capabilities,
  .xgrc-dev__docs { grid-template-columns: 1fr; }
  .xgrc-dev__metrics article { min-height: 128px; }
  .xgrc-dev__feature { min-height: auto; }
  .xgrc-dev__feature h3 { margin-top: 24px; }
  .xgrc-dev__flow { overflow-x: auto; justify-content: flex-start; }
  .xgrc-dev__flow span { flex: 0 0 auto; }
  .xgrc-dev__form-actions { align-items: flex-start; flex-direction: column; }
  .xgrc-dev__form-actions button { width: 100%; }
  .xgrc-dev__project-data { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .xgrc-dev__docs-wide { grid-column: auto; }
  .xgrc-dev__application-card > header,
  .xgrc-dev__project-card > header,
  .xgrc-dev__demo-card > header { flex-direction: column; }
}

@media (max-width: 390px) {
  .xgrc-dev__brand small { display: none; }
  .xgrc-dev__platform-state > b { display: none; }
  .xgrc-dev__float-card { display: none; }
  .xgrc-dev__hero-visual { min-height: 235px; }
  .xgrc-dev__project-data,
  .xgrc-dev__demo-telemetry { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .xgrc-dev *,
  .xgrc-dev *::before,
  .xgrc-dev *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}

html[data-xiaogou-theme="day"] .xgrc-dev {
  --xgrc-dev-panel: rgba(255, 255, 255, .78);
  --xgrc-dev-card: rgba(255, 255, 255, .84);
  --xgrc-dev-line: rgba(32, 57, 96, .12);
  --xgrc-dev-muted: #64738b;
  --xgrc-dev-text: #10192c;
  color: var(--xgrc-dev-text);
  border-color: rgba(33, 59, 99, .13);
  background:
    radial-gradient(circle at 77% 8%, color-mix(in srgb, var(--xgrc-dev-accent) 14%, transparent), transparent 29%),
    radial-gradient(circle at 16% 28%, rgba(103, 91, 242, .09), transparent 26%),
    linear-gradient(145deg, #ffffff 0%, #f5f8fd 58%, #edf4fb 100%);
  box-shadow: 0 30px 80px rgba(37, 61, 98, .12), inset 0 1px rgba(255,255,255,.9);
}
html[data-xiaogou-theme="day"] .xgrc-dev__backdrop::before { opacity: .55; }
html[data-xiaogou-theme="day"] .xgrc-dev__platform-bar { background: rgba(255,255,255,.7); }
html[data-xiaogou-theme="day"] .xgrc-dev__brand strong,
html[data-xiaogou-theme="day"] .xgrc-dev__hero h2,
html[data-xiaogou-theme="day"] .xgrc-dev__section-head h3,
html[data-xiaogou-theme="day"] .xgrc-dev__capability-title h3,
html[data-xiaogou-theme="day"] .xgrc-dev__feature h3,
html[data-xiaogou-theme="day"] .xgrc-dev__metrics strong,
html[data-xiaogou-theme="day"] .xgrc-dev__application-card h4,
html[data-xiaogou-theme="day"] .xgrc-dev__project-card h4,
html[data-xiaogou-theme="day"] .xgrc-dev__demo-card h4,
html[data-xiaogou-theme="day"] .xgrc-dev__docs h4 { color: #111b30; text-shadow: none; }
html[data-xiaogou-theme="day"] .xgrc-dev__hero-copy > p,
html[data-xiaogou-theme="day"] .xgrc-dev__section-head p,
html[data-xiaogou-theme="day"] .xgrc-dev__capability-title p,
html[data-xiaogou-theme="day"] .xgrc-dev__feature p { color: #5f6e86; }
html[data-xiaogou-theme="day"] .xgrc-dev__secondary,
html[data-xiaogou-theme="day"] .xgrc-dev__account,
html[data-xiaogou-theme="day"] .xgrc-dev__tabs,
html[data-xiaogou-theme="day"] .xgrc-dev__metrics article,
html[data-xiaogou-theme="day"] .xgrc-dev__feature,
html[data-xiaogou-theme="day"] .xgrc-dev__flow,
html[data-xiaogou-theme="day"] .xgrc-dev__form,
html[data-xiaogou-theme="day"] .xgrc-dev__application-card,
html[data-xiaogou-theme="day"] .xgrc-dev__project-card,
html[data-xiaogou-theme="day"] .xgrc-dev__demo-card,
html[data-xiaogou-theme="day"] .xgrc-dev__empty,
html[data-xiaogou-theme="day"] .xgrc-dev__docs article { border-color: rgba(32,57,96,.12); background: rgba(255,255,255,.76); box-shadow: 0 12px 35px rgba(38,61,96,.055); }
html[data-xiaogou-theme="day"] .xgrc-dev__secondary { color: #283750; }
html[data-xiaogou-theme="day"] .xgrc-dev__account-copy > strong,
html[data-xiaogou-theme="day"] .xgrc-dev__project-data strong,
html[data-xiaogou-theme="day"] .xgrc-dev__demo-telemetry strong { color: #18243b; }
html[data-xiaogou-theme="day"] .xgrc-dev__tabs button { color: #5e6f89 !important; }
html[data-xiaogou-theme="day"] .xgrc-dev__tabs button:hover { color: #17233a !important; background: rgba(34,79,128,.05) !important; }
html[data-xiaogou-theme="day"] .xgrc-dev__tabs button.is-active { color: #087b9f !important; background: linear-gradient(135deg, rgba(45,200,234,.14), rgba(105,104,247,.08)) !important; }
html[data-xiaogou-theme="day"] .xgrc-dev__bulletin { background: linear-gradient(90deg, rgba(82,113,255,.07), rgba(79,225,255,.08), rgba(255,255,255,.7)); }
html[data-xiaogou-theme="day"] .xgrc-dev__bulletin p strong { color: #25324a; }
html[data-xiaogou-theme="day"] .xgrc-dev__form :is(input[type="text"], input[type="email"], input[type="url"], textarea),
html[data-xiaogou-theme="day"] .xgrc-dev__project-data > div,
html[data-xiaogou-theme="day"] .xgrc-dev__demo-telemetry > div { border-color: rgba(32,57,96,.13); background: rgba(246,249,253,.94); color: #162139; }
html[data-xiaogou-theme="day"] .xgrc-dev__form :is(input, textarea) { color: #162139; }
html[data-xiaogou-theme="day"] .xgrc-dev__console { border-color: rgba(95,126,178,.2); box-shadow: 0 28px 70px rgba(33,59,98,.15); }