/* Opt-in primitives. Keep literal fallbacks before custom properties for H5.
 * No legacy element, Tailwind utility, or global body override belongs here. */
.hh-ui {
    color: #111827; color: var(--hh-ui-text);
    background: #fff; background: var(--hh-ui-surface);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-family: var(--hh-ui-font);
    font-size: 16px; font-size: var(--hh-ui-text-body);
    font-weight: 400; font-weight: var(--hh-ui-weight-body);
    line-height: 1.6;
    overflow-wrap: break-word;
}
.hh-ui, .hh-ui *, .hh-ui *::before, .hh-ui *::after { box-sizing: border-box; }
.hh-ui [hidden] { display: none !important; }
.hh-ui .hh-ui-page {
    width: 100%; max-width: 840px; max-width: var(--hh-ui-width-create);
    margin: 0 auto; padding: 32px 24px;
    padding: var(--hh-ui-space-8) var(--hh-ui-space-6);
}
.hh-ui .hh-ui-page--form { max-width: 480px; max-width: var(--hh-ui-width-form); }
.hh-ui .hh-ui-page--browse { max-width: 1120px; max-width: var(--hh-ui-width-browse); }
.hh-ui .hh-ui-title {
    margin: 0 0 16px; margin-bottom: var(--hh-ui-space-4);
    font-size: 28px; font-size: var(--hh-ui-text-title);
    font-weight: 600; font-weight: var(--hh-ui-weight-heading); line-height: 1.3;
}
.hh-ui .hh-ui-heading {
    margin: 0 0 12px; margin-bottom: var(--hh-ui-space-3);
    font-size: 18px; font-size: var(--hh-ui-text-section);
    font-weight: 600; font-weight: var(--hh-ui-weight-heading); line-height: 1.4;
}
.hh-ui .hh-ui-section + .hh-ui-section { margin-top: 32px; margin-top: var(--hh-ui-space-8); }
.hh-ui .hh-ui-muted { color: #4b5563; color: var(--hh-ui-muted); }
.hh-ui .hh-ui-help, .hh-ui .hh-ui-error {
    margin: 4px 0 0; margin-top: var(--hh-ui-space-1);
    font-size: 13px; font-size: var(--hh-ui-text-small); line-height: 1.5;
}
.hh-ui .hh-ui-help { color: #4b5563; color: var(--hh-ui-muted); }
.hh-ui .hh-ui-error { color: #b91c1c; color: var(--hh-ui-danger); }
.hh-ui .hh-ui-field + .hh-ui-field { margin-top: 16px; margin-top: var(--hh-ui-space-4); }
.hh-ui .hh-ui-label {
    display: block; margin: 0 0 8px; margin-bottom: var(--hh-ui-space-2);
    font-size: 14px; font-size: var(--hh-ui-text-control);
    font-weight: 500; font-weight: var(--hh-ui-weight-control);
}
.hh-ui .hh-ui-control {
    display: block; width: 100%; min-width: 0; max-width: 100%;
    min-height: 44px; min-height: var(--hh-ui-target);
    padding: 8px 12px; padding: var(--hh-ui-space-2) var(--hh-ui-space-3);
    border: 1px solid #858b95; border-color: var(--hh-ui-control-border);
    border-radius: 8px; border-radius: var(--hh-ui-radius-control);
    background: #fff; background: var(--hh-ui-surface);
    color: #111827; color: var(--hh-ui-text);
    font: inherit; line-height: 1.5;
}
.hh-ui textarea.hh-ui-control { resize: vertical; }
.hh-ui input.hh-ui-control, .hh-ui textarea.hh-ui-control { -webkit-appearance: none; }
.hh-ui .hh-ui-control::placeholder { color: #6b7280; color: var(--hh-ui-subtle); opacity: 1; }
.hh-ui .hh-ui-control[aria-invalid="true"] { border-color: #b91c1c; border-color: var(--hh-ui-danger); }
.hh-ui .hh-ui-control:disabled, .hh-ui .hh-ui-button:disabled {
    background: #e5e7eb; background: var(--hh-ui-disabled);
    color: #4b5563; color: var(--hh-ui-muted); cursor: not-allowed;
}
.hh-ui .hh-ui-control[readonly] { background: #f9fafb; background: var(--hh-ui-surface-soft); }
.hh-ui .hh-ui-button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-height: var(--hh-ui-target); max-width: 100%;
    padding: 8px 16px; padding: var(--hh-ui-space-2) var(--hh-ui-space-4);
    border: 1px solid #858b95; border-color: var(--hh-ui-control-border);
    border-radius: 8px; border-radius: var(--hh-ui-radius-control);
    background: #fff; background: var(--hh-ui-surface);
    color: #111827; color: var(--hh-ui-text);
    font-family: inherit; font-size: 14px; font-size: var(--hh-ui-text-control);
    font-weight: 500; font-weight: var(--hh-ui-weight-control); line-height: 1.4;
    text-align: center; text-decoration: none; white-space: normal; overflow-wrap: break-word;
    cursor: pointer; touch-action: manipulation; -webkit-appearance: none;
}
.hh-ui .hh-ui-button--primary {
    background: #be123c; background: var(--hh-ui-primary);
    border-color: #be123c; border-color: var(--hh-ui-primary);
    color: #fff; color: var(--hh-ui-on-primary);
}
.hh-ui .hh-ui-button--primary:hover:not(:disabled) {
    background: #9f1239; background: var(--hh-ui-primary-hover);
    border-color: #9f1239; border-color: var(--hh-ui-primary-hover);
}
.hh-ui .hh-ui-button--quiet { border-color: transparent; background: transparent; }
.hh-ui .hh-ui-button--quiet:hover:not(:disabled) { background: #f9fafb; background: var(--hh-ui-surface-soft); }
.hh-ui .hh-ui-button--danger { color: #b91c1c; color: var(--hh-ui-danger); }
.hh-ui .hh-ui-button:disabled { border-color: #e5e7eb; border-color: var(--hh-ui-disabled); }
.hh-ui .hh-ui-control:focus, .hh-ui .hh-ui-button:focus, .hh-ui summary:focus, .hh-ui a:focus {
    outline: 2px solid #be123c; outline-color: var(--hh-ui-primary); outline-offset: 2px;
}
.hh-ui .hh-ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; margin: -4px; }
.hh-ui .hh-ui-toolbar > * { min-width: 0; margin: 4px; }
.hh-ui .hh-ui-disclosure {
    border-top: 1px solid #e5e7eb; border-color: var(--hh-ui-border);
    padding: 8px 0; padding: var(--hh-ui-space-2) 0;
}
.hh-ui .hh-ui-disclosure > summary {
    min-height: 44px; min-height: var(--hh-ui-target); padding: 10px 4px;
    cursor: pointer; touch-action: manipulation;
    font-size: 14px; font-size: var(--hh-ui-text-control);
    font-weight: 500; font-weight: var(--hh-ui-weight-control);
}
.hh-ui .hh-ui-disclosure-value { margin-left: 8px; color: #4b5563; color: var(--hh-ui-muted); font-weight: 400; }
.hh-ui .hh-ui-disclosure-body { padding: 8px 4px; padding: var(--hh-ui-space-2) var(--hh-ui-space-1); }
.hh-ui .hh-ui-empty {
    padding: 24px 0; padding: var(--hh-ui-space-6) 0;
    border-top: 1px solid #e5e7eb; border-color: var(--hh-ui-border);
}
.hh-ui .hh-ui-empty p { margin: 8px 0 0; margin-top: var(--hh-ui-space-2); }
.hh-ui .hh-ui-list { margin: 0; padding: 0; list-style: none; }
.hh-ui .hh-ui-list > li { padding: 16px 0; padding: var(--hh-ui-space-4) 0; border-bottom: 1px solid #e5e7eb; border-color: var(--hh-ui-border); }
@media (max-width: 640px) {
    .hh-ui .hh-ui-page { padding: 24px 16px; padding: var(--hh-ui-space-6) var(--hh-ui-space-4); }
    .hh-ui .hh-ui-title { font-size: 24px; }
}