:root {
  --bg: #f2f6f9;
  --bg-overlay: rgba(244, 249, 252, 0.76);
  --panel: rgba(255, 255, 255, 0.72);
  --panel-2: rgba(250, 252, 254, 0.88);
  --text: #12273a;
  --muted: #5b758c;
  --line: rgba(31, 88, 128, 0.12);
  --line-strong: rgba(20, 136, 185, 0.28);
  --cyan: #1288b8;
  --teal: #1cbaa5;
  --accent: #ffffff;
  --shadow: 0 18px 44px rgba(22, 53, 77, 0.12);
  --button-text: #04111d;
}

:root[data-theme="dark"] {
  --bg: #07111f;
  --bg-overlay: rgba(6, 17, 31, 0.68);
  --panel: rgba(9, 21, 36, 0.74);
  --panel-2: rgba(10, 24, 41, 0.9);
  --text: #f4f9ff;
  --muted: #b7cadb;
  --line: rgba(132, 194, 255, 0.18);
  --line-strong: rgba(114, 221, 255, 0.38);
  --cyan: #72ddff;
  --teal: #41f4cf;
  --accent: rgba(255, 255, 255, 0.06);
  --shadow: 0 22px 50px rgba(0, 0, 0, 0.32);
  --button-text: #04111d;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  overflow-x: hidden;
  transition: background 180ms ease, color 180ms ease;
}

.bg-image {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--bg-overlay), rgba(8, 16, 30, 0.12)),
    url("./background.svg") center center / cover no-repeat;
  opacity: 1;
  filter: brightness(1.28) saturate(0.82);
}

:root[data-theme="dark"] .bg-image {
  background:
    linear-gradient(180deg, rgba(4, 10, 18, 0.44), rgba(6, 17, 31, 0.84)),
    url("./background.svg") center center / cover no-repeat;
  filter: none;
}

.bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 16%, rgba(114, 221, 255, 0.12), transparent 18%),
    radial-gradient(circle at 78% 14%, rgba(65, 244, 207, 0.08), transparent 18%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: auto, auto, 120px 120px;
  opacity: 0.42;
}

.bg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.7), transparent 0 12%),
    radial-gradient(circle at 82% 18%, rgba(18, 136, 184, 0.2), transparent 0 14%),
    radial-gradient(circle at 68% 78%, rgba(28, 186, 165, 0.14), transparent 0 18%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 28%, transparent 72%, rgba(18, 136, 184, 0.08));
  opacity: 0.95;
}

.bg-orbs,
.bg-gridlines,
.bg-hologram {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.bg-orbs {
  z-index: -1;
  overflow: hidden;
}

.orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0.42;
  animation: drift 18s ease-in-out infinite;
}

.orb-1 {
  width: 360px;
  height: 360px;
  left: -80px;
  top: 12vh;
  background: radial-gradient(circle at 35% 35%, rgba(114, 221, 255, 0.52), rgba(114, 221, 255, 0.04) 68%, transparent 78%);
}

.orb-2 {
  width: 420px;
  height: 420px;
  right: -120px;
  top: 10vh;
  background: radial-gradient(circle at 50% 50%, rgba(65, 244, 207, 0.34), rgba(65, 244, 207, 0.04) 66%, transparent 76%);
  animation-duration: 22s;
  animation-delay: -5s;
}

.orb-3 {
  width: 320px;
  height: 320px;
  left: 50%;
  bottom: -80px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(18, 136, 184, 0.22), rgba(18, 136, 184, 0.03) 64%, transparent 74%);
  animation-duration: 20s;
  animation-delay: -9s;
}

.bg-gridlines {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(135deg, rgba(18, 136, 184, 0.08), transparent 34%, transparent 72%, rgba(65, 244, 207, 0.05));
  background-size: 120px 120px, 120px 120px, auto;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.38));
  opacity: 0.32;
  animation: gridDrift 24s linear infinite;
}

.bg-hologram {
  z-index: -1;
  overflow: hidden;
}

.bg-hologram::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(114, 221, 255, 0.04), transparent 16%, transparent 84%, rgba(65, 244, 207, 0.05)),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 9px);
  opacity: 0.28;
  animation: scanShift 9s linear infinite;
}

.holo-climate {
  position: absolute;
  left: 34px;
  top: 92px;
  width: 220px;
  height: 120px;
  opacity: 0.34;
  filter: blur(0.2px);
  animation: panelFloat 12s ease-in-out infinite;
}

