.account-page { width: min(760px, 100%); margin: auto; padding: 42px 18px; }
.account-card, .dashboard-panel, .metric-grid article { padding: 28px; border: 1px solid var(--border); border-radius: 26px; background: var(--panel); box-shadow: var(--shadow); }
.account-card h1 { font-size: clamp(44px, 8vw, 72px); }
.account-card > p, .dashboard-panel p { color: var(--muted); line-height: 1.65; }
.account-form { display: grid; gap: 16px; margin-top: 22px; }
.account-form label { display: grid; gap: 7px; color: var(--text); font-weight: 800; }
.account-form input, .account-form textarea { width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); background: rgba(5,8,22,.75); font: inherit; }
.account-form textarea { min-height: 110px; resize: vertical; }
.account-form button { padding: 14px 18px; border: 0; border-radius: 14px; background: linear-gradient(135deg,var(--green),var(--cyan)); font-weight: 950; cursor: pointer; }
.account-error { margin: 16px 0; padding: 14px; border: 1px solid rgba(255,107,122,.4); border-radius: 14px; color: #ffd8dc; background: rgba(255,107,122,.12); }
.dashboard-nav { display: flex; justify-content: space-between; }
.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; }
.metric-grid article { display: grid; gap: 6px; }
.metric-grid strong { font-size: 38px; color: var(--green); }
.metric-grid span, .course-progress-row span { color: var(--muted); }
.dashboard-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; margin-bottom: 20px; }
.dashboard-panel h2 { margin-top: 0; }
.course-progress-row { display: grid; grid-template-columns: minmax(150px,1fr) 1.5fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.course-progress-row div:first-child { display: grid; gap: 4px; }
.dashboard-progress { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.dashboard-progress span, .dashboard-progress i { display: block; height: 100%; background: linear-gradient(90deg,var(--green),var(--cyan)); }
.recent-lessons { display: grid; gap: 10px; }
.recent-lessons a { display: grid; grid-template-columns: 90px minmax(180px,1fr) 1fr auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 15px; color: var(--text); text-decoration: none; }
.recent-lessons a > span { color: var(--green); text-transform: uppercase; font-size: 11px; font-weight: 900; }
@media(max-width:850px){.metric-grid,.dashboard-grid{grid-template-columns:1fr}.recent-lessons a,.course-progress-row{grid-template-columns:1fr}}