/* ===== HumiValue — 身价推演 v1.4 ===== */

/* ----- Landing Page: hide site chrome ----- */
.humivalue-page .site-header,
.humivalue-page .secondary-navigation,
.humivalue-page .generate-back-to-top,
.humivalue-page .site-footer,
.humivalue-page .widget-area,
.humivalue-page .entry-meta,
.humivalue-page .page-header,
.humivalue-page .post-navigation,
.humivalue-page #right-sidebar,
.humivalue-page .footer-widgets,
.humivalue-page .site-info {
    display: none !important;
}
.humivalue-page .inside-article { padding: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; }
.humivalue-page .entry-content { margin: 0 !important; }
.humivalue-page .site-main, .humivalue-page .content-area, .humivalue-page .separate-containers .site-main { margin: 0 !important; padding: 0 !important; }
.humivalue-page #page { background: #fafafa; }
.humivalue-page .grid-container { max-width: 100% !important; }

/* ================================================================
   Design System v1.4
   ================================================================ */

.humivalue {
    /* ── Palette ── */
    --hv-green: #00cc5e;
    --hv-green-dim: rgba(0, 204, 94, 0.1);
    --hv-green-bg: #ecfdf5;
    --hv-green-border: #86efac;
    --hv-dark: #09090b;
    --hv-dark-2: #18181b;
    --hv-spotlight: #0d0d12;
    --hv-growth-bg: #18181b;
    --hv-white: #fff;
    --hv-card: #fafafa;
    --hv-gray-900: #18181b;
    --hv-gray-700: #3f3f46;
    --hv-gray-500: #71717a;
    --hv-gray-400: #a1a1aa;
    --hv-gray-300: #d4d4d8;
    --hv-gray-200: #e4e4e7;
    --hv-gray-100: #f4f4f5;
    --hv-gray-50: #fafafa;
    --hv-amber: #f59e0b;
    --hv-amber-bg: #fffbeb;
    --hv-amber-border: #fcd34d;
    --hv-red: #ef4444;
    --hv-red-bg: #fef2f2;
    --hv-v-color: #38bdf8;
    --hv-t-color: #a78bfa;
    --hv-e-color: #fbbf24;
    --hv-l-color: #fb7185;
    --hv-s-color: #14b8a6;

    /* ── 卢浮宫 · 结果指数 (Louvre result-index palette) ── */
    --hv-w-color: #94a3b8;     /* W · 铂金银 · 财富是起点, 不是终点 */
    --hv-f-color: #84cc16;     /* F · 酸柠绿 · 真正自由的颜色 */

    /* ── 卢浮宫 · 深色表面系统 (dark-surface tokens) ── */
    --hv-surface-dark:  #0a0a0f;
    --hv-surface-card:  #09090b;
    --hv-border-dark:   #1a1a2e;
    --hv-text-dark-dim:  rgba(255, 255, 255, 0.55);
    --hv-text-dark-muted: rgba(255, 255, 255, 0.35);

    --hv-red-border: #fca5a5;
    --hv-tier-color: var(--hv-red);
    --hv-tier-bg: var(--hv-white);
    --hv-tier-border: var(--hv-red-border);
    --hv-radius: 12px;
    --hv-radius-sm: 8px;
    --hv-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── S 级动效 token ── */
    --hv-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);       /* Apple spring */
    --hv-duration-sm: 180ms;
    --hv-duration-md: 280ms;
    --hv-duration-lg: 400ms;

    /* ── Font Scale (7 steps) ── */
    --hv-font-hero: 2.75rem;
    --hv-font-multiple: 4.5rem;
    --hv-font-hourly: 1.2rem;
    --hv-font-tier-title: 1.2rem;
    --hv-font-panel-heading: 1rem;
    --hv-font-body: 0.95rem;
    --hv-font-label: 0.8rem;
    --hv-font-caption: 0.7rem;

    /* ── Spacing (8px grid) ── */
    --hv-space-4: 32px;
    --hv-space-5: 40px;
    --hv-space-6: 48px;
    --hv-space-8: 64px;
    --hv-space-10: 80px;
    --hv-space-12: 96px;

    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--hv-gray-900);
    box-sizing: border-box;
    background: var(--hv-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.humivalue *, .humivalue *::before, .humivalue *::after { box-sizing: border-box; }

/* Tier Color Mapping */
.humivalue[data-tier="0"] { --hv-tier-color: var(--hv-green); --hv-tier-bg: var(--hv-green-bg); --hv-tier-border: var(--hv-green-border); }
.humivalue[data-tier="1"] { --hv-tier-color: var(--hv-dark-2); --hv-tier-bg: var(--hv-white); --hv-tier-border: var(--hv-gray-200); }
.humivalue[data-tier="2"] { --hv-tier-color: var(--hv-amber); --hv-tier-bg: var(--hv-amber-bg); --hv-tier-border: var(--hv-amber-border); }
.humivalue[data-tier="3"] { --hv-tier-color: var(--hv-red); --hv-tier-bg: var(--hv-red-bg); --hv-tier-border: var(--hv-red-border); }
.humivalue[data-tier="4"] { --hv-tier-color: var(--hv-green); --hv-tier-bg: var(--hv-dark); --hv-tier-border: var(--hv-green); }

/* ================================================================
   Section — standard wrapper with max-width
   ================================================================ */
.humivalue__section {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--hv-space-6) 24px;
}
.humivalue__section--tight { padding-top: 24px; padding-bottom: 24px; }
.humivalue__section--flush { padding-top: 0; padding-bottom: 0; }

/* ================================================================
   Hero
   ================================================================ */
.humivalue__hero {
    text-align: center;
    padding: var(--hv-space-12) 24px var(--hv-space-8);
    background: var(--hv-dark);
    position: relative;
    overflow: hidden;
}
.humivalue__hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(0, 204, 94, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.humivalue__hero-title {
    font-size: var(--hv-font-hero);
    font-weight: 800;
    margin: 0 0 10px;
    letter-spacing: -0.03em;
    color: var(--hv-white);
    position: relative;
    z-index: 1;
    line-height: 1.15;
}
.humivalue__hero-tagline {
    font-size: 1.05rem;
    color: var(--hv-green);
    margin: 0;
    position: relative;
    z-index: 1;
    font-weight: 500;
}

/* Currency + Period toggles */
.humivalue__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    position: relative;
    z-index: 1;
    margin-top: 16px;
}
.humivalue__toggle-group {
    display: inline-flex;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 2px;
    gap: 0;
}
.humivalue__toggle-btn {
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-size: var(--hv-font-caption);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border-radius: 6px;
    transition: all var(--hv-transition);
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.humivalue__toggle-btn:hover { color: rgba(255,255,255,0.85); }
.humivalue__toggle-btn--active { background: rgba(255,255,255,0.12); color: var(--hv-white); }
.humivalue__toggle-btn:focus-visible { outline: 2px solid var(--hv-green); outline-offset: 2px; }
/* Light-background variant (below nav, on white page) */
.humivalue__toggle-btn--light { color: var(--hv-gray-400); }
.humivalue__toggle-btn--light:hover { color: var(--hv-gray-700); }
.humivalue__toggle-btn--light.humivalue__toggle-btn--active { background: var(--hv-dark); color: var(--hv-white); }

/* ================================================================
   Unified Tool Navigation — dark bg extends hero
   ================================================================ */
.humivalue__nav {
    text-align: center; padding: 6px 0 16px;
    background: var(--hv-dark);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.humivalue__nav-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 10px; margin-bottom: 4px; }
.humivalue__nav-item {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 6px; text-decoration: none;
    transition: background 0.15s, color 0.15s;
    color: rgba(255,255,255,0.5);
}
.humivalue__nav-item:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); }
.humivalue__nav-item--active { color: #fff; font-weight: 650; background: rgba(255,255,255,0.1); }
.humivalue__nav-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 800; font-size: 0.56rem;
}
.humivalue__nav-badge--core {
    flex-direction: column; width: 30px; height: 30px; gap: 1px; border-radius: 6px; font-size: 0.45rem;
}
.humivalue__nav-badge--core .humivalue__nav-badge-icon { font-size: 0.78rem; line-height: 1; }
.humivalue__nav-badge--core .humivalue__nav-badge-sym { font-size: 0.44rem; line-height: 1; opacity: 0.65; }
.humivalue__nav-badge--deep { font-size: 0.62rem; }
.humivalue__nav-label { font-size: 0.72rem; white-space: nowrap; }
@media (max-width: 480px) {
    .humivalue__nav-row { gap: 1px 5px; }
    .humivalue__nav-item { padding: 2px 5px; }
    .humivalue__nav-label { font-size: 0.64rem; }
    .humivalue__nav { padding: 4px 0 12px; }
}

/* Old growth-map — kept for backwards compat, hidden */
.humivalue__growth-map { display: none; }

/* ================================================================
   Panels (Input Section)
   ================================================================ */
.humivalue__panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 0;
}
.humivalue__panel {
    background: var(--hv-white);
    border: 1px solid var(--hv-gray-200);
    border-radius: var(--hv-radius);
    padding: 28px 24px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: box-shadow var(--hv-transition);
}
.humivalue__panel:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.05); }
.humivalue__panel[data-panel="target"] {
    border-color: var(--hv-green);
    box-shadow: 0 0 0 1px var(--hv-green), 0 1px 2px rgba(0,0,0,0.03);
}
.humivalue__panel-heading {
    font-size: var(--hv-font-panel-heading);
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--hv-gray-900);
}
.humivalue__panel[data-panel="target"] .humivalue__panel-heading { color: var(--hv-green); }

