:root {
  --ink: #090d14;
  --ink-2: #111722;
  --panel-dark: #151c29;
  --line-dark: rgba(255, 255, 255, 0.1);
  --paper: #f2f5ee;
  --paper-2: #e8ece3;
  --card: #ffffff;
  --text: #eef3eb;
  --muted: #8f9baa;
  --text-dark: #111820;
  --muted-dark: #66717d;
  --accent: #b8f34a;
  --accent-strong: #a5e831;
  --accent-ink: #172009;
  --danger: #ff6b6b;
  --cyan: #53d9ff;
  --border: #dfe4da;
  --shadow: 0 28px 80px rgba(2, 7, 15, 0.36);
  --radius: 20px;
  --font: "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
svg { display: block; }
::selection { background: var(--accent); color: var(--accent-ink); }

.site-page, .auth-page {
  color: var(--text);
  background:
    radial-gradient(circle at 75% -15%, rgba(67, 133, 255, 0.14), transparent 32%),
    linear-gradient(180deg, #090d14 0%, #0c1119 55%, #080b11 100%);
  overflow-x: hidden;
}
.ambient {
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.28;
  pointer-events: none;
}
.ambient-a { width: 38vw; height: 38vw; left: -15vw; top: 18vh; background: #3c6dff; }
.ambient-b { width: 30vw; height: 30vw; right: -10vw; top: 52vh; background: #8abf24; opacity: 0.12; }

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 39px;
  height: 39px;
  display: block;
  flex: 0 0 auto;
  border-radius: 11px;
  object-fit: cover;
  box-shadow: 0 0 28px rgba(184, 243, 74, 0.14);
}
.brand-mark.small { width: 31px; height: 31px; border-radius: 9px; }
.brand-word { display: inline-flex; align-items: baseline; gap: 7px; font-size: 20px; font-weight: 760; letter-spacing: 1px; }
.brand-word span { color: var(--accent); font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: 1.7px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-weight: 680;
  font-size: 14px;
  line-height: 1;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:focus-visible, .icon-button:focus-visible, .copy-button:focus-visible, .sidebar-link:focus-visible {
  outline: 3px solid rgba(184, 243, 74, 0.45);
  outline-offset: 2px;
}
.button-primary { color: var(--accent-ink); background: var(--accent); box-shadow: 0 9px 28px rgba(184, 243, 74, 0.16); }
.button-primary:hover { background: var(--accent-strong); box-shadow: 0 12px 34px rgba(184, 243, 74, 0.24); }
.button-secondary { color: var(--text); background: rgba(255, 255, 255, 0.04); border-color: var(--line-dark); }
.button-secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
.button-ghost { color: #b7c1cc; background: transparent; }
.button-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.button-danger-outline { color: #e35e5e; background: transparent; border-color: #f0c6c3; }
.button-danger-outline:hover { background: #fff1ef; }
.button-large { min-height: 52px; padding: 0 24px; border-radius: 13px; font-size: 15px; }
.button-small { min-height: 36px; padding: 0 14px; font-size: 13px; }
.button-block { width: 100%; }
.arrow { font-size: 18px; line-height: 1; }

.site-nav {
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav-links { display: flex; align-items: center; gap: 32px; color: #8f9ba8; font-size: 14px; font-weight: 560; }
.nav-links a { transition: color 160ms ease; }
.nav-links a:hover { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 8px; }

.hero {
  width: min(1240px, calc(100% - 64px));
  margin: 66px auto 88px;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: 76px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #aab6c4;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(184, 243, 74, 0.09); animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(184, 243, 74, 0); } }
.hero h1 {
  margin: 22px 0 22px;
  font-size: clamp(48px, 5.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -4.6px;
  font-weight: 720;
}
.gradient-text {
  color: transparent;
  background: linear-gradient(100deg, #f3f7ef 5%, #c7fa69 50%, #6fd7a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-lead { max-width: 580px; margin: 0; color: #96a3b1; font-size: 17px; line-height: 1.8; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 26px; margin-top: 35px; color: #697687; font-size: 12px; flex-wrap: wrap; }
.hero-meta span { display: flex; align-items: center; gap: 7px; }
.hero-meta strong { color: #c8d1db; font-family: var(--mono); font-size: 11px; }

.hero-visual { position: relative; min-width: 0; }
.visual-glow { position: absolute; inset: 8% 3% 15%; border-radius: 50%; background: rgba(90, 145, 255, 0.2); filter: blur(80px); }
.terminal-window {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 500px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(28, 38, 55, 0.96), rgba(12, 18, 28, 0.98));
  box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, 0.06);
  transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
}
.terminal-topbar { height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-bottom: 1px solid var(--line-dark); background: rgba(255, 255, 255, 0.025); }
.window-dot { width: 9px; height: 9px; border-radius: 50%; }
.dot-red { background: #ff6f67; }
.dot-yellow { background: #ffd061; }
.dot-green { background: #6edc72; }
.terminal-title { margin-left: auto; margin-right: auto; color: #718092; font-family: var(--mono); font-size: 11px; }
.terminal-body { padding: 34px 30px; font-family: var(--mono); font-size: 12px; }
.terminal-line { margin-bottom: 17px; color: #c2cbd6; }
.terminal-line b { color: #f4f7f4; font-weight: 500; }
.terminal-line.muted { color: #5f6e7f; }
.terminal-line.small { margin-top: 28px; font-size: 10px; }
.terminal-line.success { margin-top: 24px; color: var(--accent); }
.prompt { color: var(--accent); margin-right: 9px; }
.check { margin-right: 9px; }
.route-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 22px 0 10px;
  padding: 19px;
  border: 1px solid rgba(184, 243, 74, 0.2);
  border-radius: 14px;
  background: rgba(184, 243, 74, 0.055);
}
.route-card.compact { border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); }
.route-label { display: block; margin-bottom: 7px; color: #6c7c8e; font-family: var(--font); font-size: 10px; }
.route-card strong { color: #eef3eb; font-size: 13px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 99px; font-family: var(--font); font-size: 10px; }
.status-pill.online { color: #cffa80; background: rgba(184, 243, 74, 0.1); }
.status-pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.route-arrow { color: var(--accent); font-size: 20px; }.floating-card {
  position: absolute;
  z-index: 2;
  right: -24px;
  bottom: -30px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px;
  background: rgba(18, 25, 37, 0.92);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
}
.floating-card div { display: flex; flex-direction: column; gap: 3px; }
.floating-card strong { font-size: 12px; }
.floating-card small { color: #718092; font-size: 10px; }
.floating-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; background: rgba(184, 243, 74, 0.1); color: var(--accent); font-size: 23px; }

.trust-strip {
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
  padding: 27px 0;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  color: #5e6a78;
  font-size: 11px;
  letter-spacing: 0.8px;
}
.trust-items { display: flex; gap: clamp(24px, 5vw, 72px); font-family: var(--mono); }

.section { width: min(1160px, calc(100% - 64px)); margin: 150px auto; }
.section-heading { max-width: 690px; margin-bottom: 48px; }
.section-heading.align-left { margin-left: 0; }
.section-heading h2 { margin: 20px 0 16px; font-size: clamp(36px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -2.8px; font-weight: 700; }
.section-heading p { color: #8592a1; font-size: 15px; line-height: 1.75; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.feature-card { min-height: 270px; padding: 31px; border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgba(255, 255, 255, 0.025); transition: transform 200ms ease, border-color 200ms ease, background 200ms ease; }
.feature-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); }
.feature-card.feature-primary { background: linear-gradient(145deg, rgba(184, 243, 74, 0.12), rgba(184, 243, 74, 0.025)); border-color: rgba(184, 243, 74, 0.2); }
.feature-icon { width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid var(--line-dark); border-radius: 13px; color: var(--accent); font-size: 20px; background: rgba(255, 255, 255, 0.03); }
.feature-card h3 { margin: 31px 0 13px; font-size: 20px; letter-spacing: -0.5px; }
.feature-card p { max-width: 430px; margin: 0; color: #82909f; font-size: 14px; line-height: 1.75; }
.mini-domain { display: inline-block; margin-top: 25px; padding: 9px 12px; border-radius: 8px; color: #9eaa9f; background: rgba(0, 0, 0, 0.2); font-family: var(--mono); font-size: 11px; }
.mini-domain span { color: var(--accent); }

.how-section { padding-top: 20px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; background: var(--line-dark); }
.step-card { min-height: 255px; padding: 30px; background: #0d121b; }
.step-number { color: var(--accent); font-family: var(--mono); font-size: 11px; }
.step-card h3 { margin: 74px 0 12px; font-size: 17px; }
.step-card p { margin: 0; color: #7c8998; font-size: 13px; line-height: 1.75; }

.security-section { margin-top: 110px; }
.security-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 70px; padding: clamp(38px, 6vw, 74px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 27px; background: linear-gradient(125deg, #17201a, #101720 55%, #111824); }
.security-card::after { content: ""; position: absolute; width: 340px; height: 340px; right: -140px; top: -180px; border-radius: 50%; background: rgba(184, 243, 74, 0.12); filter: blur(45px); }
.security-card h2 { margin: 19px 0 17px; font-size: clamp(32px, 4vw, 46px); line-height: 1.1; letter-spacing: -2px; }
.security-card p { color: #8b9a94; font-size: 14px; line-height: 1.8; }
.security-list { position: relative; z-index: 1; display: flex; flex-direction: column; }
.security-list div { display: flex; align-items: center; gap: 17px; padding: 17px 0; border-bottom: 1px solid var(--line-dark); }
.security-list div:first-child { border-top: 1px solid var(--line-dark); }
.security-list span { color: #53655b; font-family: var(--mono); font-size: 10px; }
.security-list strong { font-size: 13px; font-weight: 580; }.final-cta { width: min(1240px, calc(100% - 64px)); margin: 145px auto; }
.final-cta-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding: 55px; border-radius: 25px; background: linear-gradient(120deg, #b8f34a, #99e36c); color: var(--accent-ink); }
.final-cta .eyebrow { color: #4d651c; }
.final-cta h2 { margin: 16px 0 0; font-size: clamp(38px, 4.5vw, 58px); line-height: 1.03; letter-spacing: -2.5px; }
.final-cta .button-primary { color: var(--text); background: #0c1215; box-shadow: none; }
.site-footer { width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding: 30px 0 42px; border-top: 1px solid var(--line-dark); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #667280; font-size: 11px; }
.footer-links { display: flex; gap: 20px; }
.footer-links a:hover { color: #fff; }

.auth-page { min-height: 100vh; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(340px, 0.92fr) minmax(500px, 1.08fr); }
.auth-story { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 46px clamp(38px, 6vw, 92px); border-right: 1px solid var(--line-dark); background: linear-gradient(150deg, rgba(255, 255, 255, 0.035), transparent 50%); }
.auth-story-copy { margin: auto 0; padding: 60px 0; }
.auth-story h1 { margin: 20px 0; font-size: clamp(43px, 4.7vw, 68px); line-height: 1.03; letter-spacing: -3.5px; font-weight: 700; }
.auth-story p { max-width: 490px; color: #8a97a5; font-size: 15px; line-height: 1.8; }
.auth-signal { display: flex; align-items: center; gap: 20px; padding-top: 25px; border-top: 1px solid var(--line-dark); }
.auth-signal div:last-child { display: flex; flex-direction: column; gap: 4px; }
.auth-signal strong { font-size: 12px; }
.auth-signal small { color: #697685; font-size: 10px; }
.signal-rings { position: relative; width: 48px; height: 48px; display: grid; place-items: center; }
.signal-rings i { position: absolute; inset: 0; border: 1px solid rgba(184, 243, 74, 0.22); border-radius: 50%; animation: ring 2.5s infinite; }
.signal-rings i:nth-child(2) { inset: 7px; animation-delay: 0.25s; }
.signal-rings i:nth-child(3) { inset: 14px; animation-delay: 0.5s; }
.signal-rings span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
@keyframes ring { 50% { opacity: 0.35; transform: scale(1.06); } }
.mini-timeline { display: flex; flex-direction: column; gap: 16px; padding-top: 26px; border-top: 1px solid var(--line-dark); }
.timeline-item { display: flex; align-items: center; gap: 13px; opacity: 0.52; }
.timeline-item.done { opacity: 1; }
.timeline-item > span { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; color: #748291; font-family: var(--mono); font-size: 10px; }
.timeline-item.done > span { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.timeline-item div { display: flex; flex-direction: column; gap: 3px; }
.timeline-item strong { font-size: 12px; }
.timeline-item small { color: #6f7c8a; font-size: 10px; }
.auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px clamp(28px, 6vw, 80px); }
.auth-card { width: min(440px, 100%); padding: 38px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; background: rgba(19, 26, 38, 0.76); box-shadow: 0 35px 90px rgba(0, 0, 0, 0.25); backdrop-filter: blur(20px); }
.auth-card-wide { width: min(490px, 100%); }
.auth-kicker { color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.auth-heading h2 { margin: 11px 0 9px; font-size: 30px; letter-spacing: -1.2px; }
.auth-heading p { margin: 0; color: #7f8c9a; font-size: 12px; }
.auth-heading a { color: #d9e5d3; font-weight: 600; border-bottom: 1px solid #65744f; }
.form-stack { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span:first-child { color: #b5c0cb; font-size: 12px; font-weight: 600; }
.field > span:first-child small { margin-left: 5px; color: #606e7e; font-size: 10px; font-weight: 400; }
.input-wrap { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 11px; background: rgba(3, 8, 15, 0.4); transition: border-color 160ms ease, box-shadow 160ms ease; }
.input-wrap:focus-within { border-color: rgba(184, 243, 74, 0.58); box-shadow: 0 0 0 4px rgba(184, 243, 74, 0.06); }
.input-wrap svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: #617080; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.input-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; color: #f0f4ed; background: transparent; font-size: 13px; }
.input-wrap input::placeholder { color: #4f5c6c; }
.password-toggle { flex: 0 0 auto; border: 0; color: #707e8d; background: transparent; font-size: 10px; }
.password-toggle:hover { color: var(--accent); }
.domain-input input { font-family: var(--mono); }
.domain-suffix { flex: 0 0 auto; color: #667484; font-family: var(--mono); font-size: 11px; }
.form-error { display: none; padding: 10px 12px; border: 1px solid rgba(255, 107, 107, 0.25); border-radius: 9px; color: #ff9b96; background: rgba(255, 107, 107, 0.07); font-size: 11px; line-height: 1.5; }
.form-error.visible { display: block; }
.auth-footnote { margin-top: 22px; padding-top: 19px; border-top: 1px solid var(--line-dark); color: #596675; font-size: 10px; line-height: 1.6; text-align: center; }
.back-link { margin-top: 25px; color: #6f7b88; font-size: 11px; }
.back-link:hover { color: #fff; }
.button-loader { display: none; width: 15px; height: 15px; border: 2px solid rgba(0, 0, 0, 0.22); border-top-color: var(--accent-ink); border-radius: 50%; animation: spin 700ms linear infinite; }
.is-loading .button-label { display: none; }
.is-loading .button-loader { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }.dashboard-page { color: var(--text-dark); background: var(--paper); }
.dashboard-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 18px 20px; color: var(--text); background: #0c1119; border-right: 1px solid rgba(0, 0, 0, 0.3); }
.sidebar-brand { padding: 0 10px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 5px; margin-top: 42px; }
.nav-section-label { padding: 0 12px; margin: 0 0 6px; color: #495667; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.nav-section-label.secondary { margin-top: 25px; }
.sidebar-link { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 9px; color: #7f8b99; font-size: 12px; font-weight: 560; transition: color 160ms ease, background 160ms ease; }
.sidebar-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-link:hover { color: #e4eae1; background: rgba(255, 255, 255, 0.04); }
.sidebar-link.active { color: var(--accent); background: rgba(184, 243, 74, 0.09); }
.sidebar-footer { margin-top: auto; }
.server-indicator { display: flex; align-items: flex-start; gap: 10px; margin: 0 4px 18px; padding: 13px; border: 1px solid var(--line-dark); border-radius: 10px; }
.server-indicator .live-dot { margin-top: 4px; flex: 0 0 auto; }
.server-indicator div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.server-indicator strong { font-size: 10px; }
.server-indicator small { overflow: hidden; color: #5d6a79; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.user-mini { display: flex; align-items: center; gap: 10px; padding: 13px 4px 0; border-top: 1px solid var(--line-dark); }
.avatar { width: 33px; height: 33px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: var(--accent-ink); background: var(--accent); font-size: 12px; font-weight: 800; }
.user-mini div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.user-mini strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.user-mini small { color: #596675; font-size: 9px; }
.dashboard-main { min-width: 0; }
.topbar { height: 70px; display: flex; align-items: center; gap: 20px; padding: 0 clamp(22px, 3vw, 44px); border-bottom: 1px solid var(--border); background: rgba(242, 245, 238, 0.88); backdrop-filter: blur(14px); }
.breadcrumb { display: flex; align-items: center; gap: 9px; color: #8a939b; font-size: 11px; }
.breadcrumb b { color: #c9cec7; font-weight: 400; }
.breadcrumb strong { color: #4d5963; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar .button-ghost { color: #5b6670; }
.topbar .button-ghost:hover { color: #111820; background: #e7ebe3; }
.connection-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 99px; color: #6e7881; background: rgba(255, 255, 255, 0.5); font-size: 10px; }
.connection-chip i { width: 6px; height: 6px; border-radius: 50%; background: #a8b0b4; }
.connection-chip.online { color: #46650a; border-color: #d2e5a9; background: #f0f8dc; }
.connection-chip.online i { background: #7fb900; box-shadow: 0 0 0 3px rgba(127, 185, 0, 0.12); }
.connection-chip.offline { color: #8b5c25; border-color: #ead9bd; background: #fff8eb; }
.connection-chip.offline i { background: #e39b32; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; color: #46515c; background: #fff; font-size: 22px; line-height: 1; }
.mobile-menu { display: none; background: transparent; }
.mobile-menu span { width: 16px; height: 1.5px; background: #46515c; margin: 2px 0; }
.dashboard-content { width: min(1180px, calc(100% - 56px)); margin: 0 auto; padding: 45px 0 24px; }
.dashboard-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.dashboard-intro .eyebrow { color: #8b9894; }
.dashboard-intro h1 { margin: 11px 0 7px; font-size: clamp(29px, 3vw, 40px); letter-spacing: -1.6px; font-weight: 700; }
.dashboard-intro p { margin: 0; color: var(--muted-dark); font-size: 12px; }
.dashboard-intro .button-primary { box-shadow: none; }
.panel { border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: 0 8px 30px rgba(30, 42, 31, 0.035); }
.tunnel-hero { position: relative; overflow: hidden; min-height: 235px; padding: clamp(27px, 3.5vw, 42px); background: linear-gradient(125deg, #101720, #17231b 72%, #26361d); color: var(--text); border: 0; }
.tunnel-hero::after { content: ""; position: absolute; width: 280px; height: 280px; right: 7%; top: -110px; border-radius: 50%; background: rgba(184, 243, 74, 0.13); filter: blur(50px); }
.tunnel-hero-copy { position: relative; z-index: 2; max-width: 660px; }
.status-heading { display: flex; align-items: center; gap: 14px; }
.large-status-dot { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%; background: #78828c; box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.03); }
.large-status-dot.online { background: var(--accent); box-shadow: 0 0 0 7px rgba(184, 243, 74, 0.1), 0 0 24px rgba(184, 243, 74, 0.5); }
.large-status-dot.offline { background: #f0a13a; box-shadow: 0 0 0 7px rgba(240, 161, 58, 0.08); }
.section-label { color: #7b8794; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 1.2px; }
.tunnel-hero .section-label { color: #65757b; }
.tunnel-hero h2 { margin: 7px 0 0; font-size: 24px; letter-spacing: -0.8px; }
.tunnel-hero-copy > p { margin: 18px 0 21px; color: #87958e; font-size: 12px; }
.public-url { display: inline-flex; align-items: center; max-width: 100%; padding: 10px 11px 10px 14px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 9px; background: rgba(0, 0, 0, 0.2); font-family: var(--mono); font-size: 12px; }
.url-protocol { color: #65747d; }
.public-url strong { overflow: hidden; color: #e9f1e6; text-overflow: ellipsis; white-space: nowrap; }
.tunnel-hero-aside { position: absolute; z-index: 2; right: clamp(28px, 4vw, 48px); bottom: clamp(28px, 3.5vw, 41px); display: flex; flex-direction: column; align-items: stretch; gap: 9px; width: 228px; }
.tunnel-hero-aside .button-primary { min-height: 43px; font-size: 12px; box-shadow: none; }
.tunnel-hero-aside .button-secondary { color: #bac6bd; border-color: rgba(255, 255, 255, 0.13); font-size: 11px; }
.tunnel-hero-aside small { color: #5f6e67; font-size: 9px; text-align: center; }
.copy-button { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: 6px; color: #75827c; background: transparent; }
.copy-button:hover { color: var(--accent); background: rgba(255, 255, 255, 0.06); }
.copy-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero-orbit { position: absolute; right: -24px; top: -45px; width: 250px; height: 250px; border: 1px solid rgba(184, 243, 74, 0.06); border-radius: 50%; }
.hero-orbit i { position: absolute; inset: 35px; border: 1px solid rgba(184, 243, 74, 0.05); border-radius: 50%; }
.hero-orbit i:nth-child(2) { inset: 70px; }
.hero-orbit i:nth-child(3) { inset: 105px; }
.dashboard-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; margin-top: 16px; }
.domain-panel, .key-panel, .client-panel, .activity-panel { padding: 27px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.panel-heading h2 { margin: 8px 0 5px; font-size: 19px; letter-spacing: -0.5px; }
.panel-heading p { margin: 0; color: var(--muted-dark); font-size: 11px; line-height: 1.5; }
.panel-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #6c811c; background: #f4f9e8; font-size: 20px; }
.key-icon { color: #6a5e92; background: #f3f0fa; font-size: 16px; }.domain-form { margin-top: 27px; }
.domain-form > label { display: block; margin-bottom: 8px; color: #6e7881; font-size: 10px; font-weight: 600; }
.domain-editor { display: flex; align-items: center; overflow: hidden; min-height: 46px; border: 1px solid var(--border); border-radius: 9px; background: #fafbf8; }
.domain-editor:focus-within { border-color: #8cb62f; box-shadow: 0 0 0 4px rgba(140, 182, 47, 0.09); }
.domain-editor input { width: 100%; min-width: 0; padding: 0 13px; border: 0; outline: 0; color: var(--text-dark); background: transparent; font-family: var(--mono); font-size: 12px; }
.domain-editor span { max-width: 60%; overflow: hidden; padding: 0 13px; color: #89928d; font-family: var(--mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.domain-form .form-error { margin-top: 9px; color: #b34c42; background: #fff2f0; border-color: #f1cac4; }
.panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; }
.panel-footer small { color: #909995; font-size: 9px; }
.panel-footer .button-secondary { color: #4e5b4c; border-color: #dbe2d6; background: #f7f9f4; }
.key-display { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 27px; padding: 14px; border: 1px solid #e5e6ee; border-radius: 9px; background: #f9f8fc; font-family: var(--mono); font-size: 12px; }
.key-display > span:first-child { overflow: hidden; color: #39354b; text-overflow: ellipsis; white-space: nowrap; }
.key-lock { flex: 0 0 auto; padding: 4px 7px; border-radius: 99px; color: #82779c; background: #f0ecf7; font-family: var(--font); font-size: 8px; }
.key-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: #9a9fa5; font-size: 9px; }
.key-meta strong { color: #767e86; font-weight: 600; }
.key-panel .button-block { margin-top: 21px; }
.client-panel .quick-steps { display: flex; flex-direction: column; gap: 15px; margin: 24px 0; padding: 0; list-style: none; }
.quick-steps li { display: flex; align-items: center; gap: 12px; }
.quick-steps li > span { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #657c18; background: #f2f8e2; font-family: var(--mono); font-size: 9px; }
.quick-steps div { display: flex; flex-direction: column; gap: 3px; }
.quick-steps strong { font-size: 11px; font-weight: 650; }
.quick-steps small { color: #929a96; font-size: 9px; }
.endpoint-box { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px dashed #d8ddd5; border-radius: 9px; background: #fafbf8; }
.endpoint-box > span { color: #98a09b; font-size: 8px; white-space: nowrap; }
.endpoint-box code { min-width: 0; overflow: hidden; flex: 1; color: #626d66; font-family: var(--mono); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.endpoint-box .copy-button:hover { color: #5f7416; background: #f0f5e8; }
.activity-list { display: flex; flex-direction: column; margin-top: 19px; }
.activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-top: 1px solid #f0f2ed; }
.activity-item:first-child { border-top: 0; }
.activity-dot { width: 6px; height: 6px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%; background: #b9c3b6; }
.activity-item:first-child .activity-dot { background: #8db92c; }
.activity-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.activity-copy strong { overflow: hidden; font-size: 10px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.activity-copy small { color: #a2a9a5; font-size: 8px; }
.empty-activity { padding: 25px 0; color: #9ba39e; font-size: 10px; text-align: center; }
.dashboard-footer { display: flex; justify-content: space-between; padding: 25px 2px 4px; color: #a2aaa5; font-size: 9px; }

.modal { width: min(540px, calc(100% - 32px)); padding: 30px; border: 0; border-radius: 18px; color: var(--text-dark); background: #fff; box-shadow: 0 35px 100px rgba(8, 18, 10, 0.35); }
.modal::backdrop { background: rgba(6, 12, 9, 0.68); backdrop-filter: blur(5px); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.modal h2 { margin: 8px 0 0; font-size: 23px; letter-spacing: -0.8px; }
.modal p { margin: 19px 0; color: #68736d; font-size: 11px; line-height: 1.7; }
.modal .icon-button { border-color: #e4e8e1; }
.key-reveal { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 15px; border: 1px solid #d9dfd4; border-radius: 10px; background: #f7f9f4; }
.key-reveal code { min-width: 0; overflow: auto; flex: 1; color: #354129; font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.modal-warning { margin-top: 14px; padding: 11px 13px; border-radius: 9px; color: #8b6327; background: #fff7e7; font-size: 9px; line-height: 1.6; }
.modal .button-block { margin-top: 18px; }
.modal .button-secondary { color: #4f5a51; border-color: #dce1da; background: #f7f9f5; }
.toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; max-width: min(380px, calc(100% - 48px)); padding: 13px 17px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 10px; color: #eaf0e7; background: rgba(18, 26, 21, 0.95); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 180ms ease, transform 180ms ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { border-color: rgba(255, 107, 107, 0.3); }

.error-page { display: grid; place-items: center; color: var(--text); background: var(--ink); }
.error-card { width: min(520px, calc(100% - 40px)); padding: 45px; border: 1px solid var(--line-dark); border-radius: 22px; background: var(--ink-2); text-align: center; }
.error-card .brand-mark { margin: 0 auto 24px; }
.error-card h1 { margin: 0 0 12px; font-size: 30px; letter-spacing: -1px; }
.error-card p { margin: 0 0 25px; color: var(--muted); font-size: 13px; line-height: 1.7; }@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; gap: 60px; margin-top: 35px; }
  .hero-copy { max-width: 760px; }
  .hero-visual { width: min(680px, 100%); }
  .terminal-window { transform: none; }
  .floating-card { right: 20px; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-story { min-height: 420px; padding: 38px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .auth-story-copy { padding: 75px 0 40px; }
  .auth-panel { padding: 60px 24px; }
  .tunnel-hero-aside { position: relative; right: auto; bottom: auto; margin-top: 25px; width: 100%; max-width: 300px; }
  .tunnel-hero { min-height: 0; }
}

@media (max-width: 820px) {
  .site-nav, .hero, .trust-strip, .section, .final-cta, .site-footer { width: min(100% - 36px, 720px); }
  .site-nav { min-height: 78px; }
  .nav-links { display: none; }
  .nav-actions .button-ghost { display: none; }
  .hero { margin-top: 25px; margin-bottom: 75px; }
  .hero h1 { font-size: clamp(43px, 13vw, 67px); letter-spacing: -3.5px; }
  .hero-lead { font-size: 15px; }
  .terminal-window { min-height: 430px; }
  .terminal-body { padding: 27px 22px; }
  .floating-card { right: 10px; bottom: -25px; }
  .trust-strip { align-items: flex-start; flex-direction: column; gap: 18px; }
  .trust-items { flex-wrap: wrap; gap: 18px 32px; }
  .section { margin: 100px auto; }
  .feature-grid, .steps-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 230px; }
  .security-card { grid-template-columns: 1fr; gap: 32px; }
  .final-cta-inner { align-items: flex-start; flex-direction: column; padding: 36px 29px; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .dashboard-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 20; left: 0; top: 0; width: 250px; transform: translateX(-100%); transition: transform 220ms ease; box-shadow: 25px 0 70px rgba(0, 0, 0, 0.28); }
  .sidebar.open { transform: translateX(0); }
  .mobile-menu { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .breadcrumb { display: none; }
  .topbar { height: 64px; padding: 0 18px; }
  .dashboard-content { width: calc(100% - 30px); padding-top: 30px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .tunnel-hero { padding: 28px; }
  .tunnel-hero h2 { font-size: 21px; }
}

@media (max-width: 560px) {
  .button-large { width: 100%; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-meta { gap: 13px; flex-direction: column; }
  .terminal-window { min-height: 400px; }
  .route-card { align-items: flex-start; flex-direction: column; }
  .status-pill { align-self: flex-start; }
  .floating-card { display: none; }
  .auth-story { min-height: 340px; padding: 28px 22px; }
  .auth-story h1 { font-size: 43px; }
  .auth-story-copy { padding: 50px 0 25px; }
  .auth-card { padding: 27px 21px; }
  .domain-suffix { display: none; }
  .auth-panel { padding: 35px 16px; }
  .topbar-actions .button { display: none; }
  .dashboard-intro { align-items: flex-start; flex-direction: column; }
  .dashboard-intro .button { width: 100%; }
  .domain-panel, .key-panel, .client-panel, .activity-panel { padding: 21px; }
  .panel-footer { align-items: flex-start; flex-direction: column; }
  .key-meta { flex-direction: column; gap: 5px; }
  .public-url { width: 100%; font-size: 10px; }
  .modal { padding: 23px; }
  .key-reveal { align-items: stretch; flex-direction: column; }
  .key-reveal .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}