:root{
  --color-indigo-50:#EEF2FF;
  --color-purple-50:#FAF5FF;

  --text:#0f172a;
  --muted:#64748b;
  --accent:#794AFF;
  --border:rgba(15,23,42,.12);
  --card:#ffffff;
  --ghost:#fafafa;

  --shadow-sm:0 6px 24px rgba(2,6,23,.08);
  --shadow-lg:0 20px 60px rgba(2,6,23,.12);

  --radius-xl:20px; --radius-lg:14px; --radius-md:12px;

  --tw-gradient-from: var(--color-indigo-50);
  --tw-gradient-via:  #FFFFFF;
  --tw-gradient-to:   var(--color-purple-50);
  --tw-gradient-position: to bottom right;
}

*{box-sizing:border-box}
html,body{height:100%}

/* Lock page scroll and any side scroll */
body.modal-open{ overflow:hidden; overscroll-behavior:contain }
html, body { overflow-x: hidden; }

body{
  margin:0; color:var(--text);
  font:15px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background-image: linear-gradient(
    var(--tw-gradient-position),
    var(--tw-gradient-from) 0%,
    var(--tw-gradient-via) 45%,
    var(--tw-gradient-to) 100%
  );
}

/* Backdrop never scrolls */
.backdrop{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  min-block-size: 100dvh;
}

/* Modal scrolls vertically only */
.modal{
  width:100%;
  max-width:520px;
  padding:26px 24px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  animation: pop .28s ease-out both;

  max-block-size: calc(100dvh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

/* Scrollbars */
.modal::-webkit-scrollbar{ width:10px; height:10px }
.modal::-webkit-scrollbar-track{ background:transparent }
.modal::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--accent) 42%, #c7c9d3);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.modal::-webkit-scrollbar-thumb:hover{
  background: color-mix(in oklab, var(--accent) 58%, #b7b9c6);
}
.modal{
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--accent) 42%, #c7c9d3) transparent;
}

/* Sign in link (top-right) */
.signin-top{ position:absolute; top:14px; right:14px; }
.btn.link{
  background:transparent; border:0; color:var(--accent);
  font-weight:700; padding:8px 10px; cursor:pointer; text-decoration:none;
}

/* Mobile tweaks */
@media (max-width: 640px){
  .modal{ border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin: 10px 0; }
}

/* Header / branding */
.header{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-badge{
  width:36px;
  height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  box-shadow:0 6px 18px rgba(121,74,255,.25);
  overflow:hidden;         /* ensures rounded corners clip the image */
         /* subtle backdrop behind transparent PNGs */
}

.brand-badge img{
  width:100%;
  height:100%;
  object-fit:cover;        /* fills the badge nicely */
  display:block;
  border-radius:inherit;   /* keep corners perfectly rounded */
}

.brand-title{font-weight:700}
.hint{color:var(--muted);font-size:13px}

/* Buttons */
.btn{
  border:1px solid var(--border); background:var(--ghost);
  color:var(--text); padding:10px 14px; border-radius:12px;
  font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  transition: transform .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm) }
.btn.primary{
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 70%, #8f74ff), #5736d1);
  color:#fff; border:0; box-shadow:0 16px 30px rgba(121,74,255,.35);
}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.oauth.google{
  width:100%; justify-content:center; background:#fff; border:1px solid #e5e7eb;
  text-decoration:none;
}
.oauth.google img{ width:18px; height:18px }

/* Divider */
.divider{
  display:flex; align-items:center; gap:12px; color:var(--muted);
  margin:14px 0 10px;
}
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--border); }
.divider span{ font-size:12px }

/* Form / Fields */
form{display:grid; gap:12px; margin-top:6px;}
.field{
  display:flex; flex-direction:column; gap:6px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px 12px; box-shadow:var(--shadow-sm);
  transition: border-color .15s ease, transform .15s ease;
}
.field:focus-within{ border-color: color-mix(in oklab, var(--accent) 65%, #b9a8ff) }
.field label{ font-size:12.5px; color:var(--muted) }
.field input{
  appearance:none; outline:0; border:0; background:transparent; color:var(--text);
  font:inherit; padding:8px 2px 4px 2px; width:100%;
}

.pwd-wrap{ position:relative; display:flex; align-items:center }
.pwd-wrap .eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:8px; border:1px solid var(--border);
  background:var(--ghost); cursor:pointer;
}
.pwd-wrap .eye::before{ content:"🐵"; display:block; text-align:center; font-size:14px; line-height:28px }
.pwd-wrap .eye.on::before{ content:"🙈" }

.help{ font-size:12px; color:var(--muted) }
.error{ color:#ef4444; font-size:12.5px; margin-top:4px }

.actions{ margin-top:6px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap }
.footnote{ margin-top:12px; text-align:center; color:var(--muted); font-size:12px }

/* Toasts */
.toast{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px; margin-bottom:8px;
  border:1px solid var(--border);
  font-weight:600; opacity:0; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{ opacity:1; transform: translateY(0) }
.toast-error{ background:#fff3f3; border-color:#fecaca; color:#b91c1c }

/* Animations */
@keyframes pop{ from{ transform: scale(.98); opacity:0 } to{ transform: scale(1); opacity:1 } }
.shake{ animation: shake .3s ease both }
@keyframes shake{
  0%{ transform: translateX(0) }
  25%{ transform: translateX(-4px) }
  50%{ transform: translateX(4px) }
  75%{ transform: translateX(-3px) }
  100%{ transform: translateX(0) }
}

/* Avatar picker */
.avatar-picker{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px; margin-top:6px;
}
.avatar-picker input[type="radio"]{ position:absolute; opacity:0; pointer-events:none }

.avatar-tile{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  border:1px solid var(--border); border-radius:12px; padding:10px;
  background:var(--ghost); cursor:pointer; user-select:none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-width: 0;
}
.avatar-tile:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm) }
.avatar-tile img{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.05);
  display:block;
}
.avatar-tile .avatar-name{ font-size:12px; color:var(--muted) }

.avatar-tile.upload{ display:grid; place-items:center; gap:6px; }
.upload-mark{
  width:56px; height:56px; display:grid; place-items:center; border-radius:50%;
  border:1px dashed var(--border); font-weight:700;
}

/* Selected state via :has */
.avatar-picker:has(#av-upload:checked)  label[for="av-upload"],
.avatar-picker:has(#av-1:checked)       label[for="av-1"],
.avatar-picker:has(#av-2:checked)       label[for="av-2"],
.avatar-picker:has(#av-3:checked)       label[for="av-3"],
.avatar-picker:has(#av-4:checked)       label[for="av-4"],
.avatar-picker:has(#av-5:checked)       label[for="av-5"],
.avatar-picker:has(#av-6:checked)       label[for="av-6"],
.avatar-picker:has(#av-7:checked)       label[for="av-7"]{
  border-color: color-mix(in oklab, var(--accent) 70%, #b9a8ff);
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 60%, #b9a8ff);
}

/* Fallback class if :has unsupported */
.avatar-tile.is-selected{
  border-color: color-mix(in oklab, var(--accent) 70%, #b9a8ff) !important;
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 60%, #b9a8ff) !important;
}

/* Hidden file input */
.visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; clip-path: inset(50%);
  border:0; padding:0; margin:-1px;
}

/* Inline preview — force-hide when [hidden] present */
.upload-preview[hidden]{ display:none !important; }
.upload-preview{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.avatar-preview{
  width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid var(--border);
}