/* Fields */
.humivalue__field { margin-bottom: 16px; }
.humivalue__field:last-child { margin-bottom: 0; }
.humivalue__label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--hv-font-label);
    font-weight: 600;
    color: var(--hv-gray-500);
    margin-bottom: 6px;
}
.humivalue__label-hint {
    font-weight: 400;
    font-size: var(--hv-font-caption);
    color: var(--hv-gray-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
    text-align: right;
    flex-shrink: 0;
}
.humivalue__label span:first-child { white-space: nowrap; }

.humivalue__slider-wrap { display: flex; align-items: center; gap: 12px; }
.humivalue__slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--hv-gray-200);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
    outline: none;
    cursor: pointer;
    min-height: 44px;
    padding: 0;
    background: linear-gradient(to right, var(--humi-dim-color, var(--hv-green)) 0%, var(--humi-dim-color, var(--hv-green)) var(--slider-pct, 0%), var(--hv-gray-200) var(--slider-pct, 0%), var(--hv-gray-200) 100%);
}
.humivalue__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--hv-white);
    border: 2px solid var(--humi-dim-color, var(--hv-green));
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.humivalue__slider::-webkit-slider-thumb:hover { transform: scale(1.18); box-shadow: 0 4px 14px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06); }
.humivalue__slider::-webkit-slider-thumb:active { transform: scale(0.95); }
.humivalue__slider::-moz-range-thumb {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--hv-white);
    border: 2px solid var(--humi-dim-color, var(--hv-green));
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    cursor: pointer;
}
.humivalue__slider:focus-visible::-webkit-slider-thumb,
.humivalue__slider:focus-visible::-moz-range-thumb { outline: 3px solid var(--hv-green-dim); outline-offset: 3px; }

.humivalue__input {
    width: 96px;
    padding: 8px 10px;
    border: 1px solid var(--hv-gray-200);
    border-radius: var(--hv-radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
    color: var(--hv-gray-900);
    background: var(--hv-white);
    transition: border-color var(--hv-transition), box-shadow var(--hv-transition);
    min-height: 44px;
}
.humivalue__input:focus { border-color: var(--hv-green); outline: none; box-shadow: 0 0 0 3px var(--hv-green-dim); }
.humivalue__input--error { border-color: var(--hv-red); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12); }

/* ================================================================
   Spotlight — dark reveal section for results
   ================================================================ */
.humivalue__spotlight {
    background: #0d0d12;
    padding: 64px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.humivalue__spotlight::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 320px; height: 1px;
    background: linear-gradient(to right, transparent, rgba(0,204,94,0.15), transparent);
}
.humivalue__spotlight-inner {
    max-width: 640px;
    margin: 0 auto;
}

