/* ── auth.css · login / signup ── */
    /* =========================================================
       LOGIN / SIGNUP PAGE (#authMod)
       Full-screen sliding panel with its own self-contained dark
       theme (independent of the site's white default, same idea
       as #hero scoping its own palette). Redesigned to match the
       DigiArtz welcome/login mockup: brand block, feature strip,
       Welcome Back form, social row (Google/Discord/Apple —
       currently show a "coming soon" toast), and a safety footer.
       ========================================================= */
    #authMod{
      position:fixed;inset:0;z-index:500;background:var(--vbg);
      overflow-y:auto;transform:translateX(100%);
      transition:transform .45s cubic-bezier(.22,1,.36,1);
    }
    #authMod.open{transform:translateX(0);}
    #authMod .subPgHdr{background:color-mix(in srgb,var(--bg) 92%,transparent)!important;border-bottom:1px solid rgba(var(--pg-rgb),.08);}
    #authMod .subPgTitle{color:var(--tx);}

    .laBody{ max-width:460px; margin:0 auto; padding:1.6rem 1.5rem 3.5rem; color:var(--vtx); }

    .laTopLink{ text-align:center; font-size:.85rem; color:rgba(var(--vtx2-rgb),.6); margin:.2rem 0 2.2rem; }
    .laTopLink button{ background:none; border:none; color:var(--pb); font-weight:700; font-size:.85rem; cursor:pointer; padding:0; margin-left:.35rem; font-family:inherit; }
    .laTopLink button:hover{ text-decoration:underline; }

    .laBrand{ text-align:center; margin-bottom:1.7rem; }
    .laEyebrow{ font-family:var(--fm); font-size:.65rem; letter-spacing:.4em; color:var(--pb); text-transform:uppercase; margin-bottom:.6rem; }
    .laLogo{ font-family:var(--fd); font-weight:800; font-size:2.5rem; color:var(--vtx); letter-spacing:-.01em; }
    .laLogo span{ color:var(--pb); }
    .laTag{ color:rgba(var(--vtx2-rgb),.55); font-size:.85rem; line-height:1.55; margin-top:.9rem; }

    .laFeatures{ display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; margin:1.8rem 0; }
    .laFeat{ display:flex; align-items:center; gap:.4rem; font-size:.76rem; color:rgba(var(--vtx2-rgb),.75); }
    .laFeat svg{ width:15px; height:15px; color:var(--pb); flex-shrink:0; }

    .laDivider{ height:1px; background:rgba(var(--pg-rgb),.1); margin:1.8rem 0 2rem; }

    .laHead{ font-family:var(--fb); font-weight:800; font-size:1.7rem; color:var(--vtx); text-align:center; margin:0 0 .4rem; }
    .laSub{ text-align:center; color:rgba(var(--vtx2-rgb),.55); font-size:.85rem; margin:0 0 1.8rem; }

    .laErr{ display:none; color:#f87171; font-size:.8rem; margin:-.6rem 0 1rem; }
    .laErr.show{ display:block; }
    .laMsg{ display:none; color:#86efac; font-size:.78rem; line-height:1.55; margin:-.6rem 0 1rem; }

    .laFieldWrap{ margin-bottom:1.3rem; }
    .laLabel{ display:block; font-size:.8rem; font-weight:700; color:var(--vtx); margin-bottom:.55rem; }
    .laInputBox{ position:relative; }
    .laIcon{ position:absolute; left:.95rem; top:50%; transform:translateY(-50%); width:18px; height:18px; color:rgba(var(--vtx2-rgb),.4); pointer-events:none; }
    .laInput{ width:100%; background:rgba(var(--pg-rgb),.045); border:1px solid rgba(var(--pg-rgb),.14); border-radius:12px; color:var(--vtx); font-size:.88rem; padding:.85rem 1rem .85rem 2.65rem; font-family:var(--fb); transition:border-color .2s,box-shadow .2s; }
    .laInput[type="password"],.laInput.laHasEye{ padding-right:2.65rem; }
    .laInput::placeholder{ color:rgba(var(--vtx2-rgb),.35); }
    .laInput:focus{ outline:none; border-color:var(--pgd); box-shadow:0 0 0 3px rgba(var(--pgd-rgb),.22); }
    .laEyeBtn{ position:absolute; right:.85rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:rgba(var(--vtx2-rgb),.5); padding:.2rem; display:flex; }
    .laEyeBtn svg{ width:18px; height:18px; }
    .laEyeBtn:hover{ color:rgba(var(--vtx2-rgb),.8); }

    .laRow{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.7rem; font-size:.82rem; flex-wrap:wrap; gap:.6rem; }
    .laCheck{ display:flex; align-items:center; gap:.55rem; color:rgba(var(--vtx2-rgb),.7); cursor:pointer; }
    .laCheck input{ width:16px; height:16px; accent-color:var(--pgd); }
    .laForgot{ background:none; border:none; color:var(--pb); font-size:.82rem; cursor:pointer; font-family:inherit; padding:0; }
    .laForgot:hover{ text-decoration:underline; }

    .laSubmit{ width:100%; padding:.9rem; border-radius:12px; background:rgba(var(--pgd-rgb),.1); border:1.5px solid var(--pgd); color:var(--pb); font-weight:700; font-size:.92rem; cursor:pointer; transition:background .2s,box-shadow .2s; font-family:var(--fb); }
    .laSubmit:hover{ background:rgba(var(--pgd-rgb),.18); box-shadow:0 0 20px rgba(var(--pgd-rgb),.28); }
    .laSubmit:disabled{ opacity:.6; cursor:default; }

    .laOrDiv{ display:flex; align-items:center; gap:1rem; margin:1.9rem 0 1.2rem; color:rgba(var(--vtx2-rgb),.4); font-size:.76rem; }
    .laOrDiv::before,.laOrDiv::after{ content:''; flex:1; height:1px; background:rgba(var(--pg-rgb),.12); }

    .laSocial{ display:flex; gap:.7rem; margin-bottom:1.9rem; }
    .laSocialBtn{ flex:1; display:flex; align-items:center; justify-content:center; gap:.45rem; padding:.75rem .4rem; border-radius:12px; border:1px solid rgba(var(--pg-rgb),.14); background:rgba(var(--pg-rgb),.03); color:var(--vtx); font-size:.76rem; font-weight:600; cursor:pointer; font-family:var(--fb); transition:background .2s; }
    .laSocialBtn:hover{ background:rgba(var(--pg-rgb),.08); }
    .laSocialBtn svg{ width:17px; height:17px; flex-shrink:0; }
    .laSocialBtn:disabled{ opacity:.55; cursor:default; }
    .laSocialBtn:disabled:hover{ background:rgba(var(--pg-rgb),.03); }

    .laFooter{ display:flex; align-items:center; justify-content:center; gap:.5rem; color:rgba(var(--vtx2-rgb),.4); font-size:.73rem; text-align:center; }
    .laFooter svg{ width:14px; height:14px; flex-shrink:0; }

    @media(max-width:420px){
      .laSocial{ flex-wrap:wrap; }
      .laSocialBtn{ flex:1 1 calc(50% - .35rem); }
    }

    /* ── Small phones: tighten the grid gutters a touch ── */
    @media(max-width:480px){
      .awGrid{
        gap:.3rem;
        padding:0 .6rem;
      }
    }

/* IMAGE LINKED COMMENTS PATCH */
.cpSelectedImage{
display:none;
align-items:flex-start;
justify-content:flex-start;
padding:.4rem 0 .45rem;
margin:0;
}
.cpSelectedImage img{
width:90px;
height:90px;
object-fit:cover;
border:1px solid var(--bdr);
}
.cpThumbWrap{
position:relative;
display:inline-block;
}
.cpThumbPreview{
width:90px;
height:90px;
object-fit:cover;
border:1px solid var(--bdr);
box-shadow:0 0 15px color-mix(in srgb,var(--tc) 20%,transparent);
background:var(--sur);
}
.cpThumbClose{
position:absolute;
top:-8px;
right:-8px;
width:22px;
height:22px;
border:1px solid var(--bdrh);
background:var(--sur2);
color:var(--ps);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}
@media(max-width:640px){
.cpThumbPreview,
.cpSelectedImage img{
width:80px;
height:80px;
}
}

.cpPhoto{width:90px;height:90px;object-fit:cover;cursor:pointer;flex-shrink:0;border:1px solid var(--bdr);border-radius:6px;}