:root{
      --bg:#0b1020;          /* tamsus fonas */
      --card:#11182b;        /* kortelių fonas */
      --muted:#96a0b8;       /* antraštėms, label'iams */
      --text:#eaf0ff;        /* pagrindinis tekstas */
      --accent:#4f8cff;      /* mygtukai, interaktyvūs akcentai */
      --accent-2:#00e1a1;    /* teigiami rezultatai */
      --danger:#ff6b6b;      /* neigiamas cashflow */
      --radius:16px;
      --shadow:0 6px 22px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.25);
    }
    html,body{height:100%}
    body{
      margin:0; background:radial-gradient(1200px 800px at 80% -20%, #1a2544 0%, #0b1020 45%), var(--bg);
      color:var(--text); font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
      display:flex; align-items:flex-start; justify-content:center; padding:40px 16px;
    }
    .wrap{width:min(1200px,100%);}
    header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px}
    .brand{display:flex; align-items:center; gap:12px}
    .brand .logo{width:36px;height:36px;border-radius:10px; background:linear-gradient(135deg,var(--accent),#7aa7ff); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
    h1{margin:0; font-weight:700; letter-spacing:.3px;}

    .grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:24px}
    @media (max-width: 960px){ .grid{grid-template-columns:1fr} }

    .card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); box-shadow:var(--shadow)}
    .card .inner{padding:20px}

    .section-title{margin:8px 0 14px; color:var(--muted); font-weight:600; letter-spacing:.3px; text-transform:uppercase; font-size:12px}

    #calc-form{display:grid; gap:18px}
    .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
    @media (max-width:700px){ .row{grid-template-columns:1fr} }

    label{display:block; color:var(--muted); font-size:13px; margin:0 0 6px}

    .field{position:relative}
    .field input{width:100%; background:#0e1527; color:var(--text); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px 12px 40px; outline:none; transition:border-color .15s ease, box-shadow .15s ease}
    .field input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,140,255,.18)}
    .prefix{position:absolute; left:10px; top:50%; translate:0 -50%; color:#b7c3de; font-size:13px; opacity:.9}
    .suffix{position:absolute; right:10px; top:50%; translate:0 -50%; color:#b7c3de; font-size:13px; opacity:.9}

    .help{color:#9fb0d3; font-size:12px; margin-top:6px}

    .actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:2px}
    button{appearance:none; border:none; cursor:pointer; padding:12px 16px; border-radius:12px; font-weight:600}
    .btn-primary{background:linear-gradient(180deg, var(--accent), #3e74de); color:white; box-shadow:0 6px 18px rgba(79,140,255,.35);}
    .btn-ghost{background:transparent; color:var(--muted)}

    .results{display:grid; gap:14px}
    .kpis{
        display:grid; 
        grid-template-columns: 
        repeat(2, 1fr); 
        gap:14px;
        color:var(--text);
    }
    @media (max-width:700px){ .kpis{grid-template-columns:1fr} }

    .kpi{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.0)); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:16px}
    .kpi h3{margin:0; font-size:13px; color:var(--muted); font-weight:600}
    .kpi .val{margin-top:6px; font-size:24px; font-weight:700}
    .kpi.positive .val{color:var(--accent-2)}
    .kpi.negative .val{color:var(--danger)}

    .tbl{width:100%; color:var(--text); border-collapse:collapse; overflow:hidden; border-radius:14px; border:1px solid rgba(255,255,255,.06)}
    .tbl th,.tbl td{padding:12px 14px; text-align:left}
    .tbl thead th{font-size:12px; color:var(--muted); background:rgba(255,255,255,.03)}
    .tbl tbody tr + tr td{border-top:1px solid rgba(255,255,255,.06)}

    footer{margin-top:20px; color:#8fa2c8; font-size:12px; text-align:center}