/* Frisnak — lyst, luftigt og med varm ler-accent.
   Ingen framework, ingen web-fonte, ingen eksterne ressourcer. */

:root {
  --bg:        #faf7f4;
  --surface:   #ffffff;
  --sunken:    #f4efe9;
  --ink:       #2b2622;
  --ink-soft:  #6f665e;
  --ink-faint: #a0958a;
  --line:      #ece5dd;
  --accent:    #c1553a;
  --accent-in: #9c4029;
  --accent-bg: #fbeee9;
  --ok:        #4d7c50;
  --warn-bg:   #fdf3e3;
  --warn-ink:  #8a5a1b;
  --radius:    10px;
  --bar-h:     58px;
}

body.dark {
  --bg:        #1b1917;
  --surface:   #242120;
  --sunken:    #2c2825;
  --ink:       #ece6e0;
  --ink-soft:  #b0a69c;
  --ink-faint: #7d736a;
  --line:      #38322e;
  --accent:    #e07b5e;
  --accent-in: #f0a48c;
  --accent-bg: #3a2a24;
  --warn-bg:   #3a2f1c;
  --warn-ink:  #e8c88a;
}

* { box-sizing: border-box }
html, body { margin: 0 }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}
body.chat, html:has(body.chat) {
  position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none;
}

/* Mærket: serif mod resten af fladens sans — sitets tydeligste kendetegn. */
.mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 21px; letter-spacing: -.01em; color: var(--ink);
  text-decoration: none; flex: 0 0 auto;
}
.mark-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); flex: 0 0 auto;
}

/* ======================================================== loginsiden ==== */

body.entry { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px }
.entry-wrap {
  display: grid; grid-template-columns: 1fr 360px; gap: 56px;
  align-items: center; max-width: 940px; width: 100%;
}
.pitch .mark { font-size: 26px }
.pitch .lead { margin: 6px 0 0; color: var(--ink-faint); font-size: 13px; letter-spacing: .03em }
.pitch h1 {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 40px; line-height: 1.15; font-weight: 400; margin: 28px 0 14px;
  letter-spacing: -.02em;
}
.pitch .body { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; max-width: 44ch }
.facts { display: flex; gap: 32px; margin: 30px 0 0; padding: 0 }
.facts div { margin: 0 }
.facts dt {
  font-family: Georgia, serif; font-size: 30px; color: var(--accent); line-height: 1;
}
.facts dd { margin: 4px 0 0; font-size: 12px; color: var(--ink-faint); letter-spacing: .02em }
.busy { margin: 22px 0 0; font-size: 13px; color: var(--ink-soft) }
.busy strong { color: var(--ink) }

.gate {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 26px;
  box-shadow: 0 10px 30px rgba(80, 60, 45, .07);
}
.row { display: block; margin-bottom: 16px }
.lbl {
  display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px; padding: 0;
}
.gate input[type=text], .gate input:not([type]), .gate input[name=captcha] { width: 100% }
.gate input {
  width: 100%; padding: 11px 12px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
}
.gate input:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--surface) }
.picks { border: 0; margin: 0 0 16px; padding: 0; display: block }
.picks legend { float: left; width: 100% }
.pick {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 8px;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; cursor: pointer; background: var(--bg);
}
.pick input { width: auto; margin: 0 }
.pick:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-in) }
.agree {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; color: var(--ink-soft); line-height: 1.5; cursor: pointer;
}
.agree input { width: auto; margin-top: 2px; flex: 0 0 auto }
.gate button[type=submit] {
  width: 100%; margin-top: 18px; padding: 12px; font-size: 15px; font-family: inherit;
  background: var(--accent); color: #fff; border: 0; border-radius: var(--radius); cursor: pointer;
}
.gate button[type=submit]:hover { background: var(--accent-in) }
.err {
  margin-bottom: 16px; padding: 10px 12px; border-radius: var(--radius);
  background: var(--accent-bg); color: var(--accent-in);
  border: 1px solid var(--accent); font-size: 13px;
}
.rules { margin-top: 16px; font-size: 13px }
.rules summary {
  cursor: pointer; color: var(--ink-faint); list-style: none; text-align: center; padding: 6px;
}
.rules summary::-webkit-details-marker { display: none }
.rules summary:hover { color: var(--accent) }
.rules-box {
  margin-top: 10px; padding: 14px; background: var(--sunken); border-radius: var(--radius);
  color: var(--ink-soft); font-size: 12px; line-height: 1.6; max-height: 260px; overflow-y: auto;
}
.rules-box h3 { font-size: 12px; margin: 12px 0 5px; color: var(--ink); letter-spacing: .02em }
.rules-box h3:first-child { margin-top: 0 }
.rules-box ul { margin: 0 0 8px; padding-left: 17px }
.rules-box p { margin: 0 }

