/**
 * VLIKE Connect UI - Theme 4: Social Tech & AI
 * Scoped entirely below .vl-connect (and :is(body.night-mode .vl-connect, .vl-connect[data-vlc-theme="night"]))
 * Prefix: .vlc-* | Variables: --vlc-* | Data hooks: data-vlc-*
 */

/* 1. Design Tokens & Root Scope */
.vl-connect {
  --vlc-cobalt: #2738E8;
  --vlc-cobalt-deep: #1622B8;
  --vlc-cobalt-light: #4857F8;
  --vlc-cobalt-soft: #EEF0FD;
  --vlc-cobalt-glow: rgba(39, 56, 232, 0.35);

  --vlc-offwhite: #F7F8FC;
  --vlc-white: #FFFFFF;
  --vlc-yellow: #F5DE67;
  --vlc-yellow-deep: #EAB308;
  --vlc-yellow-tint: #FEF9C3;
  --vlc-yellow-glow: rgba(245, 222, 103, 0.45);

  --vlc-ink: #141B2D;
  --vlc-ink-secondary: #526179;
  --vlc-ink-tertiary: #8A97AC;
  --vlc-card-bg: #FFFFFF;
  --vlc-card-border: #E2E8F0;
  --vlc-card-shadow: 0 20px 48px -12px rgba(20, 27, 45, 0.08), 0 8px 20px -6px rgba(20, 27, 45, 0.04);

  --vlc-input-bg: #FFFFFF;
  --vlc-input-border: #7B8CA6;
  --vlc-input-border-hover: #94A3B8;
  --vlc-input-border-focus: #2738E8;
  --vlc-input-text: #141B2D;
  --vlc-input-placeholder: #64748B;

  --vlc-tab-track: #F1F5F9;
  --vlc-tab-active-bg: #FFFFFF;
  --vlc-tab-active-text: #141B2D;
  --vlc-tab-inactive-text: #64748B;

  --vlc-social-bg: #FFFFFF;
  --vlc-social-border: #CBD5E1;
  --vlc-social-hover-bg: #F8FAFC;
  --vlc-social-text: #141B2D;

  --vlc-status-error-bg: #FEF2F2;
  --vlc-status-error-text: #DC2626;
  --vlc-status-error-border: #FCA5A5;
  --vlc-status-success-bg: #F0FDF4;
  --vlc-status-success-text: #166534;
  --vlc-status-success-border: #86EFAC;
  --vlc-status-info-bg: #EFF6FF;
  --vlc-status-info-text: #1D4ED8;
  --vlc-status-info-border: #93C5FD;

  --vlc-focus-ring: 0 0 0 3px rgba(39, 56, 232, 0.28);

  --vlc-hero-bg: #2738E8;
  --vlc-hero-gradient: radial-gradient(circle at 35% 25%, #3B4DFF 0%, #2738E8 52%, #1824B0 100%);
  --vlc-hero-text: #FFFFFF;
  --vlc-hero-text-muted: #D1D7FE;
  --vlc-hero-grid-color: rgba(255, 255, 255, 0.07);

  --vlc-float-card-bg: rgba(255, 255, 255, 0.94);
  --vlc-float-card-border: rgba(255, 255, 255, 0.7);
  --vlc-float-card-shadow: 0 16px 36px -8px rgba(10, 18, 70, 0.28);
  --vlc-float-card-text: #141B2D;
  --vlc-float-card-text-muted: #526179;

  --vlc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Be Vietnam Pro", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --vlc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --vlc-radius-sm: 8px;
  --vlc-radius-md: 14px;
  --vlc-radius-lg: 22px;
  --vlc-radius-xl: 32px;
  --vlc-radius-pill: 9999px;

  --vlc-transition-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --vlc-transition-normal: 240ms cubic-bezier(0.16, 1, 0.3, 1);
  --vlc-transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  --vlc-tilt-x: 0deg;
  --vlc-tilt-y: 0deg;
  --vlc-shift-x: 0px;
  --vlc-shift-y: 0px;
  --vlc-card-shift-x: 0px;
  --vlc-card-shift-y: 0px;

  font-family: var(--vlc-font-sans);
  color: var(--vlc-ink);
  background-color: var(--vlc-offwhite);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2. Dark Mode Overrides */
:is(body.night-mode .vl-connect, .vl-connect[data-vlc-theme="night"]) {
  --vlc-offwhite: #0B1120;
  --vlc-card-bg: #152039;
  --vlc-card-border: #243354;
  --vlc-card-shadow: 0 24px 52px -12px rgba(0, 0, 0, 0.6);

  --vlc-ink: #F3F6FC;
  --vlc-ink-secondary: #B9C6DB;
  --vlc-ink-tertiary: #7D8FA9;

  --vlc-input-bg: #1C294A;
  --vlc-input-border: #6F83A6;
  --vlc-input-border-hover: #455C8F;
  --vlc-input-border-focus: #5566FF;
  --vlc-input-text: #F3F6FC;
  --vlc-input-placeholder: #A7B6CE;

  --vlc-tab-track: #0F172A;
  --vlc-tab-active-bg: #2738E8;
  --vlc-tab-active-text: #FFFFFF;
  --vlc-tab-inactive-text: #94A3B8;

  --vlc-social-bg: #1C294A;
  --vlc-social-border: #2D3F68;
  --vlc-social-hover-bg: #23345D;
  --vlc-social-text: #F3F6FC;

  --vlc-status-error-bg: #450A0A;
  --vlc-status-error-text: #FCA5A5;
  --vlc-status-error-border: #7F1D1D;
  --vlc-status-success-bg: #052E16;
  --vlc-status-success-text: #86EFAC;
  --vlc-status-success-border: #14532D;
  --vlc-status-info-bg: #172554;
  --vlc-status-info-text: #93C5FD;
  --vlc-status-info-border: #1E40AF;

  --vlc-focus-ring: 0 0 0 3px rgba(85, 102, 255, 0.45);

  --vlc-hero-bg: #0C132E;
  --vlc-hero-gradient: radial-gradient(circle at 35% 25%, #192569 0%, #0E1642 55%, #080C26 100%);
  --vlc-hero-text: #FFFFFF;
  --vlc-hero-text-muted: #A5B4FC;
  --vlc-hero-grid-color: rgba(255, 255, 255, 0.04);

  --vlc-float-card-bg: rgba(21, 32, 57, 0.94);
  --vlc-float-card-border: rgba(56, 189, 248, 0.25);
  --vlc-float-card-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.7);
  --vlc-float-card-text: #F3F6FC;
  --vlc-float-card-text-muted: #B9C6DB;
}

/* 3. Base Scoped Rules & Accessibility */
.vl-connect [hidden] {
  display: none !important;
}

.vl-connect *,
.vl-connect *::before,
.vl-connect *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.vl-connect .vlc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.vl-connect a {
  color: var(--vlc-cobalt);
  text-decoration: none;
  transition: color var(--vlc-transition-fast);
}

.vl-connect a:hover {
  text-decoration: underline;
}

.vl-connect button,
.vl-connect input,
.vl-connect select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.vl-connect button {
  cursor: pointer;
  background: none;
  border: none;
}

.vl-connect :focus-visible {
  outline: 2px solid var(--vlc-input-border-focus) !important;
  outline-offset: 3px;
  box-shadow: var(--vlc-focus-ring);
}

/* 4. Header Component */
.vl-connect .vlc-header {
  height: 60px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--vlc-hero-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 20;
}

.vl-connect .vlc-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vl-connect .vlc-brand-wordmark {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--vlc-white);
  display: flex;
  align-items: center;
  gap: 6px;
}

.vl-connect .vlc-brand-dot {
  width: 8px;
  height: 8px;
  background-color: var(--vlc-yellow);
  border-radius: var(--vlc-radius-pill);
  box-shadow: 0 0 10px var(--vlc-yellow);
  display: inline-block;
}

.vl-connect .vlc-header-badge {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.12);
  color: var(--vlc-hero-text);
  padding: 3px 10px;
  border-radius: var(--vlc-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.vl-connect .vlc-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vl-connect .vlc-motion-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vlc-white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--vlc-radius-pill);
  transition: all var(--vlc-transition-fast);
  min-height: 36px;
}

