.hfa {
--hfa-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
--hfa-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", Arial, sans-serif; --hfa-bg: #0b1424;
--hfa-surface: #0f1b2e;
--hfa-surface-2: #14233b;
--hfa-line: #22344f;
--hfa-text: #dce6f6;
--hfa-muted: #8c9cb7;
--hfa-blue: #4f8bff;
--hfa-blue-2: #38bdf8;
--hfa-blue-ink: #0a1f4a;
--hfa-gold: #f5b83d;
--hfa-ok: #3ddc97;
--hfa-bad: #ff7a7a;
--hfa-warn: #ffcb57;
--hfa-focus: 0 0 0 3px rgba(79, 139, 255, .45);
--hfa-radius: 10px;
--hfa-radius-sm: 6px; --bs-body-color: var(--hfa-text);
--bs-body-bg: var(--hfa-surface);
--bs-border-color: var(--hfa-line);
--bs-secondary-color: var(--hfa-muted);
--bs-link-color-rgb: 79, 139, 255;
--bs-emphasis-color: var(--hfa-text);
color: var(--hfa-text);
font-family: var(--hfa-font-sans);
font-size: 1rem;
line-height: 1.6;
margin-block: 1.5rem;
-webkit-font-smoothing: antialiased;
}
.hfa[data-hfa-theme="light"],
.hfa[data-hfa-scheme="light"] {
--hfa-bg: #eef3fa;
--hfa-surface: #ffffff;
--hfa-surface-2: #f4f7fc;
--hfa-line: #d6e0ee;
--hfa-text: #111c2e;
--hfa-muted: #55657f;
--hfa-blue: #1d4ed8;
--hfa-blue-2: #0ea5e9;
--hfa-blue-ink: #ffffff;
--hfa-gold: #b7791f;
--hfa-ok: #0f8a5f;
--hfa-bad: #c53030;
--hfa-warn: #a16207;
--hfa-focus: 0 0 0 3px rgba(29, 78, 216, .35);
--bs-link-color-rgb: 29, 78, 216;
}
@media (prefers-color-scheme: light) {
.hfa[data-hfa-scheme="auto"]:not([data-hfa-theme="dark"]) {
--hfa-bg: #eef3fa;
--hfa-surface: #ffffff;
--hfa-surface-2: #f4f7fc;
--hfa-line: #d6e0ee;
--hfa-text: #111c2e;
--hfa-muted: #55657f;
--hfa-blue: #1d4ed8;
--hfa-blue-2: #0ea5e9;
--hfa-blue-ink: #ffffff;
--hfa-gold: #b7791f;
--hfa-ok: #0f8a5f;
--hfa-bad: #c53030;
--hfa-warn: #a16207;
}
} .hfa-window {
background: var(--hfa-surface);
border: 1px solid var(--hfa-line);
border-radius: var(--hfa-radius);
overflow: hidden;
}
.hfa-window--compact { max-width: 720px; margin-inline: auto; }
.hfa-window__bar {
display: flex;
align-items: center;
gap: .9rem;
padding: .65rem 1rem;
background: var(--hfa-bg);
border-bottom: 1px solid var(--hfa-line);
font-family: var(--hfa-font-mono);
font-size: .8rem;
color: var(--hfa-muted);
position: relative;
}
.hfa-window__bar::after { content: "";
position: absolute;
inset: auto 0 -1px 0;
height: 2px;
background: linear-gradient(90deg, var(--hfa-blue), var(--hfa-blue-2) 60%, transparent);
}
.hfa-window__lights { display: inline-flex; gap: 6px; flex: none; }
.hfa-window__lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--hfa-line); display: block; }
.hfa-prompt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hfa-prompt b { color: var(--hfa-blue-2); font-weight: 700; }
.hfa-caret {
display: inline-block;
width: .55em;
height: 1em;
margin-inline-start: .3em;
vertical-align: -.15em;
background: var(--hfa-blue);
animation: hfa-blink 1.1s steps(1) infinite;
}
@keyframes hfa-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hfa-caret { animation: none; } }
.hfa-pad { padding: clamp(1.1rem, 3vw, 2rem); } .hfa-title {
font-family: var(--hfa-font-mono);
font-weight: 700;
font-size: clamp(1.3rem, 2.4vw, 1.65rem);
letter-spacing: -.01em;
line-height: 1.25;
color: var(--hfa-text);
margin: 0 0 .4rem;
}
.hfa-subtitle {
font-family: var(--hfa-font-mono);
font-size: 1rem;
font-weight: 600;
margin: 1.75rem 0 .75rem;
color: var(--hfa-text);
}
.hfa-muted, .hfa .form-text { color: var(--hfa-muted); }
.hfa a:not(.btn) { color: var(--hfa-blue); text-underline-offset: 3px; }
.hfa code { font-family: var(--hfa-font-mono); color: var(--hfa-blue-2); background: transparent; font-size: .85em; } .hfa-form { padding: clamp(1.1rem, 3vw, 2rem); border-inline-end: 1px solid var(--hfa-line); }
.hfa-form__head { margin-bottom: 1.5rem; max-width: 62ch; }
.hfa-step { border: 0; padding: 0; margin: 0 0 2rem; min-width: 0; }
.hfa-step__legend {
display: flex;
align-items: center;
gap: .6rem;
font-family: var(--hfa-font-mono);
font-size: .95rem;
font-weight: 600;
color: var(--hfa-text);
margin-bottom: 1rem;
padding-bottom: .6rem;
border-bottom: 1px dashed var(--hfa-line);
width: 100%;
float: none;
}
.hfa-step__n {
display: inline-grid;
place-items: center;
width: 1.6rem;
height: 1.6rem;
border-radius: var(--hfa-radius-sm);
background: var(--hfa-blue);
color: var(--hfa-blue-ink);
font-size: .8rem;
font-weight: 700;
}
.hfa .form-label { font-weight: 600; font-size: .92rem; margin-bottom: .35rem; color: var(--hfa-text); }
.hfa-req { color: var(--hfa-bad); margin-inline-start: .15rem; }
.hfa .form-control,
.hfa .form-select {
background-color: var(--hfa-surface-2);
border: 1px solid var(--hfa-line);
color: var(--hfa-text);
border-radius: var(--hfa-radius-sm);
font-family: var(--hfa-font-sans);
}
.hfa .form-control::placeholder { color: var(--hfa-muted); opacity: .75; }
.hfa .form-control:focus,
.hfa .form-select:focus,
.hfa .form-check-input:focus {
border-color: var(--hfa-blue);
box-shadow: var(--hfa-focus);
background-color: var(--hfa-surface-2);
color: var(--hfa-text);
}
.hfa .form-control[readonly] { opacity: .75; }
.hfa .form-control-lg { font-family: var(--hfa-font-mono); font-size: 1.1rem; }
.hfa .form-control.is-invalid,
.hfa .form-select.is-invalid { border-color: var(--hfa-bad); }
.hfa .invalid-feedback { color: var(--hfa-bad); font-size: .85rem; }
.hfa .form-check-input { background-color: var(--hfa-surface-2); border-color: var(--hfa-line); }
.hfa .form-check-input:checked { background-color: var(--hfa-blue); border-color: var(--hfa-blue); } .hfa:not([data-hfa-theme="light"]) .form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238c9cb7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
} .hfa-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; } .hfa-editor .wp-editor-wrap { border: 1px solid var(--hfa-line); border-radius: var(--hfa-radius-sm); overflow: hidden; }
.hfa-editor.is-invalid .wp-editor-wrap { border-color: var(--hfa-bad); }
.hfa-editor .wp-editor-tabs button { font-family: var(--hfa-font-mono); font-size: .75rem; }
.hfa-editor .wp-editor-area { background: var(--hfa-surface-2); color: var(--hfa-text); font-family: var(--hfa-font-mono); border: 0; }
.hfa-editor .quicktags-toolbar { background: var(--hfa-bg); border-color: var(--hfa-line); }
.hfa-editor .mce-panel { background: var(--hfa-surface-2) !important; } .hfa-drop {
border: 1px dashed var(--hfa-line);
border-radius: var(--hfa-radius-sm);
padding: .9rem;
background: var(--hfa-bg);
}
.hfa-drop.is-invalid { border-color: var(--hfa-bad); }
.hfa-drop__preview { max-height: 180px; width: auto; max-width: 100%; border-radius: var(--hfa-radius-sm); margin-bottom: .75rem; display: block; } .hfa-types { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 1.25rem; }
.hfa-type {
display: flex;
gap: .75rem;
align-items: flex-start;
padding: .9rem 1rem;
border: 1px solid var(--hfa-line);
border-radius: var(--hfa-radius-sm);
background: var(--hfa-surface-2);
cursor: pointer;
}
.hfa-type .form-check-input { margin-top: .3rem; flex: none; }
.hfa-type:has(input:checked) { border-color: var(--hfa-blue); box-shadow: inset 3px 0 0 var(--hfa-blue); }
.hfa-type--sponsored:has(input:checked) { border-color: var(--hfa-gold); box-shadow: inset 3px 0 0 var(--hfa-gold); }
.hfa-type__name { display: block; font-family: var(--hfa-font-mono); font-weight: 600; }
.hfa-type--sponsored .hfa-type__name { color: var(--hfa-gold); }
.hfa-type__desc { display: block; font-size: .85rem; color: var(--hfa-muted); }
.hfa-consent { margin-bottom: 1rem; }
.hfa-consent .form-check-label { font-size: .92rem; } .hfa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding-top: .5rem; }
.hfa-btn {
font-family: var(--hfa-font-mono);
font-weight: 600;
font-size: .92rem;
border-radius: var(--hfa-radius-sm);
padding: .65rem 1.2rem;
display: inline-flex;
align-items: center;
gap: .5rem;
}
.hfa-btn--primary {
background: linear-gradient(135deg, var(--hfa-blue), var(--hfa-blue-2));
color: #fff;
border: 0;
}
.hfa-btn--primary:hover, .hfa-btn--primary:focus-visible { color: #fff; filter: brightness(1.08); }
.hfa-btn--ghost { background: transparent; color: var(--hfa-text); border: 1px solid var(--hfa-line); }
.hfa-btn--ghost:hover { border-color: var(--hfa-blue); color: var(--hfa-text); }
.hfa-btn--gold { background: var(--hfa-gold); color: #1a1204; border: 0; }
.hfa-btn:focus-visible { outline: none; box-shadow: var(--hfa-focus); }
.hfa-btn[disabled] { opacity: .7; cursor: progress; } .hfa-preflight { background: var(--hfa-bg); }
.hfa-preflight__inner { padding: clamp(1.1rem, 3vw, 1.75rem); position: sticky; top: 1rem; }
.hfa-preflight__title { font-family: var(--hfa-font-mono); font-size: .95rem; font-weight: 700; margin: 0 0 .9rem; color: var(--hfa-text); }
.hfa-progress { height: 6px; background: var(--hfa-line); border-radius: 99px; margin-bottom: 1.1rem; }
.hfa-progress .progress-bar { background: linear-gradient(90deg, var(--hfa-blue), var(--hfa-blue-2)); transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { .hfa-progress .progress-bar { transition: none; } }
.hfa-checks { list-style: none; margin: 0 0 1.5rem; padding: 0; font-family: var(--hfa-font-mono); font-size: .82rem; }
.hfa-checks li {
display: grid;
grid-template-columns: 1.4rem 1fr auto;
align-items: center;
gap: .4rem;
padding: .45rem 0;
border-bottom: 1px solid var(--hfa-line);
color: var(--hfa-muted);
}
.hfa-checks__mark::before { content: "·"; color: var(--hfa-muted); font-weight: 700; }
.hfa-checks li.is-ok { color: var(--hfa-text); }
.hfa-checks li.is-ok .hfa-checks__mark::before { content: "✓"; color: var(--hfa-ok); }
.hfa-checks li.is-bad .hfa-checks__mark::before { content: "✗"; color: var(--hfa-bad); }
.hfa-checks code { color: var(--hfa-muted); font-size: .8rem; }
.hfa-checks li.is-ok code { color: var(--hfa-ok); }
.hfa-checks li.is-bad code { color: var(--hfa-bad); }
.hfa-preflight__rules { font-size: .85rem; color: var(--hfa-muted); }
.hfa-preflight__rules ol { padding-inline-start: 1.1rem; } .hfa-alert { border-radius: var(--hfa-radius-sm); border-width: 1px; font-size: .95rem; }
.hfa .alert-danger { background: color-mix(in srgb, var(--hfa-bad) 12%, var(--hfa-surface)); border-color: color-mix(in srgb, var(--hfa-bad) 45%, transparent); color: var(--hfa-text); }
.hfa .alert-success { background: color-mix(in srgb, var(--hfa-ok) 12%, var(--hfa-surface)); border-color: color-mix(in srgb, var(--hfa-ok) 45%, transparent); color: var(--hfa-text); }
.hfa .alert-info { background: color-mix(in srgb, var(--hfa-blue) 12%, var(--hfa-surface)); border-color: color-mix(in srgb, var(--hfa-blue) 45%, transparent); color: var(--hfa-text); }
.hfa-callout {
border-inline-start: 3px solid var(--hfa-line);
background: var(--hfa-surface-2);
padding: .75rem 1rem;
border-radius: 0 var(--hfa-radius-sm) var(--hfa-radius-sm) 0;
margin-bottom: 1.25rem;
}
.hfa-callout--warn { border-inline-start-color: var(--hfa-warn); }
.hfa-notice { padding: clamp(1.25rem, 3vw, 2rem); }
.hfa-notice--warning { border-inline-start: 3px solid var(--hfa-warn); }
.hfa-notice--danger { border-inline-start: 3px solid var(--hfa-bad); }
.hfa-success { padding: clamp(1.25rem, 4vw, 2.5rem); }
.hfa-success:focus { outline: none; }
.hfa-tracking { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; font-family: var(--hfa-font-mono); }
.hfa-tracking span { color: var(--hfa-muted); font-size: .85rem; }
.hfa-tracking code { font-size: 1.15rem; color: var(--hfa-blue-2); letter-spacing: .02em; } .hfa-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.25rem; }
.hfa-tabs__item {
font-family: var(--hfa-font-mono);
font-size: .8rem;
padding: .35rem .7rem;
border: 1px solid var(--hfa-line);
border-radius: 99px;
text-decoration: none !important;
color: var(--hfa-muted) !important;
}
.hfa-tabs__item.is-active, .hfa-tabs__item:hover { color: var(--hfa-text) !important; border-color: var(--hfa-blue); }
.hfa-tabs__count { color: var(--hfa-blue-2); margin-inline-start: .2rem; }
.hfa-table { --bs-table-bg: transparent; --bs-table-color: var(--hfa-text); --bs-table-border-color: var(--hfa-line); font-size: .92rem; }
.hfa-table thead th { font-family: var(--hfa-font-mono); font-size: .75rem; font-weight: 600; color: var(--hfa-muted); border-bottom-width: 1px; }
.hfa-badge { font-family: var(--hfa-font-mono); font-weight: 600; font-size: .72rem; }
.hfa-pagination .page-link { background: var(--hfa-surface-2); border-color: var(--hfa-line); color: var(--hfa-text); font-family: var(--hfa-font-mono); }
.hfa-pagination .active .page-link { background: var(--hfa-blue); border-color: var(--hfa-blue); color: #fff; }
.hfa-empty { text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--hfa-line); border-radius: var(--hfa-radius-sm); }
.hfa-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--hfa-line); border: 1px solid var(--hfa-line); border-radius: var(--hfa-radius-sm); overflow: hidden; margin: 0; }
.hfa-stats__item { background: var(--hfa-surface-2); padding: 1rem; }
.hfa-stats dt { font-size: .8rem; font-weight: 500; color: var(--hfa-muted); }
.hfa-stats dd { font-family: var(--hfa-font-mono); font-size: 1.6rem; font-weight: 700; margin: 0; color: var(--hfa-text); }
.hfa-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.hfa-list__item { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--hfa-line); }
.hfa-list__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hfa-link { font-family: var(--hfa-font-mono); font-size: .85rem; } .hfa-author-box {
margin: 2.5rem 0 1rem;
padding: 1.25rem 1.4rem;
border: 1px solid currentColor;
border-color: color-mix(in srgb, currentColor 18%, transparent);
border-inline-start: 3px solid #3b82f6;
border-radius: 8px;
font-family: inherit;
color: inherit;
--hfa-text: inherit;
}
.hfa-author-box__label { font-family: var(--hfa-font-mono); font-size: .75rem; opacity: .7; margin: 0 0 .25rem; }
.hfa-author-box__name { font-family: var(--hfa-font-mono); font-weight: 700; margin: 0 0 .4rem; }
.hfa-author-box__bio { margin: 0 0 .5rem; }
.hfa-author-box__link { font-family: var(--hfa-font-mono); font-size: .85rem; } @media (max-width: 991.98px) {
.hfa-form { border-inline-end: 0; border-bottom: 1px solid var(--hfa-line); }
.hfa-preflight { order: -1; }
.hfa-preflight__inner { position: static; }
.hfa-preflight__rules { display: none; }
}
@media (max-width: 575.98px) {
.hfa-window { border-radius: 0; border-inline: 0; }
.hfa-actions .hfa-btn { width: 100%; justify-content: center; }
.hfa-window__lights { display: none; }
}