/*
Theme Name: Apply Mole Child
Theme URI: https://applymole.com
Description: Apply Mole — a production child theme on EduMall that transforms it into a premium SaaS platform: branded homepage with trust & scholarship sections, a universal role-aware dashboard framework, notification center, and complete component + empty-state system. Business logic is provided by the Apply Mole plugin suite; this theme is the presentation layer.
Author: Apply Mole
Template: edumall
Version: 2.0.0
License: GNU General Public License v2 or later
Text Domain: applymole
*/

/* ===========================================================================
   APPLY MOLE DESIGN SYSTEM  (Phase 0, approved)
   Font: Inter · Radius: 16px · Bright, white-canvas SaaS
   Change a token here and it propagates everywhere. Never hard-code a value.
   =========================================================================== */
:root{
  /* Palette (per approved spec) */
  --am-blue:#2563EB;      /* primary action, links, active nav */
  --am-blue-700:#1d4ed8;
  --am-purple:#8B5CF6;    /* "current" state, premium highlight */
  --am-cyan:#06B6D4;      /* secondary accent, data viz */
  --am-green:#10B981;     /* approved / paid / complete */
  --am-orange:#F59E0B;    /* pending / attention */
  --am-yellow:#FACC15;    /* ratings, sparing emphasis */
  --am-bg:#F8FAFC;        /* app canvas */
  --am-card:#FFFFFF;      /* surfaces */
  --am-ink:#0F172A;       /* primary text */
  --am-muted:#64748B;     /* secondary text */
  --am-line:#E2E8F0;      /* borders, dividers */

  /* Tints */
  --am-blue-soft:#EAF1FF;
  --am-purple-soft:#F3ECFF;
  --am-green-soft:#E7F9F1;
  --am-orange-soft:#FFF4E5;

  /* Type */
  --am-font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Shape + depth */
  --am-radius:16px;
  --am-radius-sm:12px;
  --am-radius-pill:100px;
  --am-shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.04);
  --am-shadow:0 8px 30px rgba(15,23,42,.08);
  --am-shadow-lg:0 24px 60px rgba(37,99,235,.16);

  /* Spacing scale (4px base) */
  --am-1:4px; --am-2:8px; --am-3:12px; --am-4:16px; --am-6:24px; --am-8:32px; --am-12:48px;

  --am-maxw:1200px;
  --am-ease:cubic-bezier(.2,.7,.2,1);
}

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ===========================================================================
   SCOPED HARDENING RESET
   EduMall sets global box-sizing, margins, line-heights, list and anchor
   styles that bleed into our components and cause the "styled but misaligned"
   look. We neutralise inheritance INSIDE our own surfaces only, so EduMall's
   own areas are untouched but every Apply Mole block renders exactly as
   designed regardless of the parent theme.
   =========================================================================== */
