:root {
  --ink: #26445c;
  --muted: #718da3;
  --line: #d7e7f2;
  --paper: #fafdff;
  --cream: #eaf6fd;
  --coral: #4ea8de;
}
body { background: linear-gradient(145deg,#e9f7ff,#f8fcff); }
.logo { font-size: 0; width: fit-content; }
.logo b { width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #58aee0; font-size: 22px; box-shadow: 0 8px 25px #528eb42d; }
.card { position: relative; }
.card::before { content: "✦"; position: absolute; top: 50px; right: 4px; color: #8dd1f2; font-size: 18px; }
.auth { background: #fafdff; }
.art { background: linear-gradient(150deg,#3997d3 0%,#75c6ed 55%,#bddff2 100%); }
.art::before { width: 420px; height: 180px; right: -90px; top: 12%; border-radius: 50%; background: #ffffff35; filter: blur(3px); }
.art::after { content: ""; position: absolute; width: 520px; height: 180px; left: -140px; bottom: 8%; border-radius: 50%; background: #ffffff29; }
.art > span { position: relative; z-index: 1; color: white; text-shadow: 0 3px 20px #226a9938; }
.art i { z-index: 2; background: #fff; color: #47748f; box-shadow: 0 12px 30px #286f9c2b; }
.art i:last-of-type { background: #e8f7ff; }
.primary,.composer button { background: #4ea8de; box-shadow: 0 8px 22px #398fbf30; }
.side,.admin > aside { background: linear-gradient(180deg,#397fa9,#326d91); }
.side > button,.side > small,.side > nav { display: none; }
.side .logo { margin-bottom: 0; }
.online-list { display: grid; gap: 8px; margin: 38px 2px 0; padding: 0 7px; }
.online-list > small { margin-bottom: 5px; color: #cdeafd; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.online-list > span { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px 4px; color: #eff9ff; }
.online-list .avatar { width: 30px; height: 30px; border-radius: 10px; font-size: 8px; }
.online-list b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.online-list em { margin-left: auto; color: #8fe0b4; font-size: 9px; font-style: normal; }
.admin > aside .online-list { margin-top: 0; margin-bottom: 25px; }
.side nav .active,.admin nav .active { background: #f2faff; color: #2d6689; }
.chat,.admin > section { background: #fafdff; }
.top { background: #fafdffee; }
.intro > b { background: #def1fb; color: #438eb8; }
.composer { border-color: #c9e1ef; box-shadow: 0 10px 32px #4f9ec71b; }
.avatar.peach { background: #ffd7c5; }.avatar.blue { background: #b8e2f6; }.avatar.purple { background: #d8d8f5; }.avatar.green { background: #c8e9df; }
.eyebrow,.actions a,.card a { color: #3d9bd1; }
.alert { background: #fff0eb; color: #a94e39; }