/* Enkeltstående besked: udelukkelse og administratorlogin. */
.entry-wrap.single { grid-template-columns: 1fr; max-width: 420px }
.notice-title {
  font-family: Georgia, "Iowan Old Style", serif; font-weight: 400; font-size: 23px;
  margin: 18px 0 10px;
}
.notice-body { color: var(--ink-soft); font-size: 14px; line-height: 1.6 }
.notice-body input {
  width: 100%; margin: 14px 0 0; padding: 11px 12px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
}
.notice-body button {
  width: 100%; margin-top: 12px; padding: 12px; font-size: 15px; font-family: inherit;
  background: var(--accent); color: #fff; border: 0; border-radius: var(--radius); cursor: pointer;
}
.notice-body button:hover { background: var(--accent-in) }
.notice-body .fejl { color: var(--accent-in); margin: 0 }

@media (max-width: 820px) {
  .entry-wrap { grid-template-columns: 1fr; gap: 32px; max-width: 420px }
  .pitch h1 { font-size: 31px; margin: 20px 0 12px }
  .facts { gap: 24px }
}

/* ============================================================== app ==== */

.app {
  display: grid;
  grid-template-columns: 1fr 296px;
  grid-template-rows: var(--bar-h) 1fr auto;
  height: 100%;
}

