/* pixie-pages.css (2026-10-22): the Telegram and Discord pages, cut down to what is real. Same tokens as tc.css,
   smaller type than the homepage. */
.pp { max-width: 760px; margin: 0 auto; padding: 22px 16px 60px; }
.pp h1 { font-size: clamp(26px, 6vw, 34px); margin: 6px 0 4px; }
.pp .sub { color: var(--ink2); font-size: 16px; margin: 0 0 14px; }
.pp h2 { font-size: 19px; margin: 26px 0 10px; display: flex; align-items: center; gap: 10px; }
.pp h2 small { color: var(--mute); font-weight: 600; font-size: 14px; }
.pp .pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13px; background: var(--card); border: 1px solid var(--card-b); color: var(--mute); }
.pp .pill.ok { background: #e7f8ee; border-color: #b7e6c8; color: #15803d; } :root[data-theme="dark"] .pp .pill.ok { background: #0f2b1b; border-color: #1f5135; color: #4ade80; }
.pp .pill.live { background: #f3e8ff; border-color: #e0c8ff; color: #7c3aed; } :root[data-theme="dark"] .pp .pill.live { background: #2a1748; border-color: #4a2a7a; color: #c4a1ff; }
.pp .pill.ok::before, .pp .pill.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pp .list { background: var(--card); border: 1px solid var(--card-b); border-radius: 20px; overflow: hidden; }
.pp .row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 16px; color: var(--ink); border-top: 1px solid var(--line); }
.pp .row:first-child { border-top: 0; }
.pp .row b { font-size: 16px; font-weight: 600; } .pp .row small { color: var(--mute); font-size: 13px; grid-column: 1; }
.pp .row .v { grid-row: 1 / span 2; grid-column: 2; font-size: 13px; font-weight: 700; color: var(--blue); }
.pp .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #16a34a; } .pp .dot.off { background: var(--mute); }
.pp .empty { padding: 16px; color: var(--mute); font-size: 15px; }
.pp .adds { display: grid; gap: 10px; } @media (min-width: 640px) { .pp .adds { grid-template-columns: 1fr 1fr; } }
.pp .add { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--card-b); border-radius: 18px; padding: 12px 14px; color: var(--ink); }
.pp .add img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: #111; }
.pp .add b { display: block; font-size: 15px; } .pp .add span { color: var(--mute); font-size: 13px; }
.pp .add em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--blue); font-size: 14px; flex: none; }
.pp .card2 { background: var(--card); border: 1px solid var(--card-b); border-radius: 20px; padding: 16px; display: grid; gap: 10px; }
.pp .card2 p { margin: 0; color: var(--ink2); font-size: 15px; }
.pp .card2 input, .pp .card2 select { width: 100%; background: var(--bg); border: 1px solid var(--card-b); border-radius: 14px; padding: 11px 12px; font: inherit; font-size: 15px; color: var(--ink); }
.pp .vrow, .pp .oprow { display: flex; gap: 8px; } .pp .vrow input, .pp .oprow input { flex: 1; min-width: 0; }
.pp .btn { padding: 11px 16px; font-size: 15px; }
.pp .btn.sm { padding: 8px 12px; font-size: 14px; }
.pp .vmsg, .pp .opmsg, .pp .muted { color: var(--mute); font-size: 14px; margin: 0; }
.pp .opbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.pp #voice-op { border-top: 1px solid var(--line); padding-top: 12px; } .pp #voice-op h4 { margin: 0 0 6px; font-size: 15px; }

/* (2026-10-22) simpler: small icons, button labels say what they do */
.pp h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp .adds { grid-template-columns: 1fr 1fr !important; gap: 8px; }
.pp .add { padding: 9px 12px; gap: 10px; border-radius: 14px; font-size: 15px; }
.pp .add img { width: 26px; height: 26px; }
.pp .add b { font-size: 15px; font-weight: 600; }
.pp .add:hover { border-color: var(--blue); }
.pp .row { padding: 10px 14px; } .pp .row b { font-size: 15px; } .pp .row small { font-size: 12px; }
.pp .card2 { padding: 12px; }
.pp .card2 input { padding: 9px 12px; font-size: 14px; }
.pp .btn.sm { padding: 9px 14px; font-size: 14px; box-shadow: none; }
/* grouped rooms (2026-10-22) */
.pp .grp { margin-bottom: 8px; }
.pp details.grp > summary { list-style: none; cursor: pointer; } .pp details.grp > summary::-webkit-details-marker { display: none; }
.pp details.grp > summary b::after { content: "›"; display: inline-block; margin-left: 8px; color: var(--mute); transition: transform .2s; }
.pp details.grp[open] > summary b::after { transform: rotate(90deg); }
.pp details.grp > a.row { padding-left: 28px; }
.pp .row { padding: 9px 14px; }