/* =============================================================================
   98Novels: Log In, Sign Up and My Profile pages
   Loaded only on pages that carry [n98_login], [n98_register] or [n98_profile].
   ========================================================================== */

/* ---------- Card with a brand panel and a form ---------- */
.n98-auth{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  max-width:940px;margin:1.5rem auto 2.5rem;border-radius:22px;overflow:hidden;
  background:var(--card-bg-color);
}
:root[data-mode=light] .n98-auth{box-shadow:0 0 0 2px var(--n98-charcoal),6px 8px 0 1px var(--n98-mint),16px 24px 30px -18px rgba(35,43,46,.4)}
:root:not([data-mode=light]) .n98-auth{box-shadow:0 0 0 1px var(--n98-edge),0 24px 40px -24px rgba(0,0,0,.8)}

.n98-auth__brand{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:.5rem;padding:2rem 1.5rem;
}
:root[data-mode=light] .n98-auth__brand{
  background:
    radial-gradient(260px 200px at 20% 0,color-mix(in srgb,var(--n98-peach) 60%,transparent),transparent 70%),
    linear-gradient(165deg,color-mix(in srgb,var(--n98-mint) 70%,#fff),color-mix(in srgb,var(--n98-mint) 35%,#fff));
  border-right:2px solid var(--n98-charcoal);
}
:root:not([data-mode=light]) .n98-auth__brand{
  background:
    radial-gradient(260px 200px at 20% 0,rgba(254,197,180,.14),transparent 70%),
    linear-gradient(165deg,rgba(198,224,218,.14),rgba(198,224,218,.04));
  border-right:1px solid var(--n98-edge);
}
.n98-auth__cat{width:min(180px,60%);height:auto;animation:n98-bob 3.4s ease-in-out infinite}
.n98-auth__brand-title{margin:.25rem 0 0;font-family:var(--ff-heading);font-weight:600;font-size:1.6rem;line-height:1.2}
.n98-auth__brand-text{margin:0;max-width:24ch;font-size:.98rem;line-height:1.5;opacity:.9}
:root[data-mode=light] .n98-auth__brand-title,:root[data-mode=light] .n98-auth__brand-text{color:var(--n98-ink)}

/* ---------- Form ---------- */
.n98-auth__form{padding:2rem clamp(1.25rem,4vw,2.5rem)}
.n98-auth__field{margin:0 0 1.1rem}
.n98-auth__field label,.n98-profile__form label{display:block;margin-bottom:.35rem;font-family:var(--ff-heading);font-weight:500}
.n98-auth :is(input[type=text],input[type=email],input[type=password],textarea),
.n98-profile__form :is(input[type=text],input[type=email],input[type=password],textarea){
  width:100%;box-sizing:border-box;min-height:46px;padding:.6rem .85rem;font-size:1rem;font-family:inherit;
}
.n98-profile__form textarea{min-height:110px;resize:vertical}
.n98-auth__hint,.n98-auth__fine{display:block;margin-top:.3rem;font-size:.85rem;opacity:.8}
.n98-auth__fine{margin:.9rem 0 0}
.n98-auth__remember{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;margin:0 0 1.2rem;font-size:.95rem}
.n98-auth__remember label{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer}
.n98-auth__submit{width:100%;min-height:48px;font-size:1.05rem}
.n98-auth__switch{margin:1.2rem 0 0;text-align:center;font-size:.95rem}
.n98-auth__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

:root:not([data-mode=light]) :is(.n98-auth,.n98-profile__form) :is(input[type=text],input[type=email],input[type=password],textarea){
  background-color:var(--bg-600);color:var(--fg-100);border:1.5px solid var(--n98-edge);border-radius:12px;
}
:root:not([data-mode=light]) :is(.n98-auth,.n98-profile__form) :is(input[type=text],input[type=email],input[type=password],textarea):focus{
  outline:none;border-color:var(--n98-accent);box-shadow:0 0 0 3px rgba(198,224,218,.25);
}

/* ---------- Messages ---------- */
.n98-auth__notice{margin:0 0 1.2rem;padding:.75rem 1rem;border-radius:14px;font-size:.95rem;line-height:1.45}
.n98-auth__notice ul{margin:0;padding-left:1.1rem}
.n98-auth__notice--error{background:color-mix(in srgb,var(--n98-peach) 45%,transparent);color:var(--fg-100);box-shadow:inset 0 0 0 1.5px var(--n98-strong)}
.n98-auth__notice--ok{background:color-mix(in srgb,var(--n98-mint) 55%,transparent);color:var(--fg-100);box-shadow:inset 0 0 0 1.5px var(--n98-mint-deep)}
.n98-profile>.n98-auth__notice{margin-bottom:0}

/* ---------- Profile ---------- */
.n98-profile{display:grid;gap:1.4rem;max-width:940px;margin:1.5rem auto 2.5rem}
.n98-profile__head,.n98-profile__card{border-radius:22px;background:var(--card-bg-color)}
:root[data-mode=light] .n98-profile__head,:root[data-mode=light] .n98-profile__card{
  box-shadow:0 0 0 2px var(--n98-charcoal),5px 6px 0 1px var(--n98-mint),12px 18px 24px -16px rgba(35,43,46,.4);
}
:root:not([data-mode=light]) .n98-profile__head,:root:not([data-mode=light]) .n98-profile__card{
  box-shadow:0 0 0 1px var(--n98-edge),0 20px 36px -24px rgba(0,0,0,.8);
}
.n98-profile__head{display:flex;gap:1.5rem;align-items:center;padding:1.5rem clamp(1.1rem,3vw,2rem)}
.n98-profile__avatar{flex:none;line-height:0}
.n98-profile__avatar img{display:block;width:112px;height:112px;border-radius:50%}
:root[data-mode=light] .n98-profile__avatar img{box-shadow:0 0 0 2px var(--n98-ink),0 0 0 6px var(--n98-mint)}
:root:not([data-mode=light]) .n98-profile__avatar img{box-shadow:0 0 0 2px rgba(198,224,218,.6),0 0 18px -2px rgba(198,224,218,.4)}
.n98-profile__who{min-width:0}
.n98-profile__name{margin:0;font-family:var(--ff-heading);font-weight:600;font-size:1.8rem;line-height:1.15;overflow-wrap:anywhere}
.n98-profile__handle{margin:.15rem 0 0;opacity:.75}
.n98-profile__chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.8rem 0 0;padding:0;list-style:none}
.n98-profile__chips li{margin:0;padding:.18em .8em;border-radius:999px;font-size:.85rem;font-weight:600}
:root[data-mode=light] .n98-profile__chips li{background:color-mix(in srgb,var(--n98-mint) 60%,#fff);color:var(--n98-ink);box-shadow:inset 0 0 0 1px rgba(143,188,177,.7)}
:root:not([data-mode=light]) .n98-profile__chips li{background:rgba(198,224,218,.14);color:#c6e0da}
.n98-profile__bio{margin:.9rem 0 0;max-width:60ch;line-height:1.6;overflow-wrap:anywhere}

.n98-profile__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:1.4rem;align-items:start}
.n98-profile__card{padding:1.4rem clamp(1.1rem,3vw,1.75rem)}
.n98-profile__card h3{margin:0 0 1rem;font-family:var(--ff-heading);font-weight:600;font-size:1.25rem}
.n98-profile__links ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.n98-profile__links li{margin:0}
.n98-profile__links a{display:block;padding:.6rem .9rem;border-radius:12px;text-decoration:none;font-family:var(--ff-heading);font-weight:500;transition:background-color .16s ease}
:root[data-mode=light] .n98-profile__links a{background:color-mix(in srgb,var(--n98-mint) 30%,#fff);box-shadow:inset 0 0 0 1px rgba(143,188,177,.6);color:var(--n98-charcoal)}
:root:not([data-mode=light]) .n98-profile__links a{background:rgba(198,224,218,.08);box-shadow:inset 0 0 0 1px var(--n98-edge)}
.n98-profile__links a:is(:hover,:focus-visible){background-color:color-mix(in srgb,var(--n98-mint) 55%,transparent);color:var(--n98-strong)}

/* ---------- Small screens ---------- */
@media (max-width:760px){
  .n98-auth{grid-template-columns:1fr}
  .n98-auth__brand{flex-direction:row;text-align:left;gap:1rem;padding:1.1rem 1.25rem}
  .n98-auth__cat{width:84px}
  .n98-auth__brand-title{font-size:1.25rem}
  .n98-auth__brand-text{max-width:none;font-size:.9rem}
  :root[data-mode=light] .n98-auth__brand{border-right:0;border-bottom:2px solid var(--n98-charcoal)}
  :root:not([data-mode=light]) .n98-auth__brand{border-right:0;border-bottom:1px solid var(--n98-edge)}
  .n98-profile__grid{grid-template-columns:1fr}
  .n98-profile__head{flex-direction:column;text-align:center}
  .n98-profile__chips{justify-content:center}
  .n98-profile__avatar img{width:96px;height:96px}
}
@media (prefers-reduced-motion:reduce){.n98-auth__cat{animation:none}}