/* =====================================================================
   HJ ACADEMY — learner account: sign-in / sign-up / reset, My courses,
   profile tabs, notifications, reviews. Loaded only by /account pages.
   Uses the site tokens (--accent, --brand, --ink, --line, --muted …).
   ===================================================================== */

.ac-page{ padding:28px 0 72px; background:linear-gradient(180deg, var(--brand-wash, #F1FAF6) 0, #fff 320px); min-height:60vh; }

/* ----------------------------------------------------------- auth cards */
.ac-auth{ display:grid; grid-template-columns:minmax(0,1fr); max-width:980px; margin:12px auto 0; border-radius:24px; overflow:hidden;
  background:#fff; border:1px solid var(--line); box-shadow:0 40px 80px -60px rgba(14,21,18,.45); }
.ac-auth-art{ position:relative; padding:34px 32px; background:
    radial-gradient(60% 60% at 85% 10%, rgba(62,180,137,.28) 0, rgba(62,180,137,0) 70%),
    radial-gradient(70% 70% at 0% 100%, rgba(24,129,94,.18) 0, rgba(24,129,94,0) 70%),
    linear-gradient(160deg, #0E1512 0%, #15241D 100%); color:#fff; overflow:hidden; }
.ac-auth-art h2{ color:#fff; font-size:clamp(1.5rem, 2.4vw, 2rem); line-height:1.15; margin:10px 0 12px; }
.ac-auth-art h2 .accent{ color:var(--brand, #3EB489); }
.ac-auth-art p{ color:rgba(255,255,255,.74); margin:0; max-width:34ch; }
.ac-auth-art .eyebrow{ color:var(--brand, #3EB489); }
.ac-auth-points{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; }
.ac-auth-points li{ display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:rgba(255,255,255,.86); }
.ac-auth-points li::before{ content:"✓"; flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:rgba(62,180,137,.2); color:var(--brand, #3EB489); font-size:.72rem; font-weight:700; }
.ac-auth-ring{ position:absolute; right:-60px; bottom:-60px; width:220px; height:220px; border-radius:50%;
  border:28px solid rgba(62,180,137,.12); pointer-events:none; }
.ac-auth-form{ padding:32px 28px 34px; }
.ac-auth-form h1{ font-size:1.6rem; margin:0 0 6px; }
.ac-auth-form .ac-sub{ color:var(--muted); margin:0 0 22px; font-size:.95rem; }
.ac-switch{ margin:20px 0 0; font-size:.92rem; color:var(--muted); text-align:center; }
.ac-switch a{ font-weight:600; color:var(--accent); }

/* ---------------------------------------------------------------- forms */
.ac-form{ display:grid; gap:16px; }
.ac-row{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
.ac-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.ac-field > span{ font-size:.82rem; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; gap:10px; }
.ac-field > span a{ font-weight:500; color:var(--accent); }
.ac-field input, .ac-field select, .ac-field textarea{
  width:100%; padding:12px 14px; font:inherit; font-size:.97rem; color:var(--ink); background:#fff;
  border:1px solid var(--line-strong, #C9D8D1); border-radius:12px; transition:border-color .15s, box-shadow .15s; }
.ac-field textarea{ resize:vertical; min-height:120px; line-height:1.55; }
.ac-field input:focus, .ac-field select:focus, .ac-field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(24,129,94,.12); }
.ac-field input[readonly]{ background:var(--brand-wash, #F1FAF6); color:var(--muted); }
.ac-field small{ color:var(--muted); font-size:.8rem; }
.ac-field.has-error input, .ac-field.has-error textarea, .ac-field.has-error select{ border-color:#AD3B34; }
.ac-err{ color:#AD3B34; font-size:.82rem; font-weight:500; }
.ac-check{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--ink-soft); }
.ac-check input{ margin-top:3px; width:18px; height:18px; accent-color:var(--accent); flex:none; }
.ac-pw{ position:relative; }
.ac-pw input{ padding-right:74px; }
.ac-pw button{ position:absolute; right:8px; top:50%; transform:translateY(-50%); border:0; background:var(--brand-wash, #F1FAF6);
  color:var(--accent); font:inherit; font-size:.78rem; font-weight:600; padding:6px 10px; border-radius:8px; cursor:pointer; }
.ac-meter{ height:6px; border-radius:99px; background:var(--line); overflow:hidden; }
.ac-meter i{ display:block; height:100%; width:0; background:#AD3B34; transition:width .2s, background .2s; }
.ac-alert{ padding:12px 14px; border-radius:12px; font-size:.92rem; margin:0 0 16px; border:1px solid; }
.ac-alert-error{ background:#FBEAE9; border-color:#E9B7B2; color:#8E2F29; }
.ac-alert-ok{ background:#E2F3EA; border-color:#A9D7BF; color:#1F6B45; }
.ac-alert-info{ background:var(--brand-wash, #F1FAF6); border-color:var(--line); color:var(--ink-soft); }
.ac-form .btn{ justify-self:start; }
.ac-form .btn-block{ justify-self:stretch; width:100%; }

/* ---------------------------------------------------------- the shell */
.ac-shell{ display:grid; grid-template-columns:minmax(0,1fr); gap:22px; align-items:start; }
.ac-side{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px; }
.ac-me{ display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:10px; }
.ac-avatar{ flex:none; width:52px; height:52px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(145deg, #D6F0E4, #F1FAF6); color:var(--accent); font-weight:700; font-size:1.05rem; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); }
.ac-avatar img{ width:100%; height:100%; object-fit:cover; }
.ac-avatar-lg{ width:112px; height:112px; font-size:2rem; }
.ac-me b{ display:block; line-height:1.25; }
.ac-me > div{ min-width:0; }
.ac-me small{ display:block; color:var(--muted); font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-nav{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.ac-nav::-webkit-scrollbar{ display:none; }
.ac-nav a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--ink);
  font-weight:500; font-size:.94rem; white-space:nowrap; }
.ac-nav a:hover{ background:var(--brand-wash, #F1FAF6); }
.ac-nav a.is-active{ background:var(--accent); color:#fff; }
.ac-nav svg{ width:18px; height:18px; flex:none; }
.ac-badge{ margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:#E0583E; color:#fff;
  font-size:.72rem; font-weight:700; display:grid; place-items:center; }
.ac-nav a.is-active .ac-badge{ background:#fff; color:var(--accent); }
.ac-main{ min-width:0; }
.ac-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:18px; }
.ac-head h1{ font-size:clamp(1.5rem, 2.4vw, 2rem); margin:0; }
.ac-head p{ margin:4px 0 0; color:var(--muted); }
.ac-card{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:22px; }
.ac-card + .ac-card{ margin-top:18px; }
.ac-card h2{ font-size:1.12rem; margin:0 0 4px; }
.ac-card > p.ac-muted{ margin:0 0 18px; }
.ac-muted{ color:var(--muted); font-size:.9rem; }

/* ---------------------------------------------------------------- tabs */
.ac-tabs{ display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; padding:5px; background:#fff; border:1px solid var(--line);
  border-radius:999px; margin:0 0 18px; scrollbar-width:none; width:max-content; max-width:100%; }
.ac-tabs::-webkit-scrollbar{ display:none; }
.ac-tabs a{ padding:9px 16px; border-radius:999px; text-decoration:none; color:var(--ink-soft); font-weight:600; font-size:.9rem; white-space:nowrap; }
.ac-tabs a:hover{ color:var(--accent); }
.ac-tabs a.is-active{ background:var(--ink, #111); color:#fff; }
.ac-tabs a span{ opacity:.65; font-weight:500; margin-left:4px; }

/* ------------------------------------------------------------ my courses */
.ac-courses{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr); }
.ac-course{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden;
  transition:transform .2s, box-shadow .2s, border-color .2s; }
.ac-course:hover{ transform:translateY(-3px); border-color:rgba(24,129,94,.35); box-shadow:0 30px 50px -40px rgba(14,21,18,.5); }
.ac-course-media{ position:relative; aspect-ratio:16/9; background:linear-gradient(145deg, #D6F0E4, #F1FAF6); overflow:hidden; }
.ac-course-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.ac-course-media .ac-ph{ position:absolute; inset:0; display:grid; place-items:center; }
.ac-course-media .ac-ph svg{ width:34%; height:auto; color:var(--accent); opacity:.85; }
.ac-state{ position:absolute; top:12px; left:12px; padding:5px 10px; border-radius:99px; font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; background:#fff; color:var(--ink); box-shadow:0 6px 16px -8px rgba(0,0,0,.4); }
.ac-state-ongoing{ background:var(--accent); color:#fff; }
.ac-state-completed{ background:#0E1512; color:var(--brand, #3EB489); }
.ac-state-expired{ background:#FBEAE9; color:#8E2F29; }
.ac-course-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.ac-course-body h3{ font-size:1.08rem; margin:0; line-height:1.3; }
.ac-course-body h3 a{ color:inherit; text-decoration:none; }
.ac-course-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.8rem; color:var(--muted); }
.ac-progress{ display:grid; gap:6px; }
.ac-progress-bar{ height:8px; border-radius:99px; background:var(--brand-wash, #F1FAF6); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); }
.ac-progress-bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--accent), var(--brand, #3EB489)); }
.ac-progress small{ display:flex; justify-content:space-between; font-size:.8rem; color:var(--muted); }
.ac-next{ font-size:.85rem; padding:9px 12px; border-radius:10px; background:var(--brand-wash, #F1FAF6); color:var(--ink-soft); }
.ac-next b{ color:var(--ink); }
.ac-course-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:6px; }
.ac-empty{ text-align:center; padding:48px 20px; background:#fff; border:1px dashed var(--line-strong, #C9D8D1); border-radius:20px; }
.ac-empty svg{ width:64px; height:64px; color:var(--accent); opacity:.8; }
.ac-empty h2{ font-size:1.2rem; margin:12px 0 6px; }
.ac-empty p{ color:var(--muted); margin:0 auto 18px; max-width:44ch; }

/* ------------------------------------------------------------ profile */
.ac-photo{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.ac-photo form{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.ac-file{ position:relative; overflow:hidden; }
.ac-file input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.ac-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:14px; }
.ac-table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:560px; }
.ac-table th{ text-align:left; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:12px 14px; background:var(--brand-wash, #F1FAF6); }
.ac-table td{ padding:12px 14px; border-top:1px solid var(--line); vertical-align:top; }
.ac-pill{ display:inline-block; padding:3px 9px; border-radius:99px; font-size:.74rem; font-weight:600; background:var(--brand-wash, #F1FAF6); color:var(--ink-soft); white-space:nowrap; }
.ac-pill-ok{ background:#E2F3EA; color:#1F6B45; }
.ac-pill-warn{ background:#FAF0DC; color:#7A5410; }
.ac-pill-err{ background:#FBEAE9; color:#8E2F29; }
.ac-timeline{ list-style:none; margin:0; padding:0 0 0 20px; border-left:2px solid var(--line); }
.ac-timeline li{ position:relative; padding:0 0 18px 8px; }
.ac-timeline li::before{ content:""; position:absolute; left:-27px; top:5px; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--accent); }
.ac-timeline li.is-alert::before{ border-color:#E0583E; }
.ac-timeline time{ display:block; font-size:.78rem; color:var(--muted); }
.ac-day{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:6px 0 10px -20px; padding-left:0; }
.ac-prefs{ display:grid; gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.ac-pref{ display:grid; grid-template-columns:minmax(0,1fr) 84px 84px; gap:10px; align-items:center; padding:14px 16px; border-top:1px solid var(--line); }
.ac-pref:first-child{ border-top:0; background:var(--brand-wash, #F1FAF6); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.ac-pref b{ display:block; font-size:.95rem; }
.ac-pref small{ color:var(--muted); font-size:.82rem; }
.ac-pref > label, .ac-pref > span:not(:first-child){ justify-self:center; }
.ac-toggle{ position:relative; display:inline-block; width:44px; height:26px; }
.ac-toggle input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.ac-toggle i{ position:absolute; inset:0; border-radius:99px; background:#D5DFDA; transition:background .2s; }
.ac-toggle i::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.ac-toggle input:checked + i{ background:var(--accent); }
.ac-toggle input:checked + i::after{ transform:translateX(18px); }
.ac-toggle input:focus-visible + i{ box-shadow:0 0 0 4px rgba(24,129,94,.2); }
.ac-toggle input:disabled + i{ opacity:.55; }

/* ------------------------------------------------------- notifications */
.ac-notes{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ac-note{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; padding:16px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.ac-note.is-unread{ border-color:rgba(24,129,94,.4); box-shadow:inset 3px 0 0 var(--accent); }
.ac-note-icon{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--brand-wash, #F1FAF6); color:var(--accent); }
.ac-note-icon svg{ width:20px; height:20px; }
.ac-note h3{ font-size:.98rem; margin:0 0 4px; }
.ac-note p{ margin:0; color:var(--ink-soft); font-size:.9rem; }
.ac-note-foot{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-top:10px; font-size:.78rem; color:var(--muted); }
.ac-mail{ display:inline-flex; align-items:center; gap:6px; }
.ac-mail::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.ac-mail-sent{ color:#1F7A4D; } .ac-mail-failed{ color:#AD3B34; } .ac-mail-off, .ac-mail-not_sent{ color:#8A958F; }

/* ------------------------------------------------------------- reviews */
.ac-stars{ display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; }
.ac-stars input{ position:absolute; opacity:0; width:1px; height:1px; }
.ac-stars label{ cursor:pointer; font-size:2rem; line-height:1; color:#D5DFDA; transition:color .12s, transform .12s; }
.ac-stars label:hover, .ac-stars label:hover ~ label, .ac-stars input:checked ~ label{ color:#F2B01E; }
.ac-stars label:hover{ transform:scale(1.12); }
.ac-stars input:focus-visible + label{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.ac-review-course{ display:flex; gap:14px; align-items:center; padding:14px; border-radius:14px; background:var(--brand-wash, #F1FAF6); margin-bottom:20px; }
.ac-review-course img{ width:92px; height:52px; object-fit:cover; border-radius:8px; }
.ac-display{ display:grid; gap:8px; grid-template-columns:minmax(0,1fr); }
.ac-display label{ display:flex; gap:10px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:12px; cursor:pointer; font-size:.9rem; }
.ac-display label:has(input:checked){ border-color:var(--accent); background:var(--brand-wash, #F1FAF6); }
.ac-display input{ accent-color:var(--accent); }

/* ---------------------------------------------------------- breakpoints */
@media (min-width:640px){
  .ac-row-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ac-courses{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ac-display{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .ac-auth-form{ padding:40px 44px 44px; }
}
@media (min-width:880px){
  .ac-auth{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .ac-auth-art{ padding:48px 40px; display:flex; flex-direction:column; justify-content:center; }
  .ac-shell{ grid-template-columns:250px minmax(0,1fr); }
  .ac-side{ position:sticky; top:96px; }
  .ac-nav{ flex-direction:column; overflow:visible; }
}
@media (min-width:1180px){ .ac-courses{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:879px){
  .ac-nav{ flex-wrap:wrap; overflow:visible; }
  .ac-nav a{ flex:1 1 auto; justify-content:center; padding:9px 10px; font-size:.88rem; }
}
@media (max-width:639px){
  .ac-tabs{ width:100%; }
  .ac-tabs a{ flex:1 1 auto; text-align:center; padding:9px 10px; }
  .ac-pref{ grid-template-columns:minmax(0,1fr) 56px 56px; padding:12px; }
  .ac-card{ padding:18px; }
  .ac-tabs{ border-radius:14px; }
}
@media (prefers-reduced-motion:reduce){ .ac-course, .ac-toggle i, .ac-toggle i::after{ transition:none; } }
.ac-timeline li.ac-day::before{ display:none; }