:root {
  --guide-surface: rgba(15, 19, 29, 0.9);
  --guide-line: rgba(255, 255, 255, 0.11);
  --guide-accent: #7cf7c4;
  --guide-accent-soft: rgba(46, 229, 157, 0.12);
  --guide-warn: #ffd86b;
}

.account-guide-page {
  background: #07090d;
  color: #f7f8fb;
}

.account-guide-main { min-height: 100vh; padding-top: 76px; }
.account-guide-hero { position: relative; overflow: hidden; padding: 92px 0 72px; border-bottom: 1px solid var(--guide-line); background: radial-gradient(circle at 78% 25%, rgba(46, 229, 157, 0.18), transparent 34%), linear-gradient(145deg, #0c1117, #07090d 68%); }
.account-guide-hero-upgrade { background: radial-gradient(circle at 78% 25%, rgba(118, 126, 255, 0.2), transparent 34%), linear-gradient(145deg, #0c1117, #07090d 68%); }
.account-guide-hero .container { max-width: 980px; }
.account-guide-kicker { display: inline-block; margin-bottom: 14px; color: var(--guide-accent); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.account-guide-hero h1 { max-width: 780px; margin: 0; font-size: clamp(2.5rem, 7vw, 5.4rem); line-height: .98; letter-spacing: -.055em; }
.account-guide-hero p { max-width: 780px; margin: 24px 0 0; color: #bec5d2; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.65; }
.account-guide-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.account-guide-layout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 760px); gap: clamp(30px, 6vw, 82px); align-items: start; padding-top: 64px; padding-bottom: 88px; }
.account-guide-summary { position: sticky; top: 100px; padding: 24px; border: 1px solid var(--guide-line); border-radius: 20px; background: var(--guide-surface); box-shadow: 0 20px 60px rgba(0, 0, 0, .2); }
.account-guide-summary > strong { display: block; margin-bottom: 14px; font-size: 1.15rem; }
.account-guide-summary ul, .account-guide-rules ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.account-guide-summary li, .account-guide-rules li { position: relative; padding-left: 22px; color: #b9c1ce; line-height: 1.55; }
.account-guide-summary li::before, .account-guide-rules li::before { position: absolute; left: 0; color: var(--guide-accent); content: "✓"; font-weight: 800; }
.account-guide-content { display: grid; gap: 18px; }
.account-guide-alert { margin-bottom: 14px; padding: 22px 24px; border: 1px solid rgba(255, 216, 107, .32); border-left: 4px solid var(--guide-warn); border-radius: 14px; background: rgba(255, 216, 107, .07); }
.account-guide-alert-neutral { margin: 18px 0; border-color: rgba(124, 247, 196, .28); border-left-color: var(--guide-accent); background: var(--guide-accent-soft); }
.account-guide-alert strong { color: #fff; font-size: 1.08rem; }
.account-guide-alert p { margin: 8px 0 0; color: #d1d5dd; line-height: 1.65; }
.account-guide-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 26px; border: 1px solid var(--guide-line); border-radius: 18px; background: var(--guide-surface); }
.account-guide-step > span { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(124, 247, 196, .28); border-radius: 14px; background: var(--guide-accent-soft); color: var(--guide-accent); font-weight: 800; }
.account-guide-step h2 { margin: 1px 0 8px; font-size: 1.2rem; }
.account-guide-step p { margin: 0; color: #b9c1ce; line-height: 1.65; }
.account-guide-rules { margin-top: 20px; padding: 30px; border-radius: 20px; background: #111722; }
.account-guide-rules h2 { margin: 0 0 20px; font-size: 1.35rem; }
.account-guide-next { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; margin-top: 24px; padding: 26px; border: 1px solid rgba(124, 247, 196, .24); border-radius: 18px; background: linear-gradient(120deg, rgba(46, 229, 157, .12), rgba(118, 126, 255, .08)); }
.account-guide-next > div { flex: 1 1 310px; }
.account-guide-next .btn { flex: 0 1 auto; max-width: 100%; text-align: center; white-space: normal; }
.account-guide-next strong { display: block; font-size: 1.15rem; }
.account-guide-next p { margin: 6px 0 0; color: #b9c1ce; }
.account-guide-plan-grid { display: grid; gap: 12px; margin-bottom: 26px; }
.account-guide-plan-grid h2 { margin: 0 0 8px; }
.account-guide-plan-grid article { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border: 1px solid var(--guide-line); border-radius: 16px; background: var(--guide-surface); }
.account-guide-plan-grid img { width: 54px; height: 54px; object-fit: contain; }
.account-guide-plan-grid strong { font-size: 1.05rem; }
.account-guide-plan-grid p { margin: 4px 0 0; color: #b9c1ce; line-height: 1.5; }
.account-guide-page .footer { border-top: 1px solid var(--guide-line); }

@media (max-width: 760px) {
  .account-guide-main { padding-top: 64px; }
  .account-guide-hero { padding: 62px 0 52px; }
  .account-guide-layout { grid-template-columns: 1fr; padding-top: 34px; }
  .account-guide-summary { position: static; }
  .account-guide-step { grid-template-columns: 44px minmax(0, 1fr); padding: 20px; }
  .account-guide-step > span { width: 40px; height: 40px; }
  .account-guide-next { align-items: stretch; flex-direction: column; }
  .account-guide-next .btn { text-align: center; }
}