:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --bg2: var(--tg-theme-secondary-bg-color, #f2f3f5);
  --text: var(--tg-theme-text-color, #1b1f24);
  --hint: var(--tg-theme-hint-color, #7a8189);
  --link: var(--tg-theme-link-color, #1f6feb);
  --btn: var(--tg-theme-button-color, #2481cc);
  --btntext: var(--tg-theme-button-text-color, #ffffff);
  --line: color-mix(in srgb, var(--hint) 25%, transparent);
  --red: #d64545; --green: #2e9d5b; --amber: #c98a00;
  --r: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg2); color: var(--text); font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
a { color: var(--link); text-decoration: none; }
button, select, input, textarea { font: inherit; color: inherit; }
.top { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 8px 10px 6px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 5px 11px; font-size: 14px; white-space: nowrap; }
.tab.on { background: var(--btn); color: var(--btntext); border-color: var(--btn); }
.tab .n { opacity: .75; margin-left: 4px; font-size: 12px; }
.searchrow { display: flex; gap: 6px; }
.searchrow input { flex: 1; border: 1px solid var(--line); background: var(--bg2); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.iconbtn { border: 1px solid var(--line); background: var(--bg2); border-radius: 10px; width: 40px; }
.filters[hidden] { display: none; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.filters select { border: 1px solid var(--line); background: var(--bg2); border-radius: 10px; padding: 7px; min-width: 0; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 14px; }
main { padding: 8px 8px 80px; }
.bottom { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
.bottom a { flex: 1; text-align: center; padding: 10px 0; color: var(--hint); font-size: 14px; }
.bottom a.on { color: var(--btn); font-weight: 600; }
.card { background: var(--bg); border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; }
.item { display: block; color: inherit; position: relative; }
.item .meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--hint); }
.item .title { font-weight: 600; margin: 3px 0 2px; word-break: break-word; }
.item .who { font-size: 13px; color: var(--hint); }
.item .prev { font-size: 14px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.item.unread::before { content: ""; position: absolute; left: 4px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--btn); }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.b { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--bg2); color: var(--hint); }
.b.new { background: #fff3cd; color: #7a5a00; } .b.in_work { background: #dff3e6; color: #1e6b3d; } .b.offer { background: #e3eefc; color: #1d4f8f; }
.b.won { background: #e8f6d8; color: #3c6d0f; } .b.lost, .b.closed { background: var(--bg2); color: var(--hint); }
.b.spam { background: #fde2e2; color: #9b2c2c; } .b.warn { background: #fff0d6; color: #8a5a00; }
.empty { text-align: center; color: var(--hint); padding: 40px 10px; }
.more { width: 100%; padding: 10px; border: 0; background: var(--bg); border-radius: var(--r); color: var(--link); }
h2 { font-size: 18px; margin: 4px 0 6px; word-break: break-word; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--hint); margin: 14px 4px 6px; font-weight: 600; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 14px; }
.kv .k { color: var(--hint); }
.kv .v { word-break: break-word; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 5px 10px; font-size: 13px; }
.chip.on { background: var(--btn); color: var(--btntext); border-color: var(--btn); }
.btn { border: 0; border-radius: 10px; padding: 10px 14px; background: var(--btn); color: var(--btntext); font-weight: 600; }
.btn.ghost { background: var(--bg); color: var(--text); font-weight: 500; border: 1px solid var(--line); }
.card .btn.ghost { background: var(--bg2); }
.btn.danger { background: #fde2e2; color: #9b2c2c; }
.btn[disabled] { opacity: .55; }
.msg { border-radius: var(--r); padding: 9px 11px; margin-bottom: 8px; background: var(--bg); max-width: 100%; }
.msg.out { background: color-mix(in srgb, var(--btn) 12%, var(--bg)); margin-left: 18px; }
.msg.in { margin-right: 18px; }
.msg .h { font-size: 12px; color: var(--hint); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.msg .s { font-weight: 600; font-size: 14px; margin: 3px 0; word-break: break-word; }
.msg .t { white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.msg .t.cut { max-height: 260px; overflow: hidden; position: relative; }
.msg .t.cut::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, var(--bg)); }
.msg.out .t.cut::after { background: linear-gradient(transparent, color-mix(in srgb, var(--btn) 12%, var(--bg))); }
.files { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: 13px; }
.linkbtn { border: 0; background: none; color: var(--link); padding: 4px 0; font-size: 13px; }
textarea, .field input, .field select { width: 100%; border: 1px solid var(--line); background: var(--bg2); border-radius: 10px; padding: 9px 10px; }
textarea { min-height: 140px; resize: vertical; }
.field { margin-bottom: 8px; }
.field label { display: block; font-size: 13px; color: var(--hint); margin-bottom: 3px; }
.note { font-size: 13px; color: var(--hint); }
.err { color: var(--red); font-size: 14px; }
.ok { color: var(--green); }
#toast { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); background: rgba(20, 22, 26, .92); color: #fff; padding: 9px 14px; border-radius: 10px; font-size: 14px; z-index: 20; max-width: 90vw; }
table.stats { width: 100%; border-collapse: collapse; font-size: 13px; }
table.stats td, table.stats th { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--line); }
table.stats td:first-child, table.stats th:first-child { text-align: left; }
.hidden { display: none !important; }