/* hn-* avoids Bootstrap .btn/.card and the legacy page-specific selectors. */
.hn-card {
    padding: var(--ui-space-6);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-panel);
    color: var(--ui-text);
}

.hn-field {
    box-sizing: border-box;
    width: 100%;
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-control);
    background: var(--ui-panel-soft);
    color: var(--ui-text);
    font: inherit;
    line-height: 1.5;
}

textarea.hn-field { min-height: 130px; resize: vertical; }
.hn-field::placeholder { color: var(--ui-faint); }
.hn-field:focus { border-color: var(--ui-primary); }

.hn-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-control);
    background: var(--ui-panel);
    color: var(--ui-text);
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.hn-button:not(:disabled):hover { background: var(--ui-panel-raised); }
.hn-button--muted { color: var(--ui-muted); }
.hn-button--primary { background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-on-primary); }
.hn-button--primary:not(:disabled):hover { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); color: var(--ui-on-primary); }
.hn-button--danger { color: var(--ui-danger); border-color: var(--ui-danger); }
.hn-button:disabled { opacity: .48; cursor: not-allowed; }
.hn-button--small { min-height: 30px; padding: 5px 10px; font-size: 12px; }
.hn-button--icon { width: 36px; padding: 8px; flex-shrink: 0; }
.hn-field:disabled { opacity: .6; cursor: not-allowed; }
.hn-field[aria-invalid="true"] { border-color: var(--ui-danger); }
.hn-field-label { display: block; margin-bottom: 6px; color: var(--ui-muted); font-size: 12px; font-weight: 600; }

.hn-alert {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: 10px 12px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-control);
    background: var(--ui-panel-soft);
    color: var(--ui-text);
}

.hn-alert--warning { background: var(--ui-warning-bg); border-color: var(--ui-warning-border); color: var(--ui-warning); }
.hn-alert--danger { background: var(--ui-danger-bg); border-color: var(--ui-danger-border); color: var(--ui-danger); }
.hn-alert--success { background: var(--ui-success-bg); border-color: var(--ui-success-border); color: var(--ui-success); }