@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

:root {
  --brand:        #7b1d25;
  --brand-dark:   #561217;
  --brand-light:  #9e2530;
  --brand-pale:   #fdf5f5;
  --brand-mid:    #f0d9da;
  --accent:       #6ab12f;
  --accent-dark:  #508a22;
  --accent-pale:  #f2fae8;
  --ink:          #18181b;
  --ink-2:        #3f3f46;
  --muted:        #71717a;
  --muted-light:  #a1a1aa;
  --bg:           #f8f7f5;
  --bg-2:         #f2f0ed;
  --card:         #ffffff;
  --border:       #e4e2de;
  --border-2:     #d4d2ce;
  --danger:       #dc2626;
  --danger-pale:  #fef2f2;
  --ok:           #16a34a;
  --ok-pale:      #f0fdf4;
  --warning:      #d97706;
  --warning-pale: #fffbeb;
  --blue:         #2563eb;
  --blue-pale:    #eff6ff;
  --tabs-bg:      var(--brand);
  --wrap:         1100px;
  --radius:       12px;
  --radius-lg:    18px;
  --radius-sm:    8px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:       0 4px 16px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  --shadow-lg:    0 12px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
  --tap:          44px;
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:15.5px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
.muted { color:var(--muted); }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 20px; }
.page { max-width:var(--wrap); margin:20px auto; padding:0 20px; }

h1,h2,h3 { font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; line-height:1.2; margin:0; }
h1 { font-size:24px; }
h2 { font-size:20px; }

