/* Client portal. Self-contained — no CDN, no framework. Reuses the site's
   colour variables so it matches the public pages. */
.portal-body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,sans-serif; line-height:1.5; min-height:100vh;
  display:flex; flex-direction:column;
}
.portal-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 24px; border-bottom:1px solid var(--border-soft);
  background:rgba(16,21,28,.85); flex-wrap:wrap;
}
.portal-logo{ font-family:'JetBrains Mono',monospace; font-weight:600; font-size:16px; color:var(--text); text-decoration:none; }
.portal-logo .brace{ color:var(--text-dim); }
.portal-nav{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.portal-nav a{ color:var(--text-muted); text-decoration:none; font-size:13.5px; }
.portal-nav a:hover, .portal-nav a.on{ color:var(--accent); }
.portal-signout{
  background:none; border:1px solid var(--border); color:var(--text-muted);
  padding:6px 12px; border-radius:6px; font-size:12.5px; cursor:pointer; font-family:inherit;
}
.portal-signout:hover{ border-color:var(--accent); color:var(--accent); }

.portal-main{ flex:1; width:100%; max-width:900px; margin:0 auto; padding:32px 24px 48px; }
.portal-main h1{ font-family:'Space Grotesk',sans-serif; font-size:26px; margin:0 0 6px; }
.portal-main h2{ font-family:'Space Grotesk',sans-serif; font-size:17px; margin:0 0 14px; }
.portal-sub{ color:var(--text-muted); font-size:14px; margin:0 0 28px; }

.portal-card{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:22px; margin-bottom:18px;
}
.portal-card-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }

.portal-alert{
  padding:13px 16px; border-radius:9px; margin-bottom:18px; font-size:13.5px;
  background:rgba(79,209,197,.1); border:1px solid var(--accent-dim); color:var(--accent);
}
.portal-alert.warn{ background:rgba(242,166,90,.12); border-color:var(--warm); color:var(--warm); }
.portal-alert.bad{ background:rgba(229,103,90,.12); border-color:#E5675A; color:#E5675A; }

.portal-table{ width:100%; border-collapse:collapse; }
.portal-table th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-dim); padding:9px 10px; border-bottom:1px solid var(--border);
}
.portal-table td{ padding:12px 10px; border-bottom:1px solid var(--border-soft); font-size:13.5px; vertical-align:top; }
.portal-table tr:last-child td{ border-bottom:none; }

.portal-btn{
  display:inline-block; padding:9px 16px; border-radius:7px; font-size:13px; font-weight:600;
  text-decoration:none; border:1px solid var(--border); color:var(--text); background:var(--surface-2);
  cursor:pointer; font-family:inherit;
}
.portal-btn:hover{ border-color:var(--accent-dim); }
.portal-btn.primary{ background:var(--accent); color:#0A1014; border-color:var(--accent); }
.portal-btn.small{ padding:5px 10px; font-size:12px; }

.portal-tag{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.portal-tag.paid{ background:rgba(79,209,197,.15); color:var(--accent); }
.portal-tag.pending{ background:rgba(242,166,90,.15); color:var(--warm); }
.portal-tag.failed{ background:rgba(229,103,90,.15); color:#E5675A; }

.portal-field{ margin-bottom:16px; }
.portal-field label{ display:block; font-size:12.5px; color:var(--text-muted); margin-bottom:6px; }
.portal-field input{
  width:100%; padding:11px 13px; border-radius:7px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-size:14px; font-family:inherit;
}
.portal-field input:focus{ outline:none; border-color:var(--accent); }
.portal-field .hint{ font-size:11.5px; color:var(--text-dim); margin-top:5px; }
.portal-field .err{ font-size:12px; color:#E5675A; margin-top:5px; }
.portal-field ul{ margin:5px 0 0; padding-left:16px; }

.portal-empty{ padding:28px 10px; text-align:center; color:var(--text-dim); font-size:13.5px; }
.portal-foot{
  border-top:1px solid var(--border-soft); padding:20px 24px; display:flex;
  justify-content:space-between; gap:12px; font-size:12.5px; color:var(--text-dim); flex-wrap:wrap;
}
.portal-foot a{ color:var(--accent); text-decoration:none; }

.portal-login{ max-width:380px; margin:8vh auto; }

@media (max-width:640px){
  .portal-top{ padding:14px 16px; }
  .portal-main{ padding:22px 16px 36px; }
  .portal-nav{ gap:12px; font-size:13px; }
  .portal-table thead{ display:none; }
  .portal-table td{ display:block; padding:6px 0; border:none; }
  .portal-table tr{ display:block; padding:14px 0; border-bottom:1px solid var(--border-soft); }
}

.portal-select{
  width:100%; padding:11px 13px; border-radius:7px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-size:14px; font-family:inherit;
}
.portal-select:focus{ outline:none; border-color:var(--accent); }