/* --- topbjælken: lys, ikke mørk --- */
.bar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px; padding: 0 18px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.rooms {
  display: flex; align-items: center; gap: 7px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.rooms::-webkit-scrollbar { display: none }
.room-tab {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; max-width: 190px;
  padding: 6px 8px 6px 13px; border-radius: 999px; cursor: pointer; user-select: none;
  font-size: 13.5px; color: var(--ink-soft); border: 1px solid var(--line); background: var(--bg);
}
.room-tab:hover { border-color: var(--ink-faint) }
.room-tab.active { background: var(--accent); border-color: var(--accent); color: #fff }
.room-tab .rt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.room-tab .rt-badge {
  flex: 0 0 auto; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700;
  line-height: 17px; text-align: center;
}
.room-tab .rt-close {
  background: none; border: 0; color: inherit; opacity: .45; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 1px 4px; border-radius: 50%;
}
.room-tab .rt-close:hover { opacity: 1; background: rgba(0, 0, 0, .12) }
.room-tab.locked .rt-close { display: none }
.here { font-size: 13px; color: var(--ink-faint); flex: 0 0 auto }
.here b { color: var(--accent); font-weight: 600 }

.room-picker { position: relative; flex: 0 0 auto }
/* Skal ligne en knap, man trykker på. Den forrige udgave var en lille stiplet
   cirkel med et plus, og ingen kunne gætte, at alle rummene lå bag den. */
.rp-toggle {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent-bg); color: var(--accent-in);
  font-size: 13.5px; font-family: inherit; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.rp-toggle:hover { background: var(--accent); color: #fff }
.rp-plus { font-size: 15px; line-height: 1 }
/* Knappen sidder til højre i bjælken, så menuen skal folde ud mod venstre —
   ellers løber den ud over skærmkanten. */
.rp-menu {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 40;
  width: 250px; max-height: 340px; overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(80, 60, 45, .14);
}
.rp-group {
  padding: 9px 9px 3px; font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint);
}
.rp-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 8px 9px; border: 0; border-radius: 7px; background: none; cursor: pointer;
  color: var(--ink); font-size: 13.5px; font-family: inherit; text-align: left;
}
.rp-item:hover { background: var(--sunken) }
.rp-count { flex: 0 0 auto; color: var(--ink-faint); font-variant-numeric: tabular-nums; font-size: 12px }
.rp-item.disabled { opacity: .4; cursor: not-allowed }
.rp-item.disabled:hover { background: none }

.side-toggle {
  display: none; flex: 0 0 auto; padding: 6px 12px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  color: var(--ink-soft); cursor: pointer;
}

/* --- beskedstrømmen: ingen bobler, bare tekst med luft --- */
.stream { grid-column: 1; overflow-y: auto; padding: 22px 26px; min-height: 0 }
.msg { margin-bottom: 18px; max-width: 60ch }
.msg .meta {
  font-size: 12px; color: var(--ink-faint); margin-bottom: 3px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.msg .meta b { color: var(--ink); font-weight: 600 }
.msg .bubble {
  font-size: 15px; line-height: 1.55; overflow-wrap: anywhere;
  padding: 0; background: none; border-radius: 0;
}
.msg.mine { margin-left: auto; text-align: right }
.msg.mine .meta { justify-content: flex-end }
.msg.mine .bubble {
  display: inline-block; text-align: left; padding: 9px 13px;
  background: var(--accent-bg); border-radius: 12px 12px 3px 12px;
}
.msg.private .bubble {
  display: inline-block; text-align: left; padding: 9px 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 3px 12px 12px 3px;
}
.msg.mine.private .bubble {
  background: var(--accent-bg); border: 1px solid var(--accent);
  border-radius: 12px 12px 3px 12px;
}
.msg .tag {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-in); background: var(--accent-bg); padding: 2px 7px; border-radius: 999px;
}
/* Køn som lille mærkat frem for farvet navn. */
.chip {
  font-size: 10px; padding: 1px 6px; border-radius: 999px; letter-spacing: .04em;
  background: var(--sunken); color: var(--ink-soft); font-weight: 600;
}
.chip-m { background: #e7edf5; color: #3a5b8c }
.chip-f { background: #f5e7ed; color: #8c3a5e }
.chip-c { background: #e6f0e8; color: #3e6b48 }
.chip-mute { background: #f6efe2; color: #8a6a1b }
.msg-footer button[disabled] { color: var(--ink-faint); cursor: default;
  text-decoration: none; opacity: .7 }
.msg-footer button[disabled]:hover { color: var(--ink-faint) }
body.dark .chip-m { background: #24313f; color: #9dbbdd }
body.dark .chip-f { background: #3f2430; color: #dd9db8 }
body.dark .chip-c { background: #24382a; color: #9dd0a9 }
body.dark .chip-mute { background: #3a3320; color: #ddc48a }

.msg .bubble-wrap { display: inline-block; max-width: 100%; position: relative }
.msg-footer { display: flex; align-items: center; gap: 9px; margin-top: 5px }
.msg.mine .msg-footer { justify-content: flex-end }
.msg-footer button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 11.5px; font-family: inherit; color: var(--ink-faint);
}
.msg-footer button:hover { color: var(--accent) }
.msg-footer .sep { color: var(--line) }
.reactions { display: flex; gap: 5px; flex-wrap: wrap }
.reaction {
  position: relative; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); cursor: pointer; font-size: 13px; line-height: 1.3;
}
.reaction:hover { border-color: var(--ink-faint) }
.reaction.mine { border-color: var(--accent); background: var(--accent-bg) }
.reaction .rc {
  margin-left: 4px; font-size: 10px; color: var(--ink-soft); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.react-picker {
  position: absolute; bottom: calc(100% + 7px); left: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; width: 196px; padding: 7px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(80, 60, 45, .16);
}
.msg.mine .react-picker { left: auto; right: 0 }
.react-picker[hidden] { display: none }
.react-picker button {
  padding: 5px; background: none; border: 0; border-radius: 6px; cursor: pointer; font-size: 18px;
}
.react-picker button:hover { background: var(--sunken) }
body.hide-public .msg:not(.private) { display: none }

/* --- højre spalte --- */
.side {
  grid-column: 2; grid-row: 2;
  background: var(--surface); border-left: 1px solid var(--line);
  overflow-y: auto; padding: 18px 16px 26px;
}
.you {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.you span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.you form { margin: 0 }
.link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-faint); font-size: 12px; font-family: inherit;
}
.link:hover { color: var(--accent) }
.side-block { margin-top: 22px }
.side-block h2 {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 9px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.sort {
  text-transform: none; letter-spacing: 0; font-size: 11px; font-family: inherit;
  padding: 3px 5px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--ink-soft); cursor: pointer;
}
.side ul { list-style: none; margin: 0; padding: 0 }
.side li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border-radius: 7px;
}
.side li:hover { background: var(--sunken) }
.user-pick { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; cursor: pointer }
.uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px }
.presence { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto }
.presence.active { background: var(--ok) }
.presence.idle { background: #c99a3a }
.presence.unknown { background: var(--ink-faint) }
.row-actions { display: flex; gap: 9px; flex: 0 0 auto }
.row-actions button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 11.5px; font-family: inherit; color: var(--ink-faint);
}
.row-actions button:hover { color: var(--accent) }
.empty { color: var(--ink-faint); font-size: 13px; padding: 2px 0 }
#users { max-height: 300px; overflow-y: auto; overflow-x: hidden }
#dms { max-height: 170px; overflow-y: auto; overflow-x: hidden }
.prefs label {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 10px;
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; cursor: pointer;
}
.prefs input { margin: 1px 0 0; flex: 0 0 auto; cursor: pointer; accent-color: var(--accent) }

/* --- skrivefeltet --- */
.write {
  grid-column: 1 / -1;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
}
.note {
  margin: -2px 0 10px; padding: 8px 12px; border-radius: var(--radius);
  background: var(--warn-bg); color: var(--warn-ink); font-size: 13px; text-align: center;
}
.write-row { display: flex; gap: 9px; align-items: center; position: relative }
#to {
  flex: 0 0 auto; width: 128px; padding: 11px 9px; font-size: 13.5px; font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink-soft); cursor: pointer;
}
.field { flex: 1 1 auto; min-width: 0; position: relative; display: flex }
.field input {
  flex: 1 1 auto; min-width: 0; padding: 12px 56px 12px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--surface) }
.field input.rejected { animation: shake .5s ease }
@keyframes shake {
  0%, 100% { transform: translateX(0) }
  25% { transform: translateX(-4px); border-color: var(--accent) }
  75% { transform: translateX(4px); border-color: var(--accent) }
}
.count {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 10.5px; color: var(--ink-faint); pointer-events: none; font-variant-numeric: tabular-nums;
}
.count.at-limit { color: var(--accent); font-weight: 700 }
#emojiBtn {
  flex: 0 0 auto; width: 42px; padding: 11px 0; font-size: 16px; font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink-soft); cursor: pointer;
}
#emojiBtn:hover { color: var(--accent); border-color: var(--accent) }
#sendBtn {
  flex: 0 0 auto; padding: 11px 20px; font-size: 14px; font-family: inherit;
  border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; cursor: pointer;
}
#sendBtn:hover { background: var(--accent-in) }
.emoji {
  position: absolute; bottom: calc(100% + 9px); right: 0; z-index: 35;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  width: 272px; max-height: 220px; overflow-y: auto; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 32px rgba(80, 60, 45, .16);
}
.emoji[hidden] { display: none }
.emoji button {
  padding: 5px; background: none; border: 0; border-radius: 6px; cursor: pointer; font-size: 18px;
}
.emoji button:hover { background: var(--sunken) }