.vl-connect .vlc-motion-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.35);
}

.vl-connect .vlc-motion-icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vl-connect .vlc-motion-btn[aria-pressed="true"] {
  background: var(--vlc-yellow);
  color: #141B2D;
  border-color: var(--vlc-yellow-deep);
}

/* 5. Main Viewport & Layout */
.vl-connect .vlc-main {
  flex: 1 0 auto;
  display: flex;
  align-items: stretch;
  position: relative;
  min-height: calc(100vh - 108px);
}

.vl-connect .vlc-container {
  display: flex;
  width: 100%;
  align-items: stretch;
}

/* 6. Hero Section (~58%) */
.vl-connect .vlc-hero {
  flex: 0 0 58%;
  background-color: var(--vlc-hero-bg);
  background-image: var(--vlc-hero-gradient);
  position: relative;
  overflow: hidden;
  padding: 32px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  perspective: 1200px;
}

.vl-connect .vlc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--vlc-hero-grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--vlc-hero-grid-color) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 85%);
  pointer-events: none;
  z-index: 1;
}

.vl-connect .vlc-hero-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(72, 87, 248, 0.4) 0%, rgba(39, 56, 232, 0) 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.vl-connect .vlc-hero-copy {
  position: relative;
  z-index: 4;
  max-width: 680px;
}

