:root{
  --bg:#0f172a; --panel:#111827; --muted:#9ca3af; --text:#e5e7eb;
  --accent:#22c55e; --border:#1f2937;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(120deg,var(--bg),#0b1224);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);}
.wrap{max-width:1100px;margin:40px auto;padding:24px}
.card{background:rgba(17,24,39,.8);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 8px 30px rgba(0,0,0,.3)}
h1{font-size:22px;margin:0 0 8px;display:flex;align-items:center;gap:10px}
h1 .tag{font-size:12px;color:#0ea5e9;background:rgba(14,165,233,.15);border:1px solid rgba(14,165,233,.25);padding:2px 8px;border-radius:999px}
p.sub{margin:0 0 16px;color:var(--muted)}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:980px){.grid{grid-template-columns:1.4fr .6fr}}

.field{display:flex;flex-direction:column;gap:8px}
.label{font-size:13px;color:var(--muted)}
.input{display:flex;align-items:center;gap:10px;background:#0b1020;border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.input input[type="text"], .input input[type="number"], .input select{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:16px}
.input .unit{color:var(--muted)}
.input.select-wrap{position:relative}
.input.select-wrap::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid var(--muted);pointer-events:none}
.input select option{color:#111827}

.panel{border:1px solid var(--border);border-radius:12px;padding:16px;background:#0b0f1d}
.panel h3{margin:0 0 8px;font-size:14px;color:var(--muted)}

.rows{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px dashed var(--border);border-radius:10px}
.row .left{display:flex;align-items:center;gap:10px}
.row .badge{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.1)}
.row .val{font-variant-numeric:tabular-nums}
.row.urssaf{border-color:rgba(34,197,94,.25)}
.row.ir{border-color:rgba(45,212,191,.25)}
.row.cfp{border-color:rgba(125,211,252,.2)}
.row.total{border-style:solid;background:rgba(34,197,94,.06)}
.badge-total{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.35)}

.kpis{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@media(min-width:680px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:linear-gradient(180deg,rgba(34,197,94,.08),rgba(34,197,94,.02));border:1px solid rgba(34,197,94,.25);padding:16px;border-radius:12px}
.kpi.muted{background:linear-gradient(180deg,rgba(148,163,184,.08),rgba(148,163,184,.02));border-color:rgba(148,163,184,.25)}
.kpi .title{font-size:12px;color:var(--muted);margin-bottom:6px}
.kpi .value{font-size:28px;font-weight:700;letter-spacing:.3px}

.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
button{cursor:pointer;border:none;border-radius:10px;padding:10px 14px;background:var(--panel);color:var(--text);border:1px solid var(--border)}
button.primary{background:var(--accent);color:#031609;border:none}
button.ghost{background:transparent}

.hint{font-size:12px;color:var(--muted);margin-top:8px}
footer{margin-top:18px;color:var(--muted);font-size:12px}

.hidden{display:none!important}
/* mixed rows */
.mixed{margin-top:10px}
.mixed-panel{border:1px dashed var(--border);border-radius:12px;padding:12px;background:#0b0f1d;margin-top:8px}
.mix-rows{display:flex;flex-direction:column;gap:10px}
.mix-row{display:grid;grid-template-columns:1.2fr .7fr auto auto;gap:10px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:10px;background:#0b1020}
.mix-row .input{background:#0b1020;border:none;padding:0}
.mix-row .input input{background:#0b1020;border:1px solid var(--border);border-radius:10px;padding:10px}
.mix-row .edit{background:#374151}
.mix-row .remove{background:#1f2937}
.mix-recap{margin-top:10px;overflow:auto}
.mix-recap table{width:100%;border-collapse:collapse;font-size:13px}
.mix-recap th,.mix-recap td{padding:8px;border:1px solid var(--border);text-align:right}
.mix-recap th:first-child,.mix-recap td:first-child{text-align:left}

.switch{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.switch input{display:none}
.switch .slider{position:relative;width:44px;height:24px;background:#0b1020;border:1px solid var(--border);border-radius:999px;transition:.2s}
.switch .slider::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:999px;background:#6b7280;transition:.2s}
.switch input:checked + .slider{background:rgba(34,197,94,.25);border-color:rgba(34,197,94,.45)}
.switch input:checked + .slider::after{transform:translateX(20px);background:#22c55e}
.switch .switch-label{color:var(--muted);font-size:13px}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50}
.modal.hidden{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}
.modal-card{position:relative;width:min(520px,92vw);background:#0b0f1d;border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-card h3{margin:0 0 10px;font-size:16px}
.modal-fields{display:grid;grid-template-columns:1fr;gap:10px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}

.hide-on-mixed{opacity:.4;pointer-events:none;filter:grayscale(1)}


.mode-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
}
.mode-btn {
  flex: 1;
  background: #0b1020;
  color: var(--muted);
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
}
.mode-btn.active {
  background: var(--accent);
  color: #031609;
  font-weight: 600;
}


/* Switch mode buttons */
.mode-switch{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;margin-top:10px}
.mode-btn{flex:1;background:#0b1020;color:var(--muted);border:none;padding:8px 14px;cursor:pointer;font-size:14px}
.mode-btn.active{background:var(--accent);color:#031609;font-weight:600}


/* Top switch margins */
#topSwitch{ margin:8px 0 14px; display:inline-flex; }

#simTitleActivity {
font-size: 14px;
}