/* Mujtahid merchant area – extends /styles.css (tokens, .btn, .field, .form-status, .nav, .brand) */
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0}

/* ---------- Sign-in ---------- */
.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr}
.auth-side{position:relative;background:var(--ink);color:#fff;padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;gap:1.25rem;overflow:hidden}
.auth-side::before{content:"";position:absolute;inset:0;background:
  linear-gradient(var(--line-dk) 1px,transparent 1px) 0 0/56px 56px,
  linear-gradient(90deg,var(--line-dk) 1px,transparent 1px) 0 0/56px 56px;
  opacity:.35;-webkit-mask-image:radial-gradient(120% 90% at 0 100%,#000,transparent 70%);mask-image:radial-gradient(120% 90% at 0 100%,#000,transparent 70%)}
.auth-side>*{position:relative}
.auth-side .brand{color:#fff}
.auth-pitch h1{font:600 clamp(1.6rem,5.5vw,2.9rem)/1.1 var(--serif);letter-spacing:-.02em;margin:0 0 .9rem;max-width:16ch}
.auth-pitch p{color:#cfcce6;margin:0;max-width:38ch;display:none}
.auth-back{color:#cfcce6;font-size:.92rem;text-decoration:none;display:none}
.auth-back:hover{color:#fff}
.auth-main{display:grid;place-items:start center;padding:2rem 1.25rem 3rem}
.auth-card{width:min(430px,100%)}
.auth-card h2{font:600 clamp(1.7rem,4vw,2.1rem)/1.15 var(--serif);letter-spacing:-.015em;margin:0 0 .6rem}
.auth-card>.muted{margin:0 0 1.75rem;font-size:.97rem}
.auth-form{display:grid;gap:1.15rem}
.auth-form label{font-weight:500;font-size:.92rem}
.auth-form input{width:100%}
.pw{position:relative}
.pw input{padding-inline-end:3.1rem}
.pw-toggle{position:absolute;inset-block:0;inset-inline-end:.15rem;width:44px;display:grid;place-items:center;background:none;border:0;border-radius:10px;color:var(--muted);cursor:pointer}
.pw-toggle:hover{color:var(--ink)}
.pw-toggle svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pw-toggle .i-eye-off,.pw-toggle[aria-pressed="true"] .i-eye{display:none}
.pw-toggle[aria-pressed="true"] .i-eye-off{display:block}
.auth-row{display:flex;justify-content:flex-end;margin-top:-.35rem}
.link-btn{background:none;border:0;padding:.25rem 0;font:inherit;font-size:.9rem;color:var(--violet);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{color:var(--ink)}
.auth-card .btn{width:100%;justify-content:center}
.auth-card .btn:disabled{opacity:.85;cursor:progress}
.auth-card .btn[aria-busy="true"]::after{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:mj-spin .7s linear infinite}
@keyframes mj-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.auth-card .btn[aria-busy="true"]::after{animation-duration:2s}}

@media (min-width:640px){.auth-pitch p{display:block}}
@media (min-width:900px){
  .auth{grid-template-columns:5fr 6fr;grid-template-rows:none}
  .auth-side{padding:2.5rem 3rem;justify-content:space-between}
  .auth-back{display:inline}
  .auth-main{place-items:center;padding:3rem}
}

/* ---------- Dashboard placeholder ---------- */
.dash-page{background:var(--paper)}
.dash-state{padding-block:3rem;color:var(--muted)}
html.authed .dash-state{display:none}
html:not(.authed) #app{display:none}
.dash{padding-block:clamp(2rem,5vw,3.5rem) 4rem}
.dash-top{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;justify-content:space-between;margin:0 0 2rem}
.dash-kicker{margin:0 0 .25rem;font-size:.9rem}
.dash h1{font:600 clamp(2rem,5vw,3rem)/1.1 var(--serif);letter-spacing:-.02em;margin:0;overflow-wrap:anywhere}
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .8rem;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.85rem;font-weight:500;text-transform:capitalize}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.pill[data-s="verified"]::before,.pill[data-s="active"]::before{background:#1f8f4d}
.pill[data-s="pending"]::before{background:#c28a00}
.pill[data-s="rejected"]::before,.pill[data-s="suspended"]::before,.pill[data-s="disabled"]::before{background:#b3203a}
.dash #notice{margin:0 0 1.5rem}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.25rem,3vw,2rem)}
.panel h2{font:600 1.4rem var(--serif);margin:0 0 1.25rem}
.kv{display:grid;gap:1.1rem 2rem;margin:0 0 1.5rem}
.kv>div{min-width:0}
.kv dt{font-size:.85rem;color:var(--muted)}
.kv dd{margin:.15rem 0 0;font-weight:500;overflow-wrap:anywhere}
@media (min-width:640px){.kv{grid-template-columns:1fr 1fr}}

/* .btn-ghost was designed for <a>; neutralise default <button> chrome */
.nav button.btn{background:transparent;font-family:inherit}
.nav button.btn:hover{background:rgba(255,255,255,.08)}

/* ---------- Profile form ---------- */
.profile-form{margin:0 0 1.5rem;padding-block-start:1.5rem;border-block-start:1px solid var(--line)}
.profile-form textarea{width:100%;resize:vertical;font:inherit;min-height:3rem}
.profile-form input:disabled,.profile-form textarea:disabled{opacity:.7;cursor:not-allowed}
.pf-grid{display:grid;gap:1.15rem}
@media (min-width:640px){.pf-grid{grid-template-columns:1fr 1fr}}
.pf-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.profile-form .btn[aria-busy="true"]::after{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:mj-spin .7s linear infinite}
.profile-form .btn-ghost{color:var(--ink);border:1px solid var(--line);background:transparent;font-family:inherit}
.profile-form .btn-ghost:hover{background:var(--paper)}