body{background-color:var(--background-color);color:var(--text-color)}.auth-container{min-height:calc(100vh - 80px - 300px);display:flex;justify-content:center;align-items:center;padding:60px 20px;background:radial-gradient(circle at 50% 50%,rgba(59,130,246,.05) 0,transparent 70%)}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.5);align-items:center;justify-content:center}.modal-content{background-color:var(--bg-color);margin:auto;padding:30px;border:1px solid var(--border-color);width:90%;max-width:500px;border-radius:16px;position:relative;box-shadow:0 4px 20px rgba(0,0,0,.2);color:var(--text-color)}.close-modal{color:var(--text-muted);float:right;font-size:28px;font-weight:700;cursor:pointer;line-height:1}.close-modal:focus,.close-modal:hover{color:var(--text-color);text-decoration:none;cursor:pointer}.modal-body{margin-top:20px;font-size:.95rem;line-height:1.6;max-height:300px;overflow-y:auto;color:var(--text-muted)}.legal-checks{margin-top:10px;margin-bottom:20px}.checkbox-group{display:flex;align-items:center;gap:10px;margin-bottom:15px;font-size:.9rem;color:var(--text-muted);min-height:24px}.checkbox-group input[type=checkbox]{width:18px;height:18px;margin:0;cursor:pointer}.checkbox-group label{margin-bottom:0;cursor:pointer;line-height:1.4}.checkbox-group a{color:var(--primary-color);text-decoration:underline}#match-error{display:none;font-size:.8rem;color:#ef4444;margin-top:5px}.auth-card{background:var(--surface-color);border:1px solid var(--border-color);border-radius:24px;padding:40px;width:100%;max-width:450px;box-shadow:0 20px 40px rgba(0,0,0,.1);animation:.6s ease-out fadeInUp}.auth-header{text-align:center;margin-bottom:32px}.auth-header h1{font-size:2rem;font-weight:700;margin-bottom:10px;color:var(--text-color)}.auth-header p{color:var(--text-muted);font-size:1rem}.auth-form .form-group{margin-bottom:20px}.auth-form label{display:block;margin-bottom:8px;font-weight:500;font-size:.9rem;color:var(--text-color)}.auth-form input{width:100%;padding:12px 16px;border-radius:12px;border:1px solid var(--border-color);background:var(--background-color);color:var(--text-color);font-size:1rem;transition:.2s}.auth-form input:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(59,130,246,.1)}.form-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;font-size:.9rem}.remember-me{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--text-muted)}.remember-me input{width:auto;margin:0}.forgot-password{color:var(--primary-color);text-decoration:none;font-weight:500}.forgot-password:hover{text-decoration:underline}.auth-btn{width:100%;padding:14px;border-radius:12px;border:none;background:var(--text-color);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s}.auth-btn:hover{opacity:.9}.auth-footer{text-align:center;margin-top:24px;font-size:.9rem;color:var(--text-muted)}.auth-footer a{color:var(--primary-color);text-decoration:none;font-weight:600}.auth-footer a:hover{text-decoration:underline}.error-msg{display:none;color:#ef4444;font-size:.8rem;margin-top:5px;font-weight:500}.input-error{border-color:#ef4444!important}.iti{display:block!important;width:100%}.iti__country-list{background-color:var(--bg-color);border:1px solid var(--border-color);color:var(--text-color)}.iti input{width:100%;padding-left:90px!important}#success-message svg{animation:.5s cubic-bezier(.175,.885,.32,1.275) scaleIn}@keyframes scaleIn{from{transform:scale(0)}to{transform:scale(1)}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.input-wrapper{position:relative;display:flex;align-items:center}.input-wrapper input{padding-right:48px}.toggle-password{position:absolute;right:12px;background:0 0;border:none;cursor:pointer;color:var(--text-muted);padding:4px;display:flex;align-items:center;justify-content:center;transition:color .2s}.toggle-password:hover{color:var(--text-color)}.password-requirements{margin:-10px 0 24px;font-size:.85rem;color:var(--text-muted);background:var(--surface-color);padding:16px;border-radius:12px;border:1px solid var(--border-color)}.req-title{font-weight:600;margin-bottom:8px;color:var(--text-color)}.req-list{list-style:none;padding:0;margin:0}.req-item{display:flex;align-items:center;gap:8px;margin-bottom:4px;transition:.2s}.req-item .icon{font-size:1rem;line-height:1;font-weight:700}.req-item.valid{color:#10b981}.req-item.valid .icon{content:"✓"}.req-item.invalid{color:var(--text-muted)}.auth-card.demo-card{max-width:550px}.auth-header.text-left{text-align:left}.auth-header.text-left h1{font-size:1.75rem;color:#111}.auth-header.text-left p{margin-top:8px;font-size:.95rem;color:#666}textarea{width:100%;padding:12px 16px;border-radius:12px;border:1px solid var(--border-color);background:var(--background-color);color:var(--text-color);font-size:1rem;resize:vertical;font-family:inherit;transition:.2s}select:focus,textarea:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(59,130,246,.1)}select{width:100%;padding:12px 16px;border-radius:12px;border:1px solid var(--border-color);background:var(--background-color);color:var(--text-color);font-size:1rem;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}

