/* Newton problem reports. Colours match the Newton apps' navy header. */
:root {
    --navy: #1d2d4f;
    --ink: #1f2937;
    --muted: #6b7280;
    --line: #d1d5db;
    --bg: #f3f4f6;
    --blue: #1a5fd0;
    --err-bg: #fdecec;
    --err: #9b1c1c;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.top { background: var(--navy); color: #fff; padding: 14px 16px; }
.brand { font-weight: 700; font-size: 22px; letter-spacing: .3px; }
.card { max-width: 640px; margin: 24px auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 24px 20px; }
h1 { margin: 0 0 8px; font-size: 24px; color: var(--navy); }
.from { color: var(--muted); margin: 0 0 20px; overflow-wrap: anywhere; }
code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-size: 14px; }
label { display: block; font-weight: 600; margin: 18px 0 6px; }
.opt, .hint { color: var(--muted); font-weight: 400; }
.hint { font-size: 14px; margin: 6px 0 0; }
textarea, input[type=file] { width: 100%; font: inherit; }
textarea { padding: 10px; border: 1px solid var(--line); border-radius: 6px; resize: vertical; }
textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
button { margin-top: 24px; background: var(--blue); color: #fff; border: 0; border-radius: 6px; padding: 12px 22px; font: inherit; font-weight: 600; cursor: pointer; }
button:disabled { opacity: .6; cursor: default; }
.err { background: var(--err-bg); color: var(--err); padding: 10px 12px; border-radius: 6px; }
@media (max-width: 680px) { .card { margin: 0; border-radius: 0; border-left: 0; border-right: 0; } }