:root {
    --hp-primary: #0C3653;
    --hp-primary-deep: #08263a;
    --hp-secondary: #5AACC6;
    --hp-accent: #C6D439;
    --hp-bg: #f4f8fb;
    --hp-surface: #ffffff;
    --hp-border: #d9e4eb;
    --hp-text: #122536;
    --hp-muted: #5a6b79;
    --hp-success: #1f8f5f;
    --hp-warning: #c88a04;
    --hp-danger: #c43d3d;
    --hp-info: #2f78c8;
    --hp-radius-sm: 10px;
    --hp-radius-md: 14px;
    --hp-radius-lg: 18px;
    --hp-radius-xl: 20px;
    --hp-shadow-soft: 0 6px 16px rgba(12, 54, 83, .05);
    --hp-shadow-card: 0 12px 28px rgba(12, 54, 83, .07);
}

.hp-page-header { margin-bottom: 1.2rem; }
.hp-page-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--hp-primary);
    font-weight: 800;
    letter-spacing: -.02em;
}
.hp-page-lead {
    margin: .5rem 0 0;
    max-width: 72ch;
    color: var(--hp-muted);
    font-size: .92rem;
    line-height: 1.55;
}

.hp-back-btn {
    border-radius: 8px;
}

.hp-card-hover {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.hp-card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--hp-shadow-card);
}

.hp-soft-panel {
    background: linear-gradient(135deg, rgba(90,172,198,.08), rgba(198,212,57,.08));
    border: 1px solid rgba(12,54,83,.08);
    border-radius: var(--hp-radius-md);
}

.hp-icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(90,172,198,.12);
    color: var(--hp-primary);
    border: 1px solid rgba(90,172,198,.18);
}

.hp-surface-card {
    border-radius: var(--hp-radius-lg) !important;
    border: 1px solid rgba(12,54,83,.08) !important;
    box-shadow: var(--hp-shadow-soft);
    background: var(--hp-surface);
}

.hp-status-badge {
    border-radius: 999px;
    padding: .45rem .75rem;
    font-size: .78rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
}
.hp-status-success { background: #dff4e8; color: #14583c; }
.hp-status-warning { background: #fff1cf; color: #8a5d00; }
.hp-status-muted { background: #edf1f5; color: #31404d; }
.hp-status-info { background: #e8f2fc; color: #1e5f9f; }
.hp-status-danger { background: #fde7e7; color: #9a2d2d; }

.hp-form-note {
    border-radius: 12px;
    border: 1px solid rgba(12,54,83,.08);
    background: rgba(255,255,255,.7);
    color: var(--hp-muted);
    font-size: .83rem;
}

.hp-section-title {
    color: var(--hp-primary);
    font-weight: 700;
    letter-spacing: -.01em;
}

.hp-keyval-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}
.hp-keyval-row:last-child { margin-bottom: 0; }
.hp-keyval-label { color: var(--hp-muted); }
.hp-keyval-value { font-weight: 600; color: var(--hp-text); text-align: right; }

.hp-list-empty {
    color: var(--hp-muted);
    font-size: .86rem;
}

.hp-result-actions {
    display: flex;
    gap: .75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.hp-btn-home {
    background: linear-gradient(135deg, var(--hp-primary), #15557f);
    border: none;
    color: #fff;
}
.hp-btn-home:hover,
.hp-btn-home:focus { color: #fff; opacity: .96; }

.hp-survey-shell {
    --survey-color: var(--hp-primary);
    --survey-soft: rgba(90,172,198,.15);
    --survey-soft-2: rgba(90,172,198,.08);
    --survey-text: var(--hp-primary);
}

.hp-survey-accent { color: var(--survey-color) !important; }
.hp-survey-progress .progress { height: 6px; border-radius: 4px; }
.hp-survey-progress .progress-bar { background: var(--survey-color); border-radius: 4px; }

.hp-survey-card {
    border-radius: var(--hp-radius-lg) !important;
    border: 1px solid rgba(12,54,83,.08) !important;
    box-shadow: var(--hp-shadow-soft);
}

.hp-survey-card-title {
    color: var(--survey-color);
    font-weight: 700;
}

.hp-question-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    border-radius: 999px;
    font-size: .75rem;
    padding: .2rem .6rem;
    background: var(--survey-soft);
    color: var(--survey-color);
    font-weight: 700;
}

.hp-survey-note {
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(90,172,198,.07), rgba(198,212,57,.07));
    border: 1px solid rgba(12,54,83,.08);
    color: var(--hp-muted);
}

.hp-range-scale .btn {
    border-radius: 10px;
}

.hp-feedback-result {
    border-radius: 14px;
    border: 1px solid rgba(12,54,83,.06);
}

.hp-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--hp-primary), #15557f);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(12,54,83,.15);
}

.hp-subtle-divider {
    border-color: rgba(12,54,83,.08) !important;
}

@media (prefers-reduced-motion: reduce) {
    .hp-card-hover { transition: none; }
}