:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --bg2: var(--tg-theme-secondary-bg-color, #f1f3f5);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #6b7280);
  --btn: var(--tg-theme-button-color, #2481cc);
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
  --danger: #d93025;
  --ok: #1e8e3e;
  --border: rgba(127, 127, 127, 0.28);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
}
:root[data-theme="dark"] {
  --bg: var(--tg-theme-bg-color, #17212b);
  --bg2: var(--tg-theme-secondary-bg-color, #0e1621);
  --text: var(--tg-theme-text-color, #f5f5f5);
  --hint: var(--tg-theme-hint-color, #8a9aa8);
  --danger: #ff6b60;
  --ok: #5fd07a;
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; }
body {
  background: var(--bg2);
  color: var(--text);
  font: 16px/1.4 var(--font);
  -webkit-text-size-adjust: 100%;
}
.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 12px max(12px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  padding-top: calc(12px + env(safe-area-inset-top));
}
.page__title { font-size: 22px; margin: 4px 0 12px; }
.group__title {
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--hint); margin: 18px 4px 8px;
}
.card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; margin-bottom: 10px; min-width: 0;
}
.card__head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.card__code { font-weight: 600; color: var(--hint); font-size: 14px; }
.badge {
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  border: 1px solid currentColor;
}
.badge--P1 { color: var(--danger); }
.badge--P2 { color: #e8710a; }
.badge--P3 { color: var(--btn); }
.badge--P4 { color: var(--hint); }
.badge--question { color: var(--ok); }
.card__title { font-size: 17px; font-weight: 600; margin: 0 0 6px; overflow-wrap: anywhere; }
.card__due { font-size: 14px; color: var(--hint); margin-bottom: 10px; }
.card__due--overdue { color: var(--danger); font-weight: 600; }
.card__note { font-size: 14px; color: var(--hint); margin-bottom: 10px; overflow-wrap: anywhere; }
.actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.btn {
  min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.btn--primary { background: var(--btn); color: var(--btn-text); border-color: transparent; }
.btn:disabled { opacity: 0.6; }
.form { display: grid; gap: 8px; margin-top: 8px; }
.input {
  min-height: 48px; width: 100%; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit;
}
textarea.input { min-height: 80px; resize: vertical; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.msg { text-align: center; padding: 40px 12px; font-size: 18px; }
.msg--error { color: var(--danger); }
.msg__id { display: block; margin-top: 8px; font-size: 22px; font-weight: 700; color: var(--text); }
.toast { color: var(--danger); font-size: 14px; margin-top: 8px; }
@media (min-width: 420px) {
  .actions { grid-template-columns: repeat(3, 1fr); }
}