.applymole, .applymole *, .applymole *::before, .applymole *::after{
  box-sizing:border-box;
}
.applymole{
  font-family:var(--am-font);
  color:var(--am-ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Kill stray margins EduMall adds to headings/paragraphs inside our blocks */
.applymole h1,.applymole h2,.applymole h3,.applymole h4,.applymole h5,.applymole p{
  margin-top:0;
}
/* Our lists/links shouldn't inherit theme bullets, underlines, odd colors */
.applymole .am-menu,.applymole .am-footer__grid ul,.applymole .am-empty,
.applymole .am-noti__tabs{list-style:none;}
.applymole a{color:inherit;}
.applymole .am-btn,.applymole .am-btn:hover,.applymole .am-btn:focus{text-decoration:none;}
/* EduMall sometimes forces image max-heights / inline display — reset for our UI */
.applymole img{max-width:100%;height:auto;}
/* Buttons: strip theme button chrome before ours applies */
.applymole button{font-family:inherit;}
/* Sections shouldn't pick up theme container padding that misaligns the grid */
.applymole section{width:100%;}

/* ---------- Base, scoped to .applymole so EduMall stays intact ---------- */
.applymole, .applymole p, .applymole li, .applymole span, .applymole div, .applymole a, .applymole button, .applymole input, .applymole select, .applymole textarea{
  font-family:var(--am-font);
}
.applymole h1,.applymole h2,.applymole h3,.applymole h4,.applymole h5{
  font-family:var(--am-font); color:var(--am-ink); letter-spacing:-.02em; margin:0 0 .4em; font-weight:800;
}
.applymole h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;}
.applymole h2{font-size:clamp(1.5rem,3vw,2.2rem);}
.applymole h3{font-size:1.15rem;font-weight:700;}
.applymole p{color:var(--am-ink);}

/* ---------- Layout helpers ---------- */
.am-wrap{max-width:var(--am-maxw);margin-inline:auto;padding-inline:var(--am-4);}
.am-section{padding:clamp(3rem,6vw,5.5rem) 0;}
.am-center{text-align:center;}
.am-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--am-4);}
.am-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--am-4);}
.am-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--am-4);}
@media(max-width:900px){.am-grid-3,.am-grid-4{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.am-grid-2,.am-grid-3,.am-grid-4{grid-template-columns:1fr;}}

/* ---------- Eyebrow ---------- */
.am-eyebrow{display:inline-block;font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--am-blue);background:var(--am-blue-soft);padding:.4rem .85rem;border-radius:var(--am-radius-pill);}
.am-eyebrow--purple{color:var(--am-purple);background:var(--am-purple-soft);}

/* ---------- Buttons ---------- */
.am-btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.98rem;
  padding:.85rem 1.5rem;border-radius:var(--am-radius-sm);background:var(--am-blue);color:#fff !important;
  border:0;cursor:pointer;text-decoration:none;line-height:1;box-shadow:var(--am-shadow-sm);
  transition:transform .18s var(--am-ease),box-shadow .18s var(--am-ease),filter .18s var(--am-ease);}
