/* ==========================================================================
   HAPI — Authentication (login / signup)
   Split stage: focused form on the left, editorial honey panel on the right.
   ========================================================================== */

.auth{
  display:grid;
  grid-template-columns:1fr 1.02fr;
  min-height:100vh;
  min-height:100dvh;
}

/* ---------------- left: the form ---------------- */
.auth-form-side{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(24px,3.4vw,44px);
  overflow:hidden;
}
.auth-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:auto;
}
.auth-brand{
  display:flex; align-items:center; gap:10px;
  font-size:20px; font-weight:650; letter-spacing:-.04em;
}
.auth-brand .mk{ width:27px; height:27px; color:var(--accent); filter:drop-shadow(0 2px 6px rgba(197,124,8,.3)); }
.auth-top-link{ font-size:13.2px; color:var(--muted); letter-spacing:-.01em; }
.auth-top-link a{ color:var(--accent); font-weight:600; }
.auth-top-link a:hover{ text-decoration:underline; text-underline-offset:3px; }

.auth-box{
  width:100%; max-width:410px;
  margin:clamp(30px,5vh,58px) auto;
}
.auth-box h1{
  font-size:clamp(28px,3.4vw,38px); letter-spacing:-.045em; line-height:1.04; font-weight:600;
  background:linear-gradient(172deg,#1B1409 0%, #402F14 58%, #7A5410 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
[data-theme="dark"] .auth-box h1{
  background:linear-gradient(172deg,#FFF6E6 0%, #EFE0C6 55%, #E2A63C 120%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.auth-box .sub{
  margin:13px 0 0; font-size:14.5px; color:var(--muted); line-height:1.6; letter-spacing:-.011em;
}

/* social button */
.btn-google{
  width:100%; height:48px; border-radius:100px; gap:11px;
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  font-size:14.2px; font-weight:550; letter-spacing:-.012em;
  box-shadow:var(--shadow-1), var(--inset-lit);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all .35s var(--ease);
}
.btn-google:hover{
  border-color:var(--accent-line); transform:translateY(-1px);
  box-shadow:var(--shadow-2), var(--inset-lit);
}
.btn-google:active{ transform:translateY(0); }
.btn-google .g{ width:18px; height:18px; flex:none; }

.auth-or{
  display:flex; align-items:center; gap:14px;
  margin:22px 0;
  font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2);
}
.auth-or::before,.auth-or::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}

.auth-fields{ margin-top:26px; }
.auth-fields .form-row label{ font-size:12px; }
.auth-fields .form-row input{ height:46px; padding:0 15px; font-size:14px; border-radius:13px; }
.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right:46px !important; }
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  border:0; background:transparent; color:var(--muted-2); cursor:pointer;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.pw-toggle:hover{ color:var(--text); background:var(--line-2); }
.pw-toggle svg{ width:16px; height:16px; }
.pw-toggle .off{ display:none; }
.pw-toggle.shown .off{ display:block; }
.pw-toggle.shown .on{ display:none; }

