.account-page{min-height:100vh;background:
 radial-gradient(ellipse at 8% 0%,#ccefff 0%,transparent 42%),
 radial-gradient(ellipse at 92% 12%,#e8f0ff 0%,transparent 45%),
 #f5f7fc;color:#08162d}
.account-header{height:auto;min-height:88px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid #e1e7f0;padding:14px 4%;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.account-nav{display:flex;gap:18px;align-items:center;font-size:14px}
.account-nav a{color:#10213c;text-decoration:none}
.account-nav a:hover{text-decoration:underline}
.account-shell{max-width:980px;margin:0 auto;padding:48px 4% 80px}
.account-hero{margin-bottom:28px}
.account-hero .eyebrow{font-size:12px;letter-spacing:1.5px;font-weight:700;color:#155aeb;margin:0 0 12px}
.account-hero h1{font-size:clamp(32px,5vw,48px);line-height:1.1;letter-spacing:-1.4px;margin:0 0 14px;max-width:16ch}
.account-lead{font-size:17px;color:#536078;margin:0;line-height:1.5;max-width:42ch}
#accountMessage{min-height:24px;margin:0 0 18px;color:#155aeb;font-size:14px}
.account-panel{background:#fff;border:1px solid #dce5f2;border-radius:16px;padding:28px;margin-bottom:24px}
.account-panel h2{margin:0 0 10px;font-size:22px}
.account-panel p{margin:0 0 18px;line-height:1.55;color:#536078}
.account-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.clerk-mount{margin:16px 0;min-height:40px}
.account-draft{display:grid;gap:16px;background:linear-gradient(135deg,#edf3ff,#fff 60%);border-color:#b9c5d8}
.account-draft label{margin:0}
.account-draft input{width:100%;margin-top:8px;padding:12px 14px;border:1px solid #c7d2e4;border-radius:8px;background:#fff}
.account-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid #dce5f2;padding:0 0 16px;margin-bottom:8px}
.account-tabs button{background:#fff;border:1px solid #c7d2e4;border-radius:8px;padding:12px 18px;color:#10213c;cursor:pointer;font:inherit}
.account-tabs button[aria-pressed=true]{background:#155aeb;color:#fff;border-color:#155aeb}
.account-section{padding:12px 0 28px}
.account-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.account-section-head h2{margin:0 0 6px;font-size:24px}
.account-section-head .hint{margin:0}
.account-section-head .primary{text-decoration:none;display:inline-flex;align-items:center}
.account-list{display:flex;flex-direction:column;gap:12px}
.account-list:empty::before,.account-empty{display:block;padding:28px;border:1px dashed #c5d0e0;border-radius:12px;background:#f7f9fd;color:#536078;text-align:center}
.account-card{display:flex;gap:16px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid #dce5f2;border-radius:12px;padding:18px 20px}
.account-card strong{flex:1;min-width:180px;overflow-wrap:anywhere;font-size:16px}
.account-card small{display:block;margin-top:6px;font-weight:400;color:#536078;font-size:13px}
.account-card-actions{display:flex;flex-wrap:wrap;gap:8px}
.account-badge{display:inline-block;margin-top:8px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.account-badge.paid{background:#e8f0ff;color:#1460ed}
.account-badge.pending{background:#f3f0e4;color:#7a6430}
.account-badge.other{background:#eef2f8;color:#536078}
.account-footer{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:8px;border-top:1px solid #e1e7f0}
.account-footer a{color:#10213c}
@media(max-width:700px){
 .account-shell{padding:32px 5% 64px}
 .account-hero h1{font-size:34px}
 .account-panel{padding:22px}
 .account-card{padding:16px}
}