:root { --bg:#f5f5fb; --card:#fff; --line:#d8d8e0; --brand:#5b5bd6; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:#222; }
.topbar { background:#2b2b3a; color:#fff; padding:12px 16px; }
.topbar a { color:#cdd; }
.wrap { max-width:760px; margin:0 auto; padding:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px;
        padding:16px; display:flex; flex-direction:column; gap:10px; margin:12px 0; }
input, textarea, button { font-size:16px; padding:10px; border:1px solid var(--line);
        border-radius:8px; width:100%; }
button { background:var(--brand); color:#fff; border:none; cursor:pointer; }
.err { color:#c0392b; }
@media (max-width:600px) { .wrap { padding:10px; } }
.status { padding:12px; background:#fff; border:1px solid var(--line); border-radius:8px; margin:10px 0; }
.filelink { display:block; padding:10px; margin:6px 0; background:#eef0ff; border:1px solid #c7caf0;
            border-radius:8px; text-decoration:none; color:#33339a; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.actions button { width:auto; flex:1; }
.histrow { display:flex; justify-content:space-between; gap:8px; padding:10px; border-bottom:1px solid var(--line); }
.histrow .due { color:#b5651d; font-size:13px; }
@media (max-width:600px){ .actions button { flex:1 1 100%; } }