:root{--rm8-bg:#090d16;--rm8-card:#131a2a;--rm8-input:#1c2538;--rm8-border:#2a3650;--rm8-cyan:#0ea5e9;--rm8-text:#f8fafc;--rm8-muted:#94a3b8}
*{box-sizing:border-box}.rm8-page{width:min(100%,760px);margin:0 auto;padding:18px 15px 36px;color:var(--rm8-text)}body{background:var(--rm8-bg)!important}.rm8-back{display:inline-block;color:var(--rm8-muted);text-decoration:none;margin:4px 0 18px;font-size:14px}.rm8-header{display:flex;align-items:center;gap:14px;margin-bottom:18px}.rm8-icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#075985,#164e63);font-size:27px;border:1px solid #0ea5e9}.rm8-header p,.rm8-profile small{font-size:10px;letter-spacing:1.3px;color:#38bdf8;margin:0 0 4px}.rm8-header h1{font-size:23px;margin:0 0 4px}.rm8-header span{font-size:13px;color:var(--rm8-muted)}.rm8-card,.rm8-profile,.rm8-result{background:var(--rm8-card);border:1px solid var(--rm8-border);border-radius:16px;padding:18px;margin-bottom:16px}.rm8-card h2{font-size:17px;margin:0 0 17px}.rm8-profile{display:flex;align-items:center;justify-content:space-between;gap:12px}.rm8-profile div{display:grid;gap:4px;min-width:0}.rm8-profile strong{font-size:15px}.rm8-profile span{font-size:12px;color:var(--rm8-muted)}.rm8-profile a{font-size:12px;color:#38bdf8;text-decoration:none;white-space:nowrap}.rm8-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.rm8-field{min-width:0}.rm8-field label{display:block;font-size:12.5px;color:#dbeafe;margin-bottom:7px}.rm8-field input,.rm8-field select{width:100%;min-height:44px;padding:10px;background:var(--rm8-input);border:1px solid var(--rm8-border);border-radius:9px;color:white;font-size:14px}.rm8-field input:focus,.rm8-field select:focus{outline:1px solid var(--rm8-cyan);border-color:var(--rm8-cyan)}.field-source{display:block;color:#7dd3fc;font-size:10px;margin-top:5px;line-height:1.4}.rm8-actions{margin-top:18px}.rm8-actions button{width:100%;border:0;border-radius:10px;padding:14px;background:linear-gradient(90deg,#0284c7,#06b6d4);color:#fff;font-weight:700;font-size:15px}.rm8-result{border-color:#0284c7;background:linear-gradient(180deg,rgba(14,165,233,.13),var(--rm8-card))}.rm8-result-head{text-align:center;padding:5px 0 18px}.rm8-result-head small{display:block;color:var(--rm8-muted);font-size:10px;letter-spacing:1px}.rm8-result-head strong{display:block;color:#38bdf8;font-size:32px;margin:5px 0}.rm8-result-head span{font-size:12px;color:#cbd5e1}.rm8-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.rm8-result-grid>div{background:var(--rm8-input);border:1px solid var(--rm8-border);border-radius:10px;padding:11px}.rm8-result-grid small{display:block;color:var(--rm8-muted);font-size:11px;margin-bottom:5px}.rm8-result-grid strong{font-size:15px}.rm8-breakdown{background:#0f172a;border-radius:10px;padding:12px;margin-top:12px}.rm8-breakdown div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #263247;font-size:12px}.rm8-breakdown div:last-child{border:0;color:#7dd3fc;font-weight:700}.rm8-breakdown strong{text-align:right}.rm8-disclaimer,.rm8-note{font-size:11px;line-height:1.6;color:#aab9ce;margin:13px 2px 0}.rm8-note{padding:12px;background:#111d30;border-radius:10px}@media(max-width:520px){.rm8-grid{grid-template-columns:1fr}.rm8-profile{align-items:flex-start;flex-direction:column}.rm8-header h1{font-size:20px}}
.rm8-field.is-disabled{opacity:.48}.rm8-field.is-disabled select{cursor:not-allowed;background:#111827;color:#94a3b8;border-style:dashed}.rm8-field select:disabled{pointer-events:none}

/* Strong visual state for HRA rate when railway quarter is selected */
#cityClassField.is-disabled{opacity:.38!important;filter:grayscale(1)!important;pointer-events:none!important}
#cityClassField.is-disabled label,#cityClassField.is-disabled .field-source{color:#64748b!important}
#cityClassField select:disabled{opacity:.45!important;color:#64748b!important;background:#0b1220!important;border:2px dashed #475569!important;-webkit-text-fill-color:#64748b!important;cursor:not-allowed!important}


.rm8-actions-split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rm8-actions .rm8-secondary-btn{background:linear-gradient(90deg,#334155,#475569)}
#cityClassField.is-disabled{opacity:.38!important;filter:grayscale(1)!important;pointer-events:none!important}
#cityClassField.is-disabled select:disabled{opacity:.45!important;color:#64748b!important;background:#0b1220!important;border:2px dashed #475569!important;-webkit-text-fill-color:#64748b!important;cursor:not-allowed!important}
@media(max-width:520px){.rm8-actions-split{grid-template-columns:1fr}}

.rm8-mode-card{background:var(--rm8-card);border:1px solid var(--rm8-border);border-radius:16px;padding:20px;margin-bottom:16px}
.rm8-mode-card h2{font-size:18px;margin:0 0 16px}
.rm8-mode-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rm8-mode-options button,.rm8-form-heading button{border:0;border-radius:11px;padding:17px 12px;background:linear-gradient(100deg,#0284c7,#06b6d4);color:#fff;font-weight:700;font-size:16px;min-height:58px}
.rm8-form-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.rm8-form-heading h2{margin:0}
.rm8-form-heading button{font-size:12px;padding:9px 12px;min-height:0;background:#334155;white-space:nowrap}
.rm8-actions{display:grid;gap:10px}
.rm8-actions button[hidden],[hidden]{display:none!important}
#cityClassField.is-disabled{opacity:.38!important;filter:grayscale(1)!important;pointer-events:none!important}
#cityClassField select:disabled{opacity:.4!important;color:#64748b!important;background:#0b1220!important;border:2px dashed #475569!important;-webkit-text-fill-color:#64748b!important;cursor:not-allowed!important}
@media(max-width:520px){.rm8-mode-options{grid-template-columns:1fr}.rm8-form-heading{align-items:flex-start}}