:root { --bg:#f7f7f5; --fg:#1d1f21; --muted:#5f6368; --card:#fff; --line:#e3e3e0; --accent:#1f5f8b; --red:#b3261e; --amber:#8a5a00; }
@media (prefers-color-scheme: dark) { :root { --bg:#151617; --fg:#ececea; --muted:#a8aaad; --card:#1f2123; --line:#33363a; --accent:#7fb6dd; --red:#ff8a80; --amber:#ffd27a; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.banner { background:var(--red); color:#fff; padding:10px 16px; font-size:15px; }
.banner.stale { background:#7a1a14; }
nav { display:flex; flex-wrap:wrap; gap:4px 16px; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); }
nav a { color:var(--accent); text-decoration:none; font-weight:600; }
nav a.out { margin-left:auto; color:var(--muted); font-weight:400; }
main { max-width:760px; margin:0 auto; padding:16px; }
h1 { font-size:22px; margin:8px 0 12px; }
h2 { font-size:17px; margin:20px 0 8px; }
a { color:var(--accent); }
form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0; }
form label { width:100%; font-weight:600; }
.filter label { width:auto; }
input, select { font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); min-width:0; flex:1 1 220px; }
button { font:inherit; font-weight:600; padding:10px 16px; border:0; border-radius:8px; background:var(--accent); color:#fff; }
.daynav { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; }
.count, .note, .when, footer { color:var(--muted); }
.error { color:var(--red); }
ul.visits, ul.threads, ul.chat { list-style:none; padding:0; margin:0; }
ul.visits li, ul.threads li { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:8px; }
ul.threads a { text-decoration:none; color:var(--fg); display:block; }
.time { font-weight:700; }
.who { font-size:17px; }
.where { color:var(--muted); overflow-wrap:anywhere; }
.phone a { font-size:18px; font-weight:700; }
.tag { font-size:12px; border:1px solid var(--line); border-radius:99px; padding:1px 8px; color:var(--muted); vertical-align:middle; }
.tag.status { color:var(--amber); }
.preview { color:var(--muted); }
ul.chat li { max-width:85%; margin:8px 0; padding:10px 12px; border-radius:12px; background:var(--card); border:1px solid var(--line); white-space:pre-wrap; overflow-wrap:anywhere; }
ul.chat li.mine { margin-left:auto; background:color-mix(in srgb, var(--accent) 14%, var(--card)); }
ul.chat .when { font-size:12px; margin-top:4px; }
footer { max-width:760px; margin:24px auto; padding:0 16px 24px; font-size:14px; }