.vl-connect .vlc-sticker-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--vlc-yellow);
  color: #141B2D;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 5px 14px;
  border-radius: var(--vlc-radius-sm);
  box-shadow: 0 6px 14px var(--vlc-yellow-glow);
  transform: rotate(-2.5deg);
  margin-bottom: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  will-change: transform;
  transition: transform var(--vlc-transition-fast);
}

.vl-connect .vlc-sticker-badge:hover {
  transform: rotate(0deg) scale(1.04);
}

.vl-connect .vlc-sticker-icon {
  color: #141B2D;
  font-size: 0.9375rem;
}

.vl-connect .vlc-hero-title {
  font-size: clamp(2.3rem, 3.8vw, 3.85rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--vlc-hero-text);
  text-transform: uppercase;
  margin: 0 0 14px 0;
  padding-top: 0.12em;
  padding-bottom: 0.12em;
}

.vl-connect .vlc-hero-line {
  display: block;
}

.vl-connect .vlc-hero-accent {
  color: var(--vlc-yellow);
  text-shadow: 0 4px 20px var(--vlc-yellow-glow);
}

.vl-connect .vlc-hero-lead {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  color: var(--vlc-hero-text-muted);
  line-height: 1.6;
  max-width: 580px;
  margin-bottom: 20px;
}

.vl-connect .vlc-stage {
  position: relative;
  z-index: 3;
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  transform-style: preserve-3d;
  will-change: transform;
  transform: rotateX(var(--vlc-tilt-y)) rotateY(var(--vlc-tilt-x));
  transition: transform var(--vlc-transition-spring);
}

.vl-connect .vlc-mascot-wrap {
  width: min(340px, 46vh);
  height: min(340px, 46vh);
  position: relative;
  z-index: 3;
  transform: translate(var(--vlc-shift-x), var(--vlc-shift-y));
  transition: transform var(--vlc-transition-fast);
  animation: vlc-float 6s ease-in-out infinite alternate;
}

.vl-connect .vlc-mascot-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(10, 16, 60, 0.45));
}

@keyframes vlc-float {
  0% { transform: translate(var(--vlc-shift-x), var(--vlc-shift-y)) translateY(0px) rotate(0deg); }
  50% { transform: translate(var(--vlc-shift-x), var(--vlc-shift-y)) translateY(-10px) rotate(0.8deg); }
  100% { transform: translate(var(--vlc-shift-x), var(--vlc-shift-y)) translateY(-18px) rotate(-0.8deg); }
}

/* 7. Floating Mini Cards (3 Collage Objects) */
.vl-connect .vlc-float-card {
  position: absolute;
  z-index: 5;
  background-color: var(--vlc-float-card-bg);
  border: 1px solid var(--vlc-float-card-border);
  box-shadow: var(--vlc-float-card-shadow);
  border-radius: var(--vlc-radius-md);
  padding: 14px 18px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--vlc-float-card-text);
  font-size: 0.8125rem;
  line-height: 1.45;
  max-width: 290px;
  pointer-events: auto;
  transform: translate(var(--vlc-card-shift-x), var(--vlc-card-shift-y));
  transition: transform var(--vlc-transition-fast), box-shadow var(--vlc-transition-fast);
}

.vl-connect .vlc-float-card:hover {
  box-shadow: 0 20px 40px -6px rgba(10, 18, 70, 0.4);
}

.vl-connect .vlc-card-community {
  top: 6%;
  right: 2%;
  max-width: 275px;
  animation: vlc-float-card-1 7s ease-in-out infinite alternate;
}

@keyframes vlc-float-card-1 {
  0% { transform: translate(var(--vlc-card-shift-x), var(--vlc-card-shift-y)) translateY(0px); }
  100% { transform: translate(var(--vlc-card-shift-x), var(--vlc-card-shift-y)) translateY(-12px); }
}

.vl-connect .vlc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.vl-connect .vlc-card-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vl-connect .vlc-avatar-pill {
  width: 24px;
  height: 24px;
  border-radius: var(--vlc-radius-pill);
  background: linear-gradient(135deg, #2738E8, #7DD3FC);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 700;
}

.vl-connect .vlc-card-author {
  font-weight: 700;
  color: var(--vlc-float-card-text);
  font-size: 0.8125rem;
}

.vl-connect .vlc-card-time {
  font-size: 0.6875rem;
  color: var(--vlc-float-card-text-muted);
}

.vl-connect .vlc-card-body {
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--vlc-float-card-text);
}