/* Result labels in spotlight: bright enough for dark bg */
.humivalue__spotlight .humivalue__result-label { color: #a1a1aa !important; }
.humivalue__spotlight .humivalue__result-value { color: #d4d4d8 !important; }
.humivalue__spotlight .humivalue__result-multiple .humivalue__result-value { color: #ffffff !important; }
.humivalue__spotlight .humivalue__result-delta { color: #a1a1aa !important; }
.humivalue__spotlight .humivalue__result-dimension { color: #a1a1aa; }
.humivalue__spotlight .humivalue__result-delta strong { color: #ffffff !important; }

/* Three-column result in spotlight */
.humivalue__result {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    text-align: center;
    margin-bottom: 16px;
}
.humivalue__result-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.humivalue__result-label {
    font-size: var(--hv-font-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hv-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.humivalue__spotlight .humivalue__result-label { color: #a1a1aa; }
.humivalue__result-value {
    font-weight: 800;
    font-size: var(--hv-font-hourly);
    color: var(--hv-gray-400);
    transition: color var(--hv-transition);
    line-height: 1.2;
}
.humivalue__spotlight .humivalue__result-value { color: #d4d4d8; }

/* The multiple — page's visual anchor */
.humivalue__result-multiple .humivalue__result-value {
    font-size: var(--hv-font-multiple);
    font-weight: 950;
    color: var(--hv-white);
    line-height: 1;
    letter-spacing: -0.03em;
}

/* Dimension label below the multiple */
.humivalue__result-dimension {
    font-size: var(--hv-font-caption);
    font-weight: 500;
    color: var(--hv-gray-500);
    margin-top: 4px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}
.humivalue__spotlight .humivalue__result-dimension { color: #a1a1aa; }

/* Delta line in spotlight */
.humivalue__result-delta {
    font-size: var(--hv-font-label);
    color: var(--hv-gray-500);
    margin-top: 0;
    text-align: center;
}
.humivalue__spotlight .humivalue__result-delta { color: #a1a1aa; }
.humivalue__result-delta strong { color: var(--hv-white); font-weight: 800; }

/* ================================================================
   Tier Panel
   ================================================================ */
.humivalue__tier {
    background: var(--hv-tier-bg);
    border: 3px solid var(--hv-tier-border);
    border-radius: var(--hv-radius);
    padding: 32px 28px;
    text-align: center;
    transition: border-color var(--hv-transition), background var(--hv-transition);
    position: relative;
}
.humivalue__tier-header { margin-bottom: 16px; }
.humivalue__tier-stars {
    font-size: 1.1rem;
    color: var(--hv-tier-color);
    margin-bottom: 6px;
    letter-spacing: 3px;
}
.humivalue__tier-title {
    font-size: var(--hv-font-tier-title);
    font-weight: 800;
    margin: 0;
    color: var(--hv-tier-color);
    transition: color var(--hv-transition);
}
.humivalue__tier-insight {
    font-size: var(--hv-font-body);
    line-height: 1.75;
    margin: 0 0 20px;
    color: var(--hv-gray-700);
}
.humivalue[data-tier="4"] .humivalue__tier-insight { color: rgba(255,255,255,0.7); }
.humivalue[data-tier="4"] .humivalue__tier-stars,
.humivalue[data-tier="4"] .humivalue__tier-title { color: var(--hv-green); }

.humivalue__tier-image { margin-bottom: 24px; }
.humivalue__tier-img { max-width: 280px; height: auto; border-radius: var(--hv-radius); display: block; margin: 0 auto; }
.humivalue[data-tier="4"] .humivalue__tier-img { filter: invert(1); }

/* ================================================================
   CTA
   ================================================================ */
.humivalue__cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.humivalue__cta-panel {
    width: 100%;
    background: var(--hv-dark);
    border-radius: var(--hv-radius);
    padding: 28px 24px;
    position: relative;
}
.humivalue__cta-subtext {
    color: rgba(255,255,255,0.55);
    font-size: 0.85rem;
    margin: 0 0 16px 0;
    line-height: 1.5;
}
.humivalue__cta--primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #00cc5e;
    color: #09090b;
    text-decoration: none;
    border-radius: 8px;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: pulse-cta 2.5s ease-in-out infinite;
    will-change: box-shadow;
}
.humivalue__cta--primary:hover,
.humivalue__cta--primary:focus-visible { transform: scale(1.02); animation: none; box-shadow: 0 0 20px rgba(0, 204, 94, 0.4); }
.humivalue__cta--primary:focus-visible { outline: 3px solid #00cc5e; outline-offset: 2px; }
.humivalue__cta-btn-text { font-size: 0.95rem; font-weight: 700; color: #09090b; }
.humivalue__cta-arrow { font-size: 1rem; color: #09090b; }

/* Secondary share action under the primary CTA. */
.humivalue__cta-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    background: transparent;
    color: var(--hv-gray-400);
    border: 1px solid var(--hv-gray-700);
    cursor: pointer;
    padding: 12px 20px;
    border-radius: var(--hv-radius-sm);
    font-weight: 600;
    font-size: 0.85rem;
    font-family: inherit;
    min-height: 44px;
    transition: color var(--hv-transition), border-color var(--hv-transition);
}
.humivalue__cta-share:hover { color: var(--hv-white); border-color: var(--hv-gray-500); }
.humivalue__cta-share:focus-visible { outline: 3px solid var(--hv-green); outline-offset: 2px; }

/* Journey CTA (next step, text link) */
.humivalue__journey-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.8rem;
    padding: 8px 0;
    color: #71717a;
    text-decoration: none;
    transition: color 0.2s;
}
.humivalue__journey-cta:hover { color: #00cc5e; }
.humivalue__journey-cta:hover .humivalue__journey-arrow { transform: translateX(3px); }
.humivalue__journey-label { color: #71717a; }
.humivalue__journey-target { color: #00cc5e; font-weight: 600; }
.humivalue__journey-arrow {
    display: inline-block;
    color: #00cc5e;
    transition: transform 0.2s;
    margin-left: 2px;
}

/* Next-Step CTA (HumiBid routing) */
.humivalue__next-step {
    margin-top: 24px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(0,168,255,0.06), rgba(16,185,129,0.04));
    border: 1px solid rgba(0,168,255,0.12);
    border-radius: 14px;
    text-align: center;
}
.humivalue__next-step-inner {
    max-width: 540px;
    margin: 0 auto;
}
.humivalue__next-step-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hv-text-primary, #18181b);
    margin: 0 0 8px;
    line-height: 1.4;
}
.humivalue__next-step-body {
    font-size: 0.82rem;
    color: var(--hv-text-secondary, #71717a);
    line-height: 1.6;
    margin: 0 0 18px;
}
.humivalue__next-step-cta {
    display: inline-flex !important;
}
.humivalue__next-step-cta:hover .humivalue__cta-arrow {
    transform: translateX(3px);
}

/* ================================================================
   Noscript Fallback
   ================================================================ */
.humivalue--noscript {
    background: #ffffff;
    border: 2px solid #00cc5e;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.humivalue--noscript a {
    display: inline-block;
    background: #09090b;
    color: #00cc5e;
    text-decoration: none;
    padding: 12px 32px;
    border-radius: var(--hv-radius-sm);
    font-weight: 700;
    margin-top: 16px;
}

/* ================================================================
   Badge + Insight + Opportunity Cost
   ================================================================ */
.humivalue__badge-pill {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(255,255,255,0.08);
    color: #d4d4d8;
    border: 1px solid rgba(255,255,255,0.1);
}

.humivalue__insight-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f4f4f5;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.humivalue__insight-icon { font-size: 1.1rem; line-height: 1.4; flex-shrink: 0; }
.humivalue__insight-text { font-size: 0.85rem; color: #3f3f46; line-height: 1.6; margin: 0; }

.humivalue__opp-cost {
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    padding: 20px 24px;
    background: #fff;
}
.humivalue__opp-field { margin-bottom: 12px; }
.humivalue__opp-result { font-size: 0.85rem; color: #18181b; line-height: 1.6; margin: 0; padding: 12px; background: #fef2f2; border-radius: 8px; }
.humivalue__opp-result strong { color: #ef4444; }

/* ================================================================
   Income Model
   ================================================================ */
.humivalue__im-source {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #fff; border: 1px solid #e4e4e7; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px;
    transition: all var(--hv-duration-sm) var(--hv-ease-spring);
}
.humivalue__im-source:hover { border-color: #a1a1aa; }
.humivalue__im-source--dominant { transform: scale(1.02); border-color: var(--hv-e-color); box-shadow: 0 0 0 1px rgba(251,191,36,0.2), 0 4px 12px rgba(0,0,0,0.06); }
.humivalue__im-source input[type="text"] {
    flex: 1; min-width: 120px; padding: 8px 10px; border: 1px solid #e4e4e7; border-radius: 6px; font-size: 0.85rem; font-family: inherit;
}
.humivalue__im-source input[type="text"]:focus { border-color: #00cc5e; outline: none; box-shadow: 0 0 0 3px rgba(0,204,94,0.1); }
.humivalue__im-source input[type="number"] {
    width: 80px; padding: 8px 10px; border: 1px solid #e4e4e7; border-radius: 6px; font-size: 0.85rem; text-align: center;
}
.humivalue__im-source input[type="number"]:focus { border-color: #00cc5e; outline: none; }
.humivalue__im-source-preview { font-size: 0.7rem; color: #a1a1aa; min-width: 80px; text-align: right; }
.humivalue__im-source-del {
    width: 28px; height: 28px; border: none; background: #f4f4f5; border-radius: 50%; cursor: pointer;
    font-size: 0.9rem; color: #a1a1aa; transition: all 0.2s; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.humivalue__im-source-del:hover { background: #fef2f2; color: #ef4444; }
.humivalue__im-add { text-align: center; margin-top: 8px; }
.humivalue__im-add-btn {
    padding: 10px 24px; background: #f4f4f5; border: 1px dashed #d4d4d8; border-radius: 10px;
    font-size: 0.85rem; font-weight: 600; color: #71717a; cursor: pointer; font-family: inherit;
    transition: all 0.2s;
}
.humivalue__im-add-btn:hover { border-color: #00cc5e; color: #00cc5e; background: #ecfdf5; }

.humivalue__im-summary {
    display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
    margin-top: 24px; padding: 24px; background: #fafafa; border: 1px solid #e4e4e7; border-radius: 10px;
}
.humivalue__im-chart-wrap { flex-shrink: 0; }
.humivalue__im-stats { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 12px; }
.humivalue__im-stat { display: flex; justify-content: space-between; align-items: baseline; }
.humivalue__im-stat-label { font-size: 0.75rem; color: #a1a1aa; }
.humivalue__im-stat-value { font-size: 1.1rem; font-weight: 700; color: #18181b; }
.humivalue__im-health { margin-top: 8px; padding: 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; line-height: 1.5; }
.humivalue__im-health--good { background: #ecfdf5; color: #00cc5e; }
.humivalue__im-health--warn { background: #fffbeb; color: #f59e0b; }
.humivalue__im-health--bad  { background: #fef2f2; color: #ef4444; }

/* ================================================================
   Pricing Lab
   ================================================================ */
.humivalue__pl-preview {
    display: flex; flex-direction: column; gap: 2px;
    padding: 16px; background: #f4f4f5; border-radius: 8px; text-align: center; margin-top: 8px;
}
.humivalue__pl-preview--result { background: #ecfdf5; }
.humivalue__pl-preview-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #a1a1aa; }
.humivalue__pl-preview-value { font-size: 1.5rem; font-weight: 800; color: #18181b; }
.humivalue__pl-preview--result .humivalue__pl-preview-value { color: #00cc5e; }
.humivalue__pl-preview-delta {
    font-size: 0.85rem; font-weight: 700; color: #00cc5e; margin-top: 2px;
}
.humivalue__pl-preview-delta--negative { color: #ef4444; }
.humivalue__pl-table-wrap { margin-top: 24px; overflow-x: auto; }
.humivalue__pl-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.humivalue__pl-table th,
.humivalue__pl-table td { padding: 10px 12px; text-align: center; border-bottom: 1px solid #e4e4e7; }
.humivalue__pl-table th { font-weight: 700; color: #71717a; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; background: #fafafa; }
.humivalue__pl-table td { color: #3f3f46; font-weight: 600; transition: background var(--hv-duration-sm) var(--hv-ease-spring); }
.humivalue__pl-table td.hv-pl-positive { color: #00cc5e; }
.humivalue__pl-table td.hv-pl-negative { color: #ef4444; }
.humivalue__pl-table tr:hover td { background: #f4f4f5; }

/* ================================================================
   Time Audit Panels
   ================================================================ */
.humivalue__ta-panels { display: flex; flex-direction: column; gap: 12px; }
.humivalue__ta-panel {
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    padding: 20px 24px;
    transition: border-color 0.2s;
}
.humivalue__ta-panel:hover { border-color: #a1a1aa; }
.humivalue__ta-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.humivalue__ta-icon { font-size: 1.2rem; line-height: 1; }
.humivalue__ta-info { display: flex; flex-direction: column; gap: 2px; }
.humivalue__ta-label { font-size: 0.85rem; font-weight: 700; color: #18181b; }
.humivalue__ta-rate { font-size: 0.72rem; font-weight: 600; color: #a1a1aa; }
.humivalue__ta-field { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.humivalue__ta-field .humivalue__slider { flex: 1; }
.humivalue__ta-field .humivalue__input { width: 64px; transition: transform var(--hv-duration-sm) var(--hv-ease-spring); }

/* Enlarged value readout in expanded panels */
.ta-open .humivalue__ta-field .humivalue__input { width: 72px; font-size: 0.95rem; font-weight: 800; }

/* ── 状态引擎 — 工时警戒动画 ── */
.hv-ta-state { transition: all var(--hv-duration-md) var(--hv-ease-spring); }
.hv-ta-state__title { display: block; font-size: 1.1rem; font-weight: 900; line-height: 1.2; }
.hv-ta-state__desc  { font-size: 0.7rem; line-height: 1.5; opacity: 0.8; margin-top: 4px; display: block; }
.hv-ta-state--shake { animation: hv-ta-shake 0.5s ease-in-out infinite; }
.hv-ta-state--glitch { animation: hv-ta-glitch 2s ease-in-out infinite; filter: contrast(1.15); }
.hv-ta-state--broken { animation: hv-ta-broken 0.25s infinite; filter: contrast(1.25) brightness(1.05); }
.hv-ta-state--overlay {
    position: relative;
}
.hv-ta-state--overlay::after {
    content: 'OVERLOAD'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 950; color: var(--hv-red); opacity: 0; pointer-events: none;
    animation: hv-ta-strobe 0.6s steps(1) infinite;
    background: rgba(255,77,32,0.06);
}
@keyframes hv-ta-strobe {
    0%{opacity:0.8} 50%{opacity:0}
}

/* ── 主导面板放大 ── */
.humivalue__ta-panel--dominant { transform: scale(1.03); box-shadow: 0 0 0 1px var(--humi-dim-color, var(--hv-green)), 0 4px 16px rgba(0,0,0,0.08); transition: transform var(--hv-duration-md) var(--hv-ease-spring), box-shadow var(--hv-duration-md) var(--hv-ease-spring); }
@keyframes hv-ta-shake {
    0%,100%{transform:translateX(0)} 25%{transform:translateX(1px)} 75%{transform:translateX(-1px)}
}
@keyframes hv-ta-glitch {
    0%,92%,100%{opacity:1;transform:skew(0)}
    94%{opacity:0.7;transform:skew(1deg)} 96%{opacity:0.85;transform:skew(-1deg)}
}
@keyframes hv-ta-broken {
    0%{transform:scale(1)} 50%{transform:scale(1.01);clip-path:inset(0 0 2% 0)}
}
@keyframes hv-ta-strobe {
    0%{opacity:0.8} 50%{opacity:0}
}
.humivalue__ta-desc { font-size: 0.7rem; color: #a1a1aa; margin: 0; }

/* ── LV 视觉层级 ──
   LV01 最轻 (灰调), LV04 最重 (glow 边 + 更大呼吸感)。 */
.humivalue__ta-panel[data-level="0"] { opacity: 0.88; }
.humivalue__ta-panel[data-level="0"] .humivalue__ta-rate { color: var(--hv-gray-500); font-size:0.65rem; }
.humivalue__ta-panel[data-level="3"] { padding: 18px 16px !important; box-shadow: 0 0 0 1px var(--humi-dim-color, var(--hv-l-color)), 0 2px 12px rgba(0,0,0,0.04); }
.humivalue__ta-panel[data-level="3"] .humivalue__ta-rate { font-size: 0.85rem; font-weight: 800; color: var(--humi-dim-color, var(--hv-l-color)); }

/* Accordion — collapsible panel body (class-driven, not data-attrib) */
.ta-body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--hv-duration-lg) var(--hv-ease-spring), opacity var(--hv-duration-sm) var(--hv-transition); }
.ta-open .ta-body { max-height: 1200px; overflow: visible; opacity: 1; }
.ta-open .ta-toggle { transform: rotate(180deg); }
.humivalue__ta-summary {
    margin-top: 24px;
    padding: 24px;
    background: #fafafa;
    border-radius: 10px;
    border: 1px solid #e4e4e7;
}
.humivalue__ta-total { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.humivalue__ta-total-label { font-size: 0.8rem; color: #71717a; }
.humivalue__ta-total-value { font-size: 1.5rem; font-weight: 800; color: #18181b; }
.humivalue__ta-total-max { font-size: 0.8rem; color: #a1a1aa; }
.humivalue__ta-income { margin-bottom: 12px; }
.humivalue__ta-income-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #a1a1aa; margin-bottom: 2px; }
.humivalue__ta-income-value { font-size: 2.5rem; font-weight: 900; color: #00cc5e; line-height: 1.1; }
.humivalue__ta-insight { font-size: 0.85rem; color: #71717a; line-height: 1.6; padding: 12px; background: #f4f4f5; border-radius: 8px; display: none; }
.humivalue__ta-insight--visible { display: block; }

/* ================================================================
   Animations
   ================================================================ */
@keyframes pulse-cta {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 204, 94, 0.5); }
    50%      { box-shadow: 0 0 0 12px rgba(0, 204, 94, 0); }
}
.humivalue[data-tier="2"] .humivalue__tier { animation: pulse-shadow-amber 2s ease-in-out infinite; will-change: box-shadow; }
@keyframes pulse-shadow-amber {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.25); }
    50%      { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}
.humivalue[data-tier="3"] .humivalue__tier { animation: box-shake 0.5s ease-in-out; }
@keyframes box-shake {
    0%, 100%   { transform: translateX(0); }
    20%        { transform: translateX(-4px); }
    40%, 60%   { transform: translateX(4px); }
    80%        { transform: translateX(-2px); }
}

/* 5-stage stagger reveal */
.humivalue__result-current  { animation: hv-reveal-left  var(--hv-duration-lg) var(--hv-ease-spring) both; }
.humivalue__result-target   { animation: hv-reveal-right var(--hv-duration-lg) 0.25s var(--hv-ease-spring) both; }
.humivalue__result-multiple { animation: hv-reveal-scale var(--hv-duration-lg) 0.55s var(--hv-ease-spring) both; }
.humivalue__result-delta    { animation: hv-reveal-fade  var(--hv-duration-md) 0.85s var(--hv-ease-spring) both; }
.humivalue__tier            { animation: hv-reveal-slide var(--hv-duration-lg) 1.1s var(--hv-ease-spring) both; }

@keyframes hv-reveal-left  { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes hv-reveal-right { from { opacity: 0; transform: translateX(24px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes hv-reveal-scale { from { opacity: 0; transform: scale(1.4); }         to { opacity: 1; transform: scale(1); } }
@keyframes hv-reveal-fade  { from { opacity: 0; }  to { opacity: 1; } }
@keyframes hv-reveal-slide { from { opacity: 0; transform: translateY(20px); }   to { opacity: 1; transform: translateY(0); } }

/* Re-trigger animations on tier change (JS removes/reads class) */

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 768px) {
    .humivalue__hero { padding: var(--hv-space-8) 20px var(--hv-space-6); }
    .humivalue__hero-title { font-size: 2rem; }
    .humivalue__spotlight { padding: var(--hv-space-6) 20px; }
    .humivalue__section { padding: var(--hv-space-5) 20px; }
    .humivalue__panels { grid-template-columns: 1fr 1fr; gap: 12px; }
    .humivalue__panel { padding: 20px 16px; }
    .humivalue__result-value { font-size: 1rem; }
    .humivalue__result-multiple .humivalue__result-value { font-size: 3rem; }
}

@media (max-width: 480px) {
    .humivalue__hero-title { font-size: 1.55rem; }
    .humivalue__panels { grid-template-columns: 1fr; gap: 14px; }
    .humivalue__result { gap: 8px; }
    .humivalue__result-value { font-size: 0.95rem; }
    .humivalue__result-multiple .humivalue__result-value { font-size: 2.4rem; }
    .humivalue__slider-wrap { flex-direction: column; align-items: stretch; gap: 6px; }
    .humivalue__input { width: 100%; }
    .humivalue__tier { padding: 24px 16px; }
    .humivalue__meta { flex-direction: column; gap: 8px; }
    .humivalue__growth-steps { gap: 4px; }
}

/* ================================================================
   Business Map
   ================================================================ */
.humivalue__bm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.humivalue__bm-tab {
    padding: 7px 14px; border: 1px solid #e4e4e7; border-radius: 20px;
    background: #fff; font-size: 0.75rem; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: all 0.2s; color: #71717a;
}
.humivalue__bm-tab:hover { border-color: #a1a1aa; }
.humivalue__bm-tab--active { background: #18181b; color: #fff; border-color: #18181b; }

.humivalue__bm-grid {
    position: relative; width: 100%; max-width: 600px; aspect-ratio: 1;
    flex: 1 1 500px; min-width: 0;
    margin: 0 auto; background: #fafafa; border: 1px solid #e4e4e7; border-radius: 12px; overflow: hidden;
}
.humivalue__bm-scale-h { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #f0f0f0; pointer-events: none; z-index: 0; }
.humivalue__bm-scale-v { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed #f0f0f0; pointer-events: none; z-index: 0; }

.humivalue__bm-quadrant {
    position: absolute; width: 50%; height: 50%; display: flex;
    align-items: flex-start; justify-content: flex-start; padding: 18px;
}
.humivalue__bm-q--tr { align-items: flex-start; justify-content: flex-end; }
.humivalue__bm-q--br { align-items: flex-end; justify-content: flex-end; }
.humivalue__bm-q--bl { align-items: flex-end; justify-content: flex-start; }
.humivalue__bm-q--tl { top: 0; left: 0; background: rgba(0,204,94,0.03); }
.humivalue__bm-q--tr { top: 0; right: 0; background: rgba(245,158,11,0.03); }
.humivalue__bm-q--bl { bottom: 0; left: 0; background: rgba(161,161,170,0.03); }
.humivalue__bm-q--br { bottom: 0; right: 0; background: rgba(239,68,68,0.03); }
.humivalue__bm-q-label { font-size: 0.95rem; font-weight: 800; opacity: 0.35; pointer-events: none; }
.humivalue__bm-q-count { display: block; font-size: 0.52rem; font-weight: 600; opacity: 0.3; pointer-events: none; margin-top: 2px; }
.humivalue__bm-q-label br { display: none; }

.humivalue__bm-cross-h {
    position: absolute; left: 0; right: 0; height: 1px;
    background: repeating-linear-gradient(to right, #d4d4d8 0, #d4d4d8 6px, transparent 6px, transparent 12px);
    transition: top 0.35s ease;
}
.humivalue__bm-cross-v {
    position: absolute; top: 0; bottom: 0; width: 1px;
    background: repeating-linear-gradient(to bottom, #d4d4d8 0, #d4d4d8 6px, transparent 6px, transparent 12px);
    transition: left 0.35s ease;
}

.humivalue__bm-cross-label {
    position: absolute; font-size: 0.48rem; font-weight: 700;
    color: var(--hv-gray-500); pointer-events: none; z-index: 1;
    background: rgba(250,250,250,0.88); padding: 1px 5px; border-radius: 3px;
    white-space: nowrap;
}
/* 横线(cross-h)上: 低难度(左端) / 高难度(右端) — 踩线 */
.humivalue__bm-cross-h .hm-cross-left  { left: 4px;  bottom: 0; }
.humivalue__bm-cross-h .hm-cross-right { right: 4px; bottom: 0; }
/* 竖线(cross-v)上: 高利润(顶端) / 低利润(底端) — 踩线 */
.humivalue__bm-cross-v .hm-cross-top   { top: 4px;    left: 0; }
.humivalue__bm-cross-v .hm-cross-bot   { bottom: 4px; left: 0; }

.humivalue__bm-dot {
    position: absolute; width: 14px; height: 14px; border-radius: 50%;
    transform: translate(-50%, -50%); cursor: pointer; transition: all var(--hv-duration-md) var(--hv-ease-spring);
    border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    z-index: 2;
}
.humivalue__bm-dot:hover { transform: translate(-50%, -50%) scale(1.5); z-index: 10; }
.humivalue__bm-dot--active { transform: translate(-50%, -50%) scale(1.4) !important; z-index: 10; border-color: #00cc5e; box-shadow: 0 0 0 4px rgba(0,204,94,0.25); }

.humivalue__bm-tooltip {
    display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: rgba(24,24,27,0.94); color: #fff; padding: 6px 10px; border-radius: 6px;
    font-size: 0.6rem; line-height: 1.5; z-index: 20; pointer-events: none;
    text-align: left; min-width: 140px; max-width: 220px; white-space: normal;
}
.humivalue__bm-tooltip b { font-size: 0.72rem; display: block; margin-bottom: 2px; }
.humivalue__bm-tooltip em { color: #a1a1aa; font-style: normal; font-size: 0.55rem; display: block; margin-top: 2px; }
/* Smart positioning: prevent tooltip overflow at grid edges */
.humivalue__bm-tt--r-align { left: auto; right: 0; transform: none; }
.humivalue__bm-tt--l-align { left: 0; transform: none; }
.humivalue__bm-tt--below { bottom: auto; top: calc(100% + 8px); }
.humivalue__bm-dot:hover .humivalue__bm-tooltip { display: block; }
.humivalue__bm-hide-labels .humivalue__bm-tooltip { display: none !important; }

/* Always-on dot labels (no hover) */
.humivalue__bm-label {
    display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    font-size: 0.42rem; font-weight: 600; color: var(--hv-gray-800); white-space: nowrap;
    margin-top: 2px; pointer-events: none;
    background: rgba(255,255,255,0.82); padding: 1px 4px; border-radius: 3px;
    max-width: 90px; overflow: hidden; text-overflow: ellipsis;
}
.humivalue__bm-grid:not(.hv-bm-show-labels) .humivalue__bm-label { display: none; }

.humivalue__bm-radar { flex: 0 1 400px; min-width: 280px; text-align: center; padding: 24px; background: #fff; border: 1px solid #e4e4e7; border-radius: 12px; opacity: 0; transition: opacity 0.3s ease; }
.humivalue__bm-radar.hv-visible { opacity: 1; display: block !important; }
.humivalue__bm-radar svg { max-width: 100%; height: auto; }
.humivalue__bm-main { display: flex; align-items: flex-start; justify-content: center; gap: 24px; max-width: 1100px; margin: 0 auto 16px; flex-wrap: wrap; }
.humivalue__bm-radar-title { font-size: 1rem; font-weight: 800; margin-bottom: 12px; }
.humivalue__bm-radar-labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.humivalue__bm-radar-labels span { font-size: 0.6rem; color: #71717a; padding: 2px 8px; background: #f5f5f4; border-radius: 10px; }
.humivalue__bm-radar-desc { font-size: 0.8rem; color: #3f3f46; margin-top: 10px; line-height: 1.5; }

.humivalue__bm-compare { text-align: center; padding: 24px; background: #fff; border: 1px solid #e4e4e7; border-radius: 12px; }
.humivalue__compare-cols { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.humivalue__compare-col { flex: 1 1 240px; min-width: 200px; max-width: 300px; }
.humivalue__compare-col-title { font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; }
.humivalue__compare-dims { font-size: 0.58rem; color: #71717a; margin-top: 6px; }
.humivalue__compare-dims span { display: inline-block; margin: 0 3px 3px 0; padding: 1px 6px; background: #f5f5f4; border-radius: 8px; }

/* Model dots colors: engine-based */
.humivalue__bm-dot--hourly { background: #38bdf8; }
.humivalue__bm-dot--product { background: #00cc5e; }
.humivalue__bm-dot--subscription { background: #f59e0b; }
.humivalue__bm-dot--none { background: #a1a1aa; }

/* ================================================================
   Growth Chart
   ================================================================ */
.humivalue__gr-timeline { margin-bottom: 20px; background: #fafafa; border: 1px solid #e4e4e7; border-radius: 10px; padding: 8px; }
.humivalue__gr-milestones { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 16px; }
.humivalue__gr-card {
    background: #fff; border: 1px solid #e4e4e7; border-radius: 10px; padding: 14px;
}
.humivalue__gr-card--past { border-left: 3px solid #a1a1aa; }
.humivalue__gr-card--present { border-left: 3px solid #00cc5e; box-shadow: 0 0 0 1px rgba(0,204,94,0.2); }
.humivalue__gr-card--future { border-left: 3px solid #f59e0b; border-style: dashed; opacity: 0.85; }
.humivalue__gr-card { position: relative; }
.humivalue__gr-card-del {
    width: 32px; height: 32px; border: none; background: transparent; border-radius: 50%; cursor: pointer;
    font-size: 0.8rem; color: #ccc; transition: all 0.15s; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; position: absolute; top: 8px; right: 8px; line-height: 1;
}
.humivalue__gr-card-del:hover { color: #ef4444; background: #fef2f2; }
.humivalue__gr-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 6px; }
.humivalue__gr-card-date:focus { border-bottom-color: var(--hv-green) !important; }
.humivalue__gr-card-date { font-size: 0.8rem; font-weight: 700; color: #18181b; }
.humivalue__gr-card-type { font-size: 0.65rem; color: #a1a1aa; }
.humivalue__gr-mix { display: flex; gap: 6px; flex-wrap: wrap; }
.humivalue__gr-mix-bar {
    height: 6px; border-radius: 3px; transition: width 0.3s;
}
.humivalue__gr-import { text-align: center; margin-bottom: 12px; }

/* ================================================================
   Master Analysis
   ================================================================ */
.hv-ma-col:focus-visible { outline: 3px solid var(--hv-green); outline-offset: 2px; transform: scale(1.03) !important; }
.hv-ma-tag { min-height: 36px; }
.hv-ma-tag:hover { border-color: #18181b !important; color: #18181b !important; }
@media (max-width: 768px) { #hv-ma-columns { grid-template-columns: 1fr !important; } }
@media print { #hv-ma-tags, #hv-ma-inputs, .humivalue__growth-map, .humivalue__cta-wrap, .humivalue__journey-cta, .humivalue__im-add-btn, .hv-save-msg-master { display: none !important; } #hv-ma-comparison { display: block !important; } .hv-ma-col { page-break-inside: avoid; } }

/* ================================================================
   Workbench
   ================================================================ */
.humivalue__wb-cards {
    display: grid;     grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px;
}
.humivalue__wb-card {
    background: #fff; border: 1px solid #e4e4e7; border-radius: 10px;
    padding: 16px 12px; text-align: center; cursor: pointer;
    transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.humivalue__wb-card:hover { border-color: #a1a1aa; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.humivalue__wb-card--active { border-color: #00cc5e; background: #ecfdf5; box-shadow: 0 0 0 2px rgba(0,204,94,0.2); }
.humivalue__wb-card-icon { font-size: 1.4rem; line-height: 1; }
.humivalue__wb-card-title { font-size: 0.78rem; font-weight: 700; color: #18181b; }
.humivalue__wb-card-sub { font-size: 0.65rem; color: #a1a1aa; }

.humivalue__wb-scenarios { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.humivalue__wb-scenario-btn {
    padding: 5px 14px; border: 1px solid #e4e4e7; border-radius: 16px;
    background: #fff; font-size: 0.72rem; font-weight: 600; font-family: inherit;
    cursor: pointer; color: #71717a; transition: all 0.2s;
}
.humivalue__wb-scenario-btn--active { background: #18181b; color: #fff; border-color: #18181b; }
.humivalue__wb-engine {
    display: grid;
    grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.humivalue__wb-scenario-col {
    background: #fff; border: 1px solid #e4e4e7; border-radius: 10px; padding: 16px;
}
.humivalue__wb-scenario-label {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: #a1a1aa; margin-bottom: 12px; text-align: center;
}
.humivalue__wb-scenario-col .humivalue__field { margin-bottom: 10px; }
.humivalue__wb-scenario-col .humivalue__label { font-size: 0.7rem; }
.humivalue__wb-scenario-col .humivalue__input { width: 72px; font-size: 0.78rem; }

.humivalue__wb-result {
    margin-top: 12px; padding: 12px; background: #f4f4f5; border-radius: 8px; text-align: center;
}
.humivalue__wb-result-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #a1a1aa; display: block; }
.humivalue__wb-result-value { font-size: 1.3rem; font-weight: 800; color: #00cc5e; }

.humivalue__wb-constraint {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--hv-surface-dark); border: 1px solid var(--hv-border-dark); border-radius: 10px; padding: 16px 20px;
}
.humivalue__wb-constraint-icon { font-size: 1.3rem; }
.humivalue__wb-constraint-title { font-size: 0.8rem; color: var(--hv-l-color); display: block; }
.humivalue__wb-constraint-desc { font-size: 0.75rem; color: var(--hv-gray-300); }
.humivalue__wb-constraint-impact { font-size: 0.78rem; font-weight: 700; color: var(--hv-green); margin-left: auto; white-space: nowrap; }
.humivalue__wb-constraint-cta {
    font-size: 0.78rem; font-weight: 700; color: var(--hv-l-color); text-decoration: none; padding: 6px 12px;
    border: 1px solid var(--hv-l-color); border-radius: 6px; white-space: nowrap; transition: all 0.2s;
}
.humivalue__wb-constraint-cta:hover { background: var(--hv-l-color); color: var(--hv-dark); border-color: var(--hv-l-color); }

.humivalue__wb-pf-scenario-btn {
    padding: 2px 8px; border: 1px solid #e4e4e7; border-radius: 10px;
    background: #fff; font-size: 0.62rem; font-weight: 600; font-family: inherit;
    cursor: pointer; color: #a1a1aa; transition: all 0.15s;
    min-height: 32px; touch-action: manipulation;
}
.humivalue__wb-pf-scenario-btn:focus-visible,
.humivalue__wb-card:focus-visible,
.humivalue__wb-pf-scenario-btn:hover { border-color: #00cc5e; color: #00cc5e; }
.humivalue__wb-pf-scenario-btn--active { background: #00cc5e; color: #fff; border-color: #00cc5e; }

/* ── Portfolio cards centering ── */
.humivalue__wb-pf-card { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 480px) {
    .humivalue__wb-pf-summary > div[style] { flex-direction: column !important; gap: 2px !important; }
    .humivalue__wb-pf-summary { padding: 10px 12px !important; }
}

@media (max-width: 768px) {
    .humivalue__wb-cards { grid-template-columns: repeat(2, 1fr); }
    .humivalue__wb-engine { grid-template-columns: 1fr; }
    .humivalue__bm-grid { max-width: 100%; aspect-ratio: auto; min-height: 400px; flex: 1 1 100%; }
    .humivalue__bm-radar { flex: 1 1 100%; min-width: 0; }
}
@media (max-width: 480px) {
    .humivalue__wb-cards { grid-template-columns: 1fr 1fr; }
    .humivalue__wb-scenarios { flex-direction: column; }
    .humivalue__wb-scenario-btn { width: 100%; }
    .humivalue__wb-constraint { flex-direction: column; align-items: flex-start; }
    .humivalue__pl-panels,
    .humivalue__panels { grid-template-columns: 1fr !important; }
    .humivalue__pl-left, .humivalue__pl-right,
    .humivalue__panel { flex: 1 1 auto !important; max-width: none !important; width: 100% !important; }
    .humivalue__im-source { grid-template-columns: 1fr 1fr; gap: 6px; }
    .humivalue__im-source input { width: 100% !important; }
}

@media (max-width: 768px) {
    .humivalue__jr-grid { grid-template-columns: 1fr; }
    .humivalue__jr-summary { grid-template-columns: repeat(2,1fr) !important; }
}

/* ================================================================
   Journey Hub
   ================================================================ */
.humivalue__jr-score { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; background: #09090b; border-radius: 12px; padding: 24px 28px; margin-bottom: 16px; }
.humivalue__jr-score-main { text-align: center; min-width: 80px; }
.humivalue__jr-score-num { font-size: 3rem; font-weight: 900; color: #00cc5e; line-height: 1; display: block; }
.humivalue__jr-score-label { font-size: 0.7rem; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.06em; }
.humivalue__jr-score-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.humivalue__jr-bar { display: flex; align-items: center; gap: 8px; }
.humivalue__jr-bar-label { font-size: 0.65rem; color: #a1a1aa; min-width: 60px; text-align: right; }
.humivalue__jr-bar-track { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.humivalue__jr-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; background: #00cc5e; }
.humivalue__jr-bar-fill--low { background: #ef4444; }
.humivalue__jr-bar-fill--mid { background: #f59e0b; }
.humivalue__jr-bar-fill--high { background: #00cc5e; }
.humivalue__jr-bar-val { font-size: 0.65rem; font-weight: 700; color: #d4d4d8; min-width: 24px; }

.humivalue__jr-constraint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fef2f2; border: 1px solid #fca5a5; border-radius: 10px; padding: 14px 18px; }
.humivalue__jr-constraint-icon { font-size: 1.2rem; }
.humivalue__jr-constraint-impact { font-size: 0.78rem; font-weight: 700; color: #16a34a; margin-left: auto; white-space: nowrap; }

.humivalue__jr-timeline { background: #fafafa; border: 1px solid #e4e4e7; border-radius: 10px; padding: 12px; }
.humivalue__jr-log-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f4f4f5; }
.humivalue__jr-log-date { font-size: 0.7rem; font-weight: 700; color: #a1a1aa; min-width: 48px; }
.humivalue__jr-log-content { font-size: 0.78rem; color: #3f3f46; flex: 1; }
.humivalue__jr-log-score { font-size: 0.75rem; font-weight: 700; color: #00cc5e; white-space: nowrap; }
.humivalue__jr-tool-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-color: #d4d4d8 !important; }

@media (max-width: 480px) {
    .humivalue__jr-score { flex-direction: column; }
    .humivalue__jr-bar-label { min-width: 40px; }

    /* Business Map mobile polish */
    .humivalue__bm-grid { min-height: 320px; }
    .humivalue__bm-tooltip { max-width: 160px; font-size: 0.52rem; padding: 4px 8px; }
    .humivalue__bm-tooltip b { font-size: 0.62rem; }
    .humivalue__bm-cross-label { font-size: 0.42rem; padding: 1px 3px; }
    .humivalue__bm-label { font-size: 0.38rem; }
    .humivalue__bm-radar { padding: 16px; }
    .humivalue__bm-radar svg { max-width: 260px; }
    .humivalue__bm-radar-title { font-size: 0.9rem; }
    .humivalue__hero-title { font-size: 1.1rem; }
    .humivalue__hero-tagline { font-size: 0.78rem; }
    .humivalue__bm-tab { padding: 5px 10px; font-size: 0.68rem; min-height: 32px; }
    .humivalue__bm-q-label { font-size: 0.75rem; }
    details[open] summary { font-size: 0.65rem; }
    details[open] p { font-size: 0.62rem; }
    /* Growth Chart mobile */
    .humivalue__gr-milestones { grid-template-columns: 1fr; }
    .humivalue__gr-card { font-size: 0.75rem; }
}

/* ================================================================
   Reduced Motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .humivalue *, .humivalue *::before, .humivalue *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ================================================================
   Save Toast
   ================================================================ */
.hv-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 12px);
    padding: 10px 24px; border-radius: 8px; background: #09090b; color: #00cc5e;
    font-size: 0.75rem; font-weight: 600; z-index: 99999;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease, transform 0.3s ease;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.hv-toast--show {
    opacity: 1; transform: translate(-50%, 0);
}

/* ================================================================
   P2 — Orphan-class styling, touch targets & focus-visible (a11y)
   ================================================================ */

/* Income efficiency level buttons (previously inline-only). Base now lives
   here; the JS-set active state uses inline styles that override these. */
.humivalue__im-e-level {
    text-align: center; background: var(--hv-white);
    border: 2px solid var(--hv-gray-200); border-radius: var(--hv-radius-sm);
    padding: 14px 10px; cursor: pointer; font-family: inherit;
    transition: all 0.15s; min-height: 44px;
}
.humivalue__im-e-level:hover { border-color: var(--hv-e-color); background: var(--hv-amber-bg); }
.humivalue__im-e-level:focus-visible { outline: 3px solid var(--hv-green-dim); outline-offset: 2px; }

/* Constraint question cards + answer options (previously inline-only). */
.humivalue__ct-card { transition: border-color var(--hv-transition); }
.humivalue__ct-opt {
    padding: 12px 16px; border: 1px solid var(--hv-gray-200); border-radius: 16px;
    background: var(--hv-white); font-size: 0.72rem; font-weight: 600; cursor: pointer;
    font-family: inherit; color: var(--hv-gray-500); transition: all 0.15s; min-height: 44px;
}
.humivalue__ct-opt:hover { border-color: var(--hv-gray-400); color: var(--hv-gray-700); }
.humivalue__ct-opt:focus-visible { outline: 3px solid var(--hv-green-dim); outline-offset: 2px; }

/* Result reveal — fade up */
#hv-ct-result { opacity: 0; transition: opacity 0.35s ease, transform 0.35s ease; transform: translateY(8px); }
#hv-ct-result.hv-ct-visible { opacity: 1; transform: translateY(0); }

/* Constraint result panel reuse. */
.humivalue__wb-portfolio { transition: background var(--hv-transition), border-color var(--hv-transition); }

/* Business Map dots — expand the hit area to ~30px without changing the dot's
   visual size, and give keyboard focus a ring. */
.humivalue__bm-dot::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.humivalue__bm-dot:focus-visible { outline: 3px solid var(--hv-green); outline-offset: 2px; transform: translate(-50%, -50%) scale(1.3); z-index: 10; }

/* Tabs & small controls — comfortable height + visible keyboard focus. */
.humivalue__bm-tab { min-height: 36px; }
.humivalue__bm-tab:focus-visible,
.humivalue__wb-scenario-btn:focus-visible,
.humivalue__wb-card:focus-visible,
.humivalue__wb-pf-scenario-btn:focus-visible,
.humivalue__im-add-btn:focus-visible,
.humivalue__im-source-del:focus-visible { outline: 3px solid var(--hv-green-dim); outline-offset: 2px; }
.humivalue__gr-card-del:focus-visible { outline: 2px solid var(--hv-red); outline-offset: 1px; }
#hv-gr-route:focus-visible,
#hv-gr-apply:focus-visible,
.gr-weight-slider:focus-visible,
.gr-date-val:focus-visible { outline: 3px solid var(--hv-green); outline-offset: 2px; }

/* ================================================================
   Louvre · 跨页系统 (GrowthBar + WF 浮窗)
   一处定义, 九工具同享。以前在 core.js 里用内联 HTML 拼接。
   ================================================================ */

/* ── Growth Bar (首次诊断前隐藏; 有数据后出现在顶部) ── */
#hv-growth-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: var(--hv-gray-50);
    border-bottom: 1px solid var(--hv-gray-200);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--hv-gray-500);
}
#hv-growth-bar a { text-decoration: none; color: inherit; }
#hv-growth-bar .hv-gb-score-link { display: flex; align-items: center; gap: 8px; }
#hv-growth-bar .hv-gb-score {
    font-size: 0.85rem; font-weight: 900; color: var(--hv-f-color);   /* F · 酸柠绿 */
}
#hv-growth-bar .hv-gb-trend { font-size: 0.65rem; font-weight: 700; }
#hv-growth-bar .hv-gb-dots { display: flex; gap: 0; align-items: center; }
.hv-gb-dot {
    display: inline-block;
    width: 8px; height: 8px;
    padding: 5px;
    border-radius: 50%;
    text-decoration: none;
    box-sizing: content-box;
    transition: transform 0.15s;
}
.hv-gb-dot:hover { transform: scale(1.5); }

/* ── WF 浮动小窗 (右下角浮层) ── */
#hv-wf-widget {
    position: fixed; bottom: 16px; right: 16px; z-index: 9999;
    cursor: grab; touch-action: none; user-select: none;
}
#hv-wf-widget .hv-wf-inner {
    display: flex; flex-direction: column; gap: 6px;
    padding: 9px 13px; text-decoration: none;
}
#hv-wf-widget .hv-wf-dim-bar {
    width: 5px; border-radius: 2px; display: inline-block; min-height: 4px;
}

/* ================================================================
   Louvre · 5 组件库 (从设计哲学页提取)
   每个组件使用 --humi-dim-color CSS 变量传入维度颜色 (V/T/E/L/S)。
   模板: <div class="humi-card-var" style="--humi-dim-color:var(--hv-v-color)">
   ================================================================ */

/* ── 变量卡片 (Variable Card) ──
   border-top 三像素 = 维度的视觉签名。用于维度简介 / 工具入口。 */
.humi-card-var {
    background: var(--hv-white);
    border: 1px solid var(--hv-gray-200);
    border-top: 3px solid var(--humi-dim-color, var(--hv-v-color));
    border-radius: var(--hv-radius-sm);
    padding: 16px 14px;
    text-align: center;
    transition: box-shadow var(--hv-transition);
}
.humi-card-var:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.humi-card-var--dominant { transform: scale(1.03); box-shadow: 0 0 0 1px var(--humi-dim-color), 0 4px 16px rgba(0,0,0,0.08); transition: transform var(--hv-duration-md) var(--hv-ease-spring), box-shadow var(--hv-duration-md) var(--hv-ease-spring); }
.humi-card-var__symbol {
    font-size: 1.6rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1;
    color: var(--humi-dim-color, var(--hv-v-color));
}
.humi-card-var__name  { font-size: 0.72rem; font-weight: 700; color: var(--hv-gray-900); margin: 3px 0 1px; }
.humi-card-var__label { font-size: 0.58rem; color: var(--hv-gray-400); }
.humi-card-var__desc  { font-size: 0.62rem; color: var(--hv-gray-500); line-height: 1.4; margin-top: 4px; }

/* ── 深色深度卡 (Dark Depth Card) ──
   暗底 + 微光边框 + 圆润。用于 spotlight / 结果面板 / 色彩系统展示。 */
.humi-card-dark {
    background: var(--hv-surface-dark);
    border: 1px solid var(--hv-border-dark);
    border-radius: var(--hv-radius);
    padding: 16px 10px;
    text-align: center;
}
.humi-card-dark__swatch {
    width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 10px;
    background: var(--humi-dim-color, var(--hv-v-color));
}
.humi-card-dark__label {
    font-size: 1.2rem; font-weight: 900; letter-spacing: -0.02em;
    color: var(--humi-dim-color, var(--hv-v-color));
}
.humi-card-dark__name  { font-size: 0.68rem; font-weight: 700; color: var(--hv-gray-300); margin: 2px 0; }
.humi-card-dark__hex   { font-size: 0.58rem; color: var(--hv-gray-400); margin-bottom: 6px; }
.humi-card-dark__desc  { font-size: 0.6rem; color: var(--hv-gray-500); line-height: 1.5; margin-top: 4px; }

/* ── 模块链接卡 (Module Link) ──
   左边 3px 颜色条 + 变量字母 + 模块名。用于模块地图 / 工具入口。 */
.humi-link-module {
    background: var(--hv-white);
    border: 1px solid var(--hv-gray-200);
    border-left: 3px solid var(--humi-dim-color, var(--hv-v-color));
    border-radius: var(--hv-radius-sm);
    padding: 10px 12px;
    text-decoration: none;
    display: block;
    transition: box-shadow 0.15s;
}
.humi-link-module:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.humi-link-module__symbol {
    font-size: 1rem; font-weight: 900; letter-spacing: -0.02em;
    color: var(--humi-dim-color, var(--hv-v-color));
}
.humi-link-module__name  { font-size: 0.72rem; font-weight: 700; color: var(--hv-gray-900); }
.humi-link-module__meta  { font-size: 0.6rem; color: var(--hv-gray-400); }

/* ── 推导步骤 (Derivation Step) ──
   步进编号圆 + 公式 + 注释。用于自由方程推导 / 洞察链。 */
.humi-derive-step {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px; margin-bottom: 8px;
    background: var(--hv-white);
    border: 1px solid var(--hv-gray-200);
    border-radius: var(--hv-radius);
    transition: all 0.4s;
}
.humi-derive-step__num {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 800; flex-shrink: 0;
    background: var(--hv-gray-100); color: var(--hv-gray-400);
    transition: all 0.4s;
}
.humi-derive-step__num--active {
    background: var(--humi-dim-color, var(--hv-green)); color: var(--hv-white);
}
.humi-derive-step__body { flex: 1; }
.humi-derive-step__label {
    font-size: 0.7rem; letter-spacing: 0.06em; color: var(--hv-gray-400);
    text-transform: uppercase; margin: 0 0 6px;
}

/* ── 滑杆卡片 (Slider Card) ──
   维度色读数值 + 副标。用于带滑块的参数输入 (定价/工时/时薪)。 */
.humi-slider-card {
    background: var(--hv-white);
    border: 1px solid var(--hv-gray-200);
    border-radius: var(--hv-radius-sm);
    padding: 12px 16px;
}
.humi-slider-card__header {
    display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px;
}
.humi-slider-card__label { font-size: 0.78rem; font-weight: 700; color: var(--hv-gray-900); }
.humi-slider-card__value {
    font-size: 1rem; font-weight: 900;
    color: var(--humi-dim-color, var(--hv-v-color));
}
.humi-slider-card__sub { font-size: 0.6rem; color: var(--hv-gray-400); margin-top: 2px; }

/* ================================================================
   通用 UX 组件库 (跨 9 工具复用)
   ================================================================ */

/* ── 1. Stack Bar · 多色水平堆积条 ──
   各段按 pct 分配宽, 总宽 100%。hover 段放大 1.02x + tooltip。 */
.humi-stack-bar {
    display: flex; width: 100%; height: 8px; border-radius: 4px;
    overflow: hidden; background: var(--hv-gray-100);
}
.humi-stack-bar__seg {
    height: 100%; transition: width 0.4s var(--hv-ease-spring), transform 0.15s var(--hv-transition);
    position: relative;
}
.humi-stack-bar__seg:hover { transform: scaleY(1.5); z-index: 2; }

/* ── 2. 揭示动画 · fade-up utility ──
   对结果面板加这个类 + .humi-reveal--show 切换可见。 */
.humi-reveal {
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.humi-reveal--show { opacity: 1; transform: translateY(0); }

/* ── 3. 两栏布局 · 左输入右结果 ──
   sticky 右栏仅在 768px+ 生效; 480px 全纵排。 */
.humi-layout-panels {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px; align-items: start;
}
@media (max-width: 768px) {
    .humi-layout-panels { grid-template-columns: 1fr; }
}

/* ================================================================
   滑杆主题系统 (6 套 · 后台切换 · data-slider-theme)
   ================================================================ */

/* ── 1. Louvre (default, refined) ──
   Green fill track + white thumb with hover scale. Already the default;
   these rules only tighten edges that theme overrides would otherwise
   inherit from the built-in state. */
.humivalue[data-slider-theme="louvre"] .humivalue__slider,
.humivalue:not([data-slider-theme]) .humivalue__slider {
    height: 6px; border-radius: 3px;
    background: linear-gradient(to right, var(--humi-dim-color, var(--hv-green)) 0%, var(--humi-dim-color, var(--hv-green)) var(--slider-pct, 0%), var(--hv-gray-200) var(--slider-pct, 0%), var(--hv-gray-200) 100%);
}
.humivalue[data-slider-theme="louvre"] .humivalue__slider::-webkit-slider-thumb,
.humivalue:not([data-slider-theme]) .humivalue__slider::-webkit-slider-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--humi-dim-color, var(--hv-green)); border: 3px solid var(--hv-white);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: transform 0.15s;
}
.humivalue[data-slider-theme="louvre"] .humivalue__slider::-webkit-slider-thumb:hover,
.humivalue:not([data-slider-theme]) .humivalue__slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.humivalue[data-slider-theme="louvre"] .humivalue__slider::-moz-range-thumb,
.humivalue:not([data-slider-theme]) .humivalue__slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%; background: var(--hv-green); border: 3px solid var(--hv-white); box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ── 2. Minimal (Linear / Vercel) ──
   Hairline track, dot thumb, no fill show. */
.humivalue[data-slider-theme="minimal"] .humivalue__slider {
    height: 2px; border-radius: 0; background: var(--hv-gray-200);
}
.humivalue[data-slider-theme="minimal"] .humivalue__slider::-webkit-slider-thumb {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--hv-gray-900); border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.humivalue[data-slider-theme="minimal"] .humivalue__slider::-webkit-slider-thumb:hover { transform: scale(1.3); }
.humivalue[data-slider-theme="minimal"] .humivalue__slider::-moz-range-thumb {
    width: 12px; height: 12px; border-radius: 50%; background: var(--hv-gray-900); border: none;
}

/* ── 3. Neumorphic ──
   Inset track shadow + raised soft-white thumb. */
.humivalue[data-slider-theme="neumorphic"] .humivalue__slider {
    height: 8px; border-radius: 4px; background: #e0e5ec;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1), inset -1px -1px 3px rgba(255,255,255,0.7);
}
.humivalue[data-slider-theme="neumorphic"] .humivalue__slider::-webkit-slider-thumb {
    width: 28px; height: 28px; border-radius: 50%; background: #e0e5ec; border: none;
    box-shadow: 4px 4px 8px rgba(163,177,198,0.6), -4px -4px 8px #ffffff;
    transition: box-shadow 0.15s;
}
.humivalue[data-slider-theme="neumorphic"] .humivalue__slider::-webkit-slider-thumb:hover { box-shadow: 6px 6px 10px rgba(163,177,198,0.7), -6px -6px 10px #fff; }
.humivalue[data-slider-theme="neumorphic"] .humivalue__slider::-moz-range-thumb {
    width: 28px; height: 28px; border-radius: 50%; background: #e0e5ec; border: none;
    box-shadow: 4px 4px 8px rgba(163,177,198,0.6), -4px -4px 8px #fff;
}

/* ── 4. Brutalist ──
   Box-shadow offset + no radius. */
.humivalue[data-slider-theme="brutalist"] .humivalue__slider {
    height: 10px; border-radius: 0; background: #000; border: 2px solid #000;
}
.humivalue[data-slider-theme="brutalist"] .humivalue__slider::-webkit-slider-thumb {
    width: 20px; height: 20px; border-radius: 0; background: #fff; border: 3px solid #000;
    box-shadow: 4px 4px 0 #000; transition: box-shadow 0.1s;
}
.humivalue[data-slider-theme="brutalist"] .humivalue__slider::-webkit-slider-thumb:hover { box-shadow: 6px 6px 0 #000; }
.humivalue[data-slider-theme="brutalist"] .humivalue__slider::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 0; background: #fff; border: 3px solid #000;
}

/* ── 5. Aurora ──
   Gradient track (indigo → purple → pink) + glow thumb. */
.humivalue[data-slider-theme="aurora"] .humivalue__slider {
    height: 8px; border-radius: 4px;
    background: linear-gradient(to right, #6366f1, #a855f7 50%, #ec4899);
}
.humivalue[data-slider-theme="aurora"] .humivalue__slider::-webkit-slider-thumb {
    width: 22px; height: 22px; border-radius: 50%; background: #fff;
    border: 3px solid #a855f7; box-shadow: 0 0 12px rgba(168,85,247,0.4);
    transition: box-shadow 0.2s;
}
.humivalue[data-slider-theme="aurora"] .humivalue__slider::-webkit-slider-thumb:hover { box-shadow: 0 0 20px rgba(168,85,247,0.7); }
.humivalue[data-slider-theme="aurora"] .humivalue__slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #a855f7;
}

/* ── 6. Terminal ──
   Monospace feel — slim pill thumb, glowing green. */
.humivalue[data-slider-theme="terminal"] .humivalue__slider {
    height: 4px; border-radius: 0; background: rgba(34,197,94,0.12);
}
.humivalue[data-slider-theme="terminal"] .humivalue__slider::-webkit-slider-thumb {
    width: 8px; height: 20px; border-radius: 2px; background: #22c55e; border: none;
    box-shadow: 0 0 6px rgba(34,197,94,0.6); transition: box-shadow 0.15s;
}
.humivalue[data-slider-theme="terminal"] .humivalue__slider::-webkit-slider-thumb:hover { box-shadow: 0 0 12px rgba(34,197,94,0.9); }
.humivalue[data-slider-theme="terminal"] .humivalue__slider::-moz-range-thumb {
    width: 8px; height: 20px; border-radius: 2px; background: #22c55e; border: none;
}

/* ===== Creator Profile: Staggered Card Entrance ===== */
@keyframes hvCrFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
#hv-cr-questions .humi-card-var {
    opacity: 0;
    animation: hvCrFadeUp 0.4s ease-out forwards;
}
#hv-cr-questions .humi-card-var:nth-child(2)  { animation-delay: 0ms; }
#hv-cr-questions .humi-card-var:nth-child(3)  { animation-delay: 60ms; }
#hv-cr-questions .humi-card-var:nth-child(4)  { animation-delay: 120ms; }
#hv-cr-questions .humi-card-var:nth-child(5)  { animation-delay: 180ms; }
#hv-cr-questions .humi-card-var:nth-child(6)  { animation-delay: 240ms; }
#hv-cr-questions .humi-card-var:nth-child(7)  { animation-delay: 300ms; }

/* ===== Product Decision: Score option buttons ===== */
.hv-pd-opt:hover {
    transform: scale(1.12);
    border-color: currentColor !important;
    opacity: 0.85;
}
.hv-pd-opt {
    transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.hv-pd-idea-name::placeholder {
    color: var(--hv-gray-500);
}
.hv-pd-decision-card {
    transition: border-color 0.2s;
}
.hv-pd-runner-card:hover {
    opacity: 1 !important;
}
.hv-pd-validation {
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--hv-gray-800);
    border-radius: 8px;
}

/* ================================================================
   Print Styles — clean output for business-map etc.
   ================================================================ */
@media print {
    .humivalue__growth-nav-toggle,
    .humivalue__growth-map,
    .humivalue__bm-tabs,
    .humivalue__bm-radar,
    .humivalue__cta-share,
    #hv-bm-workbench-link,
    #hv-bm-share,
    .humivalue__journey-cta,
    details,
    #hv-bm-search-wrap,
    .humivalue__compare-wrap,
    .hv-toast { display: none !important; }
    .humivalue__bm-main { flex-direction: column !important; gap: 8px !important; }
    .humivalue__bm-grid { max-width: 100% !important; aspect-ratio: 1 !important; min-height: auto !important; page-break-inside: avoid; border: 2px solid #000 !important; }
    .humivalue__hero { padding: 12px 0 !important; }
    .humivalue__hero-title { font-size: 1.3rem !important; }
    .humivalue__section { border: none !important; padding: 8px !important; box-shadow: none !important; }
    .humivalue__bm-quadrant { background: none !important; }
    .humivalue__bm-q-label { opacity: 0.6 !important; }
    .humivalue__bm-dot { border: 2px solid #000 !important; }
    .humivalue__bm-cross-h, .humivalue__bm-cross-v { background: none !important; border: 1px dashed #999 !important; }
    .humivalue__bm-cross-label { background: #fff !important; color: #000 !important; }
    .humivalue__bm-tooltip, .humivalue__bm-label { color: #000 !important; }
    /* Journey Hub */
    #hv-jr-tools, #hv-jr-growth-step, .humivalue__im-add-btn, .humivalue__growth-map,
    .humivalue__growth-nav-wrap { display: none !important; }
    .humivalue__jr-score { page-break-inside: avoid; border: 1px solid #000 !important; }
    .humivalue__jr-summary { page-break-inside: avoid; }
    /* Creator Profile */
    #hv-cr-questions, #hv-cr-nav, .humivalue__growth-map { display: none !important; }
    #hv-cr-result { display: block !important; }
    #hv-cr-checklist, .humivalue__jr-score-bars { page-break-inside: avoid; }
    /* Growth Chart */
    .humivalue__gr-actions, .humivalue__gr-card-del, #hv-gr-apply,
    #hv-gr-share, .humivalue__cta-wrap, .humivalue__journey-cta,
    .humivalue__growth-map { display: none !important; }
    .humivalue__gr-timeline { page-break-inside: avoid; border: 1px solid #000 !important; }
    .humivalue__gr-card { page-break-inside: avoid; border-left-style: solid !important; opacity: 1 !important; }
    .humivalue__gr-card--future { border-style: solid !important; }
}
