/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

body {
  background: linear-gradient(135deg, #1a0b2e 0%, #2d1b4e 100%);
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  min-height: -moz-available;
  min-height: available;
  position: relative;
  overflow-x: hidden;
  background-size: cover;
  background-position: center;
}

/* Desktop: fixed background, Mobile: scroll background */
@media (min-width: 769px) {
  body {
    background-attachment: fixed;
  }
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
    background-size: cover;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }
}

.glass-morphism {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.bg-pattern {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.02;
  background-image:
    radial-gradient(
      circle at 20% 80%,
      transparent 50%,
      rgba(0, 0, 0, 0.03) 51%
    ),
    radial-gradient(
      circle at 80% 20%,
      transparent 50%,
      rgba(0, 0, 0, 0.03) 51%
    ),
    radial-gradient(
      circle at 40% 40%,
      transparent 50%,
      rgba(100, 100, 100, 0.01) 51%,
      transparent 60%
    ),
    radial-gradient(
      circle at 60% 30%,
      transparent 40%,
      rgba(120, 120, 120, 0.008) 36%,
      transparent 55%
    ),
    radial-gradient(
      circle at 70% 60%,
      transparent 45%,
      rgba(90, 90, 90, 0.012) 46%,
      transparent 65%
    );
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    120% 120%,
    110% 110%,
    130% 130%;
  background-position:
    0 0,
    0 0,
    0 0,
    20% 10%,
    -10% 20%,
    30% -20%;
  background-repeat: no-repeat;
  animation: wave 30s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

.parallax-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

.parallax-layer {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  will-change: transform;
  pointer-events: none;
}

.animate-blob {
  animation: blob 20s infinite;
}

.animate-blob2 {
  animation: blob2 20s infinite;
}

.animate-blob3 {
  animation: blob3 20s infinite;
}

.animate-blob4 {
  animation: blob4 20s infinite;
}

.animate-blob5 {
  animation: blob5 20s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

.animation-delay-500 {
  animation-delay: 0.5s;
}

.animation-delay-1500 {
  animation-delay: 1.5s;
}

.animation-delay-2500 {
  animation-delay: 2.5s;
}

.animation-delay-3500 {
  animation-delay: 3.5s;
}

.animation-delay-4500 {
  animation-delay: 4.5s;
}

.animation-delay-6000 {
  animation-delay: 6s;
}

.animation-delay-1000 {
  animation-delay: 1s;
}

.animation-delay-3000 {
  animation-delay: 3s;
}

@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(50px, -80px) scale(1.1);
  }
  66% {
    transform: translate(-35px, 35px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

@keyframes blob2 {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  25% {
    transform: translate(-40px, 60px) scale(1.05);
  }
  50% {
    transform: translate(30px, -50px) scale(0.95);
  }
  75% {
    transform: translate(-20px, 40px) scale(1.02);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

@keyframes blob3 {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  20% {
    transform: translate(60px, 40px) scale(1.08);
  }
  40% {
    transform: translate(-50px, -30px) scale(0.92);
  }
  60% {
    transform: translate(25px, 55px) scale(1.03);
  }
  80% {
    transform: translate(-15px, -45px) scale(0.97);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

@keyframes blob4 {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  30% {
    transform: translate(45px, 70px) scale(1.06);
  }
  60% {
    transform: translate(-55px, 20px) scale(0.94);
  }
  90% {
    transform: translate(35px, -60px) scale(1.01);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

@keyframes blob5 {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  15% {
    transform: translate(-30px, -50px) scale(1.04);
  }
  30% {
    transform: translate(55px, 25px) scale(0.96);
  }
  45% {
    transform: translate(-45px, 65px) scale(1.07);
  }
  60% {
    transform: translate(20px, -35px) scale(0.93);
  }
  75% {
    transform: translate(40px, 50px) scale(1.05);
  }
  90% {
    transform: translate(-25px, -20px) scale(0.98);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.warning-pulse {
  animation: warningPulse 2s ease-in-out infinite;
}

@keyframes warningPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes wave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes glare {
  0% {
    opacity: 0.3;
    transform: scale(0.8) rotate(0deg);
  }
  25% {
    opacity: 0.6;
    transform: scale(1.1) rotate(90deg);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.9) rotate(180deg);
  }
  75% {
    opacity: 0.7;
    transform: scale(1.05) rotate(270deg);
  }
  100% {
    opacity: 0.3;
    transform: scale(0.8) rotate(360deg);
  }
}

.random-glare {
  animation: glare 8s ease-in-out infinite;
}

/* Content */
.content {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* Tool Background Elements */
.tool-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  background-image:
    radial-gradient(
      circle at 30% 70%,
      transparent 40%,
      rgba(255, 102, 94, 0.1) 41%,
      transparent 60%
    ),
    radial-gradient(
      circle at 70% 30%,
      transparent 35%,
      rgba(188, 80, 155, 0.08) 36%,
      transparent 55%
    ),
    radial-gradient(
      circle at 50% 50%,
      transparent 45%,
      rgba(255, 179, 87, 0.06) 46%,
      transparent 65%
    );
  background-size:
    200% 200%,
    180% 180%,
    150% 150%;
  background-position:
    0 0,
    20% 10%,
    40% 30%;
  background-repeat: no-repeat;
  animation: wave 40s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

.tool-parallax-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.tool-parallax-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  will-change: transform;
  pointer-events: none;
}

.placeholder {
  text-align: center;
  color: #48484a;
}

.placeholder h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.placeholder p {
  font-size: 1.2rem;
  opacity: 0.8;
}

/* Mobile optimizations - keep blobs visible in corners */
@media (max-width: 480px) {
  .parallax-layer div {
    width: 40vw;
    height: 40vw;
  }

  /* Keep corner blobs visible on mobile */
  .parallax-layer div[class*="-top-"] {
    top: -10%;
  }

  .parallax-layer div[class*="-bottom-"] {
    bottom: -10%;
  }

  /* GPU acceleration for smooth mobile scrolling */
  .parallax-layer,
  .animate-blob,
  .animate-blob2,
  .animate-blob3,
  .animate-blob4,
  .animate-blob5 {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* Password Field */
.password-field {
  font-family: "Courier New", monospace;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

#password-display {
  text-align: center;
}

@media (max-width: 480px) {
  #password-display {
    font-size: 1.23984375rem !important;
    padding-right: 2.5rem !important;
    padding-left: 0.5rem !important;
    text-align: left !important;
    direction: ltr !important;
  }

  #password-display::placeholder {
    font-size: 0.8625rem !important;
    text-align: left !important;
    direction: ltr !important;
  }
}

.password-field[type="password"] {
  color: transparent;
  text-shadow: 0 0 0 #48484a;
}

/* Strength Indicators */
.strength-weak {
  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
}

.strength-medium {
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.strength-strong {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.strength-very-strong {
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

/* Copy Button */
.copy-btn {
  transition: all 0.3s ease;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
}

.btn-text-mobile {
  display: none;
}

@media (max-width: 767px) {
  .btn-text-desktop {
    display: none;
  }
  .btn-text-mobile {
    display: inline;
  }
}

.copy-btn:hover {
  box-shadow:
    0 6px 25px rgba(0, 0, 0, 0.2),
    0 3px 12px rgba(0, 0, 0, 0.15);
}

.copy-btn.copied {
  background-color: #22c55e !important;
}

/* Validity Buttons */
.validity-btn {
  box-shadow:
    0 3px 15px rgba(0, 0, 0, 0.12),
    0 1px 6px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.validity-btn:hover {
  box-shadow:
    0 5px 20px rgba(0, 0, 0, 0.18),
    0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.6s ease-in forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.breathing-circle {
  animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  25% {
    transform: scale(1.02);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  75% {
    transform: scale(1.02);
    opacity: 0.95;
  }
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}

.logo-fade-in {
  opacity: 0;
  transform: translateY(-20px);
  animation: logoFadeIn 0.4s ease-out 0.2s forwards;
}

@keyframes logoFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Brand Link */
.brand-link .brand-image {
  width: 75px;
  margin-left: -34px;
  margin-top: -22px;
  position: relative;
  z-index: 10;
  filter: grayscale(0.25) brightness(0.8);
  opacity: 0.9;
  transition:
    filter 0.2s ease,
    opacity 0.2s ease;
}

.brand-link .brand-logo {
  filter: grayscale(0.25) brightness(0.8);
  opacity: 0.9;
  transition:
    filter 0.2s ease,
    opacity 0.2s ease;
}

.brand-link:hover > img.brand-image,
.brand-link:hover > img.brand-logo {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

/* Tutorial Styles */
.tutorial-sticker {
  position: fixed;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  z-index: 1000;
  font-size: 18px;
  transition: all 0.3s ease;
  animation: gentleBorderPulse 3s ease-in-out infinite;
}

.tutorial-sticker:hover {
  right: -20px;
}

@keyframes gentleBorderPulse {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
      0 3px 12px rgba(0, 0, 0, 0.1),
      0 0 0 rgba(255, 255, 255, 0);
    transform: translateY(-50%) translateX(0);
  }
  50% {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.15),
      0 0 16px rgba(255, 255, 255, 0.15);
    transform: translateY(-50%) translateX(-2px);
  }
}

.tutorial-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(1px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  z-index: 1800;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tutorial-overlay:not(.hidden) {
  opacity: 1;
}

.tutorial-modal {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 0;
  max-width: 350px;
  width: 90%;
  height: 400px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
  transform: scale(0.95) translateX(30px);
  transition: transform 0.3s ease;
}

.tutorial-overlay:not(.hidden) .tutorial-modal {
  transform: scale(1) translateY(0);
}

.tutorial-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.tutorial-close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.tutorial-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 1);
}

.tutorial-content {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}

.tutorial-step {
  margin-bottom: 20px;
}

.tutorial-step-title {
  font-size: 18px;
  font-weight: 600;
  color: white;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.tutorial-step-title i {
  margin-right: 10px;
  color: #fbbf24;
}

.tutorial-step-description {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin-bottom: 16px;
}

.tutorial-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.tutorial-progress {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.tutorial-buttons {
  display: flex;
  gap: 12px;
}

.tutorial-nav-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.tutorial-nav-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.tutorial-nav-btn.tutorial-close {
  background: rgba(100, 116, 139, 0.8);
  border-color: rgba(100, 116, 139, 0.8);
}

.tutorial-nav-btn.tutorial-close:hover {
  background: rgba(100, 116, 139, 0.9);
}

.tutorial-highlight-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1500;
  pointer-events: none;
}

.tutorial-highlight-overlay .highlight-spot {
  position: absolute;
  background: rgba(96, 165, 250, 0.3);
  border: 2px solid #60a5fa;
  border-radius: 8px;
  animation: highlightPulse 2s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(96, 165, 250, 0.5);
}

@keyframes highlightPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.8;
  }
}

.hidden {
  display: none !important;
}

/* Hide tutorial button on mobile */
@media (max-width: 768px) {
  #tutorial-btn {
    display: none !important;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .tutorial-modal {
    width: 95%;
    height: 450px;
    margin: 0 10px;
  }

  .tutorial-header {
    padding: 16px 20px 12px;
  }

  .tutorial-content {
    padding: 20px;
  }

  .tutorial-navigation {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .tutorial-buttons {
    justify-content: center;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-blob,
  .random-glare,
  .bg-pattern {
    animation: none;
  }
}



/* =========================================================
   ZERØBYT3 / PASS NODE THEME
   ========================================================= */
@property --z3-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}
:root {
  --z3-bg:#02060d;
  --z3-panel:#06101d;
  --z3-panel2:#020811;
  --z3-blue:#219bff;
  --z3-blue2:#70c6ff;
  --z3-pale:#caf0ff;
  --z3-text:#e7f4ff;
  --z3-copy:#9ab8d1;
  --z3-muted:#5485ad;
  --z3-line:rgba(77,166,255,.18);
  --z3-green:#27e981;
}

* { box-sizing:border-box; }
html,body { min-height:100%; }
body {
  margin:0;
  color:var(--z3-text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace !important;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(0,105,255,.055),transparent 52%),
    var(--z3-bg) !important;
  overflow-x:hidden;
}
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:9997;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.011),rgba(255,255,255,.011) 1px,transparent 1px,transparent 4px);
}
.bg-pattern {
  position:fixed !important;
  inset:-80px !important;
  width:auto !important;
  height:auto !important;
  opacity:.86 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background-image:
    linear-gradient(rgba(38,132,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(38,132,255,.06) 1px,transparent 1px) !important;
  background-size:42px 42px,42px 42px !important;
  background-repeat:repeat !important;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 18%,rgba(0,0,0,.9) 46%,transparent 84%);
  mask-image:radial-gradient(ellipse at center,#000 18%,rgba(0,0,0,.9) 46%,transparent 84%);
  animation:z3-grid-drift 30s ease-in-out infinite,z3-grid-breathe 18s ease-in-out infinite !important;
}
@keyframes z3-grid-drift {
  0%{background-position:0 0,0 0} 30%{background-position:17px 10px,17px 10px}
  65%{background-position:5px 28px,5px 28px} 100%{background-position:42px 42px,42px 42px}
}
@keyframes z3-grid-breathe {
  0%,100%{background-size:42px 42px,42px 42px;opacity:.78}
  38%{background-size:45px 45px,45px 45px;opacity:.92}
  70%{background-size:40px 40px,40px 40px;opacity:.82}
}
.parallax-container { display:none !important; }

.z3-flare {
  position:fixed; inset:-80px; z-index:1; pointer-events:none; overflow:hidden; mix-blend-mode:screen;
}
.z3-flare::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 0%,transparent 43%,rgba(30,136,255,.015) 46%,rgba(64,165,255,.06) 50%,rgba(30,136,255,.015) 54%,transparent 57%,transparent 100%);
  opacity:0; transform:translateX(-70%); animation:z3-flare 14s ease-in-out infinite;
}
@keyframes z3-flare {
  0%{transform:translateX(-70%);opacity:0} 17%{opacity:0} 29%{opacity:.45}
  58%{opacity:.23} 76%,100%{transform:translateX(70%);opacity:0}
}

.z3-corner { position:fixed; z-index:40; pointer-events:none; font-size:9px; letter-spacing:.14em; color:rgba(84,151,218,.40); text-transform:uppercase; }
.z3-tl{top:20px;left:24px}.z3-tr{top:20px;right:24px}.z3-bl{bottom:20px;left:24px}.z3-br{bottom:20px;right:24px}

.content {
  position:relative; z-index:10; min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:76px 24px 64px !important;
}
.content > .space-y-\[12px\], .content > .space-y-3 { width:min(700px,100%); }

.z3-brand {
  text-align:center; margin:0 auto 18px; padding:0 10px;
}
.z3-code { color:#428edc; font-size:10px; letter-spacing:.16em; opacity:.78; margin-bottom:8px; }
.z3-brand h1 { margin:0; font-family:inherit; font-size:clamp(28px,5vw,44px); line-height:1; letter-spacing:.12em; color:var(--z3-text); text-shadow:0 0 9px rgba(90,181,255,.42),0 0 28px rgba(0,102,255,.20); }
.z3-status { margin-top:10px; color:var(--z3-muted); font-size:9px; letter-spacing:.16em; }
.z3-status-dot { display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--z3-green); box-shadow:0 0 5px var(--z3-green),0 0 11px rgba(39,233,129,.75); animation:z3-status 2s ease-in-out infinite; }
@keyframes z3-status { 0%,100%{opacity:.6}50%{opacity:1} }

.glass-morphism {
  background:linear-gradient(180deg,rgba(6,16,29,.93),rgba(2,8,17,.94)) !important;
  border:1px solid var(--z3-line) !important;
  border-radius:10px !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  box-shadow:0 26px 70px rgba(0,0,0,.42),0 0 60px rgba(0,100,255,.035),inset 0 1px 0 rgba(255,255,255,.018) !important;
}
.card-hover:hover { transform:none !important; }

/* primary panel gets the homepage runner effect */
.z3-primary-panel { isolation:isolate; overflow:hidden; position:relative; --z3-angle:0deg; --z3-light-x:50%; --z3-light-y:0px; }
.z3-primary-panel > *:not(.z3-runner-light):not(.z3-border-halo):not(.z3-border-runner) { position:relative; z-index:8; }
.z3-runner-light { position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse 150px 105px at var(--z3-light-x) var(--z3-light-y),rgba(225,247,255,.25) 0%,rgba(107,202,255,.19) 15%,rgba(42,150,255,.13) 34%,rgba(12,93,230,.06) 54%,transparent 76%),radial-gradient(ellipse 390px 265px at var(--z3-light-x) var(--z3-light-y),rgba(54,163,255,.14),rgba(24,119,255,.08) 28%,rgba(8,78,205,.04) 48%,transparent 80%); filter:blur(2px); opacity:.88; mix-blend-mode:screen; }
.z3-border-halo,.z3-border-runner { position:absolute; pointer-events:none; border-radius:12px; z-index:4; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.z3-border-halo { inset:-4px; padding:5px; background:conic-gradient(from var(--z3-angle),transparent 0deg,transparent 303deg,rgba(0,112,255,.025) 312deg,rgba(17,131,255,.16) 325deg,rgba(46,161,255,.52) 338deg,rgba(114,205,255,.88) 348deg,rgba(37,151,255,.32) 356deg,transparent 360deg); filter:blur(8px); opacity:.72; }
.z3-border-runner { inset:-2px; padding:3px; background:conic-gradient(from var(--z3-angle),transparent 0deg,transparent 305deg,rgba(0,115,255,.02) 313deg,#087cff 325deg,#219bff 336deg,#70c6ff 344deg,#caf0ff 348deg,#fff 350deg,#e8f9ff 351.5deg,#6ac4ff 354deg,#168cff 358deg,transparent 360deg); filter:drop-shadow(0 0 3px rgba(125,211,255,.90)) drop-shadow(0 0 9px rgba(30,143,255,.48)); opacity:.92; }

/* inputs */
input,textarea,select,.password-field {
  background:rgba(2,8,17,.90) !important; color:#d9ecff !important; border:1px solid rgba(77,166,255,.24) !important; border-radius:6px !important;
  font-family:inherit !important; box-shadow:inset 0 0 24px rgba(33,155,255,.025) !important;
}
input::placeholder,textarea::placeholder { color:rgba(111,152,188,.58) !important; }
input:focus,textarea:focus,select:focus,.password-field:focus { outline:none !important; border-color:rgba(112,198,255,.72) !important; box-shadow:0 0 0 2px rgba(33,155,255,.06),0 0 20px rgba(33,155,255,.08) !important; }

/* security requirement panel */
.bg-gradient-to-r.from-blue-50 { background:rgba(3,12,25,.82) !important; border:1px solid rgba(77,166,255,.14); border-radius:7px !important; }
.bg-gradient-to-r.from-blue-50 h3,.bg-gradient-to-r.from-blue-50 span { color:#aac8df !important; }
.bg-gradient-to-r.from-blue-50 i.text-blue-600 { color:#70c6ff !important; }

/* typography */
label,.text-white { color:var(--z3-text) !important; }
.text-gray-400,.text-gray-500,.text-gray-600,.text-gray-700,.text-gray-800 { color:var(--z3-copy) !important; }

/* buttons */
button { font-family:inherit !important; border-radius:6px !important; }
#generate-link-btn,.view-btn { background:linear-gradient(135deg,#087cff,#219bff) !important; border:1px solid rgba(202,240,255,.17) !important; color:#fff !important; box-shadow:0 0 18px rgba(33,155,255,.12),inset 0 1px rgba(255,255,255,.18) !important; }
#generate-link-btn:hover,.view-btn:hover { filter:brightness(1.08); transform:none !important; box-shadow:0 0 24px rgba(33,155,255,.22) !important; }
.copy-btn,.copy-view-btn { background:rgba(39,233,129,.10) !important; border:1px solid rgba(39,233,129,.32) !important; color:#8affbd !important; box-shadow:0 0 16px rgba(39,233,129,.07) !important; }
.copy-btn:hover,.copy-view-btn:hover { background:rgba(39,233,129,.14) !important; }
button.bg-gray-100,#copy-link-btn { background:rgba(84,133,173,.08) !important; border:1px solid rgba(77,166,255,.20) !important; color:#9fc9ea !important; }

/* validity buttons: system blue, selected gets bright state */
.validity-btn { background:rgba(8,124,255,.08) !important; border:1px solid rgba(77,166,255,.24) !important; color:#9fc9ea !important; box-shadow:none !important; }
.validity-btn:hover { background:rgba(8,124,255,.14) !important; border-color:rgba(112,198,255,.48) !important; }
.validity-btn.bg-white { background:rgba(33,155,255,.18) !important; border-color:#70c6ff !important; color:#e7f4ff !important; box-shadow:0 0 16px rgba(33,155,255,.14) !important; }

/* strength bar */
.w-full.bg-gray-200 { background:rgba(77,166,255,.10) !important; }
.strength-weak { background:#ff5269 !important; box-shadow:0 0 8px rgba(255,82,105,.35); }
.strength-medium { background:#f59e0b !important; box-shadow:0 0 8px rgba(245,158,11,.32); }
.strength-strong,.strength-very-strong { background:#27e981 !important; box-shadow:0 0 8px rgba(39,233,129,.35); }

/* footer credit */
.logo-fade-in,img[alt=""] { opacity:.32; filter:grayscale(1) brightness(1.6); transition:opacity .2s ease; }
.logo-fade-in:hover,img[alt=""]:hover { opacity:.65; }

/* tutorial */
.tutorial-sticker { background:rgba(3,12,25,.96) !important; color:#70c6ff !important; border:1px solid rgba(77,166,255,.24) !important; border-radius:7px !important; box-shadow:0 12px 30px rgba(0,0,0,.38),0 0 18px rgba(33,155,255,.08) !important; }
.tutorial-overlay { background:rgba(0,3,8,.78) !important; }
.tutorial-modal { background:linear-gradient(180deg,#06101d,#020811) !important; border:1px solid rgba(77,166,255,.22) !important; color:var(--z3-text) !important; border-radius:10px !important; }
.tutorial-header { border-bottom:1px solid rgba(77,166,255,.14) !important; }
.tutorial-nav-btn { background:rgba(8,124,255,.10) !important; border:1px solid rgba(77,166,255,.22) !important; color:#b8daf5 !important; }

/* view page */
#view-card { position:relative; overflow:hidden; }
.title-text { color:var(--z3-text) !important; font-family:inherit !important; letter-spacing:.02em; }
.subtitle-text { color:var(--z3-copy) !important; }
.password-display-box { background:rgba(2,8,17,.92) !important; border:1px solid rgba(77,166,255,.22); border-radius:7px !important; }
.password-text { color:#e7f4ff !important; font-family:inherit !important; text-shadow:0 0 12px rgba(33,155,255,.18); }
.warning-box,.error-box { background:rgba(3,12,25,.86) !important; border:1px solid rgba(77,166,255,.16) !important; color:#a9c7df !important; border-radius:7px !important; }

@media(max-width:768px){
  .bg-pattern{animation:z3-grid-drift 36s linear infinite !important;background-size:34px 34px,34px 34px !important;opacity:.72 !important}
  .z3-flare{display:none}
  .z3-corner{font-size:7px}.z3-tl{top:13px;left:14px}.z3-tr{top:13px;right:14px}.z3-bl,.z3-br{display:none}
  .content{padding:54px 15px 36px !important;align-items:flex-start !important}
  .z3-brand{margin-bottom:14px}.z3-brand h1{font-size:30px}.z3-code{font-size:9px}
  .glass-morphism{box-shadow:0 20px 48px rgba(0,0,0,.44),0 0 28px rgba(0,100,255,.025) !important}
  .z3-runner-light{background:radial-gradient(ellipse 135px 95px at var(--z3-light-x) var(--z3-light-y),rgba(112,198,255,.16),rgba(33,155,255,.07) 36%,transparent 72%);filter:none;mix-blend-mode:normal}
  .z3-border-halo{filter:blur(4px);opacity:.52}
  .z3-border-runner{filter:drop-shadow(0 0 2px rgba(125,211,255,.75)) drop-shadow(0 0 5px rgba(30,143,255,.28))}
  .flex.gap-4{gap:10px !important}
  .validity-btn{font-size:11px !important;padding:9px 5px !important}
}
@media(prefers-reduced-motion:reduce){.bg-pattern,.z3-flare::after,.z3-status-dot{animation:none !important}}

#lowercase-check.fa-times,#uppercase-check.fa-times,#numbers-check.fa-times,#special-check.fa-times{color:#ef4444!important}#lowercase-check.fa-check,#uppercase-check.fa-check,#numbers-check.fa-check,#special-check.fa-check{color:#22c55e!important}

.z3-brand{width:100%!important;text-align:center!important}.z3-primary-panel{margin-left:auto!important;margin-right:auto!important}
@media (min-width:769px){.bg-pattern{animation:z3-grid-drift 30s ease-in-out infinite,z3-grid-breathe 18s ease-in-out infinite !important;will-change:background-position,background-size,opacity}.z3-flare::after{animation:z3-flare 14s ease-in-out infinite !important;will-change:transform,opacity}}
#view-card>div>div:first-child{width:58px!important;height:58px!important;border-radius:8px!important;background:linear-gradient(180deg,rgba(6,16,29,.98),rgba(2,8,17,.98))!important;border:1px solid rgba(33,155,255,.42)!important;box-shadow:0 0 18px rgba(33,155,255,.12),inset 0 1px 0 rgba(202,240,255,.05)!important;position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important}#view-card>div>div:first-child>i{color:#70c6ff!important;font-size:21px!important;text-shadow:0 0 8px rgba(33,155,255,.55)!important}#view-card>div>div:first-child::before{content:"";position:absolute;top:7px;right:7px;width:4px;height:4px;border-radius:50%;background:#27e981;box-shadow:0 0 5px #27e981,0 0 9px rgba(39,233,129,.55);animation:z3-status 2s ease-in-out infinite}#view-card>div>div:first-child::after{content:"";position:absolute;left:8px;right:8px;bottom:7px;height:1px;background:linear-gradient(90deg,transparent,rgba(33,155,255,.38),transparent)}#view-card .title-text>i{display:none!important}#view-card>div>div:first-child:has(.fa-exclamation-circle){border-color:rgba(255,82,105,.42)!important;box-shadow:0 0 18px rgba(255,82,105,.10)!important}#view-card>div>div:first-child:has(.fa-exclamation-circle)>i{color:#ff7085!important;text-shadow:0 0 8px rgba(255,82,105,.45)!important}#view-card>div>div:first-child:has(.fa-exclamation-circle)::before{background:#ff5269;box-shadow:0 0 5px #ff5269,0 0 9px rgba(255,82,105,.5)}
.z3-state-badge{width:76px;height:42px;margin:0 auto 22px;display:flex;align-items:center;justify-content:center;position:relative;border-radius:3px;background:linear-gradient(180deg,rgba(5,17,31,.98),rgba(2,8,17,.98));border:1px solid rgba(33,155,255,.48);box-shadow:0 0 18px rgba(33,155,255,.12),inset 0 1px rgba(180,230,255,.06);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:700;letter-spacing:.16em;color:#72c7ff}.z3-state-badge:before{content:"";position:absolute;top:5px;right:6px;width:4px;height:4px;border-radius:50%;background:#27e981;box-shadow:0 0 5px #27e981}.z3-state-badge:after{content:"";position:absolute;left:7px;right:7px;bottom:5px;height:1px;background:linear-gradient(90deg,transparent,rgba(33,155,255,.6),transparent)}.z3-state-error{border-color:rgba(255,82,105,.55);color:#ff7085;box-shadow:0 0 18px rgba(255,82,105,.10)}.z3-state-error:before{background:#ff5269;box-shadow:0 0 5px #ff5269}.z3-state-ok{color:#69f0b0}.z3-title-tag,.z3-inline-tag,.z3-warning-tag,.z3-info-tag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;letter-spacing:.08em}.z3-title-tag{font-size:10px;color:#65baff;border:1px solid rgba(33,155,255,.35);padding:3px 6px;margin-right:9px;border-radius:2px;vertical-align:middle}.z3-title-tag.z3-ok{color:#65e6a4;border-color:rgba(39,233,129,.35)}.z3-inline-tag{font-size:11px;color:inherit;margin-right:7px}.z3-warning-tag{font-size:9px;color:#ff6578;margin-right:8px}.z3-info-tag{font-size:9px;color:#f4c84a;margin-right:8px}
.z3-state-badge{display:none!important}.z3-state-icon{height:58px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:42px;background:none!important;border:0!important;border-radius:0!important}.z3-state-icon i{background:none!important}.z3-blue{color:#219bff!important;text-shadow:0 0 8px rgba(33,155,255,.65),0 0 22px rgba(33,155,255,.22)}.z3-green{color:#27e981!important;text-shadow:0 0 8px rgba(39,233,129,.55),0 0 20px rgba(39,233,129,.18)}.z3-red{color:#ff5269!important;text-shadow:0 0 8px rgba(255,82,105,.55),0 0 20px rgba(255,82,105,.18)}.z3-mini-icon{font-size:20px!important;margin-right:10px!important;vertical-align:middle!important;background:none!important;border:0!important}.z3-title-tag,.z3-warning-tag,.z3-info-tag{display:none!important}
.z3-state-icon .fa-key{color:#27e981!important;text-shadow:0 0 8px rgba(39,233,129,.6),0 0 20px rgba(39,233,129,.22)!important}.z3-state-icon .fa-exclamation-triangle,.z3-mini-icon.fa-exclamation-triangle{color:#ff5269!important;text-shadow:0 0 8px rgba(255,82,105,.6),0 0 20px rgba(255,82,105,.22)!important}