/* NusaFinance UI Studio 1.2.0 – additive runtime layer */
:root{--nf-secondary:#2f6f91;--nf-page-bg:#fff;--nf-surface:#f6f9fb;--nf-max-width:1180px;--nf-narrow-width:820px;--nf-font-scale:1;--nf-button-radius:12px;--nf-visual-opacity:.82}
html{font-size:calc(16px * var(--nf-font-scale))}
body.nf-ui-enabled{background:var(--nf-page-bg);color:var(--nf-ink)}
body.nf-ui-enabled .site-container{width:min(var(--nf-max-width),calc(100% - 40px))}
body.nf-ui-enabled .narrow-container{width:min(var(--nf-narrow-width),calc(100% - 40px))}
body.nf-ui-enabled .button-primary-theme,body.nf-ui-enabled .button-secondary-theme,body.nf-ui-enabled .nf-button,body.nf-ui-enabled .search-submit{border-radius:var(--nf-button-radius)}
body.nf-ui-enabled .category-card,body.nf-ui-enabled .post-card,body.nf-ui-enabled .featured-card,body.nf-ui-enabled .aside-card,body.nf-ui-enabled .card-spec-panel,body.nf-ui-enabled .nf-product-card,body.nf-ui-enabled .nf-tool,body.nf-ui-enabled .nf-filter{border-radius:var(--nf-radius);box-shadow:var(--nf-shadow)}
body.nf-density-compact .post-card-content,body.nf-density-compact .featured-content,body.nf-density-compact .category-card,body.nf-density-compact .nf-product-body{padding:16px}
body.nf-header-solid .site-header{background:var(--nf-page-bg);backdrop-filter:none}
body.nf-header-minimal .site-header{position:relative;border-bottom:0;box-shadow:none;background:transparent;backdrop-filter:none}
body.nf-ui-enabled input:focus,body.nf-ui-enabled select:focus,body.nf-ui-enabled textarea:focus{outline:3px solid color-mix(in srgb,var(--nf-accent) 20%,transparent);outline-offset:1px;border-color:var(--nf-accent)}

/* Hero visual layout */
.nf-visual-hero-grid{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(240px,360px)!important;gap:44px!important;align-items:center!important;width:min(var(--nf-max-width),calc(100% - 40px))!important;max-width:none!important}
.nf-visual-copy{min-width:0}
.nf-visual-hero-grid[data-nf-hero-style="compact"]{grid-template-columns:minmax(0,1fr) 230px!important;gap:28px!important}
.nf-visual-hero-grid[data-nf-hero-style="background"]{display:block!important;overflow:hidden}
.nf-visual-hero-grid[data-nf-hero-style="background"]>.nf-visual-copy{position:relative;z-index:2;max-width:780px}
.nf-visual-hero-grid[data-nf-hero-style="background"]>.nf-finance-illustration{position:absolute;right:0;top:50%;width:390px;transform:translateY(-50%);opacity:.34;z-index:1;pointer-events:none}
.page-header .nf-visual-hero-grid,.archive-hero .nf-visual-hero-grid,.article-header .nf-visual-hero-grid{padding-top:56px;padding-bottom:56px}
.page-header,.archive-hero,.article-header{overflow:hidden}
.error-page .nf-visual-hero-grid{padding-top:55px;padding-bottom:70px}
.hero-search-card .nf-home-illustration{height:185px;margin:-18px -18px 14px;overflow:hidden;border-radius:calc(var(--nf-radius) - 2px);background:linear-gradient(135deg,color-mix(in srgb,var(--nf-primary) 8%,#fff),color-mix(in srgb,var(--nf-accent) 12%,#fff))}
.card-visual{position:relative;overflow:hidden}
.nf-card-overlay-illustration{position:absolute!important;right:-32px!important;bottom:-42px!important;width:190px!important;height:180px!important;opacity:.82;pointer-events:none}

/* Illustration system */
.nf-finance-illustration{position:relative;display:grid;place-items:center;isolation:isolate;opacity:var(--nf-visual-opacity)}
.nf-finance-illustration svg{position:relative;z-index:2;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 34px rgba(15,43,67,.14))}
.nf-finance-illustration-hero{width:min(100%,360px);height:300px;justify-self:end}
.nf-finance-illustration-home{width:100%;height:100%}
.nf-finance-illustration-card{width:100%;height:100%}
.nf-finance-illustration-mini{width:78px;height:70px;flex:0 0 78px}
.nf-finance-illustration-large{width:min(100%,460px);height:360px;margin-inline:auto}
.nf-illustration-glow{position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--nf-accent) 22%,transparent),transparent 68%);filter:blur(14px);z-index:0}
.nf-fill-bg{fill:color-mix(in srgb,var(--nf-surface) 86%,var(--nf-accent) 14%)}
.nf-fill-surface{fill:#fff;stroke:var(--nf-line);stroke-width:2}
.nf-fill-primary{fill:var(--nf-primary)}.nf-fill-primary-soft{fill:color-mix(in srgb,var(--nf-primary) 19%,#fff)}
.nf-fill-secondary{fill:var(--nf-secondary)}.nf-fill-secondary-soft{fill:color-mix(in srgb,var(--nf-secondary) 20%,#fff)}
.nf-fill-accent{fill:var(--nf-accent)}.nf-fill-accent-soft{fill:color-mix(in srgb,var(--nf-accent) 22%,#fff)}
.nf-fill-coin{fill:#f2c96d}.nf-fill-dark{fill:color-mix(in srgb,var(--nf-primary) 70%,#081b2b)}.nf-fill-soft{fill:var(--nf-line)}
.nf-fill-white-soft{fill:rgba(255,255,255,.75)}
.nf-stroke-line{fill:none;stroke:var(--nf-line);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.nf-stroke-primary{fill:none;stroke:var(--nf-primary);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.nf-stroke-primary-wide{fill:none;stroke:var(--nf-primary);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.nf-stroke-accent-wide{fill:none;stroke:var(--nf-accent);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.nf-stroke-coin-wide{fill:none;stroke:#f2c96d;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.nf-stroke-white{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.nf-stroke-white-wide{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.nf-stroke-white-soft{fill:none;stroke:rgba(255,255,255,.65);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.nf-illustration-line .nf-fill-primary,.nf-illustration-line .nf-fill-accent,.nf-illustration-line .nf-fill-secondary{fill:color-mix(in srgb,currentColor 4%,#fff);stroke:currentColor;stroke-width:3}
.nf-illustration-bold .nf-finance-illustration svg{filter:drop-shadow(0 22px 28px rgba(15,43,67,.22));transform:scale(1.04)}

/* Motion */
.nf-animation-subtle .nf-svg-float,.nf-page-animation-subtle .nf-svg-float{animation:nfFloat 5.5s ease-in-out infinite}
.nf-animation-subtle .nf-svg-orbit,.nf-page-animation-subtle .nf-svg-orbit{animation:nfOrbit 7s ease-in-out infinite;transform-origin:165px 150px}
.nf-animation-subtle .nf-svg-pulse,.nf-page-animation-subtle .nf-svg-pulse{animation:nfPulse 3.2s ease-in-out infinite;transform-origin:center}
.nf-animation-subtle .nf-svg-rise,.nf-page-animation-subtle .nf-svg-rise{animation:nfRise 4.8s ease-in-out infinite}
.nf-animation-active .nf-svg-float,.nf-page-animation-active .nf-svg-float{animation:nfFloat 3.5s ease-in-out infinite}
.nf-animation-active .nf-svg-orbit,.nf-page-animation-active .nf-svg-orbit{animation:nfOrbit 4.5s ease-in-out infinite;transform-origin:165px 150px}
.nf-animation-active .nf-svg-pulse,.nf-page-animation-active .nf-svg-pulse{animation:nfPulse 2s ease-in-out infinite;transform-origin:center}
.nf-animation-active .nf-svg-rise,.nf-page-animation-active .nf-svg-rise{animation:nfRise 3s ease-in-out infinite}
@keyframes nfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes nfOrbit{0%,100%{transform:rotate(-2deg) translate(0,0)}50%{transform:rotate(4deg) translate(3px,-6px)}}
@keyframes nfPulse{0%,100%{transform:scale(1);opacity:.84}50%{transform:scale(1.12);opacity:1}}
@keyframes nfRise{0%,100%{transform:translateY(5px)}50%{transform:translateY(-8px)}}

/* Tool polish */
.nf-tool-heading{align-items:center!important}
.nf-tool-mini-visual{margin-left:auto;margin-right:4px}
.nf-tool-assumption{margin:-4px 0 22px;padding:12px 15px;border:1px solid color-mix(in srgb,var(--nf-accent) 25%,var(--nf-line));border-radius:12px;background:color-mix(in srgb,var(--nf-accent) 6%,#fff);color:var(--nf-muted);font-size:.88rem;line-height:1.55}
.nf-tool-assumption strong{color:var(--nf-primary)}
.nf-input-preview{display:block;min-height:18px;margin-top:5px;color:var(--nf-accent);font-size:.78rem;font-weight:700}
.nf-button-ghost{background:transparent!important;color:var(--nf-primary)!important;border:1px dashed color-mix(in srgb,var(--nf-primary) 35%,var(--nf-line))!important}
.nf-button-ghost:hover{background:var(--nf-surface)!important}
.nf-result-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.nf-result-footer{flex-wrap:wrap}.nf-result-footer small{flex:1 1 440px}.nf-result-footer .nf-copy-button{margin-left:auto}
.nf-health-score-wrap{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;margin-bottom:20px;padding:20px;border-radius:16px;background:#fff;border:1px solid var(--nf-line)}
.nf-health-score{--nf-score:0;display:grid;place-items:center;width:116px;height:116px;border-radius:50%;background:conic-gradient(var(--nf-accent) calc(var(--nf-score) * 1%),var(--nf-line) 0);position:relative}
.nf-health-score:before{content:"";position:absolute;inset:10px;border-radius:50%;background:#fff}
.nf-health-score strong,.nf-health-score span{position:relative;z-index:1}.nf-health-score strong{align-self:end;font-size:2rem;line-height:1;color:var(--nf-primary)}.nf-health-score span{align-self:start;color:var(--nf-muted);font-size:.75rem}
.nf-health-score.is-danger{background:conic-gradient(#c84848 calc(var(--nf-score) * 1%),var(--nf-line) 0)}.nf-health-score.is-warning{background:conic-gradient(#d59b29 calc(var(--nf-score) * 1%),var(--nf-line) 0)}.nf-health-score.is-good{background:conic-gradient(var(--nf-accent) calc(var(--nf-score) * 1%),var(--nf-line) 0)}
.nf-health-score-wrap h3{margin:3px 0 6px;font-size:1.7rem;color:var(--nf-primary)}.nf-health-score-wrap p{margin:0;color:var(--nf-muted)}
.nf-score-breakdown{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}.nf-score-breakdown>div{padding:12px;border:1px solid var(--nf-line);border-radius:12px;background:#fff}.nf-score-breakdown span{display:flex;justify-content:space-between;gap:8px;color:var(--nf-muted);font-size:.8rem}.nf-score-breakdown b{color:var(--nf-primary)}.nf-score-breakdown i{display:block;height:7px;margin-top:9px;border-radius:99px;background:var(--nf-line);overflow:hidden}.nf-score-breakdown em{display:block;height:100%;background:var(--nf-accent);border-radius:inherit}

/* Reveal polish, disabled for reduced motion */
.nf-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}.nf-reveal.is-visible{opacity:1;transform:none}

@media(max-width:1100px){.nf-result-grid-5{grid-template-columns:repeat(3,minmax(0,1fr))!important}.nf-score-breakdown{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.nf-visual-hero-grid{grid-template-columns:minmax(0,1fr) 250px!important;gap:24px!important}.nf-finance-illustration-hero{height:230px}.nf-tool-mini-visual{display:none}}
@media(max-width:720px){body.nf-ui-enabled .site-container,body.nf-ui-enabled .narrow-container,.nf-visual-hero-grid{width:min(100% - 28px,var(--nf-max-width))!important}.nf-visual-hero-grid{grid-template-columns:1fr!important}.nf-finance-illustration-hero{width:220px;height:180px;justify-self:center;order:-1}.nf-visual-hero-grid[data-nf-hero-style="background"]>.nf-finance-illustration{width:260px;right:-60px;opacity:.2}.page-header .nf-visual-hero-grid,.archive-hero .nf-visual-hero-grid,.article-header .nf-visual-hero-grid{padding-top:34px;padding-bottom:38px}.hero-search-card .nf-home-illustration{height:145px}.nf-result-grid-5,.nf-score-breakdown{grid-template-columns:1fr!important}.nf-health-score-wrap{grid-template-columns:1fr;text-align:center}.nf-health-score{margin-inline:auto}.nf-result-footer .nf-copy-button{width:100%;margin:0}.nf-card-overlay-illustration{display:none}}
@media(prefers-reduced-motion:reduce){.nf-svg-float,.nf-svg-orbit,.nf-svg-pulse,.nf-svg-rise,.nf-reveal{animation:none!important;transition:none!important;transform:none!important;opacity:1!important}}
@media print{body *{visibility:hidden!important}.nf-print-target,.nf-print-target *{visibility:visible!important}.nf-print-target{position:absolute!important;left:0!important;top:0!important;width:100%!important;margin:0!important;box-shadow:none!important}.nf-print-target .nf-tool-actions,.nf-print-target .nf-copy-button,.nf-print-target .nf-tool-mini-visual{display:none!important}}
