* { box-sizing: border-box; margin: 0; }
body { font: 15px/1.5 "Segoe UI", system-ui, sans-serif; background: #f6f4f1; color: #2b2622; }
a { color: #8a4a5e; text-decoration: none; }
a:hover { text-decoration: underline; }

header { display: flex; align-items: center; gap: 24px; padding: 10px 24px;
  background: #fff; border-bottom: 1px solid #e8e1da; flex-wrap: wrap; }
.brand { font-size: 18px; letter-spacing: .5px; color: #8a4a5e; }
header nav { display: flex; gap: 16px; }
header nav a { padding: 4px 2px; }
.who { margin-left: auto; color: #6b625a; font-size: 13px; }
.who .role { color: #8a4a5e; }
.who .exit { margin-left: 12px; }

main { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
h1 { font-size: 24px; font-weight: 600; margin-bottom: 6px; }
h2 { font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #4d4238; }
section { background: #fff; border: 1px solid #e8e1da; border-radius: 10px;
  padding: 16px 18px; margin: 16px 0; overflow-x: auto; }
.muted { color: #8d8378; font-size: 13px; }
.flash { background: #f6e8d6; border: 1px solid #e6cba3; padding: 10px 14px;
  border-radius: 8px; margin-bottom: 12px; }

.row-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.periods a { padding: 3px 10px; border-radius: 14px; font-size: 13px; color: #6b625a; }
.periods a.on { background: #8a4a5e; color: #fff; }

.kpis { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.kpi { background: #fff; border: 1px solid #e8e1da; border-radius: 10px;
  padding: 10px 16px; font-size: 12px; color: #8d8378; min-width: 120px; }
.kpi span { display: block; font-size: 20px; font-weight: 600; color: #2b2622; }
.kpi.money span { color: #3d7a4f; }
.kpi.warn span { color: #b0722a; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: #8d8378; font-weight: 500; font-size: 12px;
  padding: 6px 8px; border-bottom: 1px solid #e8e1da; }
td { padding: 7px 8px; border-bottom: 1px solid #f1ece6; vertical-align: top; }
tr:last-child td { border-bottom: none; }

.bar { display: inline-block; width: 120px; height: 8px; background: #efe9e2;
  border-radius: 4px; vertical-align: middle; margin-right: 8px; }
.bar i { display: block; height: 100%; background: #c4707f; border-radius: 4px; }

tr.overdue td { background: #fdf3f3; }
.tag-late { display: inline-block; background: #b03a3a; color: #fff; font-size: 11px;
  padding: 1px 7px; border-radius: 9px; margin-left: 6px; }
.tag-wait { display: inline-block; background: #e7dcc9; color: #6b5a3a; font-size: 11px;
  padding: 1px 7px; border-radius: 9px; margin-left: 6px; }
.fu-actions { white-space: nowrap; }
.fu-actions form { display: inline-block; margin: 0 2px 0 0; }
.fu-actions .snooze { display: inline-flex; gap: 3px; align-items: center; }
.fu-actions .snooze input[type=date] { width: auto; padding: 4px 6px; font-size: 12px; }
.pay-form label { display: inline-block; margin-right: 14px; }
.pay-form input, .pay-form select { width: auto; }

.prog { height: 12px; background: #efe9e2; border-radius: 6px; overflow: hidden; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg,#c4707f,#8a4a5e);
  border-radius: 6px; transition: width .6s ease; }
.prog i.done { background: #3d7a4f; }
.prog-txt { font-size: 12px; color: #6b625a; margin-top: 3px; }

.badge { display: inline-block; padding: 3px 12px; border-radius: 12px; font-size: 13px; white-space: nowrap; }
.badge.on { background: #e2f2e6; color: #2e6b3f; border: 1px solid #b5dcc0; }
.badge.off { background: #fbe9e9; color: #a33333; border: 1px solid #eec3c3; }
.badge.arh { background: #efe9e2; color: #6b625a; border: 1px solid #ddd2c5; }
button.btn-off { background: #fff; color: #a33333; border: 1px solid #e0a8a8; padding: 5px 12px; margin: 0; font-size: 13px; }
button.btn-off:hover { background: #fbe9e9; }
button.btn-on { background: #fff; color: #2e6b3f; border: 1px solid #a8cfb3; padding: 5px 12px; margin: 0; font-size: 13px; }
button.btn-on:hover { background: #e2f2e6; }

.st-выполнено { color: #3d7a4f; }
.st-частично { color: #b0722a; }
.st-провалено { color: #b03a3a; }
.st-неприменимо { color: #8d8378; }

.errors { border-color: #e6b8b8; background: #fdf6f6; }
.err-note { color: #b03a3a; font-size: 12px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
blockquote { border-left: 3px solid #c4707f; padding: 4px 12px; color: #5c5248;
  font-style: italic; margin-top: 8px; }
pre.md { white-space: pre-wrap; font: 13px/1.5 "Segoe UI", sans-serif; }

form label { display: block; margin: 10px 0; color: #4d4238; }
input, select { padding: 8px 10px; border: 1px solid #d8cfc5; border-radius: 8px;
  font: inherit; background: #fff; width: 100%; max-width: 420px; }
button { padding: 9px 22px; background: #8a4a5e; color: #fff; border: none;
  border-radius: 8px; font: inherit; cursor: pointer; margin-top: 6px; }
button:hover { background: #7a3f52; }
button.ghost { background: #fff; color: #8a4a5e; border: 1px solid #d8b7c0;
  padding: 5px 12px; margin: 0; font-size: 13px; }
button.ghost:hover { background: #f9f2f4; }
.inline-form { margin: 10px 0; }
.inline-form label { display: inline-block; margin-right: 10px; }
.inline-form input { width: auto; }
.row-form { display: flex; gap: 6px; }
.row-form input { max-width: 220px; padding: 5px 8px; }

.login-box { max-width: 360px; margin: 10vh auto; background: #fff;
  border: 1px solid #e8e1da; border-radius: 12px; padding: 32px; text-align: center; }
.login-box h1 { color: #8a4a5e; }
.login-box form { text-align: left; margin-top: 16px; }
.login-box button { width: 100%; }