:root {
    --hp-l1: #16a34a; --hp-l2: #65a30d; --hp-l3: #ca8a04; --hp-l4: #ea580c;
    --hp-l5: #dc2626; --hp-l6: #be185d;
    --hp-relaxed: #16a34a; --hp-steady: #2563eb; --hp-intensive: #ea580c; --hp-unrealistic: #dc2626;
    --hp-track: #e5e7eb; --hp-muted: #64748b; --hp-done: #ecfdf5;
}
[data-bs-theme="dark"] {
    --hp-track: #374151; --hp-muted: #9ca3af; --hp-done: #10291f;
}

.hp-hero { background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 55%, #db2777 100%); }

.hp-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.hp-chips .btn { min-width: 3.4rem; }
.hp-day { min-width: 2.6rem !important; }
.hp-l1 { --hp-c: var(--hp-l1); } .hp-l2 { --hp-c: var(--hp-l2); } .hp-l3 { --hp-c: var(--hp-l3); }
.hp-l4 { --hp-c: var(--hp-l4); } .hp-l5 { --hp-c: var(--hp-l5); } .hp-l6 { --hp-c: var(--hp-l6); }
.btn-check:checked + .hp-tgt { background: var(--hp-c); border-color: var(--hp-c); color: #fff; }

/* Live pace meter */
.hp-preview { border-top: 1px dashed var(--hp-track); padding-top: .9rem; }
.hp-meter { position: relative; padding-top: .6rem; }
.hp-meter-zones { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 999px; overflow: hidden; font-size: .7rem; font-weight: 600; color: #fff; text-align: center; }
.hp-zone { padding: .25rem 0; opacity: .55; transition: opacity .25s; }
.hp-zone-relaxed { background: var(--hp-relaxed); } .hp-zone-steady { background: var(--hp-steady); }
.hp-zone-intensive { background: var(--hp-intensive); } .hp-zone-unrealistic { background: var(--hp-unrealistic); }
.hp-preview[data-pace="relaxed"] .hp-zone-relaxed,
.hp-preview[data-pace="steady"] .hp-zone-steady,
.hp-preview[data-pace="intensive"] .hp-zone-intensive,
.hp-preview[data-pace="unrealistic"] .hp-zone-unrealistic { opacity: 1; }
.hp-needle {
    position: absolute; top: 0; left: 1%; width: 0; height: 0; transform: translateX(-50%);
    border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid currentColor;
    transition: left .45s cubic-bezier(.34, 1.56, .64, 1);
}
.hp-preview[data-pace="unrealistic"] .hp-needle { animation: hp-wobble .5s ease-in-out infinite alternate; }
@keyframes hp-wobble { from { margin-left: -2px; } to { margin-left: 2px; } }

/* Summary */
.hp-summary { border-top: 5px solid var(--hp-pace) !important; }
.hp-pace-relaxed { --hp-pace: var(--hp-relaxed); } .hp-pace-steady { --hp-pace: var(--hp-steady); }
.hp-pace-intensive { --hp-pace: var(--hp-intensive); } .hp-pace-unrealistic { --hp-pace: var(--hp-unrealistic); }
.hp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.hp-stat { text-align: center; padding: .5rem .25rem; border-radius: .5rem; background: rgba(127, 127, 127, .08); }
.hp-stat-val { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--hp-pace); font-variant-numeric: tabular-nums; }
.hp-stat-lbl { font-size: .75rem; color: var(--hp-muted); }
.hp-badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; background: var(--hp-pace); color: #fff; font-weight: 600; font-size: .8rem; margin-right: .35rem; }
@media (max-width: 575.98px) { .hp-stats { grid-template-columns: repeat(2, 1fr); } }

/* Weeks */
.hp-week-num {
    flex: 0 0 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--hp-track); font-weight: 700; transition: background .3s, color .3s;
}
.hp-week-review .hp-week-num { background: #7c3aed; color: #fff; }
.hp-pill { display: inline-block; font-size: .7rem; padding: .05rem .45rem; border-radius: 999px; background: var(--hp-c); color: #fff; margin-left: .25rem; vertical-align: middle; }
.hp-check input { width: 1.4rem; height: 1.4rem; cursor: pointer; }
.hp-week { transition: background-color .3s; }
.hp-week.is-done { background-color: var(--hp-done) !important; }
.hp-week.is-done .hp-week-num { background: var(--hp-relaxed); color: #fff; }
.hp-tasks { padding-left: 1.1rem; }
.hp-task-kind { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--hp-muted); }
.hp-words summary { cursor: pointer; }
.hp-word-table td, .hp-word-table th { font-size: .85rem; }
.hp-hanzi { font-size: 1.05rem !important; white-space: nowrap; }

.hp-plan.is-ready .hp-week { animation: hp-rise .45s ease-out both; animation-delay: calc(min(var(--hp-i), 12) * 45ms); }
@keyframes hp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hp-spark {
    position: fixed; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; z-index: 1080;
    background: hsl(var(--hue), 85%, 55%); animation: hp-spark .75s ease-out forwards;
}
@keyframes hp-spark { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .hp-plan.is-ready .hp-week, .hp-preview[data-pace="unrealistic"] .hp-needle { animation: none; }
    .hp-needle { transition: none; }
}

@media print {
    header, nav, footer, .footer, .d-print-none, .adsbygoogle, .ad-placeholder, .ad-container { display: none !important; }
    .hp-main { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
    .hp-week, .hp-summary { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid-page; animation: none !important; }
    .hp-words { break-inside: auto; }
    .hp-words summary { list-style: none; }
    .hp-stat-val { color: #000; }
    .hp-word-table a { color: inherit; text-decoration: none; }
}