:root{--color-bg:#0f172a;--color-surface:#1e293b;--color-surface-2:#273449;--color-emerald:#10b981;--color-gold:#f59e0b;--color-cyan:#06b6d4;--color-rose:#fb7185;--color-text:#ffffff;--color-text-muted:#cbd5e1;--color-border:#334155;--color-backdrop:rgba(0,0,0,0.6)}*{box-sizing:border-box}body,html{margin:0;padding:0;background:radial-gradient(circle at top left,#152447 0,var(--color-bg) 45%);color:var(--color-text);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.container{max-width:1100px;margin:0 auto;padding:28px 16px 60px}.page-shell{min-height:100vh}.hero{margin-bottom:24px}.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.4);border-radius:999px;padding:6px 12px;font-size:.85rem;color:var(--color-emerald)}h1{margin:12px 0 8px;font-size:clamp(1.8rem,3vw,2.8rem)}h2,h3{margin:0 0 14px;display:flex;align-items:center;gap:8px}.muted{color:var(--color-text-muted)}.grid{display:grid;grid-gap:16px;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:linear-gradient(180deg,var(--color-surface) 0,var(--color-surface-2) 100%);border:1px solid var(--color-border);border-radius:16px;padding:18px;box-shadow:0 12px 30px rgba(0,0,0,.25)}.input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px}label{display:flex;flex-direction:column;gap:8px;font-size:.9rem}label span{display:inline-flex;gap:6px;align-items:center;color:var(--color-text-muted)}input,select{width:100%;border-radius:10px;border:1px solid var(--color-border);background:#0d1a31;color:var(--color-text);padding:10px 12px;outline:none}input:focus,select:focus{border-color:var(--color-emerald);box-shadow:0 0 0 3px rgba(16,185,129,.2)}.cta{margin-top:16px;width:100%;border:none;border-radius:12px;background:linear-gradient(90deg,var(--color-emerald),var(--color-gold));color:#061323;font-weight:700;padding:12px 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}.result-big{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.result-big strong{font-size:clamp(1.6rem,4vw,2.3rem);color:var(--color-emerald)}.breakdown{list-style:none;padding:0;margin:0 0 16px}.breakdown li{display:flex;justify-content:space-between;border-bottom:1px solid var(--color-border);padding:10px 0}.donut{width:180px;height:180px;margin:10px auto 0;display:block}.donut-track{stroke:#0e182d}.donut-segment,.donut-track{fill:transparent;stroke-width:3}.donut-segment{stroke-linecap:butt;transition:stroke-dasharray .6s ease,stroke-dashoffset .6s ease}.legend{margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:8px;gap:8px}.legend-item{display:flex;align-items:center;gap:8px}.legend-item span{width:10px;height:10px;border-radius:999px}.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:12px;gap:12px}.summary-grid article{background:#12223f;border:1px solid var(--color-border);border-radius:12px;padding:12px}.summary-grid p{margin:0 0 8px;color:var(--color-text-muted);font-size:.85rem}.summary-grid strong{font-size:1.15rem}.details summary{cursor:pointer;font-weight:700;color:var(--color-gold)}.details p{color:var(--color-text-muted);line-height:1.6}.ad-placeholder{border:1px dashed var(--color-border);border-radius:12px;background:rgba(255,255,255,.02);padding:16px;margin:16px 0}.ad-placeholder,.footer{color:var(--color-text-muted);text-align:center}.footer{margin-top:26px}.modal-overlay{position:fixed;inset:0;background:var(--color-backdrop);z-index:1000;display:grid;place-items:center;padding:16px}.modal{width:min(460px,100%);background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:18px;position:relative}.icon-close{position:absolute;top:8px;right:8px;border:none;background:transparent;color:var(--color-text);cursor:pointer}.page-blur{filter:blur(4px);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}@keyframes fade-in-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in-up{animation:fade-in-up .45s ease-out}@media (max-width:960px){.grid{grid-template-columns:1fr}.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.input-grid,.legend,.summary-grid{grid-template-columns:1fr}}