.hpn-app,
.hpn-app * { box-sizing: border-box; }
.hpn-app {
    --hpn-bg:#0a0c16; --hpn-panel:#121628; --hpn-surface:#181d36; --hpn-surface-2:#20294d;
    --hpn-border:#262f52; --hpn-border-bright:#38436e; --hpn-text:#e6ebfa; --hpn-muted:#9ba6c8;
    --hpn-gold:#f1c40f; --hpn-cyan:#00d2d3; --hpn-green:#38d996; --hpn-orange:#ffad42; --hpn-red:#ff626f;
    width:100%; color:var(--hpn-text); background:var(--hpn-bg); font-family:inherit; line-height:1.65;
}
.hpn-shell { max-width:1180px; margin:0 auto; padding:42px 24px; }
.hpn-heading { margin-bottom:24px; }
.hpn-eyebrow,.hpn-kicker { display:block; color:var(--hpn-cyan); font-size:13px; font-weight:800; letter-spacing:.04em; }
.hpn-heading h2 { margin:6px 0 8px; color:var(--hpn-text); font-size:clamp(28px,4vw,44px); line-height:1.2; }
.hpn-heading p { margin:0; color:var(--hpn-muted); }
.hpn-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:24px; background:var(--hpn-panel); border:1px solid var(--hpn-border); border-radius:18px; box-shadow:0 18px 42px rgba(0,0,0,.22); }
.hpn-field { min-width:0; }
.hpn-field--wide { grid-column:1/-1; }
.hpn-field label { display:block; margin:0 0 7px; color:var(--hpn-text); font-size:14px; font-weight:700; }
.hpn-field input,.hpn-field select { width:100%; min-height:50px; padding:11px 13px; color:var(--hpn-text); background:#101426; border:1px solid var(--hpn-border-bright); border-radius:10px; font:inherit; outline:none; }
.hpn-field input:focus,.hpn-field select:focus { border-color:var(--hpn-cyan); box-shadow:0 0 0 3px rgba(0,210,211,.12); }
.hpn-field small { display:block; margin-top:6px; color:var(--hpn-muted); font-size:12px; }
.hpn-field input[type="date"],.hpn-field input[type="time"] { color-scheme:dark; }
.hpn-field input[type="date"]::-webkit-calendar-picker-indicator,.hpn-field input[type="time"]::-webkit-calendar-picker-indicator { width:28px; height:28px; box-sizing:border-box; padding:5px; opacity:1; cursor:pointer; background-color:var(--hpn-gold); background-repeat:no-repeat; background-position:center; background-size:18px 18px; border-radius:7px; }
.hpn-field input[type="date"]::-webkit-calendar-picker-indicator { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101426' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E"); }
.hpn-field input[type="time"]::-webkit-calendar-picker-indicator { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101426' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.hpn-field input[type="date"]::-webkit-calendar-picker-indicator:hover,.hpn-field input[type="time"]::-webkit-calendar-picker-indicator:hover { background-color:#ffe16a; }
.horo-birth-widget { display:grid; grid-template-columns:.7fr 1.15fr 1fr .78fr; gap:7px; align-items:end; }
.horo-birth-era-row,.horo-birth-parts { display:contents; }
.hpn-field .horo-birth-era { order:4; width:100%; min-width:0; min-height:50px; padding:9px 7px; font-size:12px; font-weight:800; }
.hpn-field .horo-birth-parts select { min-width:0; min-height:50px; padding:9px 8px; }
.horo-birth-hint { grid-column:1/-1; order:5; margin-top:0 !important; }
.hpn-custom-location { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:16px; border:1px dashed var(--hpn-border-bright); border-radius:12px; }
.hpn-custom-location[hidden] { display:none; }
.hpn-submit { grid-column:1/-1; display:flex; justify-content:center; align-items:center; gap:12px; width:100%; min-height:54px; margin-top:4px; padding:12px 18px; color:#111; background:linear-gradient(135deg,#f1c40f,#ffb52c); border:0; border-radius:11px; font:inherit; font-weight:900; cursor:pointer; box-shadow:0 10px 24px rgba(241,196,15,.18); }
.hpn-submit:hover { transform:translateY(-1px); filter:brightness(1.04); }
.hpn-submit:disabled { opacity:.6; cursor:wait; transform:none; }
.hpn-form-error { grid-column:1/-1; margin:0; padding:10px 12px; color:#ffd7da; background:rgba(255,98,111,.12); border:1px solid rgba(255,98,111,.35); border-radius:8px; }
.hpn-loading { display:flex; align-items:center; justify-content:center; gap:12px; min-height:120px; color:var(--hpn-muted); }
.hpn-loading[hidden] { display:none; }
.hpn-spinner { width:24px; height:24px; border:3px solid var(--hpn-border-bright); border-top-color:var(--hpn-cyan); border-radius:50%; animation:hpn-spin .8s linear infinite; }
@keyframes hpn-spin { to { transform:rotate(360deg); } }
.hpn-results { scroll-margin-top:28px; }
.hpn-report { display:grid; gap:20px; margin-top:28px; }
.hpn-result-section { position:relative; display:grid; grid-template-columns:50px minmax(0,1fr); gap:16px; padding:24px; background:var(--hpn-panel); border:1px solid var(--hpn-border); border-radius:18px; }
.hpn-result-section--quality { border-top-color:rgba(0,210,211,.65); }
.hpn-result-section--personal { border-top-color:rgba(241,196,15,.7); }
.hpn-section-number { color:var(--hpn-cyan); font-size:14px; font-weight:900; }
.hpn-result-main { min-width:0; }
.hpn-result-header { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.hpn-result-main h3 { margin:4px 0 10px; color:var(--hpn-text); font-size:clamp(22px,3vw,31px); line-height:1.25; }
.hpn-lead { margin:10px 0 18px; color:#ccd4ed; }
.hpn-score-ring { --ring-color:var(--hpn-cyan); flex:0 0 auto; display:grid; place-items:center; width:118px; height:118px; padding:9px; border-radius:50%; background:conic-gradient(var(--ring-color) calc(var(--hpn-score)*1%),var(--hpn-border) 0); }
.hpn-score-ring>div { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; background:var(--hpn-panel); border-radius:50%; }
.hpn-score-ring strong { color:var(--hpn-text); font-size:25px; line-height:1; }
.hpn-score-ring span { margin-top:6px; color:var(--hpn-muted); font-size:10px; }
.hpn-score-ring--excellent { --ring-color:var(--hpn-green); }
.hpn-score-ring--good { --ring-color:var(--hpn-cyan); }
.hpn-score-ring--fair { --ring-color:var(--hpn-orange); }
.hpn-score-ring--caution { --ring-color:var(--hpn-red); }
.hpn-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.hpn-metric { padding:12px; background:var(--hpn-surface); border:1px solid var(--hpn-border); border-radius:10px; }
.hpn-metric span { display:block; color:var(--hpn-muted); font-size:12px; }
.hpn-metric strong { color:var(--hpn-text); font-size:18px; }
.hpn-pair-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.hpn-pair-summary>div { padding:13px; background:#101426; border:1px solid var(--hpn-border); border-radius:10px; }
.hpn-pair-summary span { display:block; color:var(--hpn-muted); font-size:12px; }
.hpn-pair-summary strong { display:block; margin-top:3px; color:var(--hpn-text); font-size:13px; }
.hpn-pair-details { margin-top:14px; }
.hpn-pair-details summary { color:var(--hpn-gold); font-weight:700; cursor:pointer; }
.hpn-pair-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.hpn-pair { padding:14px; background:var(--hpn-surface); border:1px solid var(--hpn-border); border-left:3px solid var(--hpn-muted); border-radius:10px; }
.hpn-pair--good { border-left-color:var(--hpn-green); }
.hpn-pair--caution { border-left-color:var(--hpn-red); }
.hpn-pair>strong { color:var(--hpn-gold); font-size:20px; }
.hpn-pair>span { margin-left:8px; color:var(--hpn-muted); font-size:11px; }
.hpn-pair p { margin:6px 0 0; color:#c8d0e8; font-size:13px; }
.hpn-dimension-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.hpn-dimension { padding:16px; background:var(--hpn-surface); border:1px solid var(--hpn-border); border-radius:12px; }
.hpn-dimension:last-child { grid-column:1/-1; }
.hpn-dimension-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hpn-dimension-head span { font-weight:800; }
.hpn-dimension-head strong { color:var(--hpn-cyan); font-size:19px; }
.hpn-bar { height:6px; margin:10px 0; overflow:hidden; background:var(--hpn-border); border-radius:999px; }
.hpn-bar i { display:block; height:100%; background:var(--hpn-cyan); border-radius:inherit; }
.hpn-dimension--excellent .hpn-bar i { background:var(--hpn-green); }
.hpn-dimension--fair .hpn-bar i { background:var(--hpn-orange); }
.hpn-dimension--caution .hpn-bar i { background:var(--hpn-red); }
.hpn-dimension p { margin:0; color:var(--hpn-muted); font-size:13px; }
.hpn-birth-meta { display:inline-block; margin:0 0 8px; padding:6px 10px; color:var(--hpn-gold); background:rgba(241,196,15,.08); border:1px solid rgba(241,196,15,.24); border-radius:999px; font-size:12px; }
.hpn-number-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.hpn-number-group { padding:14px; background:var(--hpn-surface); border:1px solid var(--hpn-border); border-radius:10px; }
.hpn-number-group span { display:block; color:var(--hpn-muted); font-size:12px; }
.hpn-number-group strong { display:block; margin-top:4px; color:var(--hpn-text); font-size:18px; }
.hpn-number-group--good strong { color:var(--hpn-green); }
.hpn-number-group--caution strong { color:var(--hpn-red); }
.hpn-summary { padding:24px; background:linear-gradient(135deg,var(--hpn-surface),#202337); border:1px solid rgba(241,196,15,.36); border-radius:18px; }
.hpn-summary>span { color:var(--hpn-gold); font-size:13px; font-weight:900; }
.hpn-summary h3 { margin:4px 0 8px; color:var(--hpn-text); font-size:clamp(22px,3vw,30px); }
.hpn-summary p { margin:0; color:#ccd4ed; }
.hpn-disclaimer { margin:18px 4px 0; color:var(--hpn-muted); font-size:11px; text-align:center; }
@media (max-width:760px) {
    .hpn-shell { padding:28px 14px; }
    .hpn-form { grid-template-columns:1fr; padding:18px; }
    .hpn-field--wide,.hpn-submit,.hpn-form-error { grid-column:auto; }
    .hpn-custom-location { grid-template-columns:1fr; }
    .hpn-result-section { grid-template-columns:1fr; padding:18px; }
    .hpn-section-number { margin-bottom:-4px; }
    .hpn-result-header { align-items:flex-start; }
    .hpn-score-ring { width:94px; height:94px; }
    .hpn-score-ring strong { font-size:21px; }
    .hpn-metric-grid,.hpn-pair-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .hpn-pair-summary>div:last-child { grid-column:1/-1; }
    .hpn-pair-grid,.hpn-dimension-grid,.hpn-number-groups { grid-template-columns:1fr; }
    .hpn-dimension:last-child { grid-column:auto; }
}
@media (max-width:420px) {
    .hpn-result-header { display:block; }
    .hpn-score-ring { margin:14px auto 2px; }
    .hpn-metric-grid,.hpn-pair-summary { grid-template-columns:1fr; }
    .hpn-pair-summary>div:last-child { grid-column:auto; }
}