.remainder-page { color: #172033; }
.remainder-heading { margin-bottom: 25px; }
.remainder-eyebrow { margin: 0 0 9px; color: #087f6d; font-size: .9rem; font-weight: 800; }
.remainder-heading h1 { margin: 0 0 14px; color: #111827; font-size: clamp(2.1rem, 5vw, 3.45rem); line-height: 1.08; }
.remainder-heading > p { max-width: 800px; margin: 0; color: #64748b; font-size: 1.08rem; line-height: 1.75; }
.remainder-tool, .remainder-history, .remainder-guide { border: 1px solid #dbe4ef; border-radius: 8px; background: #fff; box-shadow: 0 18px 45px rgba(15, 23, 42, .06); }
.remainder-tool { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(270px, .9fr); overflow: hidden; }
.remainder-form, .remainder-result { padding: 25px; }
.remainder-result { border-left: 1px solid #dbe4ef; background: #f7fafc; }
.remainder-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.remainder-panel-head p, .remainder-result-label { margin: 0; color: #087f6d; font-size: .85rem; font-weight: 800; }
.remainder-panel-head h2, .remainder-history h2, .remainder-guide h2, .remainder-guide h3 { margin: 4px 0 0; color: #111827; }
.remainder-badge { flex: 0 0 auto; padding: 7px 9px; border-radius: 6px; background: #e8f7f3; color: #087f6d; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; font-weight: 800; }
.remainder-input-grid { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); align-items: center; gap: 12px; }
.remainder-input-grid label { display: grid; gap: 8px; color: #1e293b; font-weight: 800; }
.remainder-input-grid input { width: 100%; height: 58px; margin: 0; padding: 0 15px !important; border: 1px solid #cfd8e5; border-radius: 7px; background: #fff; color: #0f172a; font-size: 1.25rem; font-weight: 800; }
.remainder-input-grid input:focus { border-color: #087f6d; box-shadow: 0 0 0 3px rgba(8, 127, 109, .12); outline: 0; }
.remainder-input-grid small { color: #64748b; font-size: .78rem; font-weight: 500; }
.remainder-symbol { color: #64748b; font-size: 1.6rem; font-weight: 800; text-align: center; }
.remainder-options { margin-top: 18px; }
.remainder-check { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #d7e7e2; border-radius: 7px; background: #f0fdfa; cursor: pointer; }
.remainder-check span { display: grid; gap: 2px; }
.remainder-check small { color: #64748b; font-size: .78rem; }
.remainder-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 18px 0; }
.remainder-examples > span { margin-right: 2px; color: #64748b; font-size: .8rem; font-weight: 800; }
.remainder-examples button, .remainder-history button { min-height: 34px; padding: 0 10px; border: 1px solid #d5dfeb; border-radius: 6px; background: #fff; color: #475569; font-size: .8rem; font-weight: 800; box-shadow: none; }
.remainder-examples button:hover, .remainder-history button:hover { border-color: #087f6d; color: #087f6d; }
.remainder-actions { display: flex; gap: 9px; }
.remainder-actions button, .remainder-copy { min-height: 48px; padding: 0 18px; border: 0; border-radius: 7px; font-weight: 800; box-shadow: none; }
.remainder-primary { background: #087f6d; color: #fff; }
.remainder-secondary { background: #e8eef5; color: #334155; }
.remainder-status { min-height: 1.45em; margin: 12px 0 0; color: #64748b; font-size: .84rem; }
.remainder-status.is-error { color: #b42318; }
.remainder-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.remainder-answer-grid div, .remainder-result-note { padding: 14px; border: 1px solid #dbe4ef; border-radius: 7px; background: #fff; }
.remainder-answer-grid span, .remainder-result-note span { display: block; margin-bottom: 6px; color: #64748b; font-size: .77rem; }
.remainder-answer-grid strong { display: block; color: #0f172a; font-size: clamp(1.5rem, 4vw, 2.15rem); line-height: 1.15; overflow-wrap: anywhere; }
.remainder-equation { margin: 10px 0; padding: 15px; border-radius: 7px; background: #e7f6f2; color: #075f53; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .95rem; font-weight: 800; line-height: 1.6; overflow-wrap: anywhere; }
.remainder-result-note strong { color: #334155; line-height: 1.55; overflow-wrap: anywhere; }
.remainder-copy { width: 100%; margin-top: 14px; border: 1px solid #b9d9d2; background: #fff; color: #087f6d; }
.remainder-history, .remainder-guide { margin-top: 24px; padding: 24px; }
.remainder-history header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.remainder-history ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.remainder-history li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid #dbe4ef; border-radius: 7px; background: #f8fafc; }
.remainder-history li span { color: #475569; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.remainder-history li time { flex: 0 0 auto; color: #94a3b8; font-size: .75rem; }
.remainder-history li.is-empty { display: block; color: #64748b; }
.remainder-guide > header p { color: #64748b; line-height: 1.75; }
.remainder-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.remainder-guide-grid section { padding: 17px; border: 1px solid #dbe4ef; border-radius: 7px; background: #f8fafc; }
.remainder-guide-grid h3 { font-size: 1rem; }
.remainder-guide-grid p, .remainder-faq p { margin: 8px 0 0; color: #64748b; line-height: 1.7; }
.remainder-faq { margin-top: 18px; padding: 18px; border-radius: 7px; background: #f0fdfa; }
.remainder-faq h3 { margin: 0 0 10px; }
.remainder-faq details { padding: 11px 0; border-top: 1px solid #cde8df; }
.remainder-faq summary { color: #134e4a; font-weight: 800; cursor: pointer; }
@media (max-width: 800px) { .remainder-tool { grid-template-columns: 1fr; } .remainder-result { border-top: 1px solid #dbe4ef; border-left: 0; } }
@media (max-width: 520px) { .remainder-form, .remainder-result, .remainder-history, .remainder-guide { padding: 18px; } .remainder-input-grid { grid-template-columns: 1fr; } .remainder-symbol { transform: rotate(90deg); } .remainder-panel-head { display: block; } .remainder-badge { display: inline-block; margin-top: 10px; } .remainder-actions > * { flex: 1; } .remainder-guide-grid { grid-template-columns: 1fr; } }