.holo-climate::before {
  content: "";
  position: absolute;
  inset: 10px -10px;
  background:
    radial-gradient(circle at 24% 40%, rgba(114, 221, 255, 0.18), transparent 36%),
    radial-gradient(circle at 70% 72%, rgba(65, 244, 207, 0.12), transparent 30%);
  filter: blur(20px);
}

.climate-word {
  position: absolute;
  display: block;
  color: color-mix(in srgb, var(--cyan) 68%, white 32%);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  text-shadow: 0 0 22px rgba(114, 221, 255, 0.18);
}

.climate-temp {
  left: 6px;
  top: 22px;
}

.climate-hum {
  left: 54px;
  top: 54px;
  color: color-mix(in srgb, var(--teal) 68%, white 32%);
}

.env-cluster {
  position: absolute;
  display: grid;
  gap: 12px;
  opacity: 0.28;
  filter: blur(0.15px);
  animation: panelFloat 14s ease-in-out infinite;
}

.env-left {
  left: 42px;
  bottom: 138px;
}

.env-right {
  right: 108px;
  bottom: 118px;
  animation-delay: -4s;
}

.env-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(114, 221, 255, 0.14);
  background: linear-gradient(90deg, rgba(114, 221, 255, 0.08), rgba(255, 255, 255, 0.02));
  color: color-mix(in srgb, var(--text) 22%, var(--cyan) 78%);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  box-shadow: inset 0 0 20px rgba(114, 221, 255, 0.04), 0 0 20px rgba(114, 221, 255, 0.04);
}

.env-chip:nth-child(2) {
  margin-left: 18px;
}

.env-chip:nth-child(3) {
  margin-left: 8px;
}

.signal-field {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 58px;
  height: 132px;
  opacity: 0.2;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.9) 12%, rgba(0, 0, 0, 0.9) 88%, transparent);
}

.signal-line {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: 520px 100%;
  filter: blur(0.2px);
  animation: signalDrift 18s linear infinite;
}

.signal-line-a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 132' preserveAspectRatio='none'%3E%3Cpath d='M0 84 C26 84 30 60 52 60 C74 60 82 104 108 104 C138 104 140 48 170 48 C196 48 204 90 228 90 C258 90 262 36 292 36 C320 36 326 80 352 80 C380 80 382 58 410 58 C438 58 444 96 470 96 C494 96 500 72 520 72' fill='none' stroke='rgba(114,221,255,0.55)' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.signal-line-b {
  inset: 18px 0 0;
  opacity: 0.7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 132' preserveAspectRatio='none'%3E%3Cpath d='M0 62 C20 62 28 78 48 78 C72 78 80 34 104 34 C132 34 138 94 168 94 C198 94 204 54 232 54 C260 54 266 86 292 86 C320 86 324 44 350 44 C378 44 388 74 416 74 C444 74 450 52 478 52 C500 52 506 68 520 68' fill='none' stroke='rgba(65,244,207,0.44)' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  animation-duration: 24s;
  animation-direction: reverse;
}

.holo-ring {
  position: absolute;
  right: 44px;
  top: 132px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  opacity: 0.42;
}

.holo-ring span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(114, 221, 255, 0.24);
  box-shadow: inset 0 0 18px rgba(114, 221, 255, 0.08), 0 0 28px rgba(65, 244, 207, 0.08);
  animation: ringSpin 16s linear infinite;
}

.holo-ring span:nth-child(2) {
  inset: 18px;
  animation-direction: reverse;
  animation-duration: 12s;
}

.holo-ring span:nth-child(3) {
  inset: 42px;
  animation-duration: 8s;
}

.holo-ring::before,
.holo-ring::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(114, 221, 255, 0.4);
  transform: translate(-50%, -50%);
}

.holo-ring::before {
  width: 1px;
  height: 100%;
}

.holo-ring::after {
  width: 100%;
  height: 1px;
}

.droplet-stream {
  position: absolute;
  right: 14%;
  bottom: 36px;
  width: 160px;
  height: 260px;
}

.droplet {
  position: absolute;
  top: -24px;
  width: 14px;
  height: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(114, 221, 255, 0.18));
  border-radius: 50% 50% 60% 60%;
  filter: blur(0.2px);
  box-shadow: 0 0 18px rgba(114, 221, 255, 0.14);
  clip-path: polygon(50% 0%, 76% 24%, 90% 52%, 76% 86%, 50% 100%, 24% 86%, 10% 52%, 24% 24%);
  animation: dropletFall 4.8s linear infinite;
}

