/* ==== Visual r4: centered container + two columns + colors + sticky actions + chart styling ==== */
:root{
  --alli-blue:#003781;
  --alli-blue-2:#0b4fb3;
  --alli-sky:#e8f3ff;
  --alli-bg:#f6f9fc;
  --alli-border:#e6eef7;
  --alli-text:#0f172a;
  --alli-muted:#6b7280;
}
body{background:var(--alli-bg)}
.container{max-width:1200px;margin:0 auto} /* centered */

.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:1080px){
  .grid{grid-template-columns:minmax(520px,1fr) minmax(520px,1fr);align-items:start}
}

.card{border:1px solid var(--alli-border);border-radius:16px;box-shadow:0 6px 18px rgba(0,30,84,.06);background:#fff}
.block{background:#fff;border:1px solid var(--alli-border);border-radius:14px;padding:16px;margin-bottom:12px}

.header h1{color:var(--alli-blue);letter-spacing:.2px}
h2{color:var(--alli-blue);margin:0 0 6px}
h3{color:var(--alli-blue-2);margin:6px 0 10px;font-weight:800}
.badge{background:var(--alli-sky);color:var(--alli-blue);padding:6px 12px;border-radius:999px;font-weight:800}

label{font-weight:800;color:var(--alli-text)}
.input{display:flex;gap:8px;align-items:center}
input[type=number],input[type=text],select{
  width:100%;padding:12px;border:1px solid var(--alli-border);border-radius:12px;background:#fff;
  outline:none;transition:border-color .15s,box-shadow .15s;font-size:16px
}
input[type=number]:focus,input[type=text]:focus,select:focus{border-color:#b7d6ff;box-shadow:0 0 0 4px rgba(59,130,246,.15)}
.suffix{color:var(--alli-muted);font-weight:700}
.spacer{height:10px;background:#eef6ff;border-radius:6px;margin:14px 0}

.actions{display:flex;gap:10px;margin-top:12px}
@media (min-width:1080px){
  .card .actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,0),#ffffff 45%);
    padding-top:8px;padding-bottom:8px;margin-bottom:-8px}
}
button{cursor:pointer}
button.primary{background:var(--alli-blue);color:#fff;border:none;border-radius:12px;padding:12px 18px;font-weight:900}
button.primary:hover{filter:brightness(1.06)}
button.secondary{background:#fff;color:var(--alli-blue-2);border:1px solid #b7d6ff;border-radius:12px;padding:12px 18px;font-weight:900}
button.secondary:hover{background:#f0f6ff}

#section-result h2{display:flex;align-items:center;gap:10px}
#section-result h2::after{content:'';flex:1;height:1px;background:var(--alli-border)}
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.results-grid > div{border:1px solid var(--alli-border);border-radius:12px;padding:10px;background:#fff}
.small{font-size:12px;color:var(--alli-muted);margin-bottom:6px}
.result{font-size:22px;font-weight:900;color:var(--alli-blue)}

.two-cols{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:900px){.two-cols{grid-template-columns:1fr 1fr}}
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.kpi .k{border:1px solid var(--alli-border);border-radius:12px;padding:12px;background:#fff}
.kpi .t{font-size:12px;color:var(--alli-muted)}
.kpi .v{font-size:18px;font-weight:900;color:var(--alli-blue)}
.pill{display:inline-block;background:var(--alli-sky);color:var(--alli-blue);border-radius:999px;padding:3px 10px;font-weight:900;font-size:12px;vertical-align:middle}

label[style*="display:flex"]{background:#fff;border:1px solid var(--alli-border);border-radius:12px;padding:10px 12px;font-weight:700}
label[style*="display:flex"] input{transform:translateY(1px)}

.modal{position:fixed;inset:0;background:rgba(0,32,64,.35);display:none;align-items:center;justify-content:center;z-index:9999}
.modal.show{display:flex}
.modal .box{background:#fff;border:1px solid var(--alli-border);border-radius:16px;box-shadow:0 22px 60px rgba(0,30,84,.25);padding:18px 20px;max-width:560px}
.modal .box h4{margin:0 0 6px;color:var(--alli-blue-2)}
.modal .box p{margin:6px 0 0;color:var(--alli-text)}
.modal .actions{display:flex;justify-content:flex-end;margin-top:12px}
.modal .actions button{background:var(--alli-blue);color:#fff;border:none;border-radius:12px;padding:10px 14px;font-weight:900}

/* Chart area */
.chart-card{margin-top:12px;border:1px solid var(--alli-border);border-radius:14px;padding:12px;background:#fff}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.legend{display:flex;gap:12px;font-size:12px;color:var(--alli-text);font-weight:700}
.legend .sw{display:inline-block;width:14px;height:4px;border-radius:2px;vertical-align:middle;margin-right:6px}
.sw-deposit{background:#0ea5e9}
.sw-total{background:#22c55e}
.chart-wrap{position:relative;width:100%;height:320px}
.chart-wrap svg{width:100%;height:100%;overflow:visible}
.chart-tooltip{position:absolute;pointer-events:none;background:#0f172a;color:#fff;font-size:12px;padding:6px 8px;border-radius:8px;transform:translate(-50%,-120%);opacity:0;transition:opacity .12s}
.chart-axis text{fill:#64748b;font-size:11px}
.chart-axis path,.chart-axis line{stroke:#cbd5e1}

/* r5 additions */
.container{max-width:1180px;margin:0 auto}
.btn-back{display:inline-block;background:#fff;color:#374151;border:1px solid var(--alli-border);border-radius:12px;padding:12px 18px;font-weight:900;text-decoration:none}
.btn-back:hover{background:#f8fafc;border-color:#cbd5e1}

/* Chart improvements */
.chart-card{margin-top:12px;border:1px solid var(--alli-border);border-radius:14px;padding:12px;background:#fff}
.chart-wrap{position:relative;width:100%;height:360px}
.chart-wrap svg{width:100%;height:100%;overflow:visible}
.chart-tooltip{position:absolute;pointer-events:none;background:#111827;color:#fff;font-size:12px;padding:6px 8px;border-radius:8px;transform:translate(-50%,-120%);opacity:0;transition:opacity .12s;box-shadow:0 10px 24px rgba(0,0,0,.16)}
.legend{display:flex;gap:16px;font-size:12px;color:var(--alli-text);font-weight:700;flex-wrap:wrap}
.legend .sw{display:inline-block;width:18px;height:4px;border-radius:2px;vertical-align:middle;margin-right:6px}
.sw-deposit{background:#0ea5e9}
.sw-total{background:#22c55e}
.chart-axis text{fill:#64748b;font-size:11px}
.chart-axis path,.chart-axis line{stroke:#e5e7eb}
.grid-line{stroke:#eef2f7}

/* r6: chart crispness and sizing */
.chart-wrap{position:relative;width:100%;height:380px}
.chart-wrap svg{width:100% !important;height:100% !important;overflow:visible;shape-rendering:geometricPrecision}
.grid-line{stroke:#eef2f7}