:root{
  --account-bg:#f4f7fb;
  --account-card:#ffffff;
  --account-line:#dbe6ee;
  --account-line-strong:#cfdbe7;
  --account-text:#18324a;
  --account-muted:#5e7386;
  --account-soft:#eef4f9;
  --account-blue:#2f7cf6;
  --account-blue-dark:#246ae0;
  --account-green:#22a765;
  --account-amber:#b7811b;
  --account-shadow:0 14px 36px rgba(22,34,66,.07);
}

*{box-sizing:border-box}

.account-page{
  padding:28px 0 64px;
  background:var(--account-bg);
}

.account-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
}

.account-card{
  background:var(--account-card);
  border:1px solid var(--account-line);
  border-radius:24px;
  box-shadow:var(--account-shadow);
}

.account-hero{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(280px,.85fr);
  gap:18px;
  padding:30px;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
}

.account-hero__eyebrow,
.account-section__kicker,
.account-section__meta,
.account-hero__aside-label,
.reading-card__meta,
.stack-card__meta,
.history-row__date{
  font-size:12px;
  line-height:1.35;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--account-muted);
}

.account-hero__title{
  margin:10px 0 12px;
  font-size:40px;
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--account-text);
}

.account-hero__text,
.route-step__text,
.stack-card__text,
.history-row__body p,
.reading-card p,
.account-hero__aside-text{
  margin:0;
  font-size:16px;
  line-height:1.65;
  color:var(--account-muted);
}

.account-hero__actions,
.stack-card__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.account-subscription-inline{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  max-width:640px;
  margin-top:14px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--account-line);
  background:#f7fafe;
  color:var(--account-text);
}

.account-subscription-copy{
  min-width:0;
}

.account-subscription-title{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:14px;
  line-height:1.35;
  font-weight:900;
  color:var(--account-text);
}

.account-subscription-text{
  margin-top:3px;
  font-size:13px;
  line-height:1.4;
  color:var(--account-muted);
}

.account-subscription-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  line-height:1;
  font-weight:900;
}

.account-subscription-action{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 11px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--account-line-strong);
  color:var(--account-blue);
  font-size:12px;
  line-height:1;
  font-weight:900;
  text-decoration:none;
}

.account-subscription-action:hover{
  border-color:rgba(47,124,246,.45);
  background:#f8fbff;
}

.account-subscription-active{
  border-color:rgba(34,167,101,.26);
  background:rgba(34,167,101,.08);
}

.account-subscription-active .account-subscription-badge{
  background:rgba(34,167,101,.14);
  color:var(--account-green);
}

.account-subscription-expired{
  border-color:rgba(183,129,27,.28);
  background:rgba(183,129,27,.10);
}

.account-subscription-expired .account-subscription-badge{
  background:rgba(183,129,27,.16);
  color:var(--account-amber);
}

.account-subscription-not-paid{
  border-color:#d5e2ef;
  background:#f4f8fc;
}

.account-subscription-not-paid .account-subscription-badge{
  background:rgba(47,124,246,.12);
  color:var(--account-blue);
}

.account-subscription-warning{
  border-color:rgba(183,129,27,.24);
  background:#fffaf1;
}

.account-subscription-warning .account-subscription-badge{
  background:rgba(183,129,27,.14);
  color:var(--account-amber);
}

.account-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid transparent;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  line-height:1;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

.account-btn:hover,
.route-step__link:hover,
.reading-card:hover{
  transform:translateY(-1px);
}

.account-btn--primary{
  background:var(--account-blue);
  color:#fff;
  box-shadow:0 10px 24px rgba(47,124,246,.22);
}

.account-btn--primary:hover{
  background:var(--account-blue-dark);
}

.account-btn--ghost{
  background:#fff;
  border-color:var(--account-line-strong);
  color:var(--account-text);
}

.account-btn--small{
  min-height:40px;
  padding:10px 14px;
  border-radius:12px;
}

.account-hero__aside{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:20px;
  border-radius:20px;
  background:var(--account-soft);
  border:1px solid var(--account-line);
}

.account-hero__aside-value{
  font-size:28px;
  line-height:1.15;
  font-weight:800;
  color:var(--account-text);
}

.account-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}