.vl-connect .vlc-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.vl-connect .vlc-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--vlc-cobalt);
  background: var(--vlc-cobalt-soft);
  padding: 2px 7px;
  border-radius: var(--vlc-radius-sm);
}

:is(body.night-mode .vl-connect, .vl-connect[data-vlc-theme="night"]) .vlc-tag {
  color: #7DD3FC;
  background: rgba(39, 56, 232, 0.3);
}

.vl-connect .vlc-card-ai {
  bottom: 8%;
  left: 2%;
  max-width: 295px;
  animation: vlc-float-card-2 8s ease-in-out infinite alternate;
}

@keyframes vlc-float-card-2 {
  0% { transform: translate(var(--vlc-card-shift-x), var(--vlc-card-shift-y)) translateY(0px); }
  100% { transform: translate(var(--vlc-card-shift-x), var(--vlc-card-shift-y)) translateY(10px); }
}

.vl-connect .vlc-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--vlc-cobalt);
  margin-bottom: 6px;
}

:is(body.night-mode .vl-connect, .vl-connect[data-vlc-theme="night"]) .vlc-ai-badge {
  color: #93C5FD;
}

.vl-connect .vlc-ai-bubble-user {
  background: rgba(39, 56, 232, 0.08);
  border-radius: var(--vlc-radius-sm);
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 0.75rem;
  color: var(--vlc-float-card-text);
  font-weight: 500;
}

:is(body.night-mode .vl-connect, .vl-connect[data-vlc-theme="night"]) .vlc-ai-bubble-user {
  background: rgba(255, 255, 255, 0.06);
}

.vl-connect .vlc-ai-bubble-resp {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--vlc-float-card-text);
  font-weight: 600;
}

.vl-connect .vlc-ai-spark-icon {
  color: var(--vlc-yellow-deep);
  flex-shrink: 0;
  margin-top: 1px;
}

.vl-connect .vlc-card-code {
  bottom: 4%;
  right: 6%;
  max-width: 260px;
  padding: 12px 14px;
  font-family: var(--vlc-font-mono);
  font-size: 0.75rem;
  animation: vlc-float-card-3 6.5s ease-in-out infinite alternate;
}

@keyframes vlc-float-card-3 {
  0% { transform: translate(var(--vlc-card-shift-x), var(--vlc-card-shift-y)) translateY(0px); }
  100% { transform: translate(var(--vlc-card-shift-x), var(--vlc-card-shift-y)) translateY(-8px); }
}

.vl-connect .vlc-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

:is(body.night-mode .vl-connect, .vl-connect[data-vlc-theme="night"]) .vlc-code-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.vl-connect .vlc-window-dots {
  display: flex;
  gap: 4px;
}

.vl-connect .vlc-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--vlc-radius-pill);
}

