:root {
  color-scheme: dark;
  --background: #000;
  --panel: #262930;
  --surface: #111;
  --border: #3c414a;
  --text: #f1f5f9;
  --muted: #a7b1bf;
  --primary: #1d62ad;
  --primary-hover: #174e89;
  --success: #15803d;
  --danger: #b91c1c;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); line-height: 1.5; }
/* BUG FIX B09: The supplied wide banner stays readable without the original
   100vw breakout, which could cause horizontal overflow and a tiny mobile logo. */
.app-header-banner { width: 100%; overflow: hidden; background: #0b1c2d; }
.app-header-banner img { display: block; width: 100%; height: auto; min-height: 56px; object-fit: cover; object-position: center; }
.container { width: min(1400px, calc(100% - 32px)); margin: 30px auto; padding: 32px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
h1, h2 { margin-top: 0; }
a { color: #75c7ff; }
form { display: grid; gap: 10px; }
.inline-form { display: inline; }
label { font-weight: 600; }
input, select, textarea, button, .btn { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
input, select, textarea { background: #121212; color: var(--text); }
textarea { min-height: 120px; resize: vertical; }
button, .btn { display: inline-flex; justify-content: center; width: auto; border: 0; background: var(--primary); color: #fff; cursor: pointer; text-decoration: none; }
button:hover, .btn:hover { background: var(--primary-hover); }
.btn-gray { background: #475569; }
.btn-danger { background: var(--danger); }
.link-button { padding: 0; background: transparent; color: #ff8d8d; text-decoration: underline; }
.user-status, .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.task-row { display: grid; grid-template-columns: auto minmax(160px, 1fr) minmax(220px, 1fr) auto auto; align-items: center; gap: 14px; margin: 10px 0; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.history { overflow-wrap: anywhere; white-space: pre-wrap; padding: 14px; border-radius: 6px; background: #15181d; color: var(--text); }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }
.flash-msg { margin-bottom: 18px; padding: 12px 16px; border-radius: 6px; border: 1px solid var(--border); }
.flash-msg.success { background: #064e3b; }
.flash-msg.warning { background: #422006; }
.flash-msg.error { background: #450a0a; }

@media (max-width: 900px) {
  .container { width: min(100% - 24px, 900px); padding: 22px; }
  .task-row { grid-template-columns: 1fr 1fr; }
  .task-row .btn { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .app-header-banner img { width: auto; height: 64px; min-width: 100%; position: relative; left: 50%; transform: translateX(-50%); }
  .container { width: calc(100% - 16px); margin: 12px auto; padding: 16px; }
  .user-status, .page-heading { align-items: flex-start; flex-direction: column; }
  .task-row { grid-template-columns: 1fr; }
  button, .btn { width: 100%; }
}