/* =========================================
   PageVault - Minimal Dracula Accent Theme
   ========================================= */

:root {
  --pv-bg: #282a36;
  --pv-surface: #1f1d2e;
  --pv-border: #44475a;
  --pv-text: #f8f8f2;
  --pv-muted: rgba(248,248,242,0.65);
  --pv-accent: #ebff87;
  --pv-danger: #ff5555;
  --pv-success: #50fa7b;
}

/* Container / Card */
.pagevault-container {
  background: var(--pv-bg) !important;
  border: 1px solid var(--pv-border) !important;
  border-radius: 10px !important;
  padding: 2rem !important;
  color: var(--pv-text) !important;
  box-shadow: none !important;
}

/* Title */
.pagevault-title {
  color: var(--pv-text) !important;
  font-weight: 600;
}

/* Hint text */
.pagevault-hint {
  color: var(--pv-muted) !important;
  margin-bottom: 1rem;
}

/* Form layout */
.pagevault-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.9rem !important;
}

/* ======================
   Input (neutral)
====================== */

.pagevault-input,
.pagevault-container input[type="password"] {
  width: 100% !important;
  box-sizing: border-box !important;

  height: 46px !important;
  padding: 0 14px !important;
  line-height: 46px !important;
  font-size: 15px !important;

  background: var(--pv-surface) !important;
  border: 1px solid var(--pv-border) !important;
  border-radius: 8px !important;

  color: var(--pv-text) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Placeholder */
.pagevault-input::placeholder {
  color: rgba(248,248,242,0.45) !important;
}

/* Focus — only accent usage */
.pagevault-input:focus {
  border-color: var(--pv-accent) !important;
  box-shadow: 0 0 0 2px rgba(189,147,249,0.18) !important;
}

/* Prevent white autofill */
.pagevault-input:-webkit-autofill,
.pagevault-input:-webkit-autofill:hover,
.pagevault-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--pv-text) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--pv-surface) inset !important;
}

/* ======================
   Remember checkbox
====================== */

.pagevault-remember {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 14px !important;
  color: var(--pv-muted) !important;
}

.pagevault-remember input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  accent-color: var(--pv-accent);
  cursor: pointer;
}

/* ======================
   Button (single accent)
====================== */

.pagevault-button {
  height: 44px !important;
  padding: 0 18px !important;

  font-family: "Fira Mono", monospace;

  background: var(--pv-accent) !important;
  color: #1f1d2e !important;

  border: none !important;
  border-radius: 8px !important;

  font-weight: 500 !important;
  font-size: 15px !important;
  cursor: pointer !important;

  box-shadow: none !important;
  transition: filter 0.15s ease !important;
}

.pagevault-button:hover {
  filter: brightness(1.06) !important;
}

.pagevault-button:active {
  filter: brightness(0.96) !important;
}

/* ======================
   Messages
====================== */

.pagevault-error {
  color: var(--pv-danger) !important;
  font-size: 14px;
}

.pagevault-success {
  color: var(--pv-success) !important;
  font-size: 14px;
}

.pagevault-icon {
  display: none;
}