@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .account-wrap {
      max-width: 880px;
      margin: 0 auto;
      padding: 60px 20px;
      animation: fadeIn .5s ease-out both;
    }
    .account-header {
      display: flex; align-items: center; gap: 20px;
      margin-bottom: 40px;
    }
    .account-avatar {
      width: 72px; height: 72px; border-radius: 50%;
      background: linear-gradient(135deg, #123f2e, #16543a);
      color: #fff; display: flex; align-items: center; justify-content: center;
      font-size: 1.8rem; font-weight: 700;
    }
    .account-header h1 { font-size: 1.8rem; margin: 0 0 4px; }
    .account-header p { color: var(--text-light); margin: 0; font-size: .95rem; }

    .account-card {
      background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
      padding: 32px; margin-bottom: 24px;
    }
    .account-card h2 {
      font-size: 1.15rem; margin: 0 0 20px;
      color: var(--primary); display: flex; align-items: center; gap: 10px;
    }
    .account-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 14px 0; border-bottom: 1px solid var(--border);
    }
    .account-row:last-child { border-bottom: none; }
    .account-row .label { color: var(--text-light); font-size: .9rem; }
    .account-row .value { font-weight: 600; color: var(--text); }

    .badge-paid {
      display: inline-flex; align-items: center; gap: 6px;
      background: #e8f8f0; color: var(--accent);
      padding: 6px 12px; border-radius: 20px; font-size: .85rem; font-weight: 600;
    }
    .badge-unpaid {
      display: inline-flex; align-items: center; gap: 6px;
      background: #fef5eb; color: var(--warning);
      padding: 6px 12px; border-radius: 20px; font-size: .85rem; font-weight: 600;
    }

    .account-actions {
      display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px;
    }

    .progress-list { list-style: none; padding: 0; margin: 0; }
    .progress-list li {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 0; border-bottom: 1px solid var(--border);
      font-size: .95rem;
    }
    .progress-list li:last-child { border-bottom: none; }
    .progress-done { color: var(--accent); font-weight: 600; }
    .progress-pending { color: var(--text-muted); }

    .danger-zone {
      margin-top: 40px; padding: 24px;
      border: 1px solid #fadadc; border-radius: var(--radius);
      background: #fdf7f7;
    }
    .danger-zone h3 { color: var(--danger); margin: 0 0 8px; font-size: 1rem; }
    .danger-zone p { color: var(--text-light); font-size: .9rem; margin: 0 0 16px; }
    /* This is a light page, but the shared .btn--outline is styled for dark hero
       backgrounds (white text/border) — which renders invisible here. Give the
       outline buttons dark, visible styling on this page. */
    .btn--outline { color: var(--primary); border-color: #cfd8d2; background: #fff; }
    .btn--outline:hover { color: var(--primary); border-color: var(--primary); background: rgba(18,63,46,.06); }

    /* Sign-out confirmation modal */
    .signout-backdrop {
      display: none; position: fixed; inset: 0; background: rgba(14,47,68,.7);
      z-index: 2000; align-items: center; justify-content: center; padding: 20px;
    }
    .signout-backdrop.show { display: flex; }
    .signout-modal {
      background: #fff; border-radius: var(--radius); padding: 32px;
      max-width: 400px; width: 100%; box-shadow: var(--shadow-lg);
      text-align: center;
    }
    .signout-modal h2 {
      font-size: 1.15rem; margin: 0 0 8px; color: var(--text);
    }
    .signout-modal p {
      color: var(--text-light); font-size: .92rem; margin: 0 0 24px;
    }
    .signout-modal .modal-actions {
      display: flex; gap: 12px; justify-content: center;
    }
    .signout-modal .modal-actions .btn { flex: 1; justify-content: center; }

    @media (max-width: 768px) {
      .account-wrap { padding: 32px 16px; }
      .account-header { flex-direction: column; text-align: center; gap: 12px; }
      .account-header h1 { font-size: 1.4rem; }
      .account-avatar { width: 56px; height: 56px; font-size: 1.4rem; }
      .account-card { padding: 22px 18px; }
      .account-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0; }
      .account-actions { flex-direction: column; }
      .account-actions .btn { width: 100%; justify-content: center; min-height: 48px; }
      .progress-list li { padding: 12px 0; font-size: .9rem; min-height: 44px; }
      .signout-modal { padding: 24px 20px; border-radius: 16px 16px 0 0; }
      .signout-backdrop { align-items: flex-end; padding: 0; }
      .signout-modal .modal-actions { flex-direction: column-reverse; }
      .signout-modal .modal-actions .btn { width: 100%; min-height: 48px; }
    }
    /* Advisor message thread (client side) */
    .cl-thread { display:flex; flex-direction:column; gap:8px; max-height:320px; overflow:auto; margin-bottom:14px; padding:4px; }
    .cl-msg { max-width:80%; padding:9px 13px; border-radius:14px; font-size:.94rem; line-height:1.45; white-space:pre-wrap; word-wrap:break-word; }
    .cl-msg .cl-mt { font-size:.68rem; opacity:.7; margin-top:4px; }
    .cl-msg.me  { align-self:flex-end; background:var(--accent-mid); color:#fff; border-bottom-right-radius:4px; }
    .cl-msg.adv { align-self:flex-start; background:#eef2f6; color:#0f172a; border-bottom-left-radius:4px; }
    .cl-msgbox { width:100%; min-height:80px; padding:11px 13px; border:1px solid #dbe4ea; border-radius:12px; font-family:inherit; font-size:.98rem; resize:vertical; box-sizing:border-box; }
    .cl-compose-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; flex-wrap:wrap; }
    .cl-hint { font-size:.76rem; color:#626b64; font-style:italic; }
    /* App sidebar shell — self-contained (no cfSharedStyles), so page content styling is untouched. */
    .cf-app { display:flex; min-height:100vh; align-items:stretch; background:#f7f8f6; }
    .cf-sidebar-nav { flex:0 0 236px; width:236px; background:#fff; border-right:1px solid #e8eae5; padding:22px 0; position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto; }
    .cf-side-logo { display:flex; align-items:center; gap:9px; padding:2px 20px 18px; text-decoration:none; }
    .cf-side-logo img { height:22px; width:auto; }
    .cf-side-logo span { font-size:.84rem; font-weight:700; color:#123f2e; letter-spacing:-.1px; }
    .cf-side-label { font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#5f6b62; padding:0 20px; margin:14px 0 6px; }
    .cf-side-link { display:flex; align-items:center; gap:11px; min-height:44px; box-sizing:border-box; padding:9px 20px; color:#41504a; font-size:.9rem; font-weight:500; text-decoration:none; transition:background .15s,color .15s; }
    .cf-side-link svg { opacity:.55; stroke:currentColor; }
    .cf-side-link:hover { color:#123f2e; background:#f1f5f2; }
    .cf-side-link:hover svg { opacity:.95; }
    .cf-side-link--active { color:#123f2e; background:#eaf4ee; font-weight:700; box-shadow:inset 3px 0 0 #1d6b4a; }
    .cf-side-link--active svg { stroke:#1d6b4a; opacity:1; }
    .cf-side-link--subtle { color:#97a29a; font-size:.82rem; }
    .cf-side-link--subtle:hover { color:#52605a; }
    .cf-side-sep { height:1px; background:#eef1ee; margin:12px 20px; }
    .cf-main { flex:1 1 auto; min-width:0; }
    @media (max-width: 900px) {
      .cf-app { flex-direction:column; }
      .cf-sidebar-nav { position:static; height:auto; width:100%; flex:none; overflow-x:auto; padding:8px 6px; border-right:0; border-bottom:1px solid #e8eae5; }
      .cf-sidebar-inner { display:flex; align-items:center; gap:2px; }
      .cf-side-logo, .cf-side-label, .cf-side-sep { display:none; }
      .cf-side-link { padding:8px 12px; white-space:nowrap; border-radius:8px; font-size:.82rem; }
      .cf-side-link--active { box-shadow:none; }
    }