/* OCNS — Staff Salary Advance & Loan
   House style: Poppins, purple #8E43F0 / #6300E2, ink #150E1F, surface #F3F1F6 */
.ocnssf-wrap{--p:#8E43F0;--pd:#6300E2;--ink:#150E1F;--surface:#F3F1F6;--line:#E2DDEC;--ok:#1E8E5A;--bad:#B32D2E;
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);max-width:960px;margin:0 auto;padding:8px 0 48px;line-height:1.6}
.ocnssf-wrap *{box-sizing:border-box}
.ocnssf-head{background:linear-gradient(135deg,var(--pd),var(--p));color:#fff;border-radius:18px;padding:28px 30px;margin-bottom:22px}
.ocnssf-eyebrow{margin:0 0 6px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.ocnssf-head h1{margin:0 0 8px;font-size:1.9rem;line-height:1.2;color:#fff}
.ocnssf-sub{margin:0;opacity:.92;font-size:.98rem}
.ocnssf-rules{background:var(--surface);border-left:4px solid var(--p);border-radius:12px;padding:18px 22px;margin-bottom:22px}
.ocnssf-rules h3{margin:0 0 10px;font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--pd)}
.ocnssf-rules ul{margin:0;padding-left:20px}
.ocnssf-rules li{margin-bottom:6px;font-size:.95rem}
.ocnssf-errors{background:#FDECEC;border:1px solid #F3B9B9;border-radius:12px;padding:16px 20px;margin-bottom:22px;color:#7A1B1C}
.ocnssf-errors ul{margin:10px 0 0;padding-left:20px}
.ocnssf-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:20px;box-shadow:0 2px 10px rgba(21,14,31,.04)}
.ocnssf-card h2{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:1.18rem;color:var(--pd)}
.ocnssf-card h2 small{font-weight:400;color:#6b6478;font-size:.85rem}
.ocnssf-step{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--p);color:#fff;font-size:.95rem;font-weight:600;flex:none}
.ocnssf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ocnssf-field{display:flex;flex-direction:column;font-size:.9rem;font-weight:600;gap:6px}
.ocnssf-field.ocnssf-wide{grid-column:1/-1}
.ocnssf-field span{color:var(--bad)}
.ocnssf-field small{font-weight:400;color:#6b6478;font-size:.8rem}
.ocnssf-field input,.ocnssf-field select,.ocnssf-field textarea{width:100%;font:inherit;font-weight:400;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.ocnssf-field input:focus,.ocnssf-field select:focus,.ocnssf-field textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(142,67,240,.16)}
.ocnssf-field input[readonly]{background:var(--surface)}
.ocnssf-guarantor{border:1px dashed var(--line);border-radius:14px;padding:18px;margin-bottom:18px;background:#FCFBFE}
.ocnssf-guarantor h3{margin:0 0 4px;font-size:1.02rem;color:var(--ink)}
.ocnssf-guarantor.ocnssf-external{border-color:var(--p);background:#F8F4FE}
.ocnssf-hint{margin:0 0 14px;font-size:.87rem;color:#6b6478}
.ocnssf-tag{display:inline-block;background:var(--p);color:#fff;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;vertical-align:middle}
.ocnssf-check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.88rem;line-height:1.5}
.ocnssf-check input{margin-top:4px;flex:none;width:18px;height:18px;accent-color:var(--p)}
.ocnssf-calc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px;background:var(--surface);border-radius:12px;padding:16px}
.ocnssf-calc div{display:flex;flex-direction:column;gap:4px}
.ocnssf-calc span{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:#6b6478}
.ocnssf-calc strong{font-size:1.05rem;color:var(--pd)}
.ocnssf-calc.ocnssf-over strong[data-calc="monthly"]{color:var(--bad)}
.ocnssf-declaration{background:var(--surface);border-radius:12px;padding:16px 20px;font-size:.9rem}
.ocnssf-declaration p{margin:0}
.ocnssf-actions{text-align:center;margin-top:24px}
.ocnssf-submit{background:var(--pd);color:#fff;border:0;border-radius:999px;padding:15px 44px;font:inherit;font-weight:600;font-size:1.02rem;cursor:pointer;transition:.2s}
.ocnssf-submit:hover{background:var(--p);transform:translateY(-1px)}
.ocnssf-small{font-size:.82rem;color:#6b6478;margin-top:12px}
.ocnssf-hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.ocnssf-note{background:var(--surface);border-radius:12px;padding:20px;text-align:center}
.ocnssf-receipt{background:#fff;border:1px solid var(--line);border-radius:18px;padding:40px 30px;text-align:center;box-shadow:0 2px 14px rgba(21,14,31,.06)}
.ocnssf-receipt-icon{font-size:2.6rem}
.ocnssf-receipt h2{color:var(--pd);margin:8px 0 10px}
.ocnssf-ref{font-size:1.1rem}
.ocnssf-receipt-facts{list-style:none;margin:22px auto 10px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:620px}
.ocnssf-receipt-facts li{background:var(--surface);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px}
.ocnssf-receipt-facts span{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#6b6478}
@media(max-width:720px){
  .ocnssf-grid{grid-template-columns:1fr}
  .ocnssf-calc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ocnssf-receipt-facts{grid-template-columns:1fr}
  .ocnssf-head{padding:22px 20px}
  .ocnssf-head h1{font-size:1.5rem}
  .ocnssf-card{padding:18px}
}
@media print{
  .ocnssf-submit,.ocnssf-actions .ocnssf-small{display:none}
  .ocnssf-card{break-inside:avoid;box-shadow:none}
}