:root { --brand: #714B67; --brand-d: #5a3a52; --teal: #017E84; --bg: #F6F4F8; --card: #fff; --ink: #2b2f36; --mut: #6b7280; --line: #e6e1ea;
  --red: #b91c1c; --amber: #b45309; --green: #15803d; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 15px "Segoe UI", Tahoma, sans-serif; background: var(--bg); color: var(--ink); }
[hidden] { display: none !important; }
a { color: var(--teal); }
.btn { font: inherit; font-weight: 700; padding: 10px 18px; border-radius: 12px; border: 0; background: var(--brand); color: #fff; cursor: pointer; }
.btn.sec { background: #eee; color: var(--ink); }
.btn.red { background: #fee2e2; color: var(--red); }
.btn.sm { padding: 6px 12px; font-size: 13px; border-radius: 10px; }
input, textarea, select { font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
textarea { resize: vertical; }
.err { color: var(--red); background: #fee2e2; padding: 9px 12px; border-radius: 10px; margin-top: 10px; }
.mut { color: var(--mut); font-size: 13px; }

.login { min-height: 100%; display: grid; place-items: center; background: linear-gradient(160deg, var(--brand), var(--brand-d) 60%, var(--teal)); padding: 16px; }
.lgbox { background: #fff; border-radius: 20px; padding: 28px; width: min(360px, 100%); text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.lglogo { height: 54px; background: var(--brand); border-radius: 14px; padding: 8px 14px; }
.lgbox h1 { margin: 12px 0 2px; font-size: 22px; } .lgbox p { margin: 0 0 16px; color: var(--mut); }
.lgbox input { margin-bottom: 12px; text-align: center; } .lgbox .btn { width: 100%; }

.top { position: sticky; top: 0; z-index: 5; background: var(--brand); color: #fff; display: flex; align-items: center; gap: 10px; padding: 8px 14px; flex-wrap: wrap;
  border-bottom: 4px solid var(--teal); }
.tlogo { height: 30px; }
.tabs { display: flex; gap: 4px; margin-inline-start: auto; flex-wrap: wrap; }
.tabs a { color: #fff; text-decoration: none; padding: 7px 12px; border-radius: 10px; font-weight: 600; position: relative; }
.tabs a.on { background: rgba(255,255,255,.18); }
.tabs i { font-style: normal; background: #ef4444; color: #fff; border-radius: 10px; padding: 0 6px; font-size: 12px; margin-inline-start: 4px; }
main { max-width: 1200px; margin: 0 auto; padding: 14px; }

.card { background: var(--card); border-radius: 16px; padding: 16px; box-shadow: 0 6px 20px rgba(60,30,60,.07); margin-bottom: 14px; }
.card h3 { margin: 0 0 10px; font-size: 17px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat { background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 4px 14px rgba(60,30,60,.06); cursor: pointer; border: 2px solid transparent; }
.stat.on { border-color: var(--brand); }
.stat b { display: block; font-size: 22px; } .stat span { color: var(--mut); font-size: 13px; }
.bar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; } .bar input { max-width: 320px; }

.list { display: flex; flex-direction: column; gap: 8px; }
.li { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 14px; padding: 12px 14px; text-decoration: none; color: inherit;
  box-shadow: 0 3px 12px rgba(60,30,60,.06); }
.li:hover { background: #fbf8fc; }
.av { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; position: relative; }
.av.on::after { content: ""; position: absolute; bottom: 1px; left: 1px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.li .mid { flex: 1; min-width: 0; } .li .mid b { display: block; } .li .mid span { color: var(--mut); font-size: 13px; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.li .end { text-align: left; font-size: 12px; color: var(--mut); } .li .end i { display: inline-block; font-style: normal; background: #ef4444; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; margin-top: 4px; }

.tbl { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.tbl th, .tbl td { padding: 8px 9px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
.tbl th { background: #f7f0f5; position: sticky; top: 0; white-space: nowrap; }
.tbl tr.click { cursor: pointer; } .tbl tr.click:hover td { background: #fbf8fc; }
.scroll { overflow: auto; max-height: calc(100vh - 230px); border-radius: 12px; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 700; background: #eef; white-space: nowrap; }
.pill.ok { background: #dcfce7; color: var(--green); } .pill.warn { background: #fef3c7; color: var(--amber); } .pill.bad { background: #fee2e2; color: var(--red); }
.pill.trial { background: #e0f2fe; color: #075985; } .pill.mut { background: #eee; color: var(--mut); }

.cgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .cgrid { grid-template-columns: 1fr; } }
.chat { display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 420px; padding: 0; overflow: hidden; }
.chead { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.chead b { flex: 1; }
.msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #faf8fb; }
.m { max-width: 80%; padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.m.c { align-self: flex-start; background: #fff; border-start-start-radius: 4px; }
.m.v { align-self: flex-end; background: #ede4ec; border-start-end-radius: 4px; }
.m small { display: block; color: var(--mut); font-size: 11px; margin-top: 4px; }
.m img, .m video { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; margin-top: 4px; background: #000; }
.m .who { font-size: 12px; font-weight: 700; color: var(--teal); }
.day { align-self: center; font-size: 12px; color: var(--mut); background: #eee; padding: 2px 10px; border-radius: 10px; }
.send { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); align-items: flex-end; background: #fff; }
.send textarea { min-height: 44px; max-height: 160px; }
.send .ib { font-size: 20px; background: #f3eef2; border: 0; border-radius: 12px; width: 44px; height: 44px; cursor: pointer; flex: none; }
.attach { padding: 6px 12px; font-size: 13px; background: #fef3c7; display: flex; gap: 8px; align-items: center; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; } .kv span { color: var(--mut); }
.fld { display: block; margin-bottom: 10px; font-weight: 600; font-size: 14px; } .fld input, .fld textarea { margin-top: 4px; font-weight: 400; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.alerts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.code { font-family: Consolas, monospace; direction: ltr; user-select: all; background: #faf8fb; padding: 3px 8px; border-radius: 8px; border: 1px dashed var(--brand); word-break: break-all; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #1f2937; color: #fff; padding: 10px 18px; border-radius: 12px; z-index: 50; max-width: 90vw; }
.empty { text-align: center; color: var(--mut); padding: 40px 10px; }