.vl-connect .vlc-dot-red { background-color: #EF4444; }
.vl-connect .vlc-dot-yellow { background-color: #F59E0B; }
.vl-connect .vlc-dot-green { background-color: #10B981; }

.vl-connect .vlc-code-title {
  font-size: 0.6875rem;
  color: var(--vlc-float-card-text-muted);
}

.vl-connect .vlc-code-snippet {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.5;
  color: var(--vlc-float-card-text);
}

.vl-connect .vlc-code-kw { color: #8B5CF6; font-weight: 700; }
.vl-connect .vlc-code-fn { color: #2563EB; font-weight: 600; }
.vl-connect .vlc-code-str { color: #059669; }
.vl-connect .vlc-code-bool { color: #D97706; }

/* 8. Form Panel (~42%) */
.vl-connect .vlc-panel {
  flex: 0 0 42%;
  background-color: var(--vlc-offwhite);
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
}

.vl-connect .vlc-card {
  width: 100%;
  max-width: 440px;
  background-color: var(--vlc-card-bg);
  border: 1px solid var(--vlc-card-border);
  border-radius: var(--vlc-radius-xl);
  box-shadow: var(--vlc-card-shadow);
  padding: 32px 36px;
  position: relative;
  transition: background-color var(--vlc-transition-normal), border-color var(--vlc-transition-normal);
}

.vl-connect .vlc-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: var(--vlc-tab-track);
  padding: 4px;
  border-radius: var(--vlc-radius-pill);
  margin-bottom: 24px;
  position: relative;
}

.vl-connect .vlc-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--vlc-tab-inactive-text);
  border-radius: var(--vlc-radius-pill);
  transition: all var(--vlc-transition-fast);
  min-height: 40px;
}

.vl-connect .vlc-tab-btn:hover {
  color: var(--vlc-ink);
}

.vl-connect .vlc-tab-btn.vlc-tab-active {
  background-color: var(--vlc-tab-active-bg);
  color: var(--vlc-tab-active-text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.vl-connect .vlc-form-header {
  margin-bottom: 20px;
}

.vl-connect .vlc-form-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vlc-ink);
  margin-bottom: 6px;
  line-height: 1.3;
}

.vl-connect .vlc-form-subtitle {
  font-size: 0.875rem;
  color: var(--vlc-ink-secondary);
  line-height: 1.5;
}

.vl-connect .vlc-btn-social {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: var(--vlc-social-bg);
  border: 1px solid var(--vlc-social-border);
  color: var(--vlc-social-text);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--vlc-radius-md);
  min-height: 44px;
  transition: background-color var(--vlc-transition-fast), border-color var(--vlc-transition-fast), transform var(--vlc-transition-fast);
}

.vl-connect .vlc-btn-social:hover {
  background-color: var(--vlc-social-hover-bg);
  border-color: var(--vlc-input-border-hover);
  transform: translateY(-1px);
}

.vl-connect .vlc-btn-social:active {
  transform: translateY(0);
}

.vl-connect .vlc-social-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.vl-connect .vlc-divider {
  display: flex;
  align-items: center;
  margin: 18px 0;
  text-align: center;
  color: var(--vlc-ink-tertiary);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vl-connect .vlc-divider::before,
.vl-connect .vlc-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--vlc-card-border);
}

.vl-connect .vlc-divider span {
  padding: 0 12px;
}

.vl-connect .vlc-alert {
  padding: 10px 14px;
  border-radius: var(--vlc-radius-sm);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin-bottom: 16px;
  border: 1px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.vl-connect .vlc-alert[data-status="info"] {
  background-color: var(--vlc-status-info-bg);
  color: var(--vlc-status-info-text);
  border-color: var(--vlc-status-info-border);
}

.vl-connect .vlc-alert[data-status="error"] {
  background-color: var(--vlc-status-error-bg);
  color: var(--vlc-status-error-text);
  border-color: var(--vlc-status-error-border);
}

.vl-connect .vlc-alert[data-status="success"] {
  background-color: var(--vlc-status-success-bg);
  color: var(--vlc-status-success-text);
  border-color: var(--vlc-status-success-border);
}

.vl-connect .vlc-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vl-connect .vlc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vl-connect .vlc-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vlc-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vl-connect .vlc-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.vl-connect .vlc-input,
.vl-connect .vlc-select {
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.9375rem;
  color: var(--vlc-input-text);
  background-color: var(--vlc-input-bg);
  border: 1px solid var(--vlc-input-border);
  border-radius: var(--vlc-radius-md);
  outline: none;
  transition: border-color var(--vlc-transition-fast), box-shadow var(--vlc-transition-fast);
}

.vl-connect .vlc-input::placeholder {
  color: var(--vlc-input-placeholder);
}

.vl-connect .vlc-input:hover,
.vl-connect .vlc-select:hover {
  border-color: var(--vlc-input-border-hover);
}

.vl-connect .vlc-input:focus,
.vl-connect .vlc-select:focus {
  border-color: var(--vlc-input-border-focus);
  box-shadow: var(--vlc-focus-ring);
}

.vl-connect .vlc-input-with-action {
  padding-right: 44px;
}

.vl-connect .vlc-pwd-toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 44px;
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vlc-ink-secondary);
  border-radius: 0 var(--vlc-radius-md) var(--vlc-radius-md) 0;
  transition: color var(--vlc-transition-fast);
}

.vl-connect .vlc-pwd-toggle:hover {
  color: var(--vlc-ink);
}

.vl-connect .vlc-pwd-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vl-connect .vlc-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23526179" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.vl-connect .vlc-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.vl-connect .vlc-row-aux {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8125rem;
  margin-top: 2px;
}

.vl-connect .vlc-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--vlc-ink);
  cursor: pointer;
  user-select: none;
  min-height: 24px;
}

.vl-connect .vlc-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--vlc-cobalt);
  cursor: pointer;
}

.vl-connect .vlc-link-forgot {
  font-weight: 600;
  color: var(--vlc-cobalt);
}

:is(body.night-mode .vl-connect, .vl-connect[data-vlc-theme="night"]) .vlc-link-forgot {
  color: #7DD3FC;
}

.vl-connect .vlc-terms-row {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--vlc-ink-secondary);
}

.vl-connect .vlc-terms-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.vl-connect .vlc-terms-label .vlc-checkbox {
  margin-top: 2px;
  flex-shrink: 0;
}

.vl-connect .vlc-btn-primary {
  width: 100%;
  min-height: 48px;
  background-color: var(--vlc-cobalt);
  color: var(--vlc-white);
  border: none;
  border-radius: var(--vlc-radius-md);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  margin-top: 4px;
  box-shadow: 0 8px 20px var(--vlc-cobalt-glow);
  transition: background-color var(--vlc-transition-fast), transform var(--vlc-transition-fast), box-shadow var(--vlc-transition-fast);
}

