Redesign My Account page: profile header, stats, progress cards, settings/security menus, danger zone; v2.10.9

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "siteforge",
-  "version": "2.10.8",
+  "version": "2.10.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "siteforge",
-      "version": "2.10.8",
+      "version": "2.10.9",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.1135.0",
         "@dnd-kit/core": "^6.3.1",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "2.10.8",
+  "version": "2.10.9",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.css

@@ -4156,6 +4156,338 @@
   border-left: 3px solid rgba(111, 207, 151, 0.7);
 }
 
+/* ── My Account ── */
+.account-page {
+  padding: clamp(1.5rem, 5vw, 3rem) 1.25rem 4rem;
+  background:
+    radial-gradient(ellipse at top, rgba(201, 168, 76, 0.1) 0%, transparent 55%),
+    var(--brand-black);
+}
+
+.account-shell {
+  max-width: 1040px;
+  margin: 0 auto;
+}
+
+.account-header {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  flex-wrap: wrap;
+  padding: 1.5rem;
+  margin-bottom: 1.25rem;
+  border: 1px solid rgba(201, 168, 76, 0.24);
+  border-radius: 18px;
+  background: linear-gradient(180deg, rgba(26, 26, 22, 0.95), rgba(16, 16, 14, 0.95));
+}
+
+.account-avatar {
+  width: 84px;
+  height: 84px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid rgba(201, 168, 76, 0.5);
+  flex-shrink: 0;
+}
+
+.account-avatar--initial {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(201, 168, 76, 0.14);
+  color: var(--brand-gold);
+  font-family: var(--brand-font-heading);
+  font-size: 2.2rem;
+  font-weight: 700;
+}
+
+.account-header-body { flex: 1; min-width: 200px; }
+
+.account-header h1 {
+  margin: 0.15rem 0 0.25rem;
+  font-family: var(--brand-font-heading);
+  font-size: clamp(1.7rem, 4vw, 2.3rem);
+  color: var(--brand-warm-white);
+  overflow-wrap: anywhere;
+}
+
+.account-header .eyebrow { margin: 0; }
+
+.account-email {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  color: var(--brand-muted);
+  font-size: 0.95rem;
+  overflow-wrap: anywhere;
+}
+
+.account-header-actions {
+  display: flex;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.account-chip {
+  display: inline-block;
+  padding: 0.15rem 0.6rem;
+  border-radius: 999px;
+  border: 1px solid;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.account-chip--ok { color: #6fcf97; border-color: rgba(111, 207, 151, 0.45); background: rgba(111, 207, 151, 0.1); }
+.account-chip--warn { color: #e0b861; border-color: rgba(224, 184, 97, 0.45); background: rgba(224, 184, 97, 0.1); }
+
+.account-notice {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+  padding: 0.85rem 1.1rem;
+  border: 1px solid rgba(201, 168, 76, 0.3);
+  border-radius: 12px;
+  background: rgba(201, 168, 76, 0.07);
+  color: #c9bb91;
+  font-size: 0.9rem;
+}
+
+.account-notice strong { color: var(--brand-gold); }
+
+.account-notice-actions { display: flex; align-items: center; gap: 0.75rem; }
+.account-notice-msg { font-size: 0.82rem; }
+
+.account-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
+  gap: 1.25rem;
+  align-items: start;
+}
+
+.account-main,
+.account-side {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  min-width: 0;
+}
+
+.account-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.account-stat {
+  padding: 1rem;
+  border: 1px solid rgba(201, 168, 76, 0.2);
+  border-radius: 14px;
+  background: rgba(17, 17, 15, 0.84);
+}
+
+.account-stat strong {
+  display: block;
+  font-family: var(--brand-font-heading);
+  font-size: 1.7rem;
+  line-height: 1.1;
+  color: var(--brand-warm-white);
+}
+
+.account-stat .account-stat-date { font-size: 1.05rem; padding-top: 0.45rem; }
+
+.account-stat span {
+  display: block;
+  margin-top: 0.3rem;
+  font-size: 0.78rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--brand-muted);
+}
+
+.account-card {
+  padding: 1.25rem 1.35rem;
+  border: 1px solid rgba(201, 168, 76, 0.2);
+  border-radius: 16px;
+  background: rgba(17, 17, 15, 0.84);
+}
+
+.account-card--danger { border-color: rgba(229, 115, 115, 0.3); }
+.account-card--danger h2 { color: #e57373; }
+
+.account-card-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.9rem;
+}
+
+.account-card-head h2 {
+  margin: 0;
+  font-family: var(--brand-font-heading);
+  font-size: 1.25rem;
+  color: #e8d9b5;
+}
+
+.account-link {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--brand-gold);
+  font: inherit;
+  font-size: 0.85rem;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.account-muted {
+  margin: 0 0 0.75rem;
+  color: var(--brand-muted);
+  font-size: 0.92rem;
+  line-height: 1.55;
+}
+
+.account-progress + .account-progress { margin-top: 1rem; }
+
+.account-progress-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.4rem;
+  font-size: 0.9rem;
+  color: var(--brand-muted);
+}
+
+.account-progress-row a {
+  color: var(--brand-warm-white);
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.account-progress-row a:hover { text-decoration: underline; }
+
+.account-cert {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  padding: 0.6rem 0;
+  border-top: 1px solid rgba(201, 168, 76, 0.12);
+  font-size: 0.92rem;
+}
+
+.account-cert:first-of-type { border-top: none; }
+.account-cert small { color: var(--brand-muted); }
+.account-cert-actions { display: flex; gap: 0.5rem; }
+.account-cert-actions .btn-secondary { font-size: 0.78rem; padding: 0.3rem 0.8rem; }
+
+.account-menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.account-menu li + li { border-top: 1px solid rgba(201, 168, 76, 0.12); }
+
+.account-menu button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.8rem 0.25rem;
+  background: none;
+  border: none;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  font-family: var(--brand-font-body);
+}
+
+.account-menu button:hover strong { color: var(--brand-gold); }
+.account-menu button:disabled { opacity: 0.6; cursor: default; }
+
+.account-menu strong {
+  display: block;
+  color: var(--brand-warm-white);
+  font-weight: 600;
+  font-size: 0.98rem;
+  transition: color 0.15s ease;
+}
+
+.account-menu small {
+  display: block;
+  margin-top: 0.1rem;
+  color: var(--brand-muted);
+  font-size: 0.82rem;
+  overflow-wrap: anywhere;
+}
+
+.account-menu button > span:last-child { color: var(--brand-gold); font-size: 1.2rem; }
+
+.account-callout {
+  margin: 0.75rem 0 0;
+  padding: 0.7rem 0.9rem;
+  border: 1px solid rgba(201, 168, 76, 0.25);
+  border-radius: 10px;
+  background: rgba(201, 168, 76, 0.07);
+  color: #b9aa86;
+  font-size: 0.85rem;
+  line-height: 1.5;
+}
+
+.account-callout strong { color: var(--brand-gold); }
+
+.account-callout--danger {
+  border-color: rgba(224, 92, 92, 0.3);
+  background: rgba(224, 92, 92, 0.07);
+  color: #e07a7a;
+}
+
+.account-callout--danger strong { color: #e07a7a; }
+
+.account-session {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(201, 168, 76, 0.12);
+}
+
+.account-session .btn-secondary { width: 100%; justify-content: center; font-size: 0.82rem; }
+
+.account-danger-step {
+  padding: 0.9rem;
+  border: 1px solid rgba(229, 115, 115, 0.35);
+  border-radius: 10px;
+  background: rgba(43, 17, 17, 0.6);
+}
+
+.account-danger-step p { margin: 0 0 0.75rem; color: #e0cfcf; }
+
+.account-danger-input {
+  width: 100%;
+  margin-bottom: 0.8rem;
+  padding: 0.55rem 0.7rem;
+  border: 1px solid rgba(229, 115, 115, 0.5);
+  border-radius: 8px;
+  background: #140f0f;
+  color: var(--brand-warm-white);
+}
+
+.account-danger-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
+
+@media (max-width: 900px) {
+  .account-layout { grid-template-columns: 1fr; }
+  .account-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
 /* ── Study hub (guest landing) ── */
 .study-hub-count {
   margin: 1.25rem 0 0;

src/studyPages.tsx

@@ -3193,164 +3193,233 @@ export function StudyAccountPage() {
 
   if (!auth.checked) {
     return (
-      <main className="thanks-page" aria-label="Loading">
+      <main className="auth-page" aria-label="Loading">
-        <div className="thanks-card"><p>Loading...</p></div>
+        <div className="auth-shell auth-shell--single">
+          <div className="auth-card auth-card--center"><p>Loading...</p></div>
+        </div>
       </main>
     )
   }
 
   if (!auth.authenticated) {
     return (
-      <main className="thanks-page" aria-label="Sign in required">
+      <main className="auth-page" aria-label="Sign in required">
-        <div className="thanks-card">
+        <div className="auth-shell auth-shell--single">
+          <div className="auth-card auth-card--center">
             <p className="eyebrow">My Account</p>
             <h1>Sign In Required</h1>
             <p>Please sign in to manage your account.</p>
-          <Link to="/study/signup" className="btn-primary" style={{ marginTop: '1rem', display: 'inline-block' }}>Sign In</Link>
+            <div className="study-signup-actions">
+              <Link to="/study/signup" className="btn-primary">Sign In</Link>
+            </div>
+          </div>
         </div>
       </main>
     )
   }
 
-  const divider = <hr style={{ margin: '0 0 2rem', border: 'none', borderTop: '1px solid #2a2518' }} />
+  const enrolledProgress = overview?.studies.filter(item => item.enrolled && item.totalLessons > 0) ?? []
+  const memberSince = overview?.stats.memberSince && !isNaN(new Date(overview.stats.memberSince).getTime())
+    ? new Date(overview.stats.memberSince).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+    : '—'
+  const initial = (auth.displayName?.slice(0, 1) || auth.username.slice(0, 1)).toUpperCase()
 
   return (
-    <main className="thanks-page" aria-label="My account">
+    <main className="account-page" aria-label="My account">
-      <div className="thanks-card" style={{ maxWidth: '760px', textAlign: 'left' }}>
+      <div className="account-shell">
-        <p className="eyebrow">Student Account</p>
+        <header className="account-header">
-        <h1>My Account</h1>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap', marginBottom: '1rem' }}>
           {auth.avatarUrl ? (
-            <img src={auth.avatarUrl} alt="Your avatar" width={64} height={64} style={{ borderRadius: '50%', border: '1px solid #2a2518' }} />
+            <img className="account-avatar" src={auth.avatarUrl} alt="Your avatar" width={84} height={84} />
           ) : (
-            <div style={{ width: 64, height: 64, borderRadius: '50%', background: '#2a2518', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#f0ead8', fontWeight: 700, fontSize: '1.5rem' }}>
+            <div className="account-avatar account-avatar--initial" aria-hidden="true">{initial}</div>
-              {auth.displayName?.slice(0, 1).toUpperCase() || auth.username.slice(0, 1).toUpperCase()}
-            </div>
           )}
-          <div>
+          <div className="account-header-body">
-            <p style={{ margin: 0, fontSize: '0.95rem' }}>Signed in as</p>
+            <p className="eyebrow">Student Account</p>
-            <p style={{ margin: '0.25rem 0 0', fontWeight: 700 }}>{auth.displayName || auth.username}</p>
+            <h1>{auth.displayName || auth.username.split('@')[0]}</h1>
-            <p style={{ margin: '0.25rem 0 0', fontSize: '0.9rem', color: '#7a7060' }}>{auth.username}</p>
+            <p className="account-email">
+              {auth.username}
+              {auth.emailVerified === false
+                ? <span className="account-chip account-chip--warn">Unverified</span>
+                : <span className="account-chip account-chip--ok">Verified</span>}
+            </p>
           </div>
+          <div className="account-header-actions">
+            <button type="button" className="btn-secondary" onClick={() => setAccountModal('profile')}>Edit Profile</button>
+            <button type="button" className="btn-secondary" disabled={signOutBusy} onClick={handleSignOut}>
+              {signOutBusy ? 'Signing out...' : 'Sign Out'}
+            </button>
           </div>
+        </header>
 
         {auth.emailVerified === false && (
-          <div style={{ marginBottom: '1.5rem', background: 'rgba(201,168,76,0.07)', border: '1px solid rgba(201,168,76,0.2)', borderRadius: '8px', padding: '0.75rem 1rem', fontSize: '0.85rem', color: '#a89a6a', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '0.75rem' }}>
+          <div className="account-notice" role="status">
-            <span><strong style={{ color: '#c9a84c' }}>Verify your email.</strong> We sent a link to {auth.username} — click it to confirm this address.</span>
+            <span><strong>Verify your email.</strong> We sent a link to {auth.username} — click it to confirm this address.</span>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
+            <div className="account-notice-actions">
-              {resendVerifyMessage && <span style={{ fontSize: '0.8rem' }}>{resendVerifyMessage}</span>}
+              {resendVerifyMessage && <span className="account-notice-msg">{resendVerifyMessage}</span>}
-              <button type="button" className="btn-secondary" style={{ fontSize: '0.82rem', padding: '0.3rem 0.75rem' }} disabled={resendVerifyBusy} onClick={handleResendVerification}>
+              <button type="button" className="btn-secondary" disabled={resendVerifyBusy} onClick={handleResendVerification}>
                 {resendVerifyBusy ? 'Sending…' : 'Resend Email'}
               </button>
             </div>
           </div>
         )}
 
+        <div className="account-layout">
+          <div className="account-main">
+            {loadingOverview && !overview && <p className="account-muted">Loading your progress…</p>}
             {overview?.stats && (
               <>
-            <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '1.5rem' }}>
+                <div className="account-stats">
-              <div style={{ flex: '1 1 130px', background: '#1a1a16', borderRadius: '8px', padding: '1rem', border: '1px solid #2a2518' }}>
+                  <div className="account-stat"><strong>{overview.stats.noteCount}</strong><span>Notes saved</span></div>
-                <p style={{ fontSize: '1.6rem', fontWeight: 700, margin: 0 }}>{overview.stats.noteCount}</p>
+                  <div className="account-stat"><strong>{overview.stats.currentStreak ?? 0} 🔥</strong><span>Day streak</span></div>
-                <p style={{ margin: 0, fontSize: '0.85rem', color: '#7a7060' }}>Notes saved</p>
+                  <div className="account-stat"><strong>{overview.stats.longestStreak ?? 0}</strong><span>Longest streak</span></div>
+                  <div className="account-stat"><strong className="account-stat-date">{memberSince}</strong><span>Member since</span></div>
                 </div>
-              <div style={{ flex: '1 1 130px', background: '#1a1a16', borderRadius: '8px', padding: '1rem', border: '1px solid #2a2518' }}>
+
-                <p style={{ fontSize: '1.6rem', fontWeight: 700, margin: 0 }}>{overview.stats.currentStreak ?? 0} 🔥</p>
+                <section className="account-card" aria-label="Study progress">
-                <p style={{ margin: 0, fontSize: '0.85rem', color: '#7a7060' }}>Day streak</p>
+                  <div className="account-card-head">
+                    <h2>Study Progress</h2>
+                    <button type="button" className="account-link" onClick={() => setAccountModal('enrollments')}>Manage enrollments</button>
                   </div>
-              <div style={{ flex: '1 1 130px', background: '#1a1a16', borderRadius: '8px', padding: '1rem', border: '1px solid #2a2518' }}>
+                  {enrolledProgress.length === 0 ? (
-                <p style={{ fontSize: '1.6rem', fontWeight: 700, margin: 0 }}>{overview.stats.longestStreak ?? 0}</p>
+                    <p className="account-muted">You aren't enrolled in a study yet. <Link to="/study">Browse the studies →</Link></p>
-                <p style={{ margin: 0, fontSize: '0.85rem', color: '#7a7060' }}>Longest streak</p>
+                  ) : enrolledProgress.map(item => {
-              </div>
+                    const pct = Math.round((item.completedLessons / item.totalLessons) * 100)
-              <div style={{ flex: '1 1 130px', background: '#1a1a16', borderRadius: '8px', padding: '1rem', border: '1px solid #2a2518' }}>
-                <p style={{ fontSize: '1rem', fontWeight: 600, margin: 0 }}>{overview.stats.memberSince && !isNaN(new Date(overview.stats.memberSince).getTime()) ? new Date(overview.stats.memberSince).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}</p>
-                <p style={{ margin: 0, fontSize: '0.85rem', color: '#7a7060' }}>Member since</p>
-              </div>
-            </div>
-            {overview.studies.filter(s => s.enrolled && s.totalLessons > 0).length > 0 && (
-              <div style={{ marginBottom: '1.5rem' }}>
-                <p style={{ margin: '0 0 0.75rem', fontSize: '0.85rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: '#7a7060' }}>Study Progress</p>
-                {overview.studies.filter(s => s.enrolled && s.totalLessons > 0).map(s => {
-                  const pct = Math.round((s.completedLessons / s.totalLessons) * 100)
                     return (
-                    <div key={s.slug} style={{ marginBottom: '0.85rem' }}>
+                      <div className="account-progress" key={item.slug}>
-                      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.88rem', marginBottom: '0.3rem' }}>
+                        <div className="account-progress-row">
-                        <span>{s.title}</span>
+                          <Link to={`/study/${item.slug}`}>{item.title}</Link>
-                        <span style={{ color: '#7a7060' }}>{s.completedLessons}/{s.totalLessons} lessons · {pct}%</span>
+                          <span>{item.completedLessons}/{item.totalLessons} lessons · {pct}%</span>
                         </div>
-                      <div style={{ height: '6px', background: '#2a2518', borderRadius: '3px', overflow: 'hidden' }}>
+                        <div className="study-progress-track" role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={pct}>
-                        <div style={{ height: '100%', width: `${pct}%`, background: pct === 100 ? '#4a9a4a' : '#c9a84c', borderRadius: '3px', transition: 'width 0.4s ease' }} />
+                          <div className="study-progress-fill" style={{ width: `${pct}%` }} />
                         </div>
                       </div>
                     )
                   })}
-              </div>
+                </section>
-            )}
+
-            {overview.stats.noteLimit > 0 && (
-              <div style={{ marginBottom: '1.5rem' }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.85rem', marginBottom: '0.3rem', color: '#7a7060' }}>
-                  <span style={{ textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>Note Usage</span>
-                  <span>{overview.stats.noteCount}/{overview.stats.noteLimit} notes · up to {overview.stats.noteCharLimit.toLocaleString()} characters each</span>
-                </div>
-                <div style={{ height: '6px', background: '#2a2518', borderRadius: '3px', overflow: 'hidden' }}>
-                  <div style={{ height: '100%', width: `${Math.min(100, Math.round((overview.stats.noteCount / overview.stats.noteLimit) * 100))}%`, background: '#c9a84c', borderRadius: '3px', transition: 'width 0.4s ease' }} />
-                </div>
-              </div>
-            )}
                 {overview.certificates.length > 0 && (
-              <div style={{ marginBottom: '1.5rem' }}>
+                  <section className="account-card" aria-label="Certificates">
-                <p style={{ margin: '0 0 0.75rem', fontSize: '0.85rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: '#7a7060' }}>Certificates</p>
+                    <div className="account-card-head"><h2>Certificates</h2></div>
                     {overview.certificates.map(cert => (
-                  <div key={cert.studySlug} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '0.5rem', marginBottom: '0.6rem', fontSize: '0.88rem' }}>
+                      <div className="account-cert" key={cert.studySlug}>
-                    <span>🏅 {cert.studyTitle} <span style={{ color: '#7a7060', fontSize: '0.82rem' }}>— {new Date(cert.issuedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</span></span>
+                        <span>🏅 {cert.studyTitle} <small>— {new Date(cert.issuedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</small></span>
-                    <div style={{ display: 'flex', gap: '0.5rem' }}>
+                        <div className="account-cert-actions">
-                      <a href={cert.url} target="_blank" rel="noopener noreferrer" className="btn-admin-ghost" style={{ fontSize: '0.78rem', padding: '0.2rem 0.6rem' }}>View</a>
+                          <a href={cert.url} target="_blank" rel="noopener noreferrer" className="btn-secondary">View</a>
-                      <button type="button" className="btn-admin-ghost" style={{ fontSize: '0.78rem', padding: '0.2rem 0.6rem' }} onClick={() => { navigator.clipboard?.writeText(cert.url).catch(() => {}) }}>Copy Link</button>
+                          <button type="button" className="btn-secondary" onClick={() => { navigator.clipboard?.writeText(cert.url).catch(() => {}) }}>Copy link</button>
                         </div>
                       </div>
                     ))}
-              </div>
+                  </section>
-            )}
-            {divider}
-          </>
                 )}
 
-        <section style={{ marginBottom: '2rem' }}>
+                {overview.stats.noteLimit > 0 && (
-          <h2 style={{ marginTop: 0 }}>Quick Actions</h2>
+                  <section className="account-card" aria-label="Note usage">
-          <p style={{ fontSize: '0.92rem' }}>Open the settings you need without scrolling through the whole page.</p>
+                    <div className="account-card-head">
-          <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', marginTop: '1rem' }}>
+                      <h2>Note Usage</h2>
-            <button type="button" className="btn-primary" onClick={() => setAccountModal('profile')}>Edit Profile</button>
+                      <button type="button" className="account-link" onClick={() => setAccountModal('export')}>Export notes</button>
-            <button type="button" className="btn-primary" onClick={() => setAccountModal('preferences')}>Preferences</button>
+                    </div>
-            <button type="button" className="btn-primary" onClick={() => setAccountModal('export')}>Export Notes</button>
+                    <div className="account-progress-row">
-            <button type="button" className="btn-primary" onClick={() => setAccountModal('enrollments')}>Manage Enrollments</button>
+                      <span>{overview.stats.noteCount} of {overview.stats.noteLimit} notes</span>
-            <button type="button" className="btn-secondary" onClick={() => setAccountModal('changeEmail')}>Change Email</button>
+                      <span>up to {overview.stats.noteCharLimit.toLocaleString()} characters each</span>
-            <button type="button" className="btn-secondary" onClick={() => setAccountModal('changePassword')}>Change Password</button>
+                    </div>
-            <button type="button" className={auth.totpEnabled ? 'btn-secondary' : 'btn-primary'} onClick={() => {
+                    <div className="study-progress-track" role="progressbar" aria-valuemin={0} aria-valuemax={overview.stats.noteLimit} aria-valuenow={overview.stats.noteCount}>
+                      <div className="study-progress-fill" style={{ width: `${Math.min(100, Math.round((overview.stats.noteCount / overview.stats.noteLimit) * 100))}%` }} />
+                    </div>
+                  </section>
+                )}
+              </>
+            )}
+          </div>
+
+          <aside className="account-side">
+            <section className="account-card" aria-label="Settings">
+              <div className="account-card-head"><h2>Settings</h2></div>
+              <ul className="account-menu">
+                <li><button type="button" onClick={() => setAccountModal('profile')}><span><strong>Profile</strong><small>Name and avatar</small></span><span aria-hidden="true">›</span></button></li>
+                <li><button type="button" onClick={() => setAccountModal('preferences')}><span><strong>Preferences</strong><small>Email updates and reminders</small></span><span aria-hidden="true">›</span></button></li>
+                <li><button type="button" onClick={() => setAccountModal('enrollments')}><span><strong>Enrollments</strong><small>Join or leave studies</small></span><span aria-hidden="true">›</span></button></li>
+                <li><button type="button" onClick={() => setAccountModal('export')}><span><strong>Export notes</strong><small>Download everything you've written</small></span><span aria-hidden="true">›</span></button></li>
+              </ul>
+            </section>
+
+            <section className="account-card" aria-label="Security">
+              <div className="account-card-head"><h2>Security</h2></div>
+              <ul className="account-menu">
+                <li><button type="button" onClick={() => setAccountModal('changeEmail')}><span><strong>Email address</strong><small>{auth.username}</small></span><span aria-hidden="true">›</span></button></li>
+                <li><button type="button" onClick={() => setAccountModal('changePassword')}><span><strong>Password</strong><small>Change your password</small></span><span aria-hidden="true">›</span></button></li>
+                <li>
+                  <button type="button" disabled={twoFaBusy} onClick={() => {
                     if (auth.totpEnabled) { setAccountModal('disable2fa'); return }
                     setAccountModal('choose2fa')
-            }} disabled={twoFaBusy}>
+                  }}>
-              {auth.totpEnabled
+                    <span>
-                ? `2FA: ${auth.twoFaMethod === 'email' ? 'Email ✓' : 'App ✓'}`
+                      <strong>Two-factor authentication</strong>
-                : '🔐 Enable Two-Factor Auth'}
+                      <small>{auth.totpEnabled ? `On — ${auth.twoFaMethod === 'email' ? 'email code' : 'authenticator app'}` : 'Off — recommended'}</small>
+                    </span>
+                    <span className={`account-chip ${auth.totpEnabled ? 'account-chip--ok' : 'account-chip--warn'}`}>{auth.totpEnabled ? 'On' : 'Off'}</span>
                   </button>
-          </div>
+                </li>
+              </ul>
               {!auth.totpEnabled && (
-            <div style={{ marginTop: '1rem', background: 'rgba(201,168,76,0.07)', border: '1px solid rgba(201,168,76,0.2)', borderRadius: '8px', padding: '0.75rem 1rem', fontSize: '0.85rem', color: '#a89a6a' }}>
+                <p className="account-callout">
-              <strong style={{ color: '#c9a84c' }}>Recommended:</strong> Enable two-factor authentication to protect your study notes and account.
+                  <strong>Recommended:</strong> turn on two-factor authentication to protect your study notes and account.
-            </div>
+                </p>
               )}
               {auth.totpEnabled && auth.totpRecoveryCodesRemaining !== undefined && auth.totpRecoveryCodesRemaining <= 2 && (
-            <div style={{ marginTop: '1rem', background: 'rgba(224,92,92,0.07)', border: '1px solid rgba(224,92,92,0.2)', borderRadius: '8px', padding: '0.75rem 1rem', fontSize: '0.85rem', color: '#e07a7a' }}>
+                <p className="account-callout account-callout--danger">
-              <strong>Warning:</strong> You only have {auth.totpRecoveryCodesRemaining} recovery code{auth.totpRecoveryCodesRemaining === 1 ? '' : 's'} left.{' '}
+                  <strong>Warning:</strong> you only have {auth.totpRecoveryCodesRemaining} recovery code{auth.totpRecoveryCodesRemaining === 1 ? '' : 's'} left.{' '}
-              <button type="button" style={{ background: 'none', border: 'none', color: '#c9a84c', cursor: 'pointer', textDecoration: 'underline', fontSize: 'inherit' }} onClick={async () => {
+                  <button type="button" className="account-link" onClick={async () => {
                     try {
                       const data = await readJson<{ ok: boolean; recoveryCodes: string[] }>('/api/study-auth/totp-regen-recovery', { method: 'POST' })
                       setTwoFaRecoveryCodes(data.recoveryCodes)
                       setAccountModal('recoveryCodes')
                     } catch { /* ignore */ }
                   }}>Generate new codes →</button>
+                </p>
+              )}
+              <div className="account-session">
+                <button type="button" className="btn-secondary" disabled={signOutAllBusy} onClick={handleSignOutAllDevices}>
+                  {signOutAllBusy ? 'Signing out other devices…' : 'Sign out of all other devices'}
+                </button>
+                {signOutAllMessage && <p className="study-note-status" role="status">{signOutAllMessage}</p>}
+              </div>
+            </section>
+
+            <section className="account-card account-card--danger" aria-label="Delete account">
+              <div className="account-card-head"><h2>Delete Account</h2></div>
+              {deleteStep === 'idle' && (
+                <>
+                  <p className="account-muted">Permanently remove your account and all saved notes. This cannot be undone.</p>
+                  <button type="button" className="btn-admin-remove" onClick={() => setDeleteStep('warn1')}>Delete My Account</button>
+                </>
+              )}
+              {deleteStep === 'warn1' && (
+                <div className="account-danger-step">
+                  <p><strong>Final warning: export your notes first.</strong></p>
+                  <div className="account-danger-actions">
+                    <button type="button" className="btn-primary" onClick={handleExport} disabled={exporting}>Export Notes First</button>
+                    <button type="button" className="btn-admin-remove" onClick={() => setDeleteStep('warn2')}>Continue to Delete</button>
+                    <button type="button" className="btn-secondary" onClick={() => setDeleteStep('idle')}>Cancel</button>
+                  </div>
+                </div>
+              )}
+              {deleteStep === 'warn2' && (
+                <div className="account-danger-step">
+                  <p>Type <strong>DELETE</strong> to confirm permanent deletion:</p>
+                  <input type="text" className="account-danger-input" value={deleteConfirmInput} onChange={e => setDeleteConfirmInput(e.target.value)} placeholder="DELETE" aria-label="Type DELETE to confirm" />
+                  {deleteMessage && <p className="study-signup-error" role="alert">{deleteMessage}</p>}
+                  <div className="account-danger-actions">
+                    <button type="button" className="btn-admin-remove" disabled={deleteBusy || deleteConfirmInput.trim() !== 'DELETE'} onClick={handleDeleteAccount}>
+                      {deleteBusy ? 'Deleting...' : 'Permanently Delete My Account'}
+                    </button>
+                    <button type="button" className="btn-secondary" onClick={() => { setDeleteStep('idle'); setDeleteConfirmInput('') }}>Cancel</button>
+                  </div>
                 </div>
               )}
             </section>
+          </aside>
+        </div>
 
       {accountModal !== 'none' && (
         <div style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(5, 5, 5, 0.8)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1.25rem' }}>
@@ -3804,59 +3873,7 @@ export function StudyAccountPage() {
         </div>
       )}
 
-        {divider}
+        <p className="auth-footer-links"><Link to="/study">← Back to Studies</Link></p>
-
-        <section style={{ marginBottom: '2rem' }}>
-          <h2 style={{ marginTop: 0 }}>Sign Out</h2>
-          <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', alignItems: 'center' }}>
-            <button type="button" className="btn-secondary" disabled={signOutBusy} onClick={handleSignOut}>
-              {signOutBusy ? 'Signing out...' : 'Sign Out'}
-            </button>
-            <button type="button" className="btn-secondary" disabled={signOutAllBusy} onClick={handleSignOutAllDevices}>
-              {signOutAllBusy ? 'Signing out other devices…' : 'Sign Out of All Other Devices'}
-            </button>
-          </div>
-          {signOutAllMessage && <p className="study-note-status" style={{ marginTop: '0.75rem' }}>{signOutAllMessage}</p>}
-        </section>
-
-        {divider}
-
-        <section>
-          <h2 style={{ marginTop: 0, color: '#e57373' }}>Delete Account</h2>
-          {deleteStep === 'idle' && (
-            <>
-              <p style={{ fontSize: '0.9rem' }}>Permanently remove your account and all saved notes. This cannot be undone.</p>
-              <button type="button" className="btn-admin-remove" onClick={() => setDeleteStep('warn1')}>Delete My Account</button>
-            </>
-          )}
-          {deleteStep === 'warn1' && (
-            <div style={{ background: '#2d2414', border: '1px solid #6b4b1f', borderRadius: '6px', padding: '1rem', marginBottom: '1rem' }}>
-              <p style={{ fontWeight: 600 }}>Final warning: export your notes first.</p>
-              <div style={{ display: 'flex', gap: '0.6rem', flexWrap: 'wrap' }}>
-                <button type="button" className="btn-primary" onClick={handleExport} disabled={exporting}>Export Notes First</button>
-                <button type="button" className="btn-admin-remove" onClick={() => setDeleteStep('warn2')}>Continue to Delete</button>
-                <button type="button" className="btn-secondary" onClick={() => setDeleteStep('idle')}>Cancel</button>
-              </div>
-            </div>
-          )}
-          {deleteStep === 'warn2' && (
-            <div style={{ background: '#2b1111', border: '1px solid #8a3b3b', borderRadius: '6px', padding: '1rem' }}>
-              <p>Type <strong>DELETE</strong> to confirm permanent deletion:</p>
-              <input type="text" value={deleteConfirmInput} onChange={e => setDeleteConfirmInput(e.target.value)} placeholder="DELETE" style={{ marginBottom: '0.8rem', padding: '0.5rem', border: '1px solid #8a3b3b', borderRadius: '4px', background: '#140f0f', color: '#f0ead8' }} />
-              {deleteMessage && <p style={{ color: '#ef9a9a', fontSize: '0.875rem' }}>{deleteMessage}</p>}
-              <div style={{ display: 'flex', gap: '0.6rem', flexWrap: 'wrap' }}>
-                <button type="button" className="btn-admin-remove" disabled={deleteBusy || deleteConfirmInput.trim() !== 'DELETE'} onClick={handleDeleteAccount}>
-                  {deleteBusy ? 'Deleting...' : 'Permanently Delete My Account'}
-                </button>
-                <button type="button" className="btn-secondary" onClick={() => { setDeleteStep('idle'); setDeleteConfirmInput('') }}>Cancel</button>
-              </div>
-            </div>
-          )}
-        </section>
-
-        <div style={{ marginTop: '2rem' }}>
-          <Link to="/study" className="btn-secondary">Back to Studies</Link>
-        </div>
       </div>
     </main>
   )