.btn { appearance:none; border:0; border-radius:var(--radius-sm); padding:9px 16px; font-family:var(--font-body); font-size:14px; font-weight:500; cursor:pointer; min-height:var(--tap); display:inline-flex; align-items:center; gap:7px; transition:background .15s,box-shadow .15s,transform .1s; text-decoration:none; white-space:nowrap; }
.btn:hover { text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn.primary { background:var(--brand); color:#fff; box-shadow:0 1px 3px rgba(123,29,37,.25); }
.btn.primary:hover { background:var(--brand-dark); box-shadow:0 3px 10px rgba(123,29,37,.30); }
.btn.secondary { background:var(--bg-2); color:var(--ink-2); border:1px solid var(--border); }
.btn.secondary:hover { background:var(--border); }
.btn.ghost { background:transparent; color:var(--ink-2); border:1px solid var(--border); }
.btn.ghost:hover { background:var(--bg-2); }
.btn.danger { background:var(--danger); color:#fff; }
.btn.danger:hover { background:#b91c1c; }
.topbar a.btn,.topbar button.btn { background:var(--bg-2); color:var(--ink-2); border:1px solid var(--border); padding:7px 14px; font-size:13.5px; min-height:36px; border-radius:var(--radius-sm); }
.topbar a.btn:hover,.topbar button.btn:hover { background:var(--border); text-decoration:none; }

.input { border:1.5px solid var(--border-2); border-radius:var(--radius-sm); padding:10px 13px; background:#fff; width:100%; min-height:var(--tap); font-family:var(--font-body); font-size:15px; color:var(--ink); transition:border-color .15s,box-shadow .15s; }
.input:focus { outline:none; border-color:var(--brand-light); box-shadow:0 0 0 3px rgba(123,29,37,.10); }
.input::placeholder { color:var(--muted-light); }
label { display:grid; gap:5px; font-size:13.5px; font-weight:500; color:var(--muted); }

.card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.card.pad { padding:20px; }
section.card { border-radius:var(--radius-lg); box-shadow:var(--shadow); background:#fff; overflow:hidden; }
section.card h2 { font-size:18px; }

section.card table { width:100%; border-collapse:collapse; font-size:14px; color:var(--ink-2); }
section.card thead th { text-align:left; padding:11px 16px; background:var(--bg); color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--border); }
section.card tbody td { padding:13px 16px; border-bottom:1px solid var(--bg-2); background:#fff; vertical-align:middle; }
section.card tbody tr:last-child td { border-bottom:none; }
section.card tbody tr:hover td { background:var(--brand-pale); transition:background .1s; }

.amount { font-weight:600; font-variant-numeric:tabular-nums; }
.amount.unpaid { color:var(--danger); }
.amount.partial { color:var(--warning); }
.substatus { font-size:12.5px; color:var(--muted); margin-top:1px; }
a.pdf { display:inline-flex; align-items:center; gap:4px; padding:5px 11px; border-radius:var(--radius-sm); border:1px solid var(--border); color:var(--ink-2); font-size:13px; transition:background .12s,border-color .12s; }
a.pdf:hover { background:var(--brand-pale); border-color:var(--brand-mid); text-decoration:none; }

.alert { border:1px solid #fca5a5; background:var(--danger-pale); color:#991b1b; border-radius:var(--radius); padding:11px 15px; font-size:14px; display:flex; gap:8px; align-items:flex-start; }
.alert.ok { background:var(--ok-pale); border-color:#86efac; color:#166534; }
.alert.warn { background:var(--warning-pale); border-color:#fcd34d; color:#92400e; }

.topbar { background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; }
.topbar .brand { font-family:var(--font-display); font-weight:600; font-size:17px; display:flex; align-items:center; gap:10px; height:56px; color:var(--ink); letter-spacing:-.01em; }
.topbar .brand .dot { width:9px; height:9px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px var(--brand-mid); }

.resident-switcher { display:inline-block; position:relative; }
.resident-switcher summary { list-style:none; outline:0; appearance:none; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:7px 13px; font-family:var(--font-body); font-weight:500; font-size:14px; cursor:pointer; background:#fff; display:inline-flex; gap:8px; align-items:center; transition:border-color .15s,box-shadow .15s; color:var(--ink-2); }
.resident-switcher summary:hover { border-color:var(--brand-mid); box-shadow:0 0 0 3px rgba(123,29,37,.07); }
.resident-switcher[open] summary { border-color:var(--brand-light); box-shadow:0 0 0 3px rgba(123,29,37,.10); }
.resident-switcher .menu { position:absolute; right:0; left:auto; top:calc(100% + 6px); background:#fff; border:1px solid var(--border); border-radius:var(--radius); min-width:290px; max-width:480px; box-shadow:var(--shadow-lg); z-index:1000; max-height:60vh; overflow:auto; animation:menuIn .15s ease; }
@keyframes menuIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.resident-switcher .menu form button { width:100%; text-align:left; padding:10px 14px; border:0; background:transparent; cursor:pointer; font-family:var(--font-body); font-size:14px; color:var(--ink-2); transition:background .1s; }
.resident-switcher .menu form button:hover { background:var(--brand-pale); }

.tabs { background:var(--brand); border-bottom:none; position:sticky; top:56px; z-index:40; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.tabs .wrap { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; gap:4px; overflow:auto; align-items:stretch; scrollbar-width:none; }
.tabs .wrap::-webkit-scrollbar { display:none; }
.tabs .tab { color:rgba(255,255,255,.75); padding:14px 20px; font-size:16px; font-weight:500; display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; text-decoration:none; position:relative; transition:color .2s, background .2s; letter-spacing:.01em; border-radius:8px 8px 0 0; }
.tabs .tab:hover { color:#fff; text-decoration:none; background:rgba(255,255,255,.10); }
.tabs .tab.active { color:var(--brand); font-weight:700; background:var(--bg); box-shadow:0 -3px 8px rgba(0,0,0,.12), -3px 0 8px rgba(0,0,0,.08), 3px 0 8px rgba(0,0,0,.08); position:relative; z-index:2; margin-bottom:-1px; padding-bottom:15px; }
.tabs .tab.active:hover { background:var(--bg); color:var(--brand); }
.tabs .badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; padding:0 6px; height:18px; border-radius:999px; font-size:11.5px; font-weight:600; background:rgba(255,255,255,.2); color:#fff; border:0; }
.tabs .tab.active .badge { background:rgba(255,255,255,.35); }

.login-hero { min-height:100svh; display:grid; place-items:center; position:relative; overflow:hidden; }
.login-hero::before { content:""; position:absolute; inset:0; background:url('/static/img/m5-building.jpg') center/cover no-repeat; filter:brightness(.55) saturate(.9); }
.login-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(123,29,37,.35) 0%,rgba(0,0,0,.15) 100%); }
.login-card { position:relative; z-index:1; width:min(440px,92%); padding:24px; }
.login-card .brandmark { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:16px; font-family:var(--font-display); font-weight:600; font-size:20px; color:#fff; letter-spacing:-.02em; }
.login-card .brandmark img { height:44px; width:auto; }
.login-card .panel { background:rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.6); border-radius:var(--radius-lg); padding:24px; backdrop-filter:blur(12px); box-shadow:0 24px 64px rgba(0,0,0,.22); }
.login-card .panel h2 { font-size:20px; margin-bottom:18px; color:var(--ink); }
.help { font-size:13px; color:rgba(255,255,255,.8); margin-top:12px; }

.prev-box { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:14px; }
.prev-box table thead th,.prev-box table tbody td { padding:6px 8px; }

.mobi-list { display:grid; gap:12px; padding:0; }
.mobi-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:15px; }

section.card.invoices .inv-summary { display:flex; align-items:center; justify-content:flex-end; padding:13px 18px; border-bottom:1px solid var(--bg-2); background:var(--bg); }
section.card.invoices .inv-table-wrap { overflow:auto; }
section.card.invoices table { width:100%; border-collapse:collapse; table-layout:fixed; }
section.card.invoices col.c-no     { width:26%; }
section.card.invoices col.c-period { width:19%; }
section.card.invoices col.c-due    { width:19%; }
section.card.invoices col.c-amount { width:23%; }
section.card.invoices col.c-pdf    { width:13%; }
section.card.invoices thead th { background:var(--bg); color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-size:12.5px; font-weight:600; padding:14px 22px; border-bottom:1px solid var(--border); text-align:center; }
section.card.invoices th:first-child,section.card.invoices td:first-child { text-align:left; padding-left:26px; }
section.card.invoices tbody td { padding:18px 22px; font-size:15px; border-bottom:1px solid var(--bg-2); text-align:center; vertical-align:middle; background:#fff; }
section.card.invoices tbody tr:last-child td { border-bottom:none; }
section.card.invoices tbody tr:hover td { background:var(--brand-pale); }
section.card.invoices td:last-child a { display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); text-decoration:none; color:var(--ink-2); font-size:13px; transition:background .12s,border-color .12s; }
section.card.invoices td:last-child a:hover { background:var(--brand-pale); border-color:var(--brand-mid); }

section.card.meters .actions { display:flex; justify-content:flex-end; gap:10px; margin:20px 0 4px; }

#drawer { position:fixed; inset:0; display:none; z-index:1000; }
#drawer.open { display:block; }
#drawer .backdrop { position:absolute; inset:0; background:rgba(0,0,0,.3); backdrop-filter:blur(2px); }
#drawer .panel { position:absolute; right:0; top:0; height:100%; width:min(84vw,320px); background:var(--brand); color:#fff; padding:22px 20px; display:flex; flex-direction:column; gap:4px; box-shadow:-8px 0 32px rgba(0,0,0,.18); animation:drawerIn .22s ease; }
@keyframes drawerIn { from{transform:translateX(100%)} to{transform:translateX(0)} }
#drawer a { color:rgba(255,255,255,.85); text-decoration:none; font-weight:500; font-size:16px; padding:11px 12px; border-radius:var(--radius-sm); display:flex; align-items:center; gap:10px; transition:background .12s,color .12s; }
#drawer a:hover { background:rgba(255,255,255,.12); color:#fff; }
#drawer .badge { display:inline-flex; min-width:22px; padding:2px 7px; border-radius:999px; background:rgba(255,255,255,.2); font-size:12px; font-weight:600; }
.btn.icon { background:#fff; border:1.5px solid var(--border); border-radius:var(--radius-sm); min-height:40px; padding:8px 12px; font-size:18px; line-height:1; }
.btn.icon:hover { background:var(--bg-2); border-color:var(--border-2); }

.safe-bottom { padding-bottom:env(safe-area-inset-bottom); }
.pill { display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.02em; }
.pill.unpaid  { background:var(--danger-pale); color:var(--danger); }
.pill.paid    { background:var(--ok-pale); color:var(--ok); }
.pill.partial { background:var(--warning-pale); color:var(--warning); }

@media (max-width:720px) {
  table.rwd { display:block; }
  table.rwd thead { display:none; }
  table.rwd tbody { display:grid; gap:12px; }
  table.rwd tr { display:grid; gap:6px; padding:13px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-sm); }
  table.rwd td { display:flex; justify-content:space-between; gap:12px; border:none; padding:0; font-size:14px; }
  table.rwd td::before { content:attr(data-label); color:var(--muted); font-size:13px; flex-shrink:0; }
  .resident-switcher .menu { left:0; right:auto; max-width:min(92vw,420px); }
  .tabs { top:56px; }
}
@media (max-width:480px) {
  html { font-size:15px; }
  .card.pad { padding:15px; }
  .wrap,.page { padding:0 14px; }
}

/* Мигание вкладки с непрочитанными */
@keyframes tab-blink {
  0%, 100% { background:transparent; }
  50% { background:rgba(255,255,255,0.15); }
}
.tabs .tab.has-unread {
  animation: tab-blink 1.2s ease-in-out infinite;
  border-radius:6px;
}
.tabs .tab.has-unread .tab-badge {
  background:#e11d48;
  color:#fff;
  padding:2px 7px;
  border-radius:10px;
  font-size:11px;
  font-weight:700;
  margin-left:6px;
  animation: tab-blink 1.2s ease-in-out infinite reverse;
}