.label-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.label-row a{ font-size:12px; color:var(--accent); font-weight:550; }
.label-row a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* password strength */
.pw-meter{ display:flex; gap:5px; margin-top:9px; }
.pw-meter i{
  flex:1; height:3px; border-radius:100px; background:var(--line);
  transition:background .45s var(--ease);
}
.pw-meter.s1 i:nth-child(1){ background:var(--bad); }
.pw-meter.s2 i:nth-child(-n+2){ background:#D89A2E; }
.pw-meter.s3 i:nth-child(-n+3){ background:var(--accent); }
.pw-meter.s4 i{ background:var(--ok); }
.pw-hint{ margin-top:8px; font-size:11.5px; color:var(--muted-2); }

/* checkbox */
.check{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-size:12.8px; color:var(--muted); line-height:1.5; letter-spacing:-.008em;
}
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check .box{
  width:19px; height:19px; flex:none; margin-top:1px; border-radius:6px;
  border:1.5px solid var(--line); background:var(--panel-i);
  display:grid; place-items:center; color:transparent;
  transition:all .3s var(--ease);
}
.check .box svg{ width:12px; height:12px; }
.check:hover .box{ border-color:var(--accent); }
.check input:checked + .box{
  background:linear-gradient(180deg,#F0AC28,#D5850C); border-color:transparent; color:#2A1B05;
  box-shadow:0 2px 8px rgba(197,124,8,.28);
}
.check input:focus-visible + .box{ outline:2px solid var(--accent-2); outline-offset:2px; }
.check a{ color:var(--accent); font-weight:550; }
.check a:hover{ text-decoration:underline; text-underline-offset:3px; }

.auth-submit{ width:100%; height:50px; margin-top:22px; font-size:15px; }

.auth-alt{
  margin-top:24px; text-align:center; font-size:13.5px; color:var(--muted); letter-spacing:-.01em;
}
.auth-alt a{ color:var(--accent); font-weight:600; }
.auth-alt a:hover{ text-decoration:underline; text-underline-offset:3px; }

.auth-foot{
  margin-top:auto; padding-top:26px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:11.8px; color:var(--muted-2);
}
.auth-foot .trust{ display:flex; align-items:center; gap:7px; }
.auth-foot .trust svg{ width:13px; height:13px; color:var(--accent); }
.auth-foot nav{ display:flex; gap:16px; }
.auth-foot nav a:hover{ color:var(--text); }

/* ---------------- right: the editorial panel ---------------- */
.auth-art{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(28px,3.4vw,52px);
  background:
    radial-gradient(90% 70% at 72% 8%, rgba(255,196,88,.34), transparent 62%),
    linear-gradient(168deg,#1A1309 0%, #241A0C 42%, #100B06 100%);
  color:#F7EFE2;
  border-left:1px solid var(--line);
}
.auth-art::before{ /* honeycomb lattice */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23FFD08A' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z'/%3E%3Cpath d='M28 48 L56 64 L56 96 L28 112 L0 96 L0 64 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 97px;
  -webkit-mask-image:radial-gradient(105% 76% at 70% 4%, #000, transparent 72%);
  mask-image:radial-gradient(105% 76% at 70% 4%, #000, transparent 72%);
}
.auth-art-motes{ position:absolute; inset:0; pointer-events:none; }
.auth-art > *{ position:relative; z-index:2; }

/* floating dashboard preview */
.auth-preview{
  position:absolute; z-index:1;
  top:clamp(48px,7vw,86px); left:clamp(28px,4vw,60px); right:-16%;
  border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,236,201,.14);
  box-shadow:0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05) inset;
  transform:perspective(1500px) rotateY(-13deg) rotateX(5deg) translateZ(0);
  background:linear-gradient(180deg,#FFFDF8,#F7F2E7);
  animation:floatcard 9s ease-in-out infinite;
}
@keyframes floatcard{
  0%,100%{ transform:perspective(1500px) rotateY(-13deg) rotateX(5deg) translateY(0); }
  50%{ transform:perspective(1500px) rotateY(-13deg) rotateX(5deg) translateY(-14px); }
}
.auth-preview .pv-bar{
  display:flex; align-items:center; gap:9px; padding:10px 13px;
  border-bottom:1px solid rgba(22,17,10,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.6));
}
.auth-preview .pv-bar i{ width:8px; height:8px; border-radius:50%; display:block; background:#E2DBCC; }
.auth-preview .pv-bar i:nth-child(1){ background:#EFB2A0; }
.auth-preview .pv-bar i:nth-child(2){ background:#F0D19B; }
.auth-preview .pv-bar i:nth-child(3){ background:#BBD9B4; }
.auth-preview .pv-bar span{
  margin-left:6px; font-size:10px; color:#8B8071; letter-spacing:.01em;
}
.pv-body{ padding:15px; color:#16110A; }
.pv-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.pv-kpi{
  padding:11px 12px; border-radius:11px;
  background:linear-gradient(160deg,#fff,rgba(255,255,255,.55));
  border:1px solid rgba(22,17,10,.055);
}
.pv-kpi.lit{ background:linear-gradient(160deg,#FFF6E6,#FFFCF5); border-color:rgba(227,154,18,.26); }
.pv-kpi b{ display:block; font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:#8B8071; font-weight:650; }
.pv-kpi span{ display:block; font-size:17px; font-weight:650; letter-spacing:-.035em; margin-top:5px; font-variant-numeric:tabular-nums; }
.pv-chart{ display:flex; align-items:flex-end; gap:5px; height:74px; margin-top:12px; }
.pv-chart i{
  flex:1; display:block; border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,#F3BC52,#DE9615);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset;
}
.pv-rows{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.pv-row{ display:flex; align-items:center; gap:9px; }
.pv-av{
  width:24px; height:24px; border-radius:8px; flex:none; display:grid; place-items:center;
  font-size:9px; font-weight:650; background:linear-gradient(150deg,#FFEFD2,#FCE0AE); color:#7A5208;
}
.pv-row .t{ flex:1; min-width:0; }
.pv-row .t b{ display:block; font-size:10.5px; font-weight:600; letter-spacing:-.015em; }
.pv-row .t i{ display:block; height:3px; border-radius:100px; background:rgba(22,17,10,.08); margin-top:4px; }
.pv-row .t i em{ display:block; height:100%; border-radius:100px; background:linear-gradient(90deg,#EDAF33,#C97F09); }
.pv-row .v{ font-size:10.5px; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* quote block */
.auth-quote{ max-width:44ch; }
.auth-quote .mark{ font-size:40px; line-height:.5; color:rgba(245,185,64,.5); font-weight:700; }
.auth-quote blockquote{
  margin:20px 0 0; font-size:clamp(17px,1.7vw,21px); line-height:1.46; letter-spacing:-.028em; font-weight:450;
  color:#F3E9D8;
}
.auth-quote .who{ display:flex; align-items:center; gap:11px; margin-top:22px; }
.auth-quote .who img{ width:40px; height:40px; border-radius:12px; object-fit:cover; flex:none; }
.auth-quote .who b{ display:block; font-size:13px; font-weight:600; letter-spacing:-.018em; }
.auth-quote .who span{ display:block; font-size:11.5px; color:#A2957F; }

.auth-stats{
  display:flex; gap:clamp(20px,3vw,40px); flex-wrap:wrap;
  margin-top:clamp(26px,3.4vw,40px); padding-top:clamp(20px,2.6vw,30px);
  border-top:1px solid rgba(255,236,201,.12);
}
.auth-stats div b{
  display:block; font-size:clamp(20px,2.3vw,27px); font-weight:650; letter-spacing:-.042em;
  background:linear-gradient(180deg,#FFE7BC,#E5A231);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.auth-stats div span{ display:block; font-size:11.5px; color:#A2957F; margin-top:5px; }

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  .auth{ grid-template-columns:1fr; }
  .auth-art{
    order:-1; border-left:0; border-bottom:1px solid var(--line);
    min-height:290px; justify-content:flex-end; padding-block:clamp(26px,5vw,40px);
  }
  .auth-preview{ display:none; }
  .auth-stats{ display:none; }
  .auth-form-side{ min-height:auto; }
  .auth-box{ margin-block:clamp(26px,5vw,44px); }
}
@media (max-width:520px){
  .auth-art{ min-height:0; padding-block:26px; }
  .auth-quote blockquote{ font-size:16px; }
  .auth-quote .mark{ font-size:32px; }
  .auth-foot nav{ gap:12px; }
}

/* entrance */
.auth-box > *{
  opacity:0; transform:translateY(16px);
  animation:authIn .85s var(--ease-out) forwards;
  animation-delay:var(--d,0ms);
}
@keyframes authIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .auth-box > *{ animation:none; opacity:1; transform:none; }
  .auth-preview{ animation:none; }
  .auth-art-motes{ display:none; }
}