.d1 {
  left: 18px;
  animation-delay: 0s;
}

.d2 {
  left: 54px;
  width: 10px;
  height: 18px;
  animation-delay: -1.4s;
}

.d3 {
  left: 92px;
  animation-delay: -2.8s;
}

.d4 {
  left: 126px;
  width: 9px;
  height: 16px;
  animation-delay: -3.6s;
}

.shell {
  width: min(1240px, calc(100% - 32px));
  margin: 28px auto 32px;
  display: grid;
  gap: 18px;
  position: relative;
  z-index: 1;
}

.shell-with-sidebar {
  width: min(1640px, calc(100% - 32px));
  grid-template-columns: minmax(0, 1240px) 380px;
  justify-content: center;
  align-items: start;
  gap: 22px;
}

.shell-main {
  width: min(1240px, 100%);
  min-width: 0;
  display: grid;
  gap: 18px;
}

.paste-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  width: 380px;
  min-width: 380px;
}

.theme-floating {
  position: fixed;
  right: 20px;
  top: 18px;
  z-index: 5;
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.panel {
  background:
    linear-gradient(180deg, var(--panel), var(--panel-2)),
    linear-gradient(90deg, rgba(114, 221, 255, 0.03), transparent 24%, transparent 76%, rgba(65, 244, 207, 0.03));
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 24px;
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.14), transparent 22%, transparent 70%, rgba(114, 221, 255, 0.06));
  opacity: 0.72;
  pointer-events: none;
}

.hero {
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 28%, rgba(114, 221, 255, 0.16), transparent 22%),
    radial-gradient(circle at 86% 24%, rgba(65, 244, 207, 0.12), transparent 18%),
    linear-gradient(90deg, rgba(114, 221, 255, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(114, 221, 255, 0.05) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
  opacity: 0.58;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.95) 24%, rgba(0, 0, 0, 0.95) 76%, rgba(0, 0, 0, 0.72));
  pointer-events: none;
  z-index: -1;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent 62%),
    linear-gradient(115deg, transparent 10%, rgba(114, 221, 255, 0.18) 38%, rgba(255, 255, 255, 0.14) 50%, rgba(65, 244, 207, 0.16) 62%, transparent 84%),
    linear-gradient(90deg, transparent, rgba(114, 221, 255, 0.34), rgba(65, 244, 207, 0.28), transparent);
  background-size: auto, 44% 100%, auto 1px;
  background-repeat: no-repeat;
  background-position: 0 0, -34% 0, 0 calc(100% - 16px);
  opacity: 0.88;
  filter: drop-shadow(0 0 16px rgba(114, 221, 255, 0.22));
  pointer-events: none;
  z-index: -1;
  animation: heroSweep 7.2s ease-in-out infinite;
}

.hero-copy {
  display: grid;
  align-content: start;
}

.hero-badge {
  min-width: 180px;
  padding: 14px 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), var(--accent));
  border: 1px solid var(--line);
}

.badge-label,
.badge-value {
  display: block;
}

.badge-label {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.badge-value {
  margin-top: 10px;
  font-size: 28px;
  font-weight: 700;
  color: var(--cyan);
}

.theme-button {
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.theme-button.active {
  background: linear-gradient(135deg, #1ea5cf 0%, #1fd7c8 100%);
  color: #04111d;
  border-color: transparent;
}

.eyebrow {
  margin: 0;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--teal);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  margin-top: 8px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 18px;
  line-height: 1.5;
}

.subtle {
  margin-top: 10px;
  color: var(--muted);
  max-width: 860px;
  line-height: 1.66;
}

.subtle strong {
  color: var(--cyan);
  font-weight: 700;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.section-head.compact {
  margin-bottom: 18px;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #1ea5cf 0%, #1fd7c8 100%);
  color: var(--button-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 28px rgba(17, 95, 128, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.nav-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(17, 95, 128, 0.24);
}

.nav-button.ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--cyan);
  border-color: var(--line);
  box-shadow: none;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.portal-grid-wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.portal-overview-card {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

.portal-overview-card span,
.portal-overview-card strong {
  display: block;
}

.portal-overview-card span {
  color: var(--muted);
  font-size: 13px;
}

.portal-overview-card strong {
  margin-top: 8px;
  font-size: 20px;
  color: var(--cyan);
}

.portal-group-kicker,
.portal-kicker {
  margin-bottom: 8px !important;
  font-size: 11px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal) !important;
}

.portal-card {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  display: grid;
  gap: 8px;
  min-height: 176px;
  transition: border-color 140ms ease, transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
  position: relative;
  overflow: hidden;
}

.portal-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -45% auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 221, 255, 0.16), transparent 70%);
  transform: translate3d(0, 0, 0);
  opacity: 0.7;
}

.portal-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 20px 44px rgba(14, 35, 58, 0.16);
}

