/* Auth pages modern UI */
:root{
  --brand:#ff545a;
  --brand-dark:#e23d43;
  --bg:#0f1115;
  --card:#151922;
  --muted:#9aa3ad;
}

.auth-hero{
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(255,84,90,.12), transparent),
              radial-gradient(800px 400px at -10% 110%, rgba(255,84,90,.08), transparent),
              #0f1115;
  padding: 24px 12px;
}

.auth-card{
  width: 100%;
  max-width: 520px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  color: #e7ebef;
}
.auth-card h1{
  font-size: 26px;
  margin-bottom: 6px;
  color: #fff;
}
.auth-card p.sub{ color: var(--muted); margin-bottom: 18px; }

.auth-form .field{ margin-bottom: 14px; position: relative; }
.auth-form label{ display:block; font-size: 13px; color:#cbd3dc; margin-bottom: 6px; }
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="tel"]{
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
}
.auth-form input::placeholder{ color:#a8b0b8; }

.auth-actions{ display:flex; align-items:center; justify-content: space-between; margin-top: 6px; gap: 12px; flex-wrap: wrap; }
.auth-actions-right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.btn-auth{
  display:inline-flex; align-items:center; gap:10px;
  background: var(--brand);
  color:#fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 10px 26px rgba(255,84,90,.35);
  cursor: pointer;
}
.btn-auth:hover{ background: var(--brand-dark); }
.link-muted{ color:#cbd3dc; font-size: 13px; text-decoration: none; }
.link-muted:hover{ color:#fff; text-decoration: underline; }

.oauth-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.btn-ghost{ border:1px solid rgba(255,255,255,.22); background: transparent; color:#e7ebef; border-radius: 10px; padding: 10px 14px; display:flex; align-items:center; gap:10px; justify-content:center; }
.btn-ghost:hover{ background: rgba(255,255,255,.06); }

.auth-footer{ margin-top: 14px; text-align: center; color: #cbd3dc; font-size: 13px; }

/* Password match/mismatch indicator inside fields */
.pw-indicator{
  position: absolute;
  right: 58px; /* leave space for Show button */
  top: 10px;
  font-size: 18px;
  pointer-events: none;
}
.pw-indicator.ok{ color: #22c55e; }   /* green */
.pw-indicator.bad{ color: #ef4444; }  /* red */

@media (max-width: 768px){
  .pw-indicator{ right: 58px; top: 10px; }
}

/* Password guidance popover */
.pw-popover{
  position: absolute;
  left: calc(100% + 10px);
  top: 0;
  width: 300px;
  max-width: 340px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 12px;
  color: #e7ebef;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  z-index: 10050;
}
.pw-popover .pw-title{ font-size: 12px; color:#cbd3dc; letter-spacing:.2px; margin-bottom:6px; }
.pw-popover .pw-list{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.pw-popover .pw-list li{ display:flex; align-items:center; gap:8px; font-size:13px; color:#a8b0b8; }
.pw-popover .pw-list li i{ width:16px; text-align:center; color:#6b7280; }
.pw-popover .pw-list li.ok{ color:#c7f0d0; }
.pw-popover .pw-list li.ok i{ color:#22c55e; }

@media (max-width: 768px){
  .pw-popover{
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(100% + 8px); /* show above input wrapper */
    width: auto;
    max-width: none;
    max-height: 40vh;
    overflow: auto;
    background: #000; /* solid black background as requested */
    border-color: rgba(255,255,255,.2);
    box-shadow: 0 12px 36px rgba(0,0,0,.7);
  }
}

/* Auth Modal */
.auth-modal{ position: fixed; inset: 0; z-index: 1050; opacity: 0; transition: opacity .25s ease; }
.auth-modal.open{ opacity: 1; }
.auth-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .25s ease; }
.auth-modal.open .auth-modal__backdrop{ opacity: 1; }
.auth-modal__dialog{ position: relative; width: min(520px, calc(100% - 32px)); margin: 80px auto; background: #151922; color:#e7ebef; border:1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.45); transform: translateY(-10px) scale(.98); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.auth-modal.open .auth-modal__dialog{ transform: translateY(0) scale(1); opacity: 1; }
.auth-modal__actions{ display:flex; justify-content:flex-end; gap: 10px; margin-top: 12px; }

/* Profile */
.profile-wrap{ min-height: 100vh; background: #0f1115; display:grid; place-items:center; padding: 24px 12px; }
.profile-card{ width:100%; max-width: 760px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 26px; color:#e7ebef; box-shadow: 0 30px 80px rgba(0,0,0,.45); text-align:center; }
.profile-card .avatar{ width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); display:grid; place-items:center; color:#fff; font-weight: 800; font-size: 32px; margin: 0 auto 12px; box-shadow: 0 10px 30px rgba(255,84,90,.35); }
.profile-card h2{ color:#fff; margin: 6px 0 6px; font-size: 22px; }
.profile-card .muted{ color:#cbd3dc; }
.profile-actions{ display:flex; flex-wrap: wrap; gap: 10px; justify-content:center; margin-top: 16px; }
.btn{ display:inline-flex; align-items:center; gap:8px; border-radius: 10px; padding: 10px 14px; text-decoration:none; font-weight:700; }
.btn.primary{ background: var(--brand); color:#fff; }
.btn.primary:hover{ background: var(--brand-dark); }
.btn.outline{ border: 1px solid rgba(255,255,255,.22); color:#e7ebef; }
.btn.outline:hover{ background: rgba(255,255,255,.06); }
.btn.danger{ background: #2a2f3a; color:#ffb3b6; border:1px solid rgba(255,84,90,.3); }
.btn.danger:hover{ background: #212531; color:#fff; }

/* Toast */
.auth-toast{ opacity:0; transform: translateY(10px); transition: all .28s ease; background:#111; color:#fff; padding: 10px 12px; border-radius: 10px; border:1px solid rgba(255,255,255,.1); box-shadow: 0 10px 30px rgba(0,0,0,.35); margin-top: 8px; }
.auth-toast.show{ opacity:1; transform: translateY(0); }

@media (max-width: 576px){
  .auth-card{ padding: 20px; }
}

/* Responsive tweaks for login actions */
@media (max-width: 640px){
  .auth-actions{ flex-direction: column; align-items: stretch; gap: 10px; }
  .auth-actions-right{ justify-content: space-between; }
}

/* New Profile Compact Layout */
.profile-layout{ display:grid; grid-template-columns: 62px minmax(0, 760px); align-items: stretch; gap: 18px; width: min(980px, 100%); }
.profile-sidebar{ background: linear-gradient(180deg, #1b1f2a, #12151d); border:1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 10px 8px; display:flex; flex-direction: column; align-items:center; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.ps-btn{ width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #2a3140, #1f2431); border:1px solid rgba(255,255,255,.06); color:#d7dce3; display:grid; place-items:center; cursor:pointer; transition: all .2s ease; }
.ps-btn:hover{ filter: brightness(1.1); }
.ps-btn.active{ background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color:#fff; box-shadow: 0 12px 30px rgba(255,84,90,.35); }

.profile-card-compact{ background: #ffffff; color:#0f172a; border-radius: 16px; border: 1px solid #e8edf3; box-shadow: 0 20px 60px rgba(0,0,0,.12); padding: 22px; }
.profile-card-compact .pc-head{ display:flex; align-items:center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pc-title{ display:flex; align-items:center; gap:8px; }
.pc-logout-link a{ color:#64748b; font-size:12px; text-decoration:none; }
.pc-logout-link a:hover{ color:#0f172a; text-decoration: underline; }
.profile-card-compact h1{ font-size: 28px; margin: 0; color:#0f172a; font-weight: 800; }
.pc-avatar{ width: 72px; height: 72px; border-radius: 50%; background:#e6eef7; display:grid; place-items:center; overflow:hidden; }
.profile-avatar-initial{ font-weight: 800; color:#0f172a; font-size: 26px; }
.pc-form{ margin-top: 6px; }
.pc-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pc-section{ font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color:#64748b; margin: 6px 0 4px; padding-top: 8px; border-top:1px dashed #e5e7eb; }
.pc-field label{ display:block; font-size: 12px; color:#475569; margin-bottom: 6px; font-weight:600; }
.pc-field input{ width:100%; border:0; border-bottom: 2px solid #e5e7eb; padding: 8px 4px; background: #fff; color:#0f172a; border-radius: 0; outline:none; }
.pc-field input:focus{ border-bottom-color: var(--brand); box-shadow: none; }
.pc-field textarea{ width:100%; border:0; border-bottom: 2px solid #e5e7eb; padding: 8px 4px; background:#fff; color:#0f172a; border-radius:0; outline:none; resize:vertical; min-height: 84px; }
.pc-field .pc-hint{ display:block; color:#64748b; font-size:12px; margin-top:4px; }
.pc-field input, .pc-field textarea{ font-size:16px; }
.pc-actions{ display:flex; justify-content:flex-end; margin-top: 14px; }
.pc-sticky-actions{ position: fixed; left:0; right:0; bottom:0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid #e8edf3; box-shadow: 0 -8px 30px rgba(0,0,0,.08); display:none; z-index: 100; }
.pc-sticky-actions .btn{ width:100%; justify-content:center; }

/* visibility helpers */
.mobile-only{ display:none; }

@media (max-width: 820px){
  .profile-layout{ grid-template-columns: 1fr; }
  .profile-sidebar{ flex-direction: row; justify-content:center; }
}

/* Mobile optimizations */
@media (max-width: 640px){
  .profile-wrap{ padding: 16px 10px; }
  .profile-card-compact{ padding: 16px; }
  .profile-card-compact .pc-head{ flex-direction: row; align-items: center; }
  .pc-grid{ grid-template-columns: 1fr; gap: 12px; }
  .pc-actions{ display:none; }
  .pc-sticky-actions{ display:block; }
  .pc-actions .btn{ width: 100%; justify-content: center; }
  .ps-btn{ width: 40px; height: 40px; }
  .mobile-only{ display: inline; }
  body{ padding-bottom: 64px; }
}