.vl-connect .vlc-btn-primary:hover {
  background-color: var(--vlc-cobalt-light);
  transform: translateY(-1.5px);
  box-shadow: 0 12px 28px var(--vlc-cobalt-glow);
}

.vl-connect .vlc-btn-primary:active {
  transform: translateY(0);
  background-color: var(--vlc-cobalt-deep);
}

.vl-connect .vlc-btn-arrow {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--vlc-transition-fast);
}

.vl-connect .vlc-btn-primary:hover .vlc-btn-arrow {
  transform: translateX(4px);
}

/* 9. Footer */
.vl-connect .vlc-footer {
  height: 48px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--vlc-hero-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  color: var(--vlc-hero-text-muted);
  position: relative;
  z-index: 20;
}

.vl-connect .vlc-footer-brand {
  font-weight: 600;
}

.vl-connect .vlc-footer-links {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
}

.vl-connect .vlc-footer-link {
  color: var(--vlc-hero-text-muted);
  transition: color var(--vlc-transition-fast);
}

.vl-connect .vlc-footer-link:hover {
  color: var(--vlc-white);
  text-decoration: underline;
}

.vl-connect .vlc-footer-preview {
  color: var(--vlc-yellow);
  font-weight: 600;
  background: rgba(245, 222, 103, 0.12);
  padding: 2px 8px;
  border-radius: var(--vlc-radius-sm);
  border: 1px dashed rgba(245, 222, 103, 0.4);
}

/* 10. Paused Motion & Reduced Motion */
.vl-connect.vlc-motion-paused .vlc-stage,
.vl-connect.vlc-motion-paused .vlc-mascot-wrap,
.vl-connect.vlc-motion-paused .vlc-float-card,
.vl-connect.vlc-motion-paused .vlc-btn-primary,
.vl-connect .vlc-hero-motion-paused .vlc-stage,
.vl-connect .vlc-hero-motion-paused .vlc-mascot-wrap,
.vl-connect .vlc-hero-motion-paused .vlc-float-card {
  animation: none;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .vl-connect .vlc-stage,
  .vl-connect .vlc-mascot-wrap,
  .vl-connect .vlc-float-card,
  .vl-connect .vlc-btn-primary {
    animation: none;
    transform: none;
    transition: none;
  }
}