.portal-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.portal-default-picker {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
}

.portal-default-picker span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.portal-default-picker select {
  min-height: 42px;
  border-radius: 12px;
  padding: 9px 12px;
}

.portal-enter {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(114, 221, 255, 0.24);
  background: linear-gradient(135deg, rgba(114, 221, 255, 0.14), rgba(65, 244, 207, 0.08));
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: border-color 140ms ease, transform 140ms ease, background 180ms ease;
}

.portal-enter:hover {
  transform: translateY(-1px);
  border-color: rgba(114, 221, 255, 0.38);
  background: linear-gradient(135deg, rgba(114, 221, 255, 0.2), rgba(65, 244, 207, 0.12));
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

label {
  display: grid;
  gap: 8px;
  font-size: 14px;
}

label span {
  color: var(--muted);
  letter-spacing: 0.01em;
}

.remember-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding-top: 28px;
}

.remember-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.remember-toggle span {
  color: var(--text);
}

.full {
  grid-column: 1 / -1;
}

input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border-radius: 14px;
  padding: 13px 14px;
  color: var(--text);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

input::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px rgba(114, 221, 255, 0.08);
}

textarea {
  resize: vertical;
  min-height: 248px;
}

.actions {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

.advanced-settings {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
}

.advanced-panel {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    linear-gradient(90deg, rgba(114, 221, 255, 0.06), transparent 50%, rgba(65, 244, 207, 0.04));
  overflow: hidden;
}

.advanced-panel summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  color: var(--cyan);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.advanced-panel summary::-webkit-details-marker {
  display: none;
}

.advanced-panel[open] summary {
  border-bottom: 1px solid var(--line);
}

.advanced-panel-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.advanced-panel-copy-block {
  display: grid;
  gap: 6px;
}

.advanced-panel-copy {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.advanced-panel-tip {
  color: color-mix(in srgb, var(--muted) 86%, var(--cyan) 14%);
  font-size: 13px;
  line-height: 1.6;
}

.advanced-link-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(8, 22, 39, 0.34), rgba(255, 255, 255, 0.04));
}

.advanced-link-text {
  min-width: 0;
}

.advanced-link-label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--teal);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.advanced-link-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.advanced-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #1ea5cf 0%, #1fd7c8 100%);
  color: var(--button-text);
  text-decoration: none;
  font-weight: 700;
}

.advanced-link:hover {
  transform: translateY(-1px);
}

.advanced-link[aria-disabled="true"] {
  color: var(--button-text);
  opacity: 0.55;
  pointer-events: none;
}

.advanced-link-meta {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  word-break: break-all;
}

.advanced-settings summary {
  cursor: pointer;
  color: var(--muted);
}

.advanced-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

button {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #1ea5cf 0%, #1fd7c8 100%);
  color: var(--button-text);
  font-weight: 700;
  padding: 13px 20px;
  cursor: pointer;
  min-height: 48px;
  transition: transform 140ms ease, opacity 140ms ease, box-shadow 140ms ease;
  box-shadow: 0 14px 30px rgba(31, 215, 200, 0.18);
}

button:hover {
  transform: translateY(-1px);
}

button:disabled {
  opacity: 0.6;
  cursor: wait;
}

button.ghost {
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--line);
  box-shadow: none;
}

.submit-wrap {
  margin-top: 18px;
}

.form-workspace {
  display: block;
}

.form-workspace-main {
  min-width: 0;
}

.paste-assistant {
  display: grid;
  gap: 14px;
  padding: 20px 20px 18px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 75%, var(--line) 25%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025)),
    radial-gradient(circle at top right, rgba(114, 221, 255, 0.12), transparent 42%),
    linear-gradient(135deg, rgba(114, 221, 255, 0.06), transparent 45%, rgba(65, 244, 207, 0.04));
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(7, 17, 31, 0.2);
}

