:root { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #20302c; background: #f6f8f7; font-size: 14px; }
* { box-sizing: border-box; }
body { margin: 0; }
.portal-header { display: flex; align-items: center; gap: 32px; padding: 16px 5%; background: #fff; border-bottom: 1px solid #dfe6e2; }
.portal-brand { display: flex; align-items: center; gap: 10px; color: #173d30; text-decoration: none; font-weight: 700; font-size: 17px; white-space: nowrap; }
.portal-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: #16634b; color: white; }
.portal-nav { display: flex; flex-wrap: wrap; gap: 22px; }
.portal-nav a { text-decoration: none; color: #69766f; font-size: 13px; padding: 8px 0; }
.portal-nav a[aria-current] { color: #16634b; font-weight: 650; }
.portal-account { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13px; }
.portal-account form { margin: 0; }
.portal { padding: 32px 20px 60px; margin: auto; max-width: 1140px; }
.portal h1 { margin: 6px 0 12px; font-size: 30px; line-height: 1.2; letter-spacing: -.8px; }
.portal h2 { margin: 0; font-size: 17px; font-weight: 650; }
.portal p { line-height: 1.6; }
.portal-eyebrow { margin: 0; font-size: 10px; letter-spacing: 1.6px; color: #628073; font-weight: 700; }
.portal-subtle { color: #65736b; font-size: 13px; line-height: 1.6; }
.portal-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 10px 0 22px; }
.portal-link { color: #16634b; font-size: 13px; text-decoration: none; }
.portal-link:hover { text-decoration: underline; }
.portal-card { background: #fff; border: 1px solid #dfe6e2; border-radius: 10px; padding: 24px; margin-bottom: 20px; }
.portal-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.portal-stats .portal-card { display: grid; gap: 12px; padding: 20px; }
.portal-stats span { color: #65736b; font-size: 12px; }
.portal-stats strong { font-size: 30px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.portal-section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.portal input { width: 100%; min-width: 0; border: 1px solid #cbd6cf; border-radius: 6px; padding: 11px 12px; background: white; font: inherit; color: inherit; }
.portal input:focus { outline: 2px solid #2d7b60; outline-offset: 2px; }
.portal button, .portal-header button { font: inherit; cursor: pointer; border-radius: 6px; padding: 10px 16px; }
.portal-primary { border: 1px solid #16634b; background: #16634b; color: #fff; font-weight: 600; white-space: nowrap; }
.portal-primary:hover { background: #114c39; }
.portal-quiet { border: 1px solid #dfe6e2; background: white; color: #53645b; }
.portal-danger { border: 1px solid #eed4d1; color: #a33c30; background: white; padding: 6px 10px !important; font-size: 12px !important; }
.portal-danger:hover { background: #fdf2f1; }
.portal-inline-form { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.portal-inline-form label { white-space: nowrap; font-size: 13px; }
.portal-inline-form input:not([type=hidden]) { max-width: 360px; }
.portal-empty { padding: 30px 12px; text-align: center; color: #65736b; border-top: 1px solid #edf1ee; }
.portal-empty strong { color: #354c40; font-size: 14px; }
.portal-empty p { margin: 8px 0 0; font-size: 13px; }
.portal-footnote { margin: 16px 0 0; color: #768279; font-size: 12px; line-height: 1.6; }
.portal-table-wrap { overflow-x: auto; }
.portal-table { width: 100%; text-align: left; border-collapse: collapse; font-size: 12px; }
.portal-table th { color: #748178; font-weight: 500; white-space: nowrap; }
.portal-table th, .portal-table td { padding: 14px 10px; border-bottom: 1px solid #edf1ee; }
.portal-table td { vertical-align: middle; }
.portal-table td code { overflow-wrap: anywhere; }
.portal-table td:first-child, .portal-table th:first-child { padding-left: 0; }
.portal-table strong { overflow-wrap: anywhere; }
.portal-key-prefix { display: block; color: #7b867e; font-size: 11px; margin-top: 6px; }
.portal-badge { display: inline-block; border-radius: 20px; padding: 4px 9px; font-size: 10px; color: #286348; background: #eaf5ef; }
.portal-badge.is-revoked { color: #93574e; background: #f8eeec; }
.portal-code { padding: 18px; border-radius: 7px; font: 12px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; background: #f5f8f6; overflow-x: auto; }
.portal-notice { padding: 20px 24px; background: #eef8f2; border: 1px solid #b9dcc8; border-radius: 9px; margin-bottom: 20px; }
.portal-notice p { font-size: 13px; margin: 8px 0 12px; }
.portal-notice input { font-family: ui-monospace, monospace; }
.portal-error { background: #fcf0ee; border: 1px solid #f1d5d0; padding: 12px 14px; border-radius: 6px; color: #973b30; font-size: 13px; }
.portal-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.login-shell { display: grid; place-items: start center; padding-top: max(60px, 11vh); }
.login-card { width: 100%; max-width: 420px; padding: 34px; }
.portal-form { display: grid; gap: 9px; margin-top: 28px; }
.portal-form label { margin-top: 8px; font-size: 12px; font-weight: 600; }
.portal-form .portal-primary { margin-top: 14px; }
@media (max-width: 800px) { .portal-header { flex-wrap: wrap; gap: 12px 20px; } .portal-nav { order: 3; width: 100%; } .portal-heading { align-items: flex-start; } .portal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-inline-form { flex-wrap: wrap; } .portal-inline-form label { width: 100%; } .portal-card { padding: 18px; } }
@media (max-width: 480px) { .portal-header > .portal-subtle { display: none; } .portal { padding-inline: 14px; } .portal-heading > .portal-link { display: none; } .portal h1 { font-size: 26px; } .login-card { padding: 26px; } .portal-nav { gap: 16px; } .portal-account { gap: 8px; } }
.portal-create-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr) auto; align-items: end; gap: 16px; margin-top: 24px; }
.portal-create-form label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.portal-create-form button { min-height: 42px; }
.portal-badge.is-low { background: #fff3d6; color: #865b14; }
.portal-badge.is-exhausted { background: #f8eeec; color: #93574e; }
.portal-warning { padding: 14px 18px; border-radius: 7px; background: #fff6df; color: #79551b; border: 1px solid #eeddaf; }
.portal-pagination { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 20px; color: #65736b; font-size: 12px; }
.portal-heading h1 { overflow-wrap: anywhere; }
@media (max-width: 620px) { .portal-create-form { grid-template-columns: 1fr; } .portal-section-head { flex-wrap: wrap; } }