/* 11. Tablet Breakpoint (768px – 1050px) */
@media (max-width: 1050px) {
  .vl-connect .vlc-container {
    flex-direction: column;
  }

  .vl-connect .vlc-hero {
    flex: 0 0 auto;
    padding: 32px 28px 24px;
    align-items: center;
    text-align: center;
  }

  .vl-connect .vlc-hero-copy {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .vl-connect .vlc-hero-title {
    font-size: 2.2rem;
  }

  .vl-connect .vlc-stage {
    min-height: 280px;
    width: 100%;
    max-width: 500px;
  }

  .vl-connect .vlc-mascot-wrap {
    width: 220px;
    height: 220px;
  }

  .vl-connect .vlc-card-code {
    display: none;
  }

  .vl-connect .vlc-card-community {
    top: 0;
    right: 0;
    max-width: 220px;
    font-size: 0.75rem;
  }

  .vl-connect .vlc-card-ai {
    bottom: 0;
    left: 0;
    max-width: 230px;
  }

  .vl-connect .vlc-panel {
    flex: 0 0 auto;
    padding: 32px 20px 48px;
  }

  .vl-connect .vlc-card {
    max-width: 480px;
  }
}

/* 12. Mobile Breakpoint (<= 767px) */
@media (max-width: 767px) {
  .vl-connect .vlc-header {
    height: 52px;
    padding: 0 16px;
  }

  .vl-connect .vlc-brand-wordmark {
    font-size: 1.25rem;
  }

  .vl-connect .vlc-header-badge {
    display: none;
  }

  .vl-connect .vlc-motion-btn {
    padding: 4px 10px;
    font-size: 0.75rem;
  }

  .vl-connect .vlc-hero {
    padding: 24px 16px 18px;
  }

  .vl-connect .vlc-sticker-badge {
    font-size: 0.6875rem;
    padding: 4px 10px;
    margin-bottom: 8px;
  }

  .vl-connect .vlc-hero-title {
    font-size: 1.75rem;
    line-height: 1.2;
    margin-bottom: 8px;
  }

  .vl-connect .vlc-hero-lead {
    font-size: 0.875rem;
    margin-bottom: 12px;
    max-width: 320px;
  }

  .vl-connect .vlc-stage {
    min-height: 140px;
    height: 140px;
  }

  .vl-connect .vlc-mascot-wrap {
    width: 120px;
    height: 120px;
    animation: none;
  }

  .vl-connect .vlc-float-card {
    display: none;
  }

  .vl-connect .vlc-panel {
    padding: 16px 14px 32px;
  }

  .vl-connect .vlc-card {
    padding: 22px 18px;
    border-radius: var(--vlc-radius-lg);
    box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.08);
  }

  .vl-connect .vlc-form-title {
    font-size: 1.25rem;
  }

  .vl-connect .vlc-field-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .vl-connect .vlc-input,
  .vl-connect .vlc-select {
    font-size: 16px;
    height: 46px;
  }

  .vl-connect .vlc-btn-social,
  .vl-connect .vlc-btn-primary {
    min-height: 46px;
  }

  .vl-connect .vlc-footer {
    height: auto;
    padding: 16px;
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .vl-connect .vlc-footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
}

/* Wondertag integration: real forms, the existing mobile logo and shared footer. */
.vl-connect { font-size:16px; width:100%; min-height:100svh; }
.vl-connect .vlc-header { flex-shrink:0; }
.vl-connect .vlc-brand-wordmark { gap:10px; }
.vl-connect .vlc-brand-wordmark > span { display:inline-flex; align-items:center; gap:5px; }
.vl-connect .vlc-brand-logo { display:block; width:64px; height:40px; object-fit:contain; border-radius:9px; background:#fff; padding:2px 4px; }
.vl-connect .vlc-explore-link { color:var(--vlc-hero-text-muted); font-size:12px; font-weight:650; }
.vl-connect .vlc-explore-link:hover { color:#fff; }
.vl-connect .vlc-tabs-single { grid-template-columns:1fr; }
.vl-connect .vlc-tab-btn { text-decoration:none; }
.vl-connect .vlc-tab-btn:hover { text-decoration:none; }
.vl-connect .vlc-form { gap:16px; }
.vl-connect .vlc-input,.vl-connect .vlc-select { font-size:16px; }
.vl-connect .vlc-textarea { min-height:90px; height:auto; padding:12px 14px; resize:vertical; }
.vl-connect .vlc-pwd-toggle { width:auto; min-width:48px; height:44px; font-size:12px; font-weight:700; }
.vl-connect .vlc-checkbox-label,.vl-connect .vlc-terms-label { min-height:44px; }
.vl-connect .vlc-checkbox { flex:0 0 18px; }
.vl-connect .vlc-btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }
.vl-connect .vlc-alert { white-space:pre-line; line-height:1.55; overflow-wrap:anywhere; }
.vl-connect .vlc-alert[data-kind="success"] { color:var(--vlc-status-success-text); background:var(--vlc-status-success-bg); border-color:var(--vlc-status-success-border); }
.vl-connect .vlc-alert[data-kind="error"] { color:var(--vlc-status-error-text); background:var(--vlc-status-error-bg); border-color:var(--vlc-status-error-border); }
.vl-connect .vlc-password-rules { display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; list-style:none; color:var(--vlc-ink-secondary); font-size:11px; margin-top:8px; }
.vl-connect .vlc-password-rules li::before { content:"○ "; }
.vl-connect .vlc-password-rules [data-valid="true"] { color:var(--vlc-status-success-text); }
.vl-connect .vlc-password-rules [data-valid="true"]::before { content:"✓ "; }
.vl-connect .vlc-social-section { margin-top:22px; }
.vl-connect .vlc-google-mount { min-height:44px; width:100%; color:var(--vlc-ink-secondary); font-size:12px; }
.vl-connect .vlc-provider-grid { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:10px; }
.vl-connect .vlc-provider { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:9px 12px; border:1px solid var(--vlc-input-border); border-radius:10px; color:var(--vlc-ink); background:var(--vlc-card-bg); font-size:12px; font-weight:650; }
.vl-connect .vlc-provider > span { display:grid; width:20px; height:20px; place-items:center; font-size:17px; font-weight:800; }
.vl-connect .vlc-provider:hover { color:var(--vlc-ink); background:var(--vlc-tab-track); text-decoration:none; }
.vl-connect .vlc-panel-note { max-width:380px; margin:18px auto 0; color:var(--vlc-ink-secondary); font-size:11px; line-height:1.6; text-align:center; }
.vl-connect .vlc-noscript { margin-top:14px; font-size:12px; color:var(--vlc-ink-secondary); }
.vl-connect .vlc-recaptcha { max-width:100%; overflow:auto; }
.vl-connect .vlc-private-note { position:absolute; left:50%; bottom:12%; display:none; min-width:max-content; padding:5px 10px; border-radius:999px; color:#18255b; background:#f5de67; font-size:11px; font-weight:750; transform:translateX(-50%); }
.vl-connect .vlc-mascot-img { transition:transform .22s ease; }
.vl-connect.vlc-private .vlc-mascot-img { transform:perspective(600px) rotateY(58deg); }
.vl-connect.vlc-private .vlc-private-note { display:block; }
.vl-connect.vlc-mascot-tapped .vlc-mascot-img { animation:vlc-connect-nudge .42s ease; }
@keyframes vlc-connect-nudge { 40% { transform:scale(.94) rotate(-5deg); } 75% { transform:scale(1.03) rotate(3deg); } }
.vl-connect .vlc-site-footer { position:relative; z-index:20; padding:12px 20px; border-top:1px solid #ffffff16; color:var(--vlc-hero-text-muted); background:var(--vlc-hero-bg); }
.vl-connect .vlc-site-footer > .container { max-width:1440px; margin:0 auto; }
.vl-connect .vlc-site-footer .welcome-footer { padding:0; color:inherit; font-size:11px; line-height:1.8; }
.vl-connect .vlc-site-footer a { color:inherit; }
.vl-connect .vlc-site-footer a:hover { color:#fff; }
.vl-connect .vlc-site-footer .cyber-license-container { margin-top:3px; padding:0; }
.vl-connect .vlc-site-footer .cyber-license-text { color:var(--vlc-hero-text-muted); font-family:inherit; font-size:10px; text-shadow:none; }
:is(body.night-mode .vl-connect,.vl-connect[data-vlc-theme="night"]) { color-scheme:dark; --vlc-ink-tertiary:#A7B6CE; --vlc-input-border-focus:#AFC4FF; }
:is(body.night-mode .vl-connect,.vl-connect[data-vlc-theme="night"]) .vlc-terms-row a { color:#AFC4FF; }
:is(body.night-mode .vl-connect,.vl-connect[data-vlc-theme="night"]) .vlc-code-kw { color:#C4B5FD; }
:is(body.night-mode .vl-connect,.vl-connect[data-vlc-theme="night"]) .vlc-code-fn { color:#93C5FD; }
:is(body.night-mode .vl-connect,.vl-connect[data-vlc-theme="night"]) .vlc-code-str { color:#6EE7B7; }
:is(body.night-mode .vl-connect,.vl-connect[data-vlc-theme="night"]) .vlc-code-bool { color:#FCD34D; }
.vl-connect :is(input,select,textarea,button,a):focus-visible { outline:2px solid var(--vlc-input-border-focus) !important; outline-offset:3px; }
.vl-connect .vlc-hero :is(button,a):focus-visible,.vl-connect .vlc-header :is(button,a):focus-visible,.vl-connect .vlc-site-footer a:focus-visible { outline-color:#F5DE67 !important; }
@media (min-width:1051px) and (max-height:800px) {
  .vl-connect .vlc-hero { padding:24px 40px; }
  .vl-connect .vlc-hero-title { font-size:clamp(38px,3.6vw,54px); }
  .vl-connect .vlc-stage { min-height:280px; }
  .vl-connect .vlc-mascot-wrap { width:250px; height:250px; }
  .vl-connect .vlc-panel { padding:26px; }
  .vl-connect .vlc-card { padding:26px 30px; }
}
@media (max-width:767px) {
  .vl-connect .vlc-header { height:56px; padding:0 14px; }
  .vl-connect .vlc-brand-logo { width:50px; height:32px; }
  .vl-connect .vlc-explore-link { display:none; }
  .vl-connect .vlc-hero { min-height:224px; padding:20px 16px; align-items:flex-start; text-align:left; }
  .vl-connect .vlc-hero-copy { position:relative; z-index:4; width:calc(100% - 84px); align-items:flex-start; text-align:left; }
  .vl-connect .vlc-hero-title { font-size:clamp(23px,6.7vw,32px); line-height:1.18; }
  .vl-connect .vlc-sticker-badge { font-size:8px; padding:4px 7px; letter-spacing:.03em; }
  .vl-connect .vlc-hero-lead { font-size:12px; line-height:1.5; margin-bottom:0; max-width:300px; }
  .vl-connect .vlc-stage { position:absolute; top:42px; right:3px; width:110px; max-width:110px; height:150px; min-height:150px; }
  .vl-connect .vlc-mascot-wrap { flex:none; width:124px; height:124px; }
  .vl-connect .vlc-private-note { font-size:8px; bottom:6%; }
  .vl-connect .vlc-panel { padding:20px 14px 26px; }
  .vl-connect .vlc-panel-note { margin-top:14px; font-size:10px; }
  .vl-connect .vlc-site-footer { padding:12px 16px; }
  .vl-connect .vlc-password-rules { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .vl-connect .vlc-mascot-img { transition:none; animation:none; }
  .vl-connect .vlc-hero-glow { animation:none; }
}