*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --tg-bg: var(--tg-theme-bg-color, #ffffff);
  --tg-text: var(--tg-theme-text-color, #000000);
  --tg-hint: var(--tg-theme-hint-color, #707579);
  --tg-link: var(--tg-theme-link-color, #2AABEE);
  --tg-btn: var(--tg-theme-button-color, #2AABEE);
  --tg-btn-text: var(--tg-theme-button-text-color, #ffffff);
  --tg-secondary-bg: var(--tg-theme-secondary-bg-color, #f4f4f5);
  --border: rgba(0,0,0,0.08);
  --radius: 12px;
  --radius-sm: 8px;
  --green: #1D9E75;
  --red: #E24B4A;
  --purple: #534AB7;
  --blue: #2AABEE;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--tg-secondary-bg);
  color: var(--tg-text);
  min-height: 100vh;
  padding-bottom: 70px;
  font-size: 14px;
  line-height: 1.5;
}

/* ── Header ─────────────────────────────────────────────── */
.header {
  background: var(--tg-bg);
  padding: 12px 16px 10px;
  border-bottom: 0.5px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-content { display: flex; align-items: center; justify-content: space-between; }
.header-logo { display: flex; align-items: center; gap: 8px; }
.logo-icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--blue); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px;
}
.logo-text { font-size: 15px; font-weight: 600; color: var(--tg-text); }
.header-badge {
  font-size: 10px; font-weight: 600; padding: 3px 8px;
  border-radius: 6px; background: #EEEDFE; color: var(--purple);
}
.header-badge.free { background: var(--tg-secondary-bg); color: var(--tg-hint); }

/* ── Main ────────────────────────────────────────────────── */
.main { padding: 12px 16px; }
.page { display: none; }
.page.active { display: block; }

/* ── Stats ───────────────────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.stat-card {
  background: var(--tg-bg); border-radius: var(--radius);
  padding: 14px; border: 0.5px solid var(--border);
}
.stat-card.urgent .stat-number { color: var(--red); }
.stat-number { font-size: 28px; font-weight: 600; color: var(--tg-text); }
.stat-label { font-size: 11px; color: var(--tg-hint); margin-top: 2px; }

/* ── Section ─────────────────────────────────────────────── */
.section { margin-bottom: 16px; }
.section-title {
  font-size: 12px; font-weight: 600; color: var(--tg-hint);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* ── Announcement card ───────────────────────────────────── */
.announce-card {
  background: var(--tg-bg); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 8px;
  border: 0.5px solid var(--border);
  cursor: pointer; transition: opacity 0.15s;
}
.announce-card:active { opacity: 0.7; }
.announce-title {
  font-size: 13px; font-weight: 500; color: var(--tg-text);
  line-height: 1.4; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.announce-row { display: flex; align-items: center; justify-content: space-between; }
.announce-sum { font-size: 13px; font-weight: 600; color: var(--green); }
.announce-timer { font-size: 11px; color: var(--tg-hint); }
.announce-timer.urgent { color: var(--red); font-weight: 600; }
.announce-org { font-size: 11px; color: var(--tg-hint); margin-top: 3px; }

/* ── Empty state ─────────────────────────────────────────── */
.empty-state { text-align: center; padding: 40px 20px; }
.empty-icon { font-size: 40px; margin-bottom: 10px; }
.empty-text { font-size: 14px; color: var(--tg-hint); }

/* ── Search ──────────────────────────────────────────────── */
.search-box { margin-bottom: 12px; }
.search-box input {
  width: 100%; padding: 10px 14px; border-radius: var(--radius);
  border: 0.5px solid var(--border); background: var(--tg-bg);
  font-size: 14px; color: var(--tg-text); outline: none;
}
.search-box input:focus { border-color: var(--blue); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
  display: block; width: 100%; padding: 13px;
  background: var(--tg-btn); color: var(--tg-btn-text);
  border: none; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: opacity 0.15s; text-align: center;
}
.btn-primary:active { opacity: 0.8; }

/* ── Lawyer page ─────────────────────────────────────────── */
.lawyer-hero { text-align: center; padding: 24px 0 20px; }
.lawyer-icon { font-size: 48px; margin-bottom: 10px; }
.lawyer-title { font-size: 18px; font-weight: 600; color: var(--tg-text); }
.lawyer-subtitle { font-size: 13px; color: var(--tg-hint); margin-top: 4px; }
.lawyer-features { margin: 16px 0; }
.feature-item {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--tg-bg); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 8px;
  border: 0.5px solid var(--border);
}
.feature-icon { font-size: 20px; flex-shrink: 0; }
.feature-title { font-size: 13px; font-weight: 500; color: var(--tg-text); }
.feature-desc { font-size: 11px; color: var(--tg-hint); margin-top: 2px; }

/* ── Profile ─────────────────────────────────────────────── */
.profile-hero { text-align: center; padding: 20px 0 16px; }
.avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: #EEEDFE; color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 600; margin: 0 auto 10px;
}
.profile-name { font-size: 17px; font-weight: 600; color: var(--tg-text); }
.profile-username { font-size: 13px; color: var(--tg-hint); margin-top: 2px; }

.plan-card {
  background: var(--tg-bg); border-radius: var(--radius);
  padding: 14px; margin-bottom: 16px;
  border: 1.5px solid var(--purple);
}
.plan-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.plan-name { font-size: 14px; font-weight: 600; color: var(--tg-text); }
.plan-price { font-size: 14px; font-weight: 600; color: var(--blue); }
.plan-features { display: flex; flex-direction: column; gap: 4px; }
.plan-feature-item { font-size: 12px; color: var(--tg-hint); display: flex; gap: 6px; }
.plan-feature-item .check { color: var(--green); }
.plan-until { font-size: 11px; color: var(--tg-hint); margin-top: 8px; }

.tariff-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.tariff-card {
  background: var(--tg-bg); border-radius: var(--radius);
  padding: 14px 12px; border: 0.5px solid var(--border);
  cursor: pointer; position: relative; transition: border-color 0.15s;
}
.tariff-card.featured { border-color: var(--purple); }
.tariff-card:active { opacity: 0.8; }
.tariff-badge {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--purple); color: white;
  font-size: 9px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
}
.tariff-name { font-size: 14px; font-weight: 600; color: var(--tg-text); margin-bottom: 2px; }
.tariff-price { font-size: 18px; font-weight: 700; color: var(--blue); }
.tariff-period { font-size: 10px; color: var(--tg-hint); margin-bottom: 8px; }
.tariff-features { display: flex; flex-direction: column; gap: 3px; }
.tf { font-size: 11px; color: var(--tg-hint); }

.upgrade-section { margin-bottom: 16px; }

.menu-list { background: var(--tg-bg); border-radius: var(--radius); overflow: hidden; border: 0.5px solid var(--border); }
.menu-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; border-bottom: 0.5px solid var(--border);
  cursor: pointer; transition: background 0.1s;
}
.menu-item:last-child { border-bottom: none; }
.menu-item:active { background: var(--tg-secondary-bg); }
.menu-left { display: flex; align-items: center; gap: 10px; }
.menu-icon {
  width: 30px; height: 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.menu-text { font-size: 14px; color: var(--tg-text); }
.menu-arrow { font-size: 18px; color: var(--tg-hint); }

/* ── Bottom nav ──────────────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; background: var(--tg-bg);
  border-top: 0.5px solid var(--border);
  padding: 6px 0 max(8px, env(safe-area-inset-bottom));
  z-index: 100;
}
.nav-item {
  flex: 1; text-align: center; padding: 4px 0;
  cursor: pointer; transition: opacity 0.15s;
}
.nav-item:active { opacity: 0.6; }
.nav-icon { font-size: 20px; color: var(--tg-hint); }
.nav-label { font-size: 10px; color: var(--tg-hint); margin-top: 2px; }
.nav-item.active .nav-icon,
.nav-item.active .nav-label { color: var(--blue); }