:root {
  /* Sync with login.css */
  --tri-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --tri-text: #111827;
  --tri-muted: #6b7280;
  --tri-surface: #ffffff;
  --tri-border: #f3f4f6;

  /* Inputs */
  --tri-input: #ffffff;
  --tri-input-border: #d1d5db;
  --tri-input-border-focus: #ffc000;

  /* Brand accents */
  --tri-primary: #ffc000;
  --tri-primary-hover: #eab308;

  /* Effects */
  --tri-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

  /* Fixed header helpers */
  --site-header-h: 72px;
  --wp-adminbar-h-desktop: 32px;
  --wp-adminbar-h-mobile: 46px;
}

html { scroll-padding-top: calc(var(--site-header-h) + var(--wp-adminbar-h-desktop)); }
@media (max-width: 782px) {
  html { scroll-padding-top: calc(var(--site-header-h) + var(--wp-adminbar-h-mobile)); }
}

/* Card wrapper */
.tri-wrap {
  position: relative;
  max-width: 28rem;
  width: 100%;
  margin: calc(var(--site-header-h) + 24px) auto min(8vh, 64px);
  padding: 2.5rem;
  background: var(--tri-surface);
  border: 1px solid var(--tri-border);
  border-radius: 1rem;
  box-shadow: var(--tri-shadow-lg);
  color: var(--tri-text);
  z-index: 1;
}
.admin-bar .tri-wrap { margin-top: calc(var(--site-header-h) + var(--wp-adminbar-h-desktop) + 24px); }
@media (max-width: 782px) {
  .admin-bar .tri-wrap { margin-top: calc(var(--site-header-h) + var(--wp-adminbar-h-mobile) + 24px); }
}

/* Header */
.tri-wrap h1 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  margin: 0 0 .25rem 0;
  padding: 12px 0;
}
.tri-muted { margin-top: .5rem; margin-bottom: 1.25rem; color: var(--tri-muted); font-size: .95rem; }

/* Form layout */
.tri-form { display: grid; gap: 14px; }
.tri-field label { display:block; font-weight:600; margin-bottom:.25rem; color:#374151; }

/* Inputs - both password and text (text used when show-password is toggled) */
.tri-field input[type="password"],
.tri-field input[type="text"]{
  width:100%;
  padding:.625rem .75rem;
  border:1px solid var(--tri-input-border);
  border-radius:.5rem;
  background:var(--tri-input);
  color:#1f2937;
  font-size:.95rem;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* Password wraps: add room for the eye icon */
.tri-pass-wrap { position: relative; }
.tri-pass-wrap input[type="password"],
.tri-pass-wrap input[type="text"]{
  padding-right: 2.25rem; /* space for eye button */
}

/* Eye toggle button */
.tri-pass-toggle{
  position:absolute;
  right:.5rem;
  top:50%;
  transform: translateY(-10%);
  border:0;
  background:transparent !important;
  padding:.25rem;
  line-height:0;
  cursor:pointer;
  color:#6b7280;
  appearance:none;
  -webkit-appearance:none;
  transition: opacity .15s ease;
}
/* Remove outlines/box for the eye icon (as requested) */
.tri-pass-toggle:hover,
.tri-pass-toggle:focus,
.tri-pass-toggle:focus-visible,
.tri-pass-toggle:active{
  opacity: 0.7;
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.tri-pass-toggle svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
  stroke: currentColor;
  fill: none;
}

/* Keep autofill clean */
.tri-field input:-webkit-autofill,
.tri-field input:-webkit-autofill:hover,
.tri-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #111;
  caret-color: #111;
  -webkit-box-shadow: 0 0 0 1000px var(--tri-input) inset !important;
          box-shadow: 0 0 0 1000px var(--tri-input) inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* Focus ring for inputs (not icon) */
.tri-field input:focus {
  border-color: var(--tri-input-border-focus);
  box-shadow: 0 0 0 3px rgba(255,192,0,.25);
}

/* Actions / button */
.tri-actions { text-align:center; margin-top: 4px; width: 100%; }
.tri-btn {
  display:inline-block;
  padding:.75rem 1.1rem;
  border-radius:.5rem;
  border:none;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
}
.tri-btn-primary {
  background: var(--tri-primary);
  color:#111;
  transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  width: 100%;
}
.tri-btn-primary:hover {
  background: var(--tri-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.16);
}
.tri-btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,192,0,.3), 0 8px 18px rgba(0,0,0,.12);
}
.tri-btn-primary:disabled,
.tri-form[aria-busy="true"] .tri-btn-primary {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* Alerts */
.tri-error   { background:#fee2e2; color:#7f1d1d; padding:.8rem; border-radius:.5rem; }
.tri-success { background:#ecfdf5; color:#065f46; padding:.8rem; border-radius:.5rem; }

/* reCAPTCHA */
.g-recaptcha { transform-origin:left top; }

/* Responsive tweaks */
@media (max-width:480px){
  .tri-wrap {
    margin: calc(var(--site-header-h) + 16px) auto min(3vh,24px);
    padding: 1.75rem;
  }
}