/* Стиль кабинета повторяет сайт клиента: Montserrat, зелёный акцент, светлые карточки со скруглением 20px. */
:root{
  --accent:#17c28f;--accent-hover:#12a77b;--accent-ink:#fff;--accent-soft:#e8f8f2;
  --ink:#191919;--title:#01193d;--muted:#707070;--line:#e5e5e5;--soft:#f7f7f7;--card:#fff;--bg:#fff;--info:#0aa7ff;
  --ok:#0f9a70;--ok-bg:#e8f8f2;--warn:#a86a00;--warn-bg:#fff4dc;--bad:#d63c3c;--bad-bg:#fdeeee;
  --radius:20px;--radius-sm:8px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:500 16px/1.45 Montserrat,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}
main.wrap{padding-top:16px}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}

/* Шапка */
.top{background:#fff}
.top-row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:72px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:16px;color:var(--title);font-weight:700;text-decoration:none}
.brand:hover{text-decoration:none}
.brand img{height:36px;width:auto;display:block}
.brand .tag{padding-left:16px;border-left:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:500;line-height:1.25;max-width:120px}
.top form{margin:0}
button.logout{width:auto;background:#fff;color:var(--ink);border:1px solid var(--accent);border-radius:10px;padding:10px 18px;font-weight:500;font-size:15px}
button.logout:hover{background:var(--accent-soft)}

/* Текст */
h1{font-size:28px;line-height:1.15;font-weight:700;color:var(--title);margin:28px 0 14px}
h1 .muted{font-weight:600}
h2{font-size:20px;line-height:1.2;font-weight:700;color:var(--title);margin:28px 0 12px}
p{margin:0 0 12px}
.muted{color:var(--muted)}.small{font-size:14px}

/* Карточки */
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:14px 0}
.card h1{margin-top:0}.card h2{margin-top:0}
.narrow{max-width:440px;margin:40px auto}
.card.next{border-color:var(--accent);background:var(--accent-soft)}
.card.overdue{border-color:var(--bad);background:var(--bad-bg)}
.card.overdue h2{color:var(--bad)}
.card.ok{border-color:var(--accent);background:var(--accent-soft)}
.link-card{color:inherit;display:flex;flex-direction:column;gap:6px;transition:border-color .15s}
.link-card:hover{text-decoration:none;border-color:var(--accent)}
.link-card strong{color:var(--title)}
.alert{background:var(--bad-bg);color:var(--bad);padding:12px 14px;border-radius:var(--radius-sm)}

/* Формы и кнопки */
.stack{display:flex;flex-direction:column;gap:8px}
label{font-size:14px;color:var(--muted)}
input{font:inherit;font-weight:500;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);outline:none}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
button{font:inherit;font-weight:600;font-size:17px;padding:16px 20px;border:0;border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-ink);cursor:pointer;width:100%;margin-top:6px}
button:hover{background:var(--accent-hover)}
button.secondary{background:#fff;color:var(--accent);border:1px solid var(--accent)}
button.secondary:hover{background:var(--accent-soft)}
button.link{background:none;color:var(--accent);padding:0;width:auto;font-weight:500;margin:0}

/* Сводка по договору */
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.summary div{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:4px}
.summary span{font-size:13px;color:var(--muted)}.summary b{font-size:17px;color:var(--title);font-weight:700}

/* График платежей */
.schedule{list-style:none;padding:0;margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.row{display:grid;grid-template-columns:28px 1fr auto;grid-template-areas:"n d a" "n b b";gap:4px 10px;padding:14px 18px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .n{grid-area:n;color:var(--muted)}.row .d{grid-area:d}
.row .a{grid-area:a;text-align:right;font-weight:700;color:var(--title)}
.row .a small{display:block;font-weight:500;color:var(--muted)}
.row .badge{grid-area:b;justify-self:start}
.row.paid .a,.row.paid .d{color:var(--muted)}
.badge{font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--soft);color:var(--muted)}
.badge.paid{background:var(--ok-bg);color:var(--ok)}
.badge.overdue{background:var(--bad-bg);color:var(--bad)}
.badge.partial{background:var(--warn-bg);color:var(--warn)}
details summary{cursor:pointer;font-weight:600;color:var(--title)}
details[open] summary{margin-bottom:12px}

/* Подвал */
.foot{padding:28px 16px 44px;font-size:14px;color:var(--muted);border-top:1px solid var(--line);margin-top:32px}
.foot p{margin:0 0 6px}

@media (min-width:560px){
  .row{grid-template-columns:28px 1fr 1fr auto;grid-template-areas:"n d a b"}
  .row .badge{justify-self:end}
}
@media (max-width:480px){
  .brand .tag{display:none}
  .brand img{height:30px}
  h1{font-size:24px}
  .summary{gap:6px}.summary div{padding:10px}.summary b{font-size:15px}
}