.pattern-lock {
  --pattern-size: min(360px, 86vw);
  --dot-size: 68px;
  --dot-bg: #e6edf7;
  --dot-active: #2563eb;
  --line-color: rgba(37, 99, 235, 0.5);
  --line-active: rgba(37, 99, 235, 0.25);
  position: relative;
  width: var(--pattern-size);
  height: var(--pattern-size);
  margin: 0 auto;
  touch-action: none;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pattern-lock:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
  border-radius: 18px;
}

.pattern-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  height: 100%;
  padding: 18px;
}

.pattern-dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--dot-bg);
  border: 3px solid rgba(37, 99, 235, 0.1);
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.8);
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.pattern-dot.active {
  background: var(--dot-active);
  border-color: rgba(255, 255, 255, 0.9);
  transform: scale(1.04);
}

.pattern-dot.focus {
  border-color: rgba(37, 99, 235, 0.8);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.pattern-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pattern-line {
  stroke: var(--line-color);
  stroke-width: 5;
  stroke-linecap: round;
}

.pattern-line-active {
  stroke: var(--line-active);
  stroke-width: 3;
}

.pattern-status {
  font-size: 1.05rem;
  font-weight: 600;
}

@media (max-width: 576px) {
  .pattern-lock {
    --dot-size: 60px;
    --pattern-size: min(320px, 90vw);
  }
  .pattern-status {
    font-size: 0.95rem;
  }
}