#site { color-scheme: light dark; margin: 0; padding: 18px 12px; background: light-dark(#faf9f6, #141519); }
  #site * { box-sizing: border-box; }
  #site [hidden] { display: none !important; }
  #site .phone {
    --paper: light-dark(#fff, #191a1e);
    --ink: light-dark(#171a22, #f7f4ec);
    --muted: light-dark(#5d606b, #c0bdc6);
    --line: light-dark(#e7e4dc, #3e3b42);
    --yellow: #ffc51c;
    --on-yellow: #251900;
    --blue: light-dark(#125be5, #2166ec);
    --gold-text: light-dark(#765100, #ffdc73);
    --soft: light-dark(#fff3c6, #40341a);
    --field: light-dark(#f8f7f3, #25262c);
    width: min(100%, 405px); margin: 0 auto; min-height: 568px;
    display: flex; flex-direction: column; overflow: hidden;
    color: var(--ink); background: var(--paper); border: 1px solid var(--line);
    border-radius: 26px; font: 15px/1.48 system-ui, "Microsoft YaHei", sans-serif;
  }
  #site h1, #site h2, #site h3, #site p { margin: 0; }
  #site h1 { font-size: clamp(17px, 4.8vw, 21px); line-height: 1.5; font-weight: 650; }
  #site h2 { font-size: 25px; line-height: 1.25; font-weight: 700; }
  #site h3 { font-size: 16px; font-weight: 700; }
  #site .top { padding: 4px 20px 4px 7px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 8px; }
  #site .wordmark { display: block; max-width: 100%; height: auto; border-radius: 8px; }
  #site .inbox-entry { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 5px 10px; color: var(--gold-text); background: var(--soft); border: 0; border-radius: 11px; font-weight: 650; }
  #site .inbox-entry svg { width: 17px; height: 17px; }
  #site .unread { display: inline-grid; place-items: center; min-width: 19px; min-height: 19px; padding: 1px 4px; border-radius: 9px; background: var(--yellow); color: var(--on-yellow); font-size: 12px; font-weight: 700; }
  #site main { flex: 1; padding: 22px 20px; }
  #site .intro { padding: 4px 0 19px; }
  #site button, #site input, #site textarea { font: inherit; color: inherit; }
  #site button { cursor: pointer; }
  #site button:focus-visible, #site input:focus-visible, #site textarea:focus-visible,
  #site input:focus-visible + span, #site .attachment:focus-within { outline: 2px solid var(--gold-text); outline-offset: 3px; }
  #site .entry-list { display: grid; gap: 12px; }
  #site .entry { display: grid; grid-template-columns: 25px 1fr 18px; align-items: center; gap: 12px; text-align: left; padding: 17px 14px; border-radius: 15px; border: 1px solid transparent; min-height: 86px; }
  #site .entry strong { display: block; font-size: 22px; }
  #site .entry small { display: block; margin-top: 2px; font-size: 13px; }
  #site .offer, #site .primary { background: var(--yellow); color: var(--on-yellow); }
  #site .need { background: var(--blue); color: #fff; }
  #site .entry svg { width: 100%; height: auto; }
  #site .offer:focus-visible, #site .primary:focus-visible { outline-offset: 3px; }
  #site nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px 8px; border-top: 1px solid var(--line); }
  #site nav button { display: grid; place-content: center; justify-items: center; gap: 3px; padding: 4px; min-height: 49px; border: 0; border-radius: 9px; background: transparent; color: var(--gold-text); font-size: 13px; }
  #site nav button[aria-current] { background: var(--soft); color: var(--gold-text); font-weight: 700; }
  #site nav svg { width: 19px; height: 19px; }
  #site form { display: grid; gap: 10px; margin-top: 13px; }
  #site fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  #site legend { margin-bottom: 5px; padding: 0; font-weight: 650; }
  #site .choice { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  #site .chips { display: flex; flex-wrap: wrap; gap: 5px; }
  #site .choice label, #site .chips label { position: relative; cursor: pointer; }
  #site .choice input, #site .chips input, #site .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #site .choice span, #site .chips span { display: grid; place-content: center; min-height: 42px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--field); }
  #site .chips span { font-size: 13px; }
  #site input:checked + span { color: var(--gold-text); border-color: var(--gold-text); background: var(--soft); font-weight: 700; }
  #site .field { display: grid; gap: 4px; font-weight: 650; }
  #site .field input, #site textarea { width: 100%; padding: 8px 10px; min-height: 40px; background: var(--field); border: 1px solid var(--line); border-radius: 8px; font-size: 16px; font-weight: 400; }
  #site textarea { resize: vertical; }
  #site .attachment { display: flex; position: relative; align-items: center; gap: 7px; min-height: 44px; color: var(--gold-text); cursor: pointer; }
  #site .attachment input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
  #site .attachment svg { width: 17px; height: 17px; }
  #site .primary { width: 100%; min-height: 46px; padding: 8px; border-radius: 9px; border: 0; font-weight: 700; }
  #site .primary:disabled { color: var(--muted); background: var(--field); cursor: default; }
  #site .muted { color: var(--muted); font-size: 13px; }
  #site h2 + .muted, #site h3 + .muted { margin-top: 6px; }
  #site .listing { display: grid; gap: 9px; margin-top: 11px; }
  #site .listing:empty { margin: 0; }
  #site .list-item { display: grid; text-align: left; gap: 5px; width: 100%; padding: 11px 13px; background: var(--field); border: 1px solid var(--line); border-radius: 11px; overflow-wrap: anywhere; }
  #site .list-item strong { font-size: 16px; color: var(--gold-text); }
  #site .kind { display: flex; align-items: center; gap: 5px; color: var(--gold-text); font-size: 12px; }
  #site .kind svg { width: 15px; height: 15px; }
  #site .quiet { min-height: 44px; padding: 6px 0; text-align: left; border: 0; background: transparent; color: var(--gold-text); font-weight: 650; }
  #site .detail, #site .activity { display: grid; gap: 9px; }
  #site .detail { padding-top: 8px; overflow-wrap: anywhere; }
  #site .detail .description { padding: 10px 0 12px; white-space: pre-wrap; }
  #site .photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #site .photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
  #site .activity { margin-top: 20px; }
  #site .notice { background: var(--soft); color: var(--gold-text); padding: 7px 10px; border-radius: 8px; }
  #site .inbox-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  #site .inbox-row .muted { grid-column: 1 / -1; }
  #site .messages { display: grid; gap: 9px; padding: 16px 0; }
  #site .messages:empty { padding: 5px 0; }
  #site .bubble { display: grid; gap: 3px; width: fit-content; max-width: 90%; padding: 9px 12px; border-radius: 12px; background: var(--field); white-space: pre-wrap; overflow-wrap: anywhere; }
  #site .bubble.out { justify-self: end; background: var(--soft); }
  #site .compose { grid-template-columns: minmax(0, 1fr) auto; }
  #site .compose input { min-width: 0; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--field); font-size: 16px; }
  #site .compose button { padding-inline: 15px; }
  #site .share-callout { display: grid; justify-items: center; gap: 8px; padding-top: 31px; text-align: center; }
  #site .share-callout p { color: var(--muted); font-size: 12px; }
  #site .share-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: light-dark(#087d51, #80e6ad); color: light-dark(#fff, #123323); }
  #site .share-icon svg { width: 23px; height: 23px; }
  #site .location, #site .decision { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #site .spread { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  #site .decision .quiet { text-align: center; }
  #site #thread-status { margin-top: 12px; }
  #site #decisions { margin-top: 10px; }
  #site #alert { margin-bottom: 12px; }
  #site #alert[data-kind="success"] { color: var(--gold-text); }
  #site dialog { width: min(calc(100% - 24px), 360px); border: 1px solid light-dark(#e7e4dc, #3e3b42); border-radius: 18px; padding: 16px; color: light-dark(#171a22, #f7f4ec); background: light-dark(#fff, #191a1e); }
  #site dialog::backdrop { background: rgb(0 0 0 / .45); }
  #site dialog > p, #site dialog .field, #site dialog .decision { margin-top: 10px; }
  #site { --gold-text: light-dark(#765100, #ffdc73); --yellow: #ffc51c; --on-yellow: #251900; --line: light-dark(#e7e4dc, #3e3b42); --muted: light-dark(#5d606b, #c0bdc6); --field: light-dark(#f8f7f3, #25262c); }
  #site .empty { padding: 16px 0; }
  #site .error { color: light-dark(#a12b22, #ffb8aa); font-size: 13px; }
  @media (max-width: 380px) {
    #site { padding: 8px 4px; }
    #site main, #site .top { padding-left: 14px; padding-right: 14px; }
  }
  @media (pointer: coarse) {
    #site .choice span, #site .chips span, #site .field input { min-height: 44px; }
  }