/* =====================================================================
   assets/auth.css — shared design system for every page outside the main
   Kundli app: auth pages (login/register/reset), and logged-in pages
   (profile, upgrade, help, ebook store). Palette is the "Panchang Ledger"
   brand used by kundli.php and index.php; typography pairs Libre Caslon
   Display (headings) with Plus Jakarta Sans (UI/body).
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root{
  /* Surfaces */
  --bg:#F5EFE1;
  --surface:#FFFDF8;
  --surface-2:#FAF5E9;
  --line:#E6DCC4;
  --line-strong:#D8CDA8;

  /* Text */
  --ink:#2A2118;
  --ink-soft:#655A44;
  --ink-muted:#8A7F66;

  /* Brand */
  --maroon:#8B2635;
  --maroon-600:#761E2C;
  --maroon-50:#F6E7E6;
  --gold:#A97324;
  --gold-bright:#7A5015;
  --gold-light:#D9A94A;
  --gold-50:#F5EBD6;
  --good:#3F6B4A;
  --good-50:#E6EFE4;
  --dark:#231A12;

  /* Legacy aliases still referenced by page-level styles */
  --sky:var(--bg); --sky-deep:#E9DFC6;
  --navy:var(--ink); --navy-deep:#1C150E; --navy-bright:#3D2F1E;

  --font-display:"Libre Caslon Display", Georgia, serif;
  --font-ui:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(42,33,24,.06), 0 1px 3px rgba(42,33,24,.05);
  --shadow-md:0 4px 12px rgba(42,33,24,.07), 0 2px 4px rgba(42,33,24,.04);
  --shadow-lg:0 18px 48px rgba(42,33,24,.12), 0 4px 12px rgba(42,33,24,.05);
  --ring:0 0 0 4px rgba(139,38,53,.14);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; min-height:100vh;
  font-family:var(--font-ui); font-size:15px; line-height:1.55;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
h1,h2,h3{font-family:var(--font-display); font-weight:400; color:var(--ink); letter-spacing:-.005em;}
a{color:var(--maroon);}
:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
button.btn-primary, a.btn-primary, .btn{
  display:block; width:100%; text-align:center; text-decoration:none;
  font-family:var(--font-ui); font-size:15px; font-weight:600; line-height:1.2;
  padding:13px 20px; border-radius:var(--radius-md); cursor:pointer;
  border:1px solid transparent; margin-top:6px;
  transition:background-color .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
button.btn-primary, a.btn-primary{
  background:var(--maroon); color:#FFF8EC;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 6px 16px rgba(139,38,53,.22);
}
button.btn-primary:hover, a.btn-primary:hover{background:var(--maroon-600); box-shadow:0 8px 22px rgba(139,38,53,.28);}
button.btn-primary:active, a.btn-primary:active{transform:translateY(1px);}
button.btn-primary:disabled{opacity:.6; cursor:not-allowed;}
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:var(--radius-md); font-weight:600; font-size:14.5px;
  text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong);
  transition:border-color .15s ease, background-color .15s ease;
}
.btn-secondary:hover{border-color:var(--gold); background:var(--surface-2);}

