/* ---- Forms (login/register/reset) ---- */
.hp-form-wrap { max-width: 440px; margin: 2em auto; padding: 2em; border: 1px solid #e2e2e2; border-radius: 10px; background: #fff; }
.hp-form-wrap h2 { margin-top: 0; color: #6C1FD4; }
.hp-form label { display: block; margin-bottom: 1em; font-weight: 600; }
.hp-form input,
.hp-form textarea { width: 100%; padding: 10px; margin-top: 4px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-family: inherit; }
.hp-form textarea { resize: vertical; }
.hp-pw-strength { font-size: 12px; color: #777; display: block; margin-top: 4px; }

.hp-btn-primary { background: #6C1FD4; color: #fff; border: none; padding: 10px 22px; border-radius: 6px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.hp-btn-primary:hover { opacity: .9; }
.hp-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.hp-btn-small { background: #AAFF00; color: #222; padding: 6px 14px; border-radius: 6px; text-decoration: none; font-weight: 600; border: none; cursor: pointer; font-size: 13px; }

.hp-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: hp-spin .7s linear infinite; }
@keyframes hp-spin { to { transform: rotate(360deg); } }

.hp-alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 1em; font-size: 14px; }
.hp-alert-error, .hp-error { color: #c0392b; background: #fdecea; }
.hp-alert-success, .hp-success { color: #1e7e34; background: #e6f7ea; }

/* ---- Dashboard ---- */
.hp-dashboard { max-width: 900px; margin: 2em auto; }
.hp-dash-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5em; }
.hp-dash-header h2 { margin: 0; color: #6C1FD4; }
.hp-muted { color: #888; margin: 4px 0 0; font-size: 14px; }
.hp-logout { color: #c0392b; text-decoration: none; font-weight: 600; }

.hp-summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 1.5em; }
.hp-card { background: #f8f6ff; border: 1px solid #eee0ff; border-radius: 10px; padding: 16px; text-align: center; }
.hp-card-warn { background: #fff6e6; border-color: #ffe2a8; }
.hp-card-num { display: block; font-size: 26px; font-weight: 700; color: #6C1FD4; }
.hp-card-warn .hp-card-num { color: #cc8400; }
.hp-card-label { display: block; font-size: 12px; color: #666; margin-top: 4px; }

.hp-tabs { display: flex; gap: 4px; border-bottom: 2px solid #eee; margin-bottom: 1.5em; flex-wrap: wrap; }
.hp-tab-btn { background: none; border: none; padding: 10px 18px; cursor: pointer; font-weight: 600; color: #777; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.hp-tab-btn.active { color: #6C1FD4; border-bottom-color: #AAFF00; }
.hp-tab-btn:hover { color: #6C1FD4; }

.hp-tab-panel h3 { margin-top: 1.5em; color: #333; }
.hp-tab-panel h3:first-child { margin-top: 0; }

.hp-table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.hp-table th, .hp-table td { text-align: left; padding: 10px; border-bottom: 1px solid #eee; }
.hp-table th { color: #888; font-size: 12px; text-transform: uppercase; }

.hp-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.hp-badge-green { background: #e6f7ea; color: #1e7e34; }
.hp-badge-orange { background: #fff6e6; color: #cc8400; }
.hp-badge-grey { background: #eee; color: #666; }

.hp-empty { color: #888; font-style: italic; }

.hp-ticket { border: 1px solid #eee; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.hp-ticket-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; cursor: pointer; background: #fafafa; }
.hp-ticket-body { padding: 14px; border-top: 1px solid #eee; }
.hp-reply { padding: 8px 0; border-bottom: 1px dashed #eee; font-size: 14px; }
.hp-reply-admin { color: #6C1FD4; }
.hp-reply-form { margin-top: 10px; display: flex; gap: 8px; align-items: flex-start; }
.hp-reply-form textarea { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 6px; }

@media (max-width: 600px) {
    .hp-dash-header { flex-direction: column; gap: 10px; }
    .hp-reply-form { flex-direction: column; }
}