/* ============================================================
   AUTH.CSS — RESPONSIVE ADDITIONS (first media queries in file)
   Breakpoints: 768px | 480px
   Shared by: login, signup, forgot-password, reset-password, activate-account
   Append-only — no existing rules were modified.
   ============================================================ */

/* ── 768px: tablet ── */
@media (max-width: 768px) {
  /* Container: reduce tall vertical padding */
  .auth-container { padding: 40px 16px; }

  /* Auth card: slightly less padding and rounding */
  .auth-card { padding: 32px 28px; border-radius: 20px; }
  .auth-card.demo-card { padding: 32px 28px; }

  /* Auth header */
  .auth-header { margin-bottom: 24px; }
  .auth-header h1 { font-size: 1.75rem; }

  /* Form actions: allow items to wrap rather than squeeze */
  .form-actions { flex-wrap: wrap; gap: 10px; }

  /* Modal: tighter padding, slightly wider on tablet */
  .modal-content { padding: 24px; width: 92%; }
  /* Fix float: replace float:right with absolute so heading text
     does not wrap around the × button at narrow widths */
  .close-modal { float: none; position: absolute; top: 16px; right: 20px; }

  /* Password requirements: reduce negative top margin */
  .password-requirements { margin: -6px 0 20px; }
}

/* ── 480px: mobile ── */
@media (max-width: 480px) {
  /* Container: minimal padding — card needs all the room it can get */
  .auth-container { padding: 24px 12px; }

  /* Auth card: compact padding, full width, softer rounding */
  .auth-card { padding: 24px 18px; border-radius: 16px; max-width: 100%; }
  .auth-card.demo-card { padding: 24px 18px; max-width: 100%; }

  /* Auth header */
  .auth-header { margin-bottom: 20px; }
  .auth-header h1 { font-size: 1.5rem; }
  .auth-header p { font-size: .9rem; }
  /* Left-aligned variant used on signup/forgot-password */
  .auth-header.text-left h1 { font-size: 1.4rem; }
  .auth-header.text-left p { font-size: .9rem; }

  /* Form group spacing */
  .auth-form .form-group { margin-bottom: 16px; }

  /* Inputs: full width, compact padding */
  .auth-form input { width: 100%; padding: 11px 14px; font-size: .95rem; }

  /* Input wrapper: full width so absolutely-positioned toggle stays
     inside the input and doesn't escape the card edge */
  .input-wrapper { width: 100%; }
  .input-wrapper input { width: 100%; padding-right: 44px; }
  /* Move toggle slightly left to match reduced padding */
  .toggle-password { right: 10px; }

  /* Phone input (intl-tel-input): force flag dropdown + text field
     onto one row — 90px left-padding reserves the flag column,
     !important guards against intl-tel-input JS style overrides */
  .iti { display: block !important; width: 100%; }
  .iti input { width: 100% !important; padding-left: 90px !important; }

  /* Form actions: keep remember-me and forgot-password on same row */
  .form-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
  .remember-me { display: flex; align-items: center; gap: 8px; }
  .remember-me input { width: auto; margin: 0; flex-shrink: 0; }

  /* Button: already width:100% in base — reinforce and compact */
  .auth-btn { width: 100%; padding: 13px; font-size: .95rem; }

  /* Textarea and select: full width with compact padding */
  textarea { width: 100%; padding: 11px 14px; font-size: .95rem; }
  select { width: 100%; padding: 11px 14px; font-size: .95rem; }

  /* Auth footer */
  .auth-footer { margin-top: 20px; font-size: .85rem; }

  /* Checkbox group: slightly smaller text on mobile */
  .checkbox-group { font-size: .85rem; }

  /* Modal: fix float, compact */
  .close-modal { float: none; position: absolute; top: 14px; right: 16px; font-size: 24px; }
  .modal-content { padding: 20px; width: 95%; border-radius: 12px; }

  /* Password requirements: compact */
  .password-requirements { padding: 12px; margin: -6px 0 18px; font-size: .8rem; }
}