/* Submit-in-progress state (added by assets/ui.js) */
.is-loading{position:relative; pointer-events:none; color:transparent !important;}
.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
  border:2px solid rgba(255,248,236,.45); border-top-color:#FFF8EC; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.btn-google{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:12px; margin-top:0;
  background:#fff; border:1px solid var(--line-strong); border-radius:var(--radius-md);
  color:#3c4043; font-family:var(--font-ui); font-size:14.5px; font-weight:600;
  text-decoration:none; cursor:pointer;
  transition:box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.btn-google:hover{border-color:var(--ink-muted); background:#fcfcfb; box-shadow:var(--shadow-sm);}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.field{margin-bottom:16px; display:flex; flex-direction:column; gap:6px;}
.field label{font-size:13.5px; font-weight:600; color:var(--ink);}
.field input, .field textarea, .field select{
  width:100%; font-family:var(--font-ui); font-size:15px; padding:12px 14px;
  border:1px solid var(--line-strong); border-radius:var(--radius-md);
  background:#fff; color:var(--ink); outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder, .field textarea::placeholder{color:#B0A68E;}
.field input:hover, .field textarea:hover, .field select:hover{border-color:#C7B98F;}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--maroon); box-shadow:var(--ring);}
.field input[type=file]{padding:9px 10px; background:var(--surface-2);}
.field input:disabled, .field input[readonly]{background:var(--surface-2); color:var(--ink-soft);}
.label-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.label-row a{font-size:13px; font-weight:600; text-decoration:none;}
.label-row a:hover{text-decoration:underline;}

/* Password show/hide (wrapper injected by assets/ui.js) */
.input-wrap{position:relative;}
.input-wrap input{padding-right:64px;}
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; cursor:pointer;
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; color:var(--ink-soft);
  padding:6px 10px; border-radius:var(--radius-sm);
}
.pw-toggle:hover{color:var(--maroon); background:var(--maroon-50);}

.hint{font-size:12.5px; color:var(--ink-muted);}
.divider{
  display:flex; align-items:center; gap:12px; margin:20px 0;
  color:var(--ink-muted); font-size:12.5px;
}
.divider::before, .divider::after{content:''; flex:1; height:1px; background:var(--line);}

/* ---------------------------------------------------------------------
   Flash messages
   --------------------------------------------------------------------- */
.flash{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px; border-radius:var(--radius-md); font-size:14px; margin-bottom:16px; line-height:1.45;
}
.flash::before{flex-shrink:0; font-weight:700; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; margin-top:1px;}
.flash-error{background:var(--maroon-50); border:1px solid #E8C4C4; color:#7A1F2D;}
.flash-error::before{content:"!"; background:var(--maroon); color:#fff;}
.flash-success{background:var(--good-50); border:1px solid #C3D8C2; color:#2E5237;}
.flash-success::before{content:"✓"; background:var(--good); color:#fff;}

.reset-link-box{
  margin-top:16px; padding:12px; background:var(--gold-50);
  border:1px dashed var(--gold); border-radius:var(--radius-sm); font-size:12.5px; word-break:break-all;
}

/* ---------------------------------------------------------------------
   Auth pages: split layout (brand panel + form)
   --------------------------------------------------------------------- */
.auth-layout{min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr);}
@media (min-width:960px){ .auth-layout{grid-template-columns:minmax(0,5fr) minmax(0,6fr);} }

/* Brand panel. Night surface + stars come from assets/night.css. */
.auth-aside{
  display:flex; flex-direction:column; justify-content:space-between; gap:28px;
  padding:48px 56px;
}
.auth-aside-brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:#F5E6C4;}
.auth-aside-brand img{width:40px; height:40px; border-radius:50%; box-shadow:0 0 0 2px rgba(217,169,74,.6);}
.auth-aside-brand span{font-family:var(--font-display); font-size:21px;}
.auth-aside-body{max-width:440px;}
.auth-aside-orbit{width:230px; margin:0 0 30px;}
.auth-orbit-logo{width:100%; height:100%; border-radius:50%; box-shadow:0 0 0 3px rgba(217,169,74,.45), 0 0 50px rgba(240,197,106,.3);}
.auth-aside h2{font-size:40px; line-height:1.1; color:#FFF6E2; margin:0 0 14px; letter-spacing:-.01em;}
.auth-aside p{color:var(--cream-soft); margin:0 0 26px; font-size:15.5px;}
.auth-aside ul{list-style:none; padding:0; margin:0; display:grid; gap:13px;}
.auth-aside li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:#E7D9BA;}
.auth-aside li svg{flex-shrink:0; width:20px; height:20px; color:var(--gold-glow); margin-top:1px;}
.auth-aside-foot{font-size:12.5px; color:var(--cream-muted);}
@media (min-width:960px) and (max-height:820px){ .auth-aside-orbit{width:170px; margin-bottom:22px;} .auth-aside h2{font-size:34px;} }
@media (min-width:960px) and (max-height:700px){ .auth-aside ul{display:none;} }
/* Phones/tablets: the panel becomes a compact starry band above the form. */
@media (max-width:959px){
  .auth-aside{padding:18px 20px 22px; gap:14px;}
  .auth-aside-orbit, .auth-aside p, .auth-aside ul, .auth-aside-foot{display:none;}
  .auth-aside h2{font-size:24px; margin:0;}
}

.auth-main{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 20px 48px; position:relative;
}
.auth-back{
  position:absolute; top:20px; left:20px;
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:600; color:var(--ink-soft); text-decoration:none;
  padding:6px 10px; border-radius:var(--radius-sm);
}
.auth-back:hover{color:var(--maroon); background:var(--maroon-50);}

.auth-card{
  width:100%; max-width:420px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:36px 32px 30px;
  box-shadow:var(--shadow-lg);
}
@media (max-width:480px){ .auth-card{padding:28px 20px 24px; border-radius:16px;} }
@media (max-width:959px){ .auth-main{justify-content:flex-start; padding-top:56px;} }
.auth-logo{
  display:block; width:56px; height:56px; margin:0 0 18px;
  border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 3px var(--gold-50), 0 0 0 4px var(--line-strong);
}
.auth-logo{display:none;} /* the brand panel/band always carries the logo now */
.auth-eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--maroon);
}
.auth-title{
  font-family:var(--font-display); font-size:30px; line-height:1.2; color:var(--ink);
  margin:6px 0 6px;
}
.auth-sub{color:var(--ink-soft); font-size:14.5px; margin:0 0 24px;}
.auth-links{text-align:center; margin-top:22px; font-size:14px; color:var(--ink-soft);}
.auth-links a{color:var(--maroon); font-weight:600; text-decoration:none;}
.auth-links a:hover{text-decoration:underline;}
.auth-legal{margin-top:18px; text-align:center; font-size:12px; color:var(--ink-muted);}

/* ---------------------------------------------------------------------
   Logged-in pages: sticky top nav + content shell
   --------------------------------------------------------------------- */
.app-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(20,14,9,.94);
  -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(217,169,74,.18);
}
.app-nav-inner{
  max-width:1120px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.app-nav-brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--font-display); font-size:19px; color:#F5E6C4; white-space:nowrap;
}
.app-nav-brand img{width:32px; height:32px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(217,169,74,.55);}
.app-nav-links{display:flex; align-items:center; gap:2px;}
.app-nav-links a{
  font-size:14px; font-weight:500; color:#D9CBAA; text-decoration:none;
  padding:8px 12px; border-radius:var(--radius-sm);
  transition:background-color .15s ease, color .15s ease;
}
.app-nav-links a:hover{color:#FFF6E2; background:rgba(255,255,255,.07);}
.app-nav-links a[aria-current="page"]{color:#FFF6E2; background:rgba(217,169,74,.18);}
.app-nav-links a.is-cta{background:var(--gold-light); color:var(--dark); font-weight:600; margin-left:6px;}
.app-nav-links a.is-cta:hover{background:#E6BA5E;}
.app-nav-links a.is-danger:hover{color:#F4B2BC; background:rgba(168,40,63,.22);}
.app-nav-sep{width:1px; height:20px; background:rgba(217,169,74,.2); margin:0 6px;}
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radius-sm);
  background:transparent; border:1px solid rgba(217,169,74,.3); color:#F5E6C4; cursor:pointer;
}
.nav-toggle svg{width:20px; height:20px;}
@media (max-width:860px){
  .nav-toggle{display:inline-flex;}
  .app-nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:10px 14px 16px; background:var(--night-2, #1E160F);
    border-bottom:1px solid rgba(217,169,74,.18); box-shadow:0 18px 30px rgba(0,0,0,.25);
  }
  .app-nav.is-open .app-nav-links{display:flex;}
  .app-nav-links a{padding:12px 14px; font-size:15px;}
  .app-nav-links a.is-cta{margin:6px 0 0; text-align:center;}
  .app-nav-sep{width:auto; height:1px; margin:6px 0;}
}

.app-shell{width:100%; max-width:900px; margin:0 auto; padding:32px 20px 64px;}
@media (max-width:560px){ .app-shell{padding:20px 14px 48px;} }

/* Shared page header used by upgrade / ebooks */
.page-head{text-align:center; margin:8px auto 32px; max-width:620px;}
.page-head .eyebrow{font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--maroon);}
.page-head h1{font-size:clamp(28px,4vw,38px); line-height:1.15; margin:8px 0 10px;}
.page-head p{color:var(--ink-soft); margin:0; font-size:15.5px;}

/* Night band under the nav on account pages (profile, plans, help, store).
   The .night surface and .stars come from assets/night.css. */
.page-hero{border-bottom:1px solid var(--night-line, rgba(217,169,74,.18));}
.page-hero-inner{max-width:1080px; margin:0 auto; padding:44px 20px 48px;}
.page-hero.is-center .page-hero-inner{text-align:center;}
.page-hero h1{font-size:clamp(30px,4.4vw,46px); line-height:1.1; color:#FFF6E2; margin:10px 0 12px; letter-spacing:-.01em;}
.page-hero p{color:var(--cream-soft, #CDBF9F); font-size:16px; margin:0; max-width:62ch;}
.page-hero.is-center p{margin:0 auto;}
.page-hero .graha-row{margin-bottom:14px;}
.page-hero.is-center .graha-row{justify-content:center;}
@media (max-width:560px){ .page-hero-inner{padding:32px 16px 36px;} }
/* The first card after a night band sits on paper with normal spacing. */
.page-hero + .app-shell{padding-top:32px;}

.site-foot{
  text-align:center; font-size:13px; color:var(--ink-muted);
  padding:28px 20px 36px; border-top:1px solid var(--line);
}
.site-foot a{color:var(--ink-soft); text-decoration:none; font-weight:600;}
.site-foot a:hover{color:var(--maroon);}