/* --- mobil: højre spalte bliver en skuffe --- */
.scrim { display: none; position: fixed; inset: 0; background: rgba(43, 38, 34, .4); z-index: 45 }
#menuClose { display: none }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr }
  .side-toggle { display: block }
  .side {
    position: fixed; top: 0; right: 0; bottom: 0; width: 290px; z-index: 50;
    transform: translateX(100%); transition: transform .2s ease;
    border-left: 1px solid var(--line); box-shadow: -8px 0 30px rgba(80, 60, 45, .12);
    /* Plads foroven, så luk-knappen ikke lander oven i «Log ud». */
    padding-top: 44px;
  }
  .app.drawer-open .side { transform: translateX(0) }
  .app.drawer-open .scrim { display: block }
  #menuClose {
    display: block; position: absolute; top: 10px; right: 12px;
    background: none; border: 0; font-size: 24px; line-height: 1;
    color: var(--ink-faint); cursor: pointer; padding: 2px 6px;
  }
  .stream { padding: 18px 16px }
  .msg { max-width: 100% }
  .write { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) }
  .write-row { flex-wrap: wrap }
  .field { order: -1; flex: 1 0 100% }
  .field input { font-size: 16px }
  #to { flex: 1 1 auto; width: auto }
  #sendBtn { padding: 11px 18px }
  .here { display: none }
}

/* --- billeder i private beskeder --------------------------------------- */
.shot {
  /* Mindstemål, så teksten «Klik for at se» altid har plads. Uden det bliver
     den klippet på små billeder. */
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 156px; min-height: 108px; overflow: hidden;
  border-radius: 12px; cursor: pointer; line-height: 0;
  background: var(--sunken); -webkit-touch-callout: none; user-select: none;
}
.shot img {
  display: block; max-width: 260px; max-height: 260px;
  filter: blur(18px); transition: filter .18s ease;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.shot::after {
  content: 'Klik for at se'; position: absolute; inset: 0; padding: 0 8px;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
  background: rgba(43, 38, 34, .38); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5); pointer-events: none;
}
.shot.vist { cursor: default }
.shot.vist::after { display: none }
.shot.vist img { filter: none }
#attachBtn {
  flex: 0 0 auto; padding: 11px 14px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink-soft); cursor: pointer;
}
#attachBtn:hover { color: var(--accent); border-color: var(--accent) }
#attachBtn[hidden] { display: none }
#attachBtn:disabled { opacity: .5; cursor: progress }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
.gal {
  position: relative; display: block; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); line-height: 0;
}
.gal img { width: 100%; height: 62px; object-fit: cover; display: block }
.gal-txt {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px;
  background: rgba(43, 38, 34, .62); color: #fff; font-size: 9.5px;
  line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gal.flagget { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) }
.gallery .empty { grid-column: 1 / -1; margin: 0 }
.chip-adm { background: var(--accent-bg); color: var(--accent-in) }
body.dark .chip-adm { background: #3a2a24; color: #f0a48c }
.you span { display: inline-flex; align-items: center; gap: 6px }
.gone {
  display: inline-block; padding: 9px 13px; border-radius: 12px;
  background: var(--sunken); border: 1px dashed var(--line);
  color: var(--ink-faint); font-size: 13.5px; font-style: italic;
}