body { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; background: #f6f8fb; }
.portal-header { background: #20262e; color: #fff; }
.portal-topbar { min-height: 78px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.portal-brand { font-family: ui-monospace, monospace; font-size: 1.3rem; font-weight: 700; color: #fff; text-decoration: none; }
.portal-brand:hover { color: #fff; }
.portal-brand span { color: #a8b8cd; }
.account-menu { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; font-size: .85rem; }
.account-name { color: #e2e8f0; text-decoration: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-name:hover { color: white; }
.credit-badge { background: #304157; color: #e0edff; border: 1px solid #496382; border-radius: 20px; padding: 5px 12px; }
.logout-button { background: transparent; color: #bfc7cf; border: none; padding: 5px 0; }
.logout-button:hover { color: white; }
.portal-nav { display: flex; gap: 24px; overflow-x: auto; flex-wrap: nowrap; }
.portal-nav a { display: block; padding: 12px 0; color: #bfc7cf; text-decoration: none; white-space: nowrap; font-size: .88rem; border-bottom: 3px solid transparent; }
.portal-nav a:hover, .portal-nav a.current { color: white; border-color: #83b8ff; }
.nav-divider { width: 1px; background: #46515c; margin: 12px 0; flex-shrink: 0; }
.portal-main { padding-top: 32px; padding-bottom: 50px; }
.page-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; color: #5b718c; margin-bottom: 7px; }
.page-intro h1 { font-size: 1.8rem; letter-spacing: -.04em; margin-bottom: 5px; }
.page-intro p { color: #67758a; margin: 0; }
.panel, .stat-card { background: #fff; border: 1px solid #dfe5ed; border-radius: 10px; }
.panel { padding: 24px; }
.panel h2 { font-size: 1.05rem; font-weight: 650; margin-bottom: 18px; }
.stat-card { padding: 22px; height: 100%; }
.stat-card p { color: #64748b; font-size: .84rem; margin-bottom: 8px; }
.stat-card strong { display: block; font-size: 2rem; letter-spacing: -.04em; }
.stat-card.primary { color: #fff; background: #195acb; border-color: #195acb; }
.stat-card.primary p { color: #e2edff; }
.stat-card small { font-size: .75rem; }
.table { font-size: .9rem; vertical-align: middle; }
.table th { color: #65748a; font-size: .74rem; letter-spacing: .04em; font-weight: 600; text-transform: uppercase; padding-top: 12px; padding-bottom: 12px; white-space: nowrap; }
.table td { padding-top: 14px; padding-bottom: 14px; }
.empty-panel { text-align: center; padding: 32px 12px; color: #718096; }
.status-pill { display: inline-block; font-size: .73rem; font-weight: 600; padding: 4px 9px; border-radius: 20px; background: #eef2f7; color: #58677c; white-space: nowrap; }
.status-pill.active { background: #e8f6ee; color: #18733d; }
.status-pill.suspended { background: #fff0ed; color: #b23e2b; }
.auth-card { max-width: 450px; margin: 24px auto; padding: 32px; }
.auth-card h1 { font-size: 1.65rem; letter-spacing: -.03em; }
.auth-card label, .panel label { font-size: .86rem; font-weight: 500; }
.auth-card .form-control { min-height: 45px; }
.form-note { font-size: .78rem; color: #6b778b; }
.audit-details { white-space: pre-wrap; word-break: break-word; font-size: .8rem; max-width: 460px; margin: 0; }
.history-card h2 { overflow-wrap: anywhere; }
.account-email { overflow-wrap: anywhere; }
.save-options { border-top: 1px solid #dfe5ed; padding-top: 16px; }
.generator-credit-note { font-family: system-ui, sans-serif; font-size: .83rem; }
.history-thumbnail { width: 150px; height: 48px; object-fit: contain; background: white; border: 1px solid #dfe5ed; border-radius: 4px; padding: 4px; }
.history-actions { display: flex; flex-direction: column; gap: 8px; font-size: .82rem; min-width: 125px; }
.saved-fields dt { color: #64748b; font-size: .78rem; font-weight: 500; margin-bottom: 5px; }
.saved-fields dd { background: #f6f8fb; border: 1px solid #e6ebf2; border-radius: 5px; padding: 10px 12px; margin: 0; min-height: 44px; overflow-wrap: anywhere; }
@media(max-width: 575px) {
    .portal-topbar { justify-content: center; }
    .account-menu { gap: 14px; justify-content: center; }
    .portal-nav { gap: 20px; }
    .portal-main { padding-top: 24px; }
    .auth-card { margin-top: 8px; padding: 24px; }
    .panel { padding: 18px; }
    .page-intro h1 { font-size: 1.5rem; }
}