* { box-sizing: border-box }
:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color: #eff2ff;
  background: #111624;
  --panel: #1b2235;
  --edge: #333e58;
  --muted: #abb5d0;
  --accent: #b8f37c;
}
[hidden] { display: none !important }
body { margin: 0; min-width: 280px }
.top { background: #151b2b; border-bottom: 1px solid var(--edge) }
header, main { width: min(100%, 780px); margin: auto; padding-inline: clamp(12px, 4vw, 32px) }
header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 10px }
.brand { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-size: 22px; font-weight: 800; text-decoration: none; white-space: nowrap }
.brand span { color: var(--accent); margin-left: -7px }
.brand img { border-radius: 12px }
#account { display: flex; align-items: center; gap: 12px }
#my-name { color: var(--muted); overflow-wrap: anywhere }
main { padding-top: clamp(16px, 5vw, 48px); padding-bottom: max(24px, env(safe-area-inset-bottom)) }
.panel { border: 1px solid var(--edge); background: var(--panel); border-radius: 20px; padding: clamp(14px, 4vw, 28px) }
h1, h2, p { margin: 0 }
h1 { font-size: clamp(24px, 5vw, 38px); letter-spacing: -.045em }
h2 { font-size: 24px; letter-spacing: -.035em }
.muted, #loading, .empty { color: var(--muted) }
.activity > .muted { margin-top: 6px }
button, input { font: inherit; border-radius: 11px; min-height: 46px }
button { color: inherit; padding: 8px 12px; border: 1px solid var(--edge); background: #252e45; cursor: pointer; font-weight: 650 }
button:hover { border-color: var(--accent) }
button:disabled { opacity: .65; cursor: wait }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }
.primary { background: var(--accent); color: #152314; border-color: var(--accent) }
input { border: 1px solid var(--edge); background: #131a2b; color: inherit; padding: 10px 12px; width: 100%; min-width: 0; font-size: 16px }
label { display: grid; gap: 6px; font-weight: 600 }
.choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px }
.choices button { min-height: 66px }
.choices span { display: block; font-size: 19px }
[aria-pressed="true"] { color: var(--accent); background: #27372d; border-color: #7da958 }
#custom-form, .login form, .auth-actions { display: grid; gap: 12px; margin-top: 16px }
.login { max-width: 430px; margin-inline: auto }
.actions { display: flex; gap: 8px; flex-wrap: wrap }
.mine { padding-left: 20px; margin: 14px 0 0; color: var(--muted); overflow-wrap: anywhere }
.friends { margin-top: 26px }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px }
#active-count { color: var(--accent); font-size: 14px }
#friends-list { display: grid; gap: 8px }
.friend { background: var(--panel); border: 1px solid var(--edge); border-radius: 16px; padding: 10px 14px }
.friend-name { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; background: transparent; border-color: transparent; padding: 3px }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #313c57; color: #e0e7ff; flex: none }
.friend[data-active="true"] .avatar { background: #345039; color: var(--accent) }
.arrow { margin-left: auto; color: var(--muted) }
.friend .muted { padding: 4px 3px 2px 51px; font-size: 14px }
.status-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 6px 0 2px; list-style: none }
.status-list li { display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; padding-left: 9px; background: #252e45; border-radius: 11px }
.status-list li span { min-width: 0; overflow-wrap: anywhere }
.status-list button { min-width: 44px }
.chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: min(700px, calc(100dvh - 120px)); min-height: 260px }
.chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--edge) }
.chat-head h1 { overflow-wrap: anywhere }
#messages { display: flex; flex-direction: column; gap: 8px; overflow: auto; padding: 0 2px; list-style: none }
.bubble { background: #303b56; border-radius: 13px; padding: 9px 12px; align-self: start; max-width: 86%; overflow-wrap: anywhere; white-space: pre-wrap }
.bubble.own { align-self: end; background: #345039 }
.bubble time { display: block; font-size: 12px; color: #c3cce0; margin-top: 4px }
#chat-form { display: flex; gap: 8px }
#error { background: #472b3a; border: 1px solid #9c5970; padding: 10px; border-radius: 10px; margin-bottom: 12px }
@media (max-width: 470px) {
  .choices { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  #custom-open { grid-column: 1 / -1; min-height: 46px }
  #my-name { display: none }
  .chat { height: calc(100dvh - 104px - env(safe-area-inset-bottom)) }
}

.friend-tools { margin-bottom: 10px; padding: 10px 14px }
.friend-tools summary { cursor: pointer; min-height: 44px; align-content: center; font-weight: 650 }
#friend-form { display: grid; gap: 8px; margin: 6px 0 }
#request-count { color: var(--accent); margin-left: 6px }
#friend-requests { list-style: none; padding: 0; margin: 10px 0 0 }
#friend-requests li { padding-block: 8px; border-top: 1px solid var(--edge); overflow-wrap: anywhere }
#friend-requests .actions { margin-top: 6px }