.paste-assistant-head {
  display: grid;
  gap: 4px;
}

.paste-assistant-head h3 {
  font-size: 22px;
  line-height: 1.2;
}

.paste-assistant-copy {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.paste-assistant-copy strong {
  color: var(--cyan);
}

.paste-assistant-input {
  min-height: 280px;
  line-height: 1.7;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(6, 18, 31, 0.76), rgba(10, 24, 41, 0.92)),
    linear-gradient(135deg, rgba(114, 221, 255, 0.08), transparent 40%, rgba(65, 244, 207, 0.04));
  border-color: color-mix(in srgb, var(--line-strong) 65%, var(--line) 35%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: color-mix(in srgb, var(--text) 94%, white 6%);
}

.paste-assistant-input::placeholder {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}

.paste-assistant-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.paste-assistant-result {
  display: grid;
  gap: 8px;
  min-height: 92px;
  padding: 14px 16px 15px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

#paste-assistant-summary,
#paste-assistant-matched,
#paste-assistant-unmatched {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

#paste-assistant-matched {
  color: color-mix(in srgb, var(--text) 58%, var(--teal) 42%);
}

#paste-assistant-unmatched {
  color: color-mix(in srgb, var(--muted) 72%, #ffb69b 28%);
}

.status-panel {
  padding: 18px 24px;
}

#status {
  line-height: 1.7;
  color: var(--muted);
}

.site-footer {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto 28px;
  color: color-mix(in srgb, var(--muted) 84%, transparent);
  font-size: 13px;
  text-align: center;
  letter-spacing: 0.08em;
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  33% {
    transform: translate3d(22px, -18px, 0) scale(1.04);
  }

  66% {
    transform: translate3d(-16px, 20px, 0) scale(0.97);
  }
}

@keyframes gridDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(0, 24px, 0);
  }
}

@keyframes panelFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -8px, 0);
  }
}

@keyframes ringSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes dropletFall {
  0% {
    transform: translate3d(0, 0, 0) scale(0.88);
    opacity: 0;
  }

  12% {
    opacity: 0.82;
  }

  85% {
    opacity: 0.62;
  }

  100% {
    transform: translate3d(0, 240px, 0) scale(1.08);
    opacity: 0;
  }
}

@keyframes scanShift {
  0% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(12px);
  }
}

@keyframes signalDrift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-260px, 0, 0);
  }
}

@keyframes heroSweep {
  0%,
  100% {
    background-position: 0 0, -34% 0, 0 calc(100% - 16px);
  }

  50% {
    background-position: 0 0, 134% 0, 0 calc(100% - 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb,
  .bg-gridlines,
  .bg-hologram::before,
  .holo-climate,
  .env-cluster,
  .signal-line,
  .hero::after,
  .holo-ring span,
  .droplet,
  .portal-card,
  button {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 1024px) {
  .theme-floating {
    right: 16px;
    top: 14px;
  }
}

@media (max-width: 960px) {
  .hero,
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .portal-overview,
  .portal-grid,
  .portal-grid-wide,
  .grid,
  .advanced-grid {
    grid-template-columns: 1fr;
  }

  .link-row,
  .advanced-link-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .advanced-link-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .shell-with-sidebar {
    width: min(100% - 20px, 100%);
    grid-template-columns: 1fr;
  }

  .shell,
  .site-footer {
    width: min(100% - 20px, 100%);
  }

  .shell {
    margin-top: 16px;
  }

  .paste-sidebar {
    position: static;
    width: 100%;
    min-width: 0;
  }

  .panel {
    border-radius: 20px;
    padding: 18px;
  }

  .hero {
    padding-top: 18px;
  }

  .full {
    grid-column: auto;
  }

  .portal-card {
    min-height: unset;
  }

  .paste-assistant {
    position: static;
    max-height: none;
  }

  .orb-1,
  .orb-2,
  .orb-3 {
    width: 240px;
    height: 240px;
  }

  .holo-climate,
  .holo-ring {
    transform: scale(0.82);
    transform-origin: top left;
  }

  .env-left {
    left: 18px;
    bottom: 112px;
  }

  .env-right {
    right: 16px;
    bottom: 92px;
  }

  .signal-field {
    left: 10px;
    right: 10px;
    bottom: 44px;
  }

  .holo-ring {
    right: -8px;
    top: 120px;
  }
}