.account-chip,
.stack-badge,
.route-step__status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1;
}

.account-chip{
  background:#fff;
  color:var(--account-text);
  border:1px solid var(--account-line-strong);
}

.account-section{
  margin-top:18px;
  padding:24px;
}

.account-section__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.account-section__title{
  margin:6px 0 0;
  font-size:28px;
  line-height:1.15;
  color:var(--account-text);
}

.route-progress,
.account-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.route-progress{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.route-step,
.stack-card,
.reading-card,
.history-row{
  border:1px solid var(--account-line);
  border-radius:20px;
  background:#fff;
}

.route-step{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  min-height:100%;
}

.route-step__top,
.stack-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.route-step__index{
  font-size:13px;
  line-height:1.35;
  font-weight:800;
  color:var(--account-text);
}

.route-step__title,
.stack-card__title,
.history-row__body h3,
.reading-card h3{
  margin:0;
  font-size:20px;
  line-height:1.25;
  color:var(--account-text);
}

.route-step__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  color:var(--account-blue);
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  transition:transform .15s ease;
}

.route-step__access{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  margin-top:4px;
  border-radius:999px;
  background:rgba(47,124,246,.10);
  color:var(--account-blue);
  font-size:12px;
  font-weight:800;
  line-height:1.2;
}

.route-step.is-complete{
  background:linear-gradient(180deg, #ffffff 0%, #f9fcfb 100%);
}

.route-step.is-complete .route-step__status,
.stack-badge.is-green{
  background:rgba(34,167,101,.12);
  color:var(--account-green);
}

.route-step.is-current{
  border-color:rgba(47,124,246,.28);
  box-shadow:0 10px 24px rgba(47,124,246,.08);
}

.route-step.is-current .route-step__status,
.stack-badge.is-blue{
  background:rgba(47,124,246,.12);
  color:var(--account-blue);
}

.route-step.is-locked{
  background:#fbfcfe;
}

.route-step.is-locked .route-step__status{
  background:rgba(183,129,27,.12);
  color:var(--account-amber);
}

.stack-list,
.reading-list,
.history-list{
  display:grid;
  gap:14px;
}

.stack-list--portfolio-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.stack-list--portfolio-cards > .stack-card:only-child{
  grid-column:1 / -1;
}

.stack-card,
.reading-card{
  padding:18px;
}

.stack-card__text,
.stack-card__meta{
  margin-top:10px;
}

.history-row{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:14px;
  padding:18px;
}

.history-row__body p{
  margin-top:8px;
}

.reading-card{
  text-decoration:none;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.reading-card:hover{
  border-color:rgba(47,124,246,.28);
  box-shadow:0 10px 24px rgba(47,124,246,.08);
}

.reading-card__meta{
  margin-bottom:10px;
}

.reading-card h3{
  margin-bottom:10px;
}

.is-nav a[aria-current="page"]{
  font-weight:800;
  color:var(--account-text);
}

@media (max-width: 1080px){
  .route-progress{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .account-hero{
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px){
  .account-page{
    padding:18px 0 48px;
  }

  .account-wrap{
    padding:0 14px;
  }

  .account-card,
  .route-step,
  .stack-card,
  .reading-card,
  .history-row{
    border-radius:18px;
  }

  .account-hero,
  .account-section{
    padding:18px;
  }

  .account-hero__title{
    font-size:30px;
  }

  .account-section__head{
    flex-direction:column;
    align-items:flex-start;
  }

  .account-section__title{
    font-size:24px;
  }

  .route-progress,
  .account-grid,
  .history-row{
    grid-template-columns:1fr;
  }

  .stack-list--portfolio-cards{
    grid-template-columns:1fr;
  }

  .history-row{
    gap:10px;
  }

  .account-btn{
    width:100%;
  }

  .account-subscription-inline{
    display:flex;
    width:100%;
    align-items:flex-start;
    flex-direction:column;
  }

  .account-subscription-action{
    width:100%;
  }
}
.account-hero__user{margin-top:8px;font-size:13px;line-height:1.45;color:#70839a;}
.account-hero__user a{margin-left:8px;color:#70839a;text-decoration:underline;}
.account-scanner__subtitle{font-size:16px;line-height:1.65;color:#526982;max-width:760px;}
.account-scanner__status{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:#eef4fb;color:#355980;font-size:14px;font-weight:800;margin-top:14px;}
.account-scanner__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px;}
.account-scanner__box{padding:18px;border-radius:18px;background:rgba(255,255,255,.82);border:1px solid rgba(22,59,103,.08);}
.account-scanner__box-title{font-size:15px;line-height:1.4;font-weight:800;color:#163b67;margin-bottom:10px;}
.account-scanner__list{display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.55;color:#526982;}
.account-scanner__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;}
.account-scanner__helper{margin-top:10px;font-size:13px;line-height:1.45;color:#6f86a1;}
.account-scanner__secondary{margin-top:14px;font-size:14px;line-height:1.45;}
.account-scanner__secondary a{color:#355980;text-decoration:none;}
.account-scanner__secondary a:hover{text-decoration:underline;}
.account-scanner.is-locked{background:radial-gradient(circle at top right,rgba(28,84,146,.08),transparent 34%),linear-gradient(180deg,#fff 0%,#f6f9fe 100%);}
.account-scanner.is-active{background:radial-gradient(circle at top right,rgba(50,132,85,.12),transparent 36%),linear-gradient(180deg,#fff 0%,#f4fbf6 100%);}
.account-scanner.is-expired{background:radial-gradient(circle at top right,rgba(160,112,20,.1),transparent 36%),linear-gradient(180deg,#fff 0%,#fcf8f0 100%);}
@media (max-width: 720px){.account-scanner__grid{grid-template-columns:1fr;}}

.account-progress-actions{display:flex;flex-wrap:wrap;gap:10px;margin-left:auto;}
.account-btn--danger-soft{background:#fff;border-color:#e0b4b4;color:#b64242;}
.account-btn--danger-soft:hover{background:#fff5f5;border-color:#d59393;color:#9f2e2e;}
.account-hero__user{margin:0 0 8px;color:var(--account-muted);font-size:15px;line-height:1.5;}
.account-hero__user a{margin-left:8px;color:var(--account-blue);font-weight:700;text-decoration:none;}
@media (max-width: 767px){
  .account-progress-actions{width:100%;margin-left:0;}
  .account-progress-actions .account-btn{width:100%;}
}

.account-hero__user--badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid #cfe0f3;
  background:#f3f8ff;
  color:#3f5972;
  font-size:14px;
  font-weight:700;
  line-height:1.45;
  box-shadow:0 6px 18px rgba(47,124,246,.08);
}
.account-hero__user--badge a{
  margin-left:0;
  color:var(--account-blue);
  font-weight:800;
  text-decoration:none;
}
.account-hero__user--badge a:hover{text-decoration:underline;}
.account-section__head--progress{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.account-progress-actions--centered{
  width:100%;
  margin-left:0;
  justify-content:center;
}
@media (max-width: 767px){
  .account-section__head--progress{align-items:stretch;}
  .account-progress-actions--centered{justify-content:stretch;}
}


.route-step__actions{
  display:flex;
  justify-content:center;
  margin-top:auto;
  padding-top:8px;
}

.route-step__button{
  min-width:160px;
  justify-content:center;
  text-align:center;
}

.route-step__link--primary{
  justify-content:center;
}

@media (max-width: 640px){
  .route-step__button{
    width:100%;
    min-width:0;
  }
}


/* v11 UX micro-improvements: current step emphasis + stronger continue button */
.route-step.is-current{
  border-color:rgba(47,124,246,.42);
  background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%);
  box-shadow:0 14px 32px rgba(47,124,246,.12);
}

.route-step.is-current .route-step__status,
.stack-badge.is-blue{
  background:rgba(47,124,246,.14);
  color:var(--account-blue);
}

.route-step.is-current .route-step__title{
  color:#163b67;
}

.route-step.is-current .route-step__actions{
  padding-top:12px;
}

.route-step__button{
  min-width:190px;
  font-weight:900;
  letter-spacing:.01em;
  box-shadow:0 12px 26px rgba(47,124,246,.22);
}

.route-step__button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(47,124,246,.26);
}

.route-step__button:active{
  transform:translateY(0);
}

@media (max-width: 640px){
  .route-step__button{
    min-width:0;
    width:100%;
  }
}