.am-btn:hover{transform:translateY(-2px);box-shadow:var(--am-shadow);filter:brightness(1.05);}
.am-btn:focus-visible{outline:3px solid var(--am-purple);outline-offset:2px;}
.am-btn--accent{background:var(--am-purple);}
.am-btn--success{background:var(--am-green);}
.am-btn--ghost{background:#fff;color:var(--am-blue) !important;box-shadow:inset 0 0 0 1.5px var(--am-line);}
.am-btn--lg{padding:1.05rem 2rem;font-size:1.05rem;}
.am-btn--block{width:100%;justify-content:center;}

/* ---------- Cards ---------- */
.am-card{background:var(--am-card);border:1px solid var(--am-line);border-radius:var(--am-radius);
  box-shadow:var(--am-shadow-sm);padding:var(--am-6);}
.am-card--raise{transition:transform .2s var(--am-ease),box-shadow .2s var(--am-ease);}
.am-card--raise:hover{transform:translateY(-4px);box-shadow:var(--am-shadow);}

/* ---------- Badges ---------- */
.am-badge{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.72rem;
  padding:.28rem .7rem;border-radius:var(--am-radius-pill);}
.am-badge--info{background:var(--am-blue-soft);color:var(--am-blue);}
.am-badge--ok{background:var(--am-green-soft);color:#0a8f63;}
.am-badge--warn{background:var(--am-orange-soft);color:#b45309;}
.am-badge--new{background:var(--am-purple-soft);color:#7c3aed;}

/* ---------- Progress ---------- */
.am-progress{height:9px;border-radius:var(--am-radius-pill);background:var(--am-line);overflow:hidden;}
.am-progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--am-blue),var(--am-cyan));
  border-radius:inherit;transition:width .5s var(--am-ease);}

/* ---------- Alerts ---------- */
.am-alert{border-radius:var(--am-radius-sm);padding:.85rem 1rem;font-size:.92rem;margin:.5rem 0;border:1px solid;}
.am-alert--ok{background:var(--am-green-soft);border-color:#bff0dc;color:#0a8f63;}
.am-alert--warn{background:var(--am-orange-soft);border-color:#fed7aa;color:#b45309;}
.am-alert--info{background:var(--am-blue-soft);border-color:#bcd7ff;color:var(--am-blue-700);}

/* ---------- Forms ---------- */
.am-field{display:block;width:100%;padding:.8rem 1rem;border:1px solid var(--am-line);
  border-radius:var(--am-radius-sm);font-size:.98rem;background:#fff;color:var(--am-ink);
  transition:border-color .15s var(--am-ease),box-shadow .15s var(--am-ease);}
.am-field:focus{outline:0;border-color:var(--am-blue);box-shadow:0 0 0 3px var(--am-blue-soft);}
.am-label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.35rem;}
.am-help{font-size:.8rem;color:var(--am-muted);margin-top:.3rem;}

/* ---------- Skeleton loaders ---------- */
.am-skel{background:linear-gradient(90deg,#eef2f7 25%,#f7fafc 37%,#eef2f7 63%);background-size:400% 100%;
  border-radius:8px;height:14px;margin-bottom:.5rem;animation:amShimmer 1.4s ease infinite;}
@keyframes amShimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}

/* ---------- Empty states ---------- */
.am-empty{border:1.5px dashed var(--am-line);border-radius:var(--am-radius);padding:var(--am-8) var(--am-6);
  text-align:center;color:var(--am-muted);}
.am-empty__icon{font-size:2rem;margin-bottom:.5rem;display:block;}
.am-empty__title{font-weight:700;color:var(--am-ink);margin-bottom:.25rem;}
.am-empty a{color:var(--am-blue);font-weight:700;text-decoration:none;}

/* ---------- Stat tiles ---------- */
.am-stat{display:flex;flex-direction:column;gap:.2rem;}
.am-stat__num{font-weight:800;font-size:2rem;color:var(--am-ink);line-height:1;}
.am-stat__label{color:var(--am-muted);font-size:.85rem;}

/* ---------- Reveal on load/scroll ---------- */
.am-reveal{opacity:0;transform:translateY(14px);animation:amRise .7s var(--am-ease) forwards;}
.am-reveal:nth-child(2){animation-delay:.06s;}
.am-reveal:nth-child(3){animation-delay:.12s;}
.am-reveal:nth-child(4){animation-delay:.18s;}
@keyframes amRise{to{opacity:1;transform:none;}}

/* =====================  HERO  ===================== */
.am-hero{position:relative;overflow:hidden;padding:clamp(4rem,9vw,7rem) 0;
  background:radial-gradient(1100px 480px at 82% -10%,rgba(139,92,246,.18),transparent 60%),
             radial-gradient(900px 460px at -5% 110%,rgba(37,99,235,.16),transparent 55%),
             linear-gradient(180deg,#EEF4FF,#F8FAFC);}
.am-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--am-8);align-items:center;}
.am-hero p.am-sub{color:var(--am-muted);font-size:clamp(1.05rem,2vw,1.3rem);max-width:46ch;margin-top:var(--am-4);}
.am-hero__cta{display:flex;gap:var(--am-3);flex-wrap:wrap;margin-top:var(--am-6);}
@media(max-width:880px){.am-hero__grid{grid-template-columns:1fr;}}

/* =====================  TRUST & SECURITY  ===================== */
.am-trust{background:var(--am-card);}
.am-trust__item{display:flex;gap:var(--am-3);align-items:flex-start;}
.am-trust__ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--am-blue-soft);color:var(--am-blue);font-size:1.35rem;}
.am-trust__item h4{margin:0 0 .2rem;font-size:1rem;}
.am-trust__item p{margin:0;color:var(--am-muted);font-size:.9rem;}

/* =====================  SCHOLARSHIP BANNER  ===================== */
.am-scholar{background:linear-gradient(120deg,var(--am-purple),#6d28d9);border-radius:var(--am-radius);
  color:#fff;padding:clamp(2rem,4vw,3rem);display:flex;justify-content:space-between;align-items:center;
  gap:var(--am-6);flex-wrap:wrap;box-shadow:var(--am-shadow-lg);}
.am-scholar h2{color:#fff;margin:0 0 .3rem;}
.am-scholar p{color:#EADDFF;margin:0;max-width:52ch;}
.am-scholar .am-btn{background:#fff;color:var(--am-purple) !important;}

/* =====================  HOW IT WORKS  ===================== */
.am-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--am-3);counter-reset:step;}
@media(max-width:900px){.am-steps{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.am-steps{grid-template-columns:1fr 1fr;}}
.am-step{background:var(--am-card);border:1px solid var(--am-line);border-radius:var(--am-radius-sm);
  padding:var(--am-4);text-align:center;}
.am-step__n{width:34px;height:34px;border-radius:50%;background:var(--am-blue);color:#fff;font-weight:800;
  display:grid;place-items:center;margin:0 auto .5rem;}
.am-step h4{margin:0;font-size:.95rem;}

/* =====================  DASHBOARD FRAMEWORK  ===================== */
.am-dash{display:grid;grid-template-columns:248px 1fr;min-height:78vh;background:var(--am-bg);}
.am-dash.is-collapsed{grid-template-columns:72px 1fr;}
.am-dash__side{background:#fff;border-right:1px solid var(--am-line);padding:var(--am-4) var(--am-3);display:flex;flex-direction:column;gap:.2rem;}
.am-dash__brand{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--am-ink);padding:.4rem .6rem var(--am-4);}
.am-dash__nav a{display:flex;align-items:center;gap:.7rem;color:var(--am-ink);text-decoration:none;
  padding:.65rem .8rem;border-radius:10px;font-weight:600;font-size:.93rem;transition:background .15s var(--am-ease),color .15s var(--am-ease);}
.am-dash__nav a .ic{flex:0 0 auto;width:20px;text-align:center;}
.am-dash__nav a:hover{background:var(--am-blue-soft);}
.am-dash__nav a.is-active{background:var(--am-blue);color:#fff;}
.am-dash.is-collapsed .am-dash__nav a span.lbl,.am-dash.is-collapsed .am-dash__brand span{display:none;}
.am-dash__top{display:flex;align-items:center;gap:var(--am-3);padding:var(--am-3) var(--am-6);
  background:#fff;border-bottom:1px solid var(--am-line);position:sticky;top:0;z-index:20;}
.am-dash__search{flex:1;max-width:420px;}
.am-dash__top .spacer{flex:1;}
.am-iconbtn{position:relative;width:40px;height:40px;border-radius:10px;border:1px solid var(--am-line);
  background:#fff;display:grid;place-items:center;cursor:pointer;font-size:1.05rem;}
.am-iconbtn .dot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--am-orange);}
.am-dash__main{padding:var(--am-6);}
.am-dash__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--am-4);}
@media(max-width:780px){
  .am-dash{grid-template-columns:1fr;}
  .am-dash__side{position:fixed;inset:0 30% 0 0;z-index:40;transform:translateX(-100%);transition:transform .25s var(--am-ease);}
  .am-dash__side.is-open{transform:none;}
}

/* =====================  NOTIFICATION CENTER  ===================== */
.am-noti{position:fixed;top:0;right:0;width:380px;max-width:92vw;height:100vh;background:#fff;
  box-shadow:var(--am-shadow-lg);border-left:1px solid var(--am-line);transform:translateX(100%);
  transition:transform .28s var(--am-ease);z-index:60;display:flex;flex-direction:column;}
.am-noti.is-open{transform:none;}
.am-noti__head{display:flex;align-items:center;justify-content:space-between;padding:var(--am-4) var(--am-6);border-bottom:1px solid var(--am-line);}
.am-noti__tabs{display:flex;gap:.3rem;padding:var(--am-3) var(--am-6) 0;}
.am-noti__tab{font-size:.82rem;font-weight:700;color:var(--am-muted);background:none;border:0;padding:.4rem .6rem;border-radius:8px;cursor:pointer;}
.am-noti__tab.is-active{background:var(--am-blue-soft);color:var(--am-blue);}
.am-noti__list{flex:1;overflow:auto;padding:var(--am-3) var(--am-6) var(--am-6);}
.am-noti__item{display:flex;gap:.7rem;padding:.8rem 0;border-bottom:1px solid var(--am-line);}
.am-noti__item .ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:1rem;}
.am-noti__item.unread{background:linear-gradient(90deg,var(--am-blue-soft),transparent);margin-inline:calc(var(--am-6) * -1);padding-inline:var(--am-6);}
.am-noti__item .t{font-weight:700;font-size:.9rem;}
.am-noti__item .b{font-size:.84rem;color:var(--am-muted);}
.am-noti__item .time{font-size:.74rem;color:var(--am-muted);margin-top:.2rem;}
.ic--info{background:var(--am-blue-soft);color:var(--am-blue);}
.ic--alert{background:var(--am-orange-soft);color:#b45309;}
.ic--announce{background:var(--am-purple-soft);color:#7c3aed;}
.ic--system{background:var(--am-bg);color:var(--am-muted);}
.am-scrim{position:fixed;inset:0;background:rgba(15,23,42,.35);opacity:0;visibility:hidden;transition:opacity .2s;z-index:55;}
.am-scrim.is-open{opacity:1;visibility:visible;}

/* toast */
.am-toast-wrap{position:fixed;top:16px;right:16px;display:flex;flex-direction:column;gap:.5rem;z-index:70;}
.am-toast{background:#fff;border:1px solid var(--am-line);border-left:4px solid var(--am-blue);
  border-radius:var(--am-radius-sm);box-shadow:var(--am-shadow);padding:.8rem 1rem;min-width:260px;max-width:340px;
  animation:amRise .3s var(--am-ease);}
.am-toast .t{font-weight:700;font-size:.9rem;}
.am-toast .b{font-size:.84rem;color:var(--am-muted);}

/* =====================  CAREER LADDER  ===================== */
.am-ladder{display:flex;flex-direction:column;gap:.5rem;}
.am-rung{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-radius:var(--am-radius-sm);
  border:1px solid var(--am-line);background:#fff;}
.am-rung__lvl{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--am-line);}
.am-rung.done .am-rung__lvl{background:var(--am-green);}
.am-rung.now{box-shadow:0 0 0 2px var(--am-purple);}
.am-rung.now .am-rung__lvl{background:var(--am-purple);}
.am-rung__name{flex:1;font-weight:700;font-size:.95rem;}

/* =====================  KYC TRUST STRIP  ===================== */
.am-kyc-trust{display:flex;gap:var(--am-4);flex-wrap:wrap;}
.am-kyc-trust .chip{display:flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:600;color:var(--am-ink);
  background:var(--am-green-soft);padding:.45rem .8rem;border-radius:var(--am-radius-pill);}

/* utilities */
.am-mt-2{margin-top:var(--am-4);}.am-mt-3{margin-top:var(--am-6);}.am-mt-4{margin-top:var(--am-8);}
.am-muted{color:var(--am-muted);}
.am-hide{display:none;}

/* =====================  HEADER (dark, premium)  =====================
   Dark header so an uploaded light/white logo is always visible and the menu
   reads with high contrast. Looks like Linear/Vercel, not a generic white bar. */
.am-header{position:sticky;top:0;z-index:50;width:100%;background:var(--am-ink);
  border-bottom:1px solid rgba(255,255,255,.08);}
.am-header__inner{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--am-4);min-height:70px;
  width:100%;max-width:var(--am-maxw);margin-inline:auto;padding-inline:var(--am-4);}
.am-header__brand{display:inline-flex;align-items:center;text-decoration:none;font-weight:800;flex:0 0 auto;gap:.5rem;}
.am-header__brand img,.am-header__logo{max-height:44px;width:auto;display:block;object-fit:contain;}
.am-logo{font-weight:800;font-size:1.25rem;color:#fff;white-space:nowrap;letter-spacing:-.01em;}
.am-header__nav{display:flex;align-items:center;gap:var(--am-8);margin-left:auto;flex:0 1 auto;}
.am-menu{display:flex;align-items:center;gap:var(--am-8);list-style:none;margin:0;padding:0;}
.am-menu li{margin:0;padding:0;list-style:none;}
.am-menu a{display:inline-block;color:#E2E8F0;text-decoration:none;font-weight:600;font-size:1rem;
  line-height:1;padding:.5rem 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.am-menu a:hover{color:#fff;border-bottom-color:var(--am-purple);}
.am-header__cta{display:flex;align-items:center;gap:.6rem;flex:0 0 auto;}
.am-header .am-btn--ghost{background:transparent;color:#fff !important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);}
.am-header .am-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px #fff;}
.am-header .am-iconbtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff;}
.am-header__burger{display:none;width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);color:#fff;font-size:1.2rem;cursor:pointer;line-height:1;flex:0 0 auto;}
@media(max-width:980px){
  .am-header__burger{display:block;margin-left:auto;}
  .am-header__nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--am-ink);
    border-bottom:1px solid rgba(255,255,255,.1);flex-direction:column;align-items:stretch;gap:var(--am-3);
    padding:var(--am-4);margin:0;box-shadow:var(--am-shadow);}
  .am-header__nav.is-open{display:flex;}
  .am-menu{flex-direction:column;align-items:stretch;gap:var(--am-2);}
  .am-menu a{color:#E2E8F0;padding:.6rem 0;}
  .am-header__cta{justify-content:flex-start;margin-top:var(--am-2);}
}

/* =====================  FOOTER  ===================== */
.am-footer{background:var(--am-ink);color:#cbd5e1;margin-top:var(--am-12);}
.am-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--am-6);padding:var(--am-12) var(--am-4) var(--am-8);}
@media(max-width:760px){.am-footer__grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.am-footer__grid{grid-template-columns:1fr;}}
.am-footer h5{color:#fff;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .7rem;}
.am-footer a{display:block;color:#cbd5e1;text-decoration:none;font-size:.92rem;padding:.2rem 0;}
.am-footer a:hover{color:#fff;}
.am-footer__tag{color:#94a3b8;font-size:.92rem;margin-top:.5rem;max-width:34ch;}
.am-footer__bar{display:flex;justify-content:space-between;gap:var(--am-3);flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);padding:var(--am-4);font-size:.82rem;color:#94a3b8;}

/* =====================  AUTH (register / signup)  ===================== */
.am-auth{padding:clamp(2.5rem,6vw,5rem) 0;
  background:radial-gradient(900px 420px at 90% -10%,rgba(139,92,246,.16),transparent 60%),
             radial-gradient(700px 380px at -5% 110%,rgba(37,99,235,.14),transparent 55%),
             linear-gradient(180deg,#EEF4FF,#F8FAFC);}
.am-auth__grid{display:grid;grid-template-columns:1fr 460px;gap:var(--am-8);align-items:center;}
.am-auth__aside{background:linear-gradient(150deg,var(--am-purple),#6d28d9);color:#fff;
  border-radius:var(--am-radius);padding:clamp(1.75rem,3vw,2.5rem);box-shadow:var(--am-shadow-lg);}
.am-auth__list{list-style:none;margin:var(--am-4) 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.am-auth__list li{color:#F3ECFF;font-weight:600;}
.am-auth__card{align-self:stretch;}
.am-auth__card h2{margin-bottom:.2rem;}
@media(max-width:860px){
  .am-auth__grid{grid-template-columns:1fr;gap:var(--am-6);}
  .am-auth__aside{order:2;}
}