/* /outside (外来的鱼): the /start chrome (gate.css tokens and parts), blue and white only. One card with a segmented
   control or tabs on top, one step or one tab at a time, a bottom sheet for everything that is not the main action. */
.o-wrap { max-width: 500px; }
.o-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0; }
.o-center { text-align: center; }

/* The welcome above the card (until he is signed in) */
.o-hero {
  position: relative; display: flex; align-items: flex-end; gap: 4px; margin: 0 0 14px; padding: 18px 0 0 20px;
  border-radius: var(--g-radius); border: 1px solid rgba(67, 104, 251, .10); box-shadow: var(--g-shadow); overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 26C60 8 110 8 170 22s120 22 180 4c20-6 34-10 50-10V60H0z' fill='%2399bcfb' fill-opacity='.38'/%3E%3C/svg%3E") no-repeat left bottom / 100% 40px,
    linear-gradient(155deg, #ffffff 0%, #f2f6ff 48%, #e3ebff 100%);
}
.o-hero-text { position: relative; z-index: 1; flex: 1; min-width: 0; padding-bottom: 20px; }
.o-hero-chip {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 4px 11px 4px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(67, 104, 251, .18); color: var(--g-brand-deep);
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.o-hero-title { margin: 0 0 6px; font-size: 23px; line-height: 1.3; font-weight: 800; letter-spacing: .02em; }
.o-hero-line { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--g-ink-2); }
.o-hero-art { flex: none; width: 112px; height: auto; margin: 0 6px -4px 0; }
body.is-owner .o-hero { display: none; }

/* 外来: the badge as the town draws it */
.o-badge {
  display: inline-flex; align-items: center; padding: 0 7px; border-radius: 7px; background: var(--g-brand); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1.7; letter-spacing: .06em;
}

/* Apply | sign in, and the four steps (gate.css .g-tabs / .g-steps; the steps sit under the tabs, not over the card edge) */
.o-mode { margin: 0 0 18px; }
.o-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 22px; padding: 14px 2px 10px; border-radius: 18px;
           border: 1px solid var(--g-line); }
.o-steps li + li::after { left: calc(-50% + 18px); right: calc(50% + 18px); }
.o-inline-back { min-height: 32px; padding: 0 6px; font-size: 13px; }
#prefs-box .o-sheet-label:first-child { margin-top: 0; }
.o-step .g-title { font-size: 20px; }

/* Step 1 */
.o-needs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--g-ink-2); font-size: 13px; }
.o-needs li { display: inline-flex; align-items: center; gap: 5px; }
.o-needs svg { width: 15px; height: 15px; color: var(--g-brand); }
.o-verdict { padding: 16px; border-radius: 18px; background: var(--g-sky); border: 1px solid var(--g-sky-2); }
.o-verdict-head { display: flex; gap: 12px; align-items: flex-start; }
.o-verdict-icon {
  flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--g-brand-deep);
  box-shadow: 0 3px 8px -5px rgba(39, 66, 170, .5);
}
.o-verdict-icon svg { width: 20px; height: 20px; }
.o-verdict-title { margin: 1px 0 2px; font-size: 16px; font-weight: 700; line-height: 1.45; }
.o-verdict-text { margin: 0; color: var(--g-ink-2); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.o-verdict-text:empty { display: none; }
.o-missing { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.o-missing:empty { display: none; }
.o-missing li {
  padding: 10px 12px; border-radius: 12px; background: #fff; border-left: 3px solid var(--g-brand); font-size: 13.5px; line-height: 1.6;
  color: var(--g-ink-2);
}
.o-missing strong { display: block; color: var(--g-ink); font-size: 14.5px; }
.o-verdict + .g-button { margin-top: 16px; }

/* Step 2 */
.o-area { height: auto; min-height: 148px; padding: 12px 16px; line-height: 1.65; resize: vertical; }
.g-label-note.is-over { color: var(--g-error); font-weight: 600; }
.o-honest {
  display: flex; gap: 9px; align-items: flex-start; margin: 16px 0 0; padding: 11px 13px; border-radius: 14px;
  background: var(--g-sky); color: var(--g-brand-deep); font-size: 13.5px; line-height: 1.6; font-weight: 600;
}
.o-honest svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.o-tick { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 10px 0 0; font-size: 14px; color: var(--g-ink-2); cursor: pointer; }
.o-tick input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--g-brand); }
.o-inline {
  margin: 0 0 0 3px; padding: 0; border: 0; background: none; color: var(--g-brand-deep); font: 600 14px var(--g-font);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(42, 72, 201, .35);
}

/* Step 3 and her card on the owner page */
.o-pass { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--g-brand-deep); font-weight: 700; font-size: 16px; }
.o-pass svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--g-brand); color: #fff; }
.o-card {
  padding: 16px 16px 14px; border-radius: 20px; border: 1px solid rgba(67, 104, 251, .16);
  background: linear-gradient(150deg, #ffffff 0%, #f3f7ff 60%, #e8efff 100%);
}
.o-card-head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.o-card-name { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.o-card-voice { margin: 0 0 10px; color: var(--g-ink-2); font-size: 14px; line-height: 1.7; }
.o-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.o-chips li { padding: 2px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--g-line-strong); color: var(--g-brand-deep); font-size: 13px; font-weight: 600; }
.o-says { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.o-says li {
  justify-self: start; max-width: 92%; padding: 7px 12px; border-radius: 4px 14px 14px 14px; background: #fff;
  border: 1px solid var(--g-line); font-size: 14px; line-height: 1.55;
}
.o-card-more { margin-top: 10px; border-top: 1px dashed var(--g-line-strong); }
.o-card-more summary {
  display: flex; align-items: center; min-height: 40px; padding-top: 4px; cursor: pointer; list-style: none; color: var(--g-brand-deep);
  font-size: 13.5px; font-weight: 600;
}
.o-card-more summary::-webkit-details-marker { display: none; }
.o-card-more summary::after { content: "展开"; margin-left: auto; color: var(--g-muted); font-weight: 400; font-size: 12.5px; }
.o-card-more[open] summary::after { content: "收起"; }
.o-card-more p { margin: 0 0 6px; color: var(--g-ink-2); font-size: 13.5px; line-height: 1.65; }
.o-card-more b { color: var(--g-ink); font-weight: 600; }

/* Step 4: the code, once */
.o-warn {
  margin: 0 0 14px; padding: 10px 13px; border-radius: 12px; background: var(--g-sky-2); color: var(--g-brand-deep);
  font-size: 14px; font-weight: 600; line-height: 1.6;
}
.o-code {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--g-field);
  border: 1.5px dashed var(--g-water);
}
.o-code-text {
  flex: 1; min-width: 0; font: 600 14.5px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--g-ink);
  overflow-wrap: anywhere; -webkit-user-select: all; user-select: all;
}
.o-code .g-copy { display: inline-flex; gap: 6px; }
.o-code .g-copy svg { width: 17px; height: 17px; }
.o-links { margin: 16px 0 0; border-radius: 16px; border: 1px solid var(--g-line); background: #fff; overflow: hidden; }
.o-row-link {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 14px; border: 0; background: none;
  color: var(--g-ink); font: 600 14.5px var(--g-font); text-align: left; text-decoration: none; cursor: pointer;
}
.o-row-link + .o-row-link { border-top: 1px solid var(--g-line); }
.o-row-link span { flex: 1; }
.o-row-link svg { flex: none; width: 19px; height: 19px; color: var(--g-brand-deep); }
.o-row-link svg:last-child { width: 16px; height: 16px; color: var(--g-faint); }
.o-row-link:hover { background: var(--g-field); }

/* Sign in: 接入码 | Key */
.o-seg { display: inline-flex; gap: 2px; margin: 0 0 16px; padding: 3px; border-radius: 12px; background: var(--g-sky); border: 1px solid var(--g-line); }
.o-seg-item {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--g-ink-2);
  font: 600 13.5px var(--g-font); cursor: pointer;
}
.o-seg-item[aria-selected="true"] { background: #fff; color: var(--g-brand-deep); box-shadow: 0 1px 2px rgba(27, 35, 64, .1); }

/* Her owner's page */
.o-her { display: flex; align-items: center; gap: 13px; margin: 0 0 14px; }
.o-her .g-avatar { width: 52px; height: 52px; border-radius: 17px; font-size: 21px; }
.o-her-text { min-width: 0; }
.o-her-name { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; font-weight: 800; line-height: 1.35; }
.o-her-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-her-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 3px 0 0; color: var(--g-muted); font-size: 13px; }
.o-pill { padding: 1px 10px; border-radius: 999px; background: var(--g-brand); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.7; }
.o-pill.is-paused { background: var(--g-sky-2); color: var(--g-brand-deep); }
.o-pill.is-reported { background: #fff; color: var(--g-brand-deep); border: 1px solid var(--g-water); }
.o-pill.is-disabled { background: #edf0f7; color: var(--g-muted); }
/* the town restarting: the last good answer stays, this line says so and the page asks again by itself */
.o-busy { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 11px 14px; border-radius: 14px;
  background: #fff; border: 1px solid var(--g-sky-2); color: var(--g-brand-deep); font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(67, 104, 251, .10); }
.o-busy[hidden] { display: none; }
.o-busy-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--g-brand-deep); animation: o-busy 1.2s ease-in-out infinite; }
@keyframes o-busy { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .o-busy-dot { animation: none; } }
.o-note { margin: -4px 0 14px; padding: 10px 13px; border-radius: 12px; background: var(--g-sky); color: var(--g-ink-2); font-size: 13.5px; line-height: 1.6; }
.o-tabs3 { grid-template-columns: repeat(3, 1fr); margin: 0 0 16px; }
.o-pane .g-button:first-child { margin-top: 0; }
.o-pane .o-card + .g-button { margin-top: 14px; }
.o-rows { margin: 0; padding: 0; list-style: none; border-radius: 18px; border: 1px solid var(--g-line); background: #fff; overflow: hidden; }
.o-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; }
.o-row + .o-row { border-top: 1px solid var(--g-line); }
.o-row:has(.o-row-btn) { padding: 0; }
.o-row-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.o-row-btn:hover { background: var(--g-field); }
.o-row-btn svg { flex: none; width: 16px; height: 16px; color: var(--g-faint); }
.o-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.o-row-title { font-size: 15px; font-weight: 650; }
.o-row-sub { margin-top: 2px; color: var(--g-muted); font-size: 12.5px; }
.o-row-value { color: var(--g-brand-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.o-switch {
  position: relative; flex: none; width: 50px; height: 30px; border: 0; border-radius: 999px; background: #d5dcee; cursor: pointer;
  transition: background-color .15s;
}
.o-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(27, 35, 64, .25); transition: transform .15s;
}
.o-switch[aria-checked="true"] { background: var(--g-brand); }
.o-switch[aria-checked="true"]::after { transform: translateX(20px); }
.o-switch:disabled { opacity: .55; cursor: default; }
.o-switch:focus-visible, .o-row-btn:focus-visible, .o-row-link:focus-visible, .o-seg-item:focus-visible { outline: 2px solid var(--g-brand); outline-offset: 2px; }
.o-code-line { margin: 0 0 14px; color: var(--g-ink-2); font-size: 14px; line-height: 1.65; }
.o-gone { padding: 18px 16px; border-radius: 18px; background: var(--g-field); border: 1px solid var(--g-line); text-align: center; }
.o-gone-text { margin: 0; color: var(--g-ink-2); }
.o-foot { display: flex; justify-content: center; align-items: center; margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--g-line); }
.o-danger { color: #a3412f; text-decoration-color: rgba(163, 65, 47, .4); }
.o-back { margin: 16px 0 0; text-align: center; font-size: 14px; }
.o-back .g-link { display: inline-block; padding: 10px 6px; }

/* The bottom sheet (a dialog box centred on wide screens) */
.o-sheet { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.o-sheet-scrim { position: absolute; inset: 0; background: rgba(27, 35, 64, .38); }
.o-sheet-box {
  position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; padding: 22px 20px 26px;
  border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -12px 40px -16px rgba(27, 35, 64, .45);
  animation: o-up .18s ease-out;
}
.o-sheet-box::before { content: ""; display: block; width: 40px; height: 4px; margin: -10px auto 12px; border-radius: 4px; background: var(--g-line-strong); }
.o-sheet-x {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none;
  color: var(--g-muted); cursor: pointer; display: grid; place-items: center;
}
.o-sheet-x svg { width: 20px; height: 20px; }
.o-sheet-title { margin: 0 44px 12px 0; font-size: 18px; font-weight: 700; line-height: 1.4; }
.o-sheet-text { margin: 0 0 6px; color: var(--g-ink-2); line-height: 1.7; }
.o-rules { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: rule; }
.o-rules li {
  position: relative; padding: 0 0 0 32px; color: var(--g-ink-2); font-size: 14px; line-height: 1.65; counter-increment: rule;
}
.o-rules li::before {
  content: counter(rule); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--g-sky-2); color: var(--g-brand-deep); font-size: 12px; font-weight: 700;
}
.o-rules strong { display: block; color: var(--g-ink); font-size: 14.5px; }
.o-sheet .o-row-link { border: 1px solid var(--g-line); border-radius: 14px; }
.o-cap { display: flex; align-items: center; gap: 10px; }
.o-cap .g-input { flex: 1; }
.o-cap-unit { font-weight: 700; color: var(--g-ink-2); }
.o-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.o-quick button {
  min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--g-line-strong); background: #fff;
  color: var(--g-brand-deep); font: 600 14px var(--g-font); cursor: pointer;
}
.o-quick button[aria-pressed="true"] { background: var(--g-sky-2); border-color: var(--g-water); }
.o-stop-box { margin: 4px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--g-sky); color: var(--g-ink-2); font-size: 14px; line-height: 1.7; }
.o-stop-box p { margin: 0; }
.o-stop-box p + p { margin-top: 6px; }
.g-button.o-danger-btn { background: #fff; color: #a3412f; border: 1.5px solid rgba(163, 65, 47, .35); box-shadow: none; }
@keyframes o-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .o-sheet-box { animation: none; } }

@media (max-width: 480px) {
  .o-hero { padding-left: 16px; }
  .o-hero-art { width: 96px; }
  .o-hero-title { font-size: 21px; }
}

/* Wide screens (owner 11-12 「好看吗」): one centred container, the logo at its edge, a short welcome row, then two top-aligned
   columns while the guide shows (the guide sticky on the left, the card with its steps on the right); otherwise the card alone. */
@media (min-width: 960px) {
  body .g-wrap.o-wrap { max-width: 1160px; padding: 32px 40px 64px; }
  .o-wrap .g-brand { justify-content: flex-start; margin: 0 0 20px; }
  .o-wrap .g-logo { height: 36px; }
  .o-hero { align-items: center; gap: 24px; min-height: 0; margin: 0 0 28px; padding: 22px 36px 0 40px; }
  .o-hero-text { padding-bottom: 26px; }
  .o-hero-chip { margin-bottom: 10px; }
  .o-hero-title { font-size: 30px; margin: 0 0 6px; }
  .o-hero-title br { display: none; }
  .o-hero-line { font-size: 16px; }
  .o-hero-art { width: 150px; align-self: flex-end; margin-bottom: -4px; }
  body.has-guide .g-wrap.o-wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) 520px; column-gap: 32px; align-items: start;
    grid-template-areas: "brand brand" "hero hero" "guide card" "guide back";
  }
  body.has-guide .o-wrap .g-brand { grid-area: brand; }
  body.has-guide .o-wrap .o-hero { grid-area: hero; }
  body.has-guide .o-wrap .o-guide { grid-area: guide; position: sticky; top: 20px; margin: 0; }
  body.has-guide .o-wrap .g-card { grid-area: card; }
  body.has-guide .o-wrap .o-back { grid-area: back; }
  body:not(.has-guide) .o-wrap > .g-card, body:not(.has-guide) .o-wrap > .o-back { max-width: 600px; margin-left: auto; margin-right: auto; }
  body.is-owner .g-wrap.o-wrap { max-width: 680px; }
  .o-sheet { align-items: center; }
  .o-sheet-box { border-radius: 24px; }
  .o-sheet-box::before { display: none; }
}
#her-card .o-card-head { display: none; }   /* her name is already on the line above */

/* v2 (owner 11-12: her own program plays her): the docs link says what to connect first; her preferences and webhook. */
.o-row-two { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.o-row-two span { display: flex; flex-direction: column; gap: 2px; }
.o-row-two b { font-weight: 650; }
.o-row-two small { color: var(--g-muted); font-size: 12.5px; font-weight: 400; line-height: 1.5; }
.o-pill.is-benched { background: #fff; color: var(--g-brand-deep); border: 1.5px dashed var(--g-water); }
.o-sheet-label { margin: 16px 0 8px; font-size: 14px; font-weight: 650; color: var(--g-ink); }
.o-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.o-pick {
  min-height: 38px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--g-line-strong); background: #fff;
  color: var(--g-ink-2); font: 600 14px var(--g-font); cursor: pointer;
}
.o-pick[aria-pressed="true"] { background: var(--g-brand); border-color: var(--g-brand); color: #fff; }
.o-pick:focus-visible { outline: 2px solid var(--g-brand); outline-offset: 2px; }
.o-seg-full { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin: 0; }
.o-seg-full .o-seg-item { min-height: 42px; font-size: 14.5px; }
.o-sheet-rows { margin-top: 16px; }
.o-sheet-rows .o-row { min-height: 58px; }
.o-hook-now { display: flex; gap: 6px; align-items: baseline; margin: 4px 0 14px; padding: 9px 12px; border-radius: 12px; background: var(--g-sky);
              color: var(--g-ink-2); font-size: 13.5px; overflow-wrap: anywhere; }
.o-hook-now code { color: var(--g-brand-deep); font: 600 13.5px ui-monospace, Menlo, Consolas, monospace; }
.o-center-btn { display: flex; margin: 8px auto 0; }
#set-hook-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 费用 (owner 11-12): her line's fee chip opens the fee sheet */
.o-fee {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--g-line-strong);
  background: #fff; color: var(--g-brand-deep); font: 600 12.5px var(--g-font); cursor: pointer; font-variant-numeric: tabular-nums;
}
.o-fee::after { content: "›"; margin-left: 5px; color: var(--g-faint); font-size: 15px; line-height: 1; }
.o-fee:focus-visible { outline: 2px solid var(--g-brand); outline-offset: 2px; }
.o-pill.o-pill-warn{background:#fff4e5;color:#b45309;box-shadow:inset 0 0 0 1px rgba(180,83,9,.25)}

/* /join (owner 11-12): his outside fish as a list (up to 3 live), the hosted fish's one line, 「再接一条」 or the limit */
.o-back-list { display: inline-flex; align-items: center; gap: 2px; margin: -6px 0 10px -6px; color: var(--g-brand-deep); font-weight: 600; }
.o-back-list svg { width: 18px; height: 18px; }
.o-list-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.o-list-text { flex: 1; min-width: 0; }
.o-list-title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.35; }
.o-list-sub { margin: 2px 0 0; color: var(--g-muted); font-size: 13px; }
.o-meter {
  flex: none; display: inline-flex; align-items: baseline; gap: 3px; padding: 6px 12px; border-radius: 14px; background: var(--g-sky);
  border: 1px solid var(--g-sky-2); color: var(--g-brand-deep); font-variant-numeric: tabular-nums;
}
.o-meter b { font-size: 20px; line-height: 1; }
.o-meter span { font-size: 13px; color: var(--g-ink-2); }
.o-hosted {
  display: flex; gap: 9px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; background: var(--g-field);
  border: 1px solid var(--g-line); color: var(--g-ink-2); font-size: 13px; line-height: 1.6;
}
.o-hosted svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--g-brand); }
.o-hosted b { color: var(--g-ink); font-weight: 650; }
.o-step .o-hosted { margin: -4px 0 16px; }
.o-fish-list:empty { display: none; }
.o-fish-list .o-row-btn { min-height: 68px; }
.o-fish-list .g-avatar { flex: none; width: 40px; height: 40px; border-radius: 13px; font-size: 17px; }
.o-fish-name { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 15.5px; font-weight: 700; }
.o-fish-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-fish-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 3px; color: var(--g-muted); font-size: 12.5px; }
.o-fish-meta .o-pill { font-size: 12px; line-height: 1.6; padding: 0 8px; }
.o-fish-list .is-gone .g-avatar { background: #edf0f7; color: var(--g-muted); }
.o-left { margin: 12px 0 0; }
.o-left-sum {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px; color: var(--g-muted);
  font-size: 13.5px; cursor: pointer; list-style: none;
}
.o-left-sum::-webkit-details-marker { display: none; }
.o-left-sum svg { width: 16px; height: 16px; transition: transform .15s; }
.o-left[open] .o-left-sum svg { transform: rotate(90deg); }
.o-more { margin-top: 16px; }
.o-more .g-button { display: flex; align-items: center; justify-content: center; gap: 6px; }
.o-more .g-button svg { width: 18px; height: 18px; }
.o-more .g-hint { margin-top: 8px; }
.o-limit { margin-top: 16px; }
body.is-list .o-hero { display: none; }

/* step 1 (owner 11-12 「不是这key咋没地方申请」): 用鱼缸账号 (default) | 用 Olivia Key; not eligible: 去充值 on the page */
.o-way { grid-template-columns: repeat(2, 1fr); margin: 0 0 18px; }
.o-way-note { margin: 0 0 14px; color: var(--g-ink-2); font-size: 14px; line-height: 1.7; }
.o-switch-line { margin: 14px 0 0; text-align: center; color: var(--g-muted); font-size: 14px; }
.o-switch-line .o-inline { min-height: 44px; padding: 0 4px; }
.o-no-actions { display: grid; gap: 10px; margin-top: 16px; }
.o-no-actions .g-button { margin: 0; }
.o-short { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid rgba(67, 104, 251, .14);
  color: var(--g-ink); font-size: 14.5px; line-height: 1.6; }
.o-short strong { color: var(--g-brand-deep); font-size: 18px; font-variant-numeric: tabular-nums; }
.o-topup { margin-top: 4px; }
.o-topup-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.o-topup-line { margin: 0; color: var(--g-ink-2); font-size: 14px; line-height: 1.65; }
.o-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 16px; }
.o-amounts button { min-height: 52px; padding: 0; border-radius: 14px; font-size: 16px; font-variant-numeric: tabular-nums; }
.o-amounts small { display: block; margin-top: 1px; font-size: 11px; font-weight: 500; color: var(--g-muted); }
.o-amounts button[aria-pressed="true"] small { color: inherit; }
.o-topup .g-pay:not(:empty) { margin-top: 18px; }
/* owner 11-14 「上面几个数字同步显示要付多少钱」: the tiles carry the exact amounts (¥9.98 …), bold; the line under them says why */
.o-amounts button span { font-weight: 750; letter-spacing: -.01em; }
.o-topup-note { margin: -8px 0 14px; color: var(--g-ink-2); font-size: 13px; line-height: 1.6; }
.o-moved { padding: 12px 14px; border: 2px solid #d92d20; border-radius: 12px; background: #fff1f0; font-weight: 700; }
@media (max-width: 340px) { .o-amounts { grid-template-columns: repeat(2, 1fr); } }
/* 爱发电 (owner 11-13): 「扫码付不了？用爱发电付」 under the WeChat top-up and in the owner page's 账单, to /pay/afdian/ */
.o-afdian { margin: 14px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--g-sky); border: 1px solid var(--g-sky-2); }
.o-afdian-line { margin: 0 0 10px; color: var(--g-ink-2); font-size: 14px; line-height: 1.65; }
.o-afdian-go { min-height: 44px; margin: 0; }
.o-who { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 10px 14px;
  border-radius: 14px; background: var(--g-sky); color: var(--g-ink-2); font-size: 14px; }
.o-who b { color: var(--g-ink); }
.o-who .g-text-button { min-height: 36px; padding: 0 4px; font-size: 13.5px; }

/* Above step 1 (owner 11-12 「怎么接入文档和前置条件也没有…连怎么让AI给我弄都不知道」): what he needs, then which way his fish joins */
.o-guide { display: grid; gap: 14px; margin: 0 0 14px; }
.o-guide-title { margin: 0 0 12px; font-size: 16.5px; font-weight: 700; letter-spacing: .01em; color: var(--g-ink); }
.o-prep { padding: 18px 18px 16px; border-radius: var(--g-radius); background: linear-gradient(170deg, #fff 0%, #f3f7ff 100%);
  border: 1px solid rgba(67, 104, 251, .10); box-shadow: var(--g-shadow); }
.o-prep-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.o-prep-list li { display: flex; gap: 12px; align-items: flex-start; }
.o-prep-list li > svg, .o-prep-after > svg {
  flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 11px; background: var(--g-sky-2); color: var(--g-brand-deep);
  box-shadow: 0 1px 0 rgba(67, 104, 251, .08);
}
.o-prep-list b, .o-prep-after b { display: block; color: var(--g-ink); font-size: 14.5px; line-height: 1.45; }
.o-prep-list small { display: block; margin-top: 1px; color: var(--g-ink-2); font-size: 13px; line-height: 1.55; }
.o-prep-after {
  display: flex; gap: 12px; align-items: flex-start; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed rgba(67, 104, 251, .22);
  color: var(--g-ink-2); font-size: 13px; line-height: 1.55;
}
.o-prep-after .g-link { padding: 0 2px; }
.o-paths { padding: 18px; border-radius: var(--g-radius); background: #fff; border: 1px solid rgba(67, 104, 251, .10); box-shadow: var(--g-shadow); }
.o-path-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
.o-path-tab {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 92px; padding: 12px 4px 10px; border-radius: 14px;
  border: 1.5px solid var(--g-line); background: var(--g-field); color: var(--g-ink-2); font: 600 13.5px/1.3 var(--g-font);
  text-align: center; cursor: pointer;
}
.o-path-tab svg { width: 24px; height: 24px; color: var(--g-brand-deep); }
.o-path-tab small { display: block; margin-top: 2px; color: var(--g-muted); font-size: 11.5px; font-weight: 500; }
.o-path-tab[aria-selected="true"] { background: #fff; border-color: var(--g-water); color: var(--g-brand-deep);
  box-shadow: 0 0 0 3px rgba(67, 104, 251, .10); }
.o-path-text { margin: 0 0 12px; color: var(--g-ink-2); font-size: 14px; line-height: 1.7; }
.o-howto { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: howto; }
.o-howto li { position: relative; padding-left: 36px; counter-increment: howto; color: var(--g-ink-2); font-size: 13.5px; line-height: 1.6; }
.o-howto li::before {
  content: counter(howto); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 25px; height: 25px;
  border-radius: 50%; background: var(--g-sky-2); color: var(--g-brand-deep); font-size: 13px; font-weight: 700;
}
.o-howto b { display: block; color: var(--g-ink); font-size: 14.5px; }
.o-howto .o-code { margin-top: 8px; }
.o-hint { display: block; margin-top: 6px; color: var(--g-ink-2); font-size: 12.5px; line-height: 1.6; }
.o-hint a { color: var(--g-brand); }
.o-code-sm { padding: 8px 8px 8px 12px; border-radius: 13px; }
.o-code-sm .o-code-text { font-size: 12.5px; line-height: 1.5; font-weight: 500; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; overflow-wrap: normal; }
.o-code-sm .g-copy { min-height: 38px; padding: 0 12px; font-size: 13.5px; }
.o-paths .o-links { margin-top: 14px; }
.o-api { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.o-api li { display: grid; gap: 3px; padding: 10px 12px; border-radius: 13px; background: var(--g-field); border: 1px solid var(--g-line); }
.o-api li > code:first-child { justify-self: start; padding: 2px 8px; border-radius: 7px; background: #fff; color: var(--g-brand-deep);
  font: 600 12.5px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.o-api span { color: var(--g-ink-2); font-size: 13px; line-height: 1.55; }
.o-api span code, .o-where code { font: 500 12px ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--g-ink); }
.o-prompt-box { margin: 0 0 12px; border-radius: 13px; border: 1px solid var(--g-line); background: var(--g-field); }
.o-prompt-box summary { min-height: 44px; padding: 0 14px; display: flex; align-items: center; color: var(--g-brand-deep);
  font-size: 13.5px; font-weight: 600; cursor: pointer; }
.o-prompt { max-height: 260px; margin: 0; padding: 0 14px 14px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--g-ink-2); font: 12px/1.65 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
#pane-ai > .g-button { display: inline-flex; justify-content: center; gap: 8px; width: 100%; }
#pane-ai > .g-button svg { width: 18px; height: 18px; }
#pane-ai .g-hint { margin-top: 10px; }

/* Step 4: where the code goes, and whether her program has come */
.o-where { margin: 16px 0 0; padding: 14px; border-radius: 16px; background: var(--g-sky); border: 1px solid var(--g-line); }
.o-where-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.o-where-item { padding: 10px 12px; border-radius: 12px; background: #fff; color: var(--g-ink-2); font-size: 13.5px; line-height: 1.6; }
.o-where-item + .o-where-item { margin-top: 8px; }
.o-where-item b { display: block; color: var(--g-ink); font-size: 14px; }
.o-where-all { min-height: 36px; margin-top: 6px; padding: 0 2px; font-size: 13px; }
.o-link { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 11px 14px; border-radius: 14px;
  background: var(--g-field); border: 1px solid var(--g-line); color: var(--g-ink-2); font-size: 14px; font-weight: 600; }
.o-link-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--g-faint); animation: o-blink 1.6s ease-in-out infinite; }
.o-link.is-on { background: var(--g-sky-2); border-color: var(--g-water); color: var(--g-brand-deep); }
.o-link.is-on .o-link-dot { background: var(--g-brand); animation: none; box-shadow: 0 0 0 4px rgba(67, 104, 251, .18); }
@keyframes o-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .o-link-dot { animation: none; } }
@media (max-width: 360px) { .o-path-tab { min-height: 84px; font-size: 12.5px; } .o-path-tab small { display: none; } }

/* the one-line plugin URL never widens its column */
.o-guide > *, .o-howto > li, .o-path { min-width: 0; }
.o-howto .o-code { max-width: 100%; }

/* Wide screens: larger type in the guide and the card (after the guide rules above, so it wins) */
@media (min-width: 960px) {
  .o-guide-title { font-size: 19px; margin-bottom: 14px; }
  .o-prep, .o-paths { padding: 22px 24px; }
  .o-prep-list b, .o-prep-after b { font-size: 16px; }
  .o-prep-list small, .o-prep-after { font-size: 14.5px; }
  .o-path-tab { min-height: 96px; font-size: 15px; }
  .o-path-tab small { font-size: 12.5px; }
  .o-path-text, .o-howto li { font-size: 15px; }
  .o-howto b { font-size: 15.5px; }
  .o-api span { font-size: 14.5px; }
  .o-wrap .g-card .g-lede { font-size: 15.5px; }
}

/* her settings: 高级 (owner 11-12 「这是什么」): the push address folded away, plain words, closed by default */
.o-adv { margin: 12px 0 0; border-radius: 16px; border: 1px solid var(--g-line); background: var(--g-field); }
.o-adv-sum { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; list-style: none; cursor: pointer;
  color: var(--g-ink); font-size: 14.5px; font-weight: 600; }
.o-adv-sum::-webkit-details-marker { display: none; }
.o-adv-sum span { flex: 1; }
.o-adv-sum small { margin-left: 8px; color: var(--g-muted); font-size: 12.5px; font-weight: 500; }
.o-adv-sum svg { width: 16px; height: 16px; color: var(--g-faint); transition: transform .15s; }
.o-adv[open] .o-adv-sum svg { transform: rotate(90deg); }
.o-adv .o-rows { margin: 0 10px; background: #fff; }
.o-adv-note { margin: 10px 14px 14px; color: var(--g-ink-2); font-size: 13px; line-height: 1.65; }

/* Her owner admin (owner 11-12 「外来鱼也需要管理页面吧？」): six tabs, then one pane. The fb-* / fbp-* / fbt-* parts are the hosted 鱼缸小镇
   admin parts (shell.css, townplay.js STYLE, town.js STYLE @4835af680a) on the gate tokens, so the copied views in outside-town.js look the same. */
:root { --fb-accent: var(--g-brand); --fb-accent-deep: var(--g-brand-deep); --fb-accent-soft: var(--g-sky-2); --fb-panel: #fff;
  --fb-panel-2: var(--g-field); --fb-line: var(--g-line); --fb-text: var(--g-ink); --fb-text-2: var(--g-ink-2); --fb-muted: var(--g-muted);
  --fb-shadow: 0 10px 26px -20px rgba(27, 62, 158, .55); }
.o-main-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 16px; }
.o-main-tab { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 6px; border-radius: 14px;
  border: 1.5px solid var(--g-line); background: var(--g-field); color: var(--g-ink-2); font: 600 14.5px var(--g-font); cursor: pointer; }
.o-main-tab svg { width: 19px; height: 19px; color: var(--g-brand-deep); flex: none; }
.o-main-tab[aria-selected="true"] { background: #fff; border-color: var(--g-water); color: var(--g-brand-deep); box-shadow: 0 0 0 3px rgba(67, 104, 251, .10); }
@media (min-width: 560px) { .o-main-tabs { grid-template-columns: repeat(6, 1fr); } .o-main-tab { flex-direction: column; gap: 3px; min-height: 64px; font-size: 13.5px; } }
#pane-manage > .o-tabs3 { margin-top: 0; }
.o-town-pane { display: grid; gap: 4px; }
.o-soon { display: grid; gap: 4px; margin: 4px 0; padding: 18px 16px; border-radius: 16px; background: var(--g-sky); border: 1px dashed var(--g-water);
  color: var(--g-ink-2); font-size: 14px; line-height: 1.6; text-align: center; }
.o-soon b { color: var(--g-brand-deep); font-size: 15px; }
.fb-note { margin: 6px 0; color: var(--g-muted); font-size: 13.5px; line-height: 1.6; }
.fb-rows { display: grid; border-radius: 16px; border: 1px solid var(--g-line); background: #fff; overflow: hidden; }
.fb-row-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 9px 14px; border: 0; background: none;
  color: var(--g-ink); font: inherit; text-align: left; text-decoration: none; cursor: default; }
button.fb-row-item, a.fb-row-item { cursor: pointer; }
.fb-row-item + .fb-row-item { border-top: 1px solid var(--g-line); }
button.fb-row-item:hover, a.fb-row-item:hover { background: var(--g-field); }
.fb-row-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fb-row-text b { font-size: 14.5px; }
.fb-row-text small { color: var(--g-muted); font-size: 12.5px; line-height: 1.5; }
.fb-tag { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--g-sky-2); color: var(--g-brand-deep); font-size: 12.5px; font-weight: 600; }
.fb-tag.is-live { background: var(--g-brand); color: #fff; }
.fb-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--g-sky); border: 1px solid var(--g-line); justify-self: start; }
.fb-tab { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--g-ink-2); font: 600 13.5px var(--g-font); cursor: pointer; }
.fb-tab[aria-selected="true"] { background: #fff; color: var(--g-brand-deep); box-shadow: 0 1px 3px rgba(22, 40, 90, .12); }
.fb-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.fb-chips::-webkit-scrollbar { display: none; }
.fb-chip-option { flex: none; min-height: 34px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--g-line); background: #fff;
  color: var(--g-ink-2); font: 600 13px var(--g-font); cursor: pointer; }
.fb-chip-option[aria-checked="true"] { border-color: var(--g-water); background: var(--g-sky-2); color: var(--g-brand-deep); }
.fb-button { min-height: 40px; margin: 8px auto 0; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--g-line); background: #fff;
  color: var(--g-brand-deep); font: 600 14px var(--g-font); cursor: pointer; display: block; }
.fbp-hero { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #fbfcff, #eaf1ff);
  box-shadow: 0 14px 34px -24px rgba(27, 62, 158, .5); border: 1px solid rgba(67, 104, 251, .10); }
.fbp-grow { flex: 1; min-width: 0; }
.fbp-standing { align-items: stretch; gap: 12px 16px; flex-wrap: wrap; }
.fbp-standing .fbp-hero-lines { flex: 1 1 220px; display: grid; gap: 3px; font-size: 13px; color: var(--g-ink-2); }
.fbp-hero-title { font-weight: 700; color: var(--g-ink); font-size: 14.5px; }
.fbp-hero-facts { color: var(--g-muted); }
.fbp-hero-cols { display: flex; gap: 18px; flex-wrap: nowrap; align-items: flex-end; flex: 1 1 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fbp-hero-pts { display: flex; align-items: baseline; gap: 4px; flex: none; flex-wrap: wrap; width: max-content; }
.fbp-hero-pts small { flex-basis: 100%; font-size: 12px; font-weight: 650; color: var(--g-brand-deep); }
.fbp-hero-pts b { font-size: 30px; line-height: 1; color: var(--g-brand-deep); font-variant-numeric: tabular-nums; }
.fbp-hero-pts span { font-size: 13px; color: var(--g-ink-2); }
.fbp-hero-pts em { flex-basis: 100%; font-style: normal; font-size: 12px; color: var(--g-muted); }
.fbp-hero-pts em.fbp-up { color: var(--g-brand-deep); }
.fbp-block { display: grid; gap: 8px; margin-top: 16px; }
.fbp-block h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--g-ink); }
.fbp-board { display: grid; margin: 4px 0 8px; padding: 0; list-style: none; }
.fbp-board li { display: flex; gap: 8px; align-items: baseline; padding: 7px 2px; border-top: 1px solid var(--g-line); font-size: 13.5px; }
.fbp-board li:first-child { border-top: 0; }
.fbp-board li i { flex: none; width: 22px; font-style: normal; color: var(--g-muted); font-variant-numeric: tabular-nums; }
.fbp-board li span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbp-board li em { font-style: normal; font-size: 12px; color: var(--g-brand-deep); background: var(--g-sky-2); border-radius: 999px; padding: 1px 7px; }
.fbp-board li b { flex: none; font-variant-numeric: tabular-nums; }
.fbp-board li.fbp-me span { color: var(--g-brand-deep); font-weight: 650; }
.fbp-line { margin: 0; padding: 10px 2px; border-top: 1px solid var(--g-line); font-size: 13.5px; line-height: 1.6; color: var(--g-ink-2); }
.fbp-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 0 6px; }
.fbp-friend { flex: none; display: grid; grid-template-columns: auto auto; grid-template-areas: "i b" "i s"; column-gap: 8px; align-items: center;
  padding: 6px 12px 6px 6px; border: 1px solid var(--g-line); border-radius: 999px; background: #fff; color: var(--g-ink); font: inherit; text-align: left; cursor: pointer; }
.fbp-friend i { grid-area: i; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--g-sky-2);
  color: var(--g-brand-deep); font-style: normal; font-weight: 700; font-size: 14px; }
.fbp-friend b { grid-area: b; font-size: 13px; line-height: 1.2; }
.fbp-friend small { grid-area: s; font-size: 11px; color: var(--g-muted); line-height: 1.2; }
.fbp-friend.fbp-is i { background: var(--g-brand); color: #fff; }
.fbp-friend.fbp-pair { border-color: var(--g-water); background: var(--g-sky); }
.fbt-fishes { border-radius: 16px; border: 1px solid var(--g-line); background: #fff; overflow: hidden; }
.fbt-fishes:empty { display: none; }
.fbt-visit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; width: 100%; padding: 12px 14px; border: 0;
  border-top: 1px solid var(--g-line); background: none; color: var(--g-ink); font: inherit; text-align: left; cursor: pointer; }
.fbt-visit:first-child { border-top: 0; }
.fbt-visit:hover { background: var(--g-field); }
.fbt-vwho { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 650; min-width: 0; }
.fbt-vwho i { font-style: normal; color: var(--g-muted); font-weight: 500; }
.fbt-vwho .fbt-me { color: var(--g-brand-deep); }
.fbt-visit small { color: var(--g-muted); font-size: 11.5px; white-space: nowrap; align-self: start; padding-top: 3px; }
.fbt-vsum { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: var(--g-ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fbt-vnone .fbt-vsum { color: var(--g-muted); }
.fbt-vhead { display: grid; gap: 6px; padding: 0 0 10px; }
.fbt-vhead p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--g-ink-2); }
.fbt-vtopics { display: flex; flex-wrap: wrap; gap: 6px; }
.fbt-vtopics span { padding: 3px 10px; border-radius: 999px; background: var(--g-sky-2); color: var(--g-brand-deep); font-size: 12px; }
.fbt-chat { position: relative; border-radius: 16px; background: linear-gradient(#f6f8fd, #eef3fe); padding: 14px 12px 12px; display: grid; gap: 8px; min-height: 160px; }
.fbt-line { display: flex; flex-direction: column; align-items: flex-start; max-width: 86%; }
.fbt-line.fbt-her { justify-self: end; align-items: flex-end; }
.fbt-name { font-size: 11.5px; color: var(--g-muted); margin: 0 6px 2px; display: flex; gap: 5px; align-items: center; }
.fbt-pill { padding: 0 6px; border-radius: 999px; background: var(--g-sky-2); color: var(--g-brand-deep); font-size: 10.5px; line-height: 16px; }
.fbt-bubble { padding: 8px 12px; border-radius: 16px 16px 16px 5px; background: #fff; color: var(--g-ink); font-size: 14px; line-height: 1.55;
  box-shadow: 0 1px 3px rgba(22, 40, 90, .14); overflow-wrap: anywhere; }
.fbt-her .fbt-bubble { border-radius: 16px 16px 5px 16px; background: var(--g-brand); color: #fff; }
.fbt-line time { font-size: 10.5px; color: var(--g-muted); margin: 2px 6px 0; }
.fbt-sys { justify-self: center; max-width: 92%; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--g-muted);
  font-size: 11.5px; text-align: center; line-height: 1.5; }
.fbt-topic { color: var(--g-brand-deep); background: var(--g-sky-2); }
.fbt-did { color: var(--g-ink-2); font-weight: 600; }
/* 她在镇上: the map with her dot (town.js paintBadges, one badge) */
.o-map { margin: 14px 0 0; }
.o-map-frame { position: relative; overflow-x: auto; border-radius: 16px; border: 1px solid var(--g-line); background: #17233b; scrollbar-width: thin; }
.o-map-frame img { display: block; width: auto; height: 190px; max-width: none; }
.o-map-dot { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; pointer-events: none; }
.o-map-dot b { padding: 4px 10px; border-radius: 999px; background: var(--g-brand); color: #fff; font-size: 12.5px; font-weight: 700;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 6px 14px -4px rgba(16, 40, 120, .6); white-space: nowrap; }
.o-map-dot::after { content: ""; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: var(--g-brand); box-shadow: 0 0 0 4px rgba(255, 255, 255, .9); }
.o-map-line { margin: 8px 2px 0; color: var(--g-ink-2); font-size: 13.5px; }
.o-more-link { justify-self: center; padding: 8px; color: var(--g-brand-deep); font-size: 13.5px; font-weight: 600; }
/* 动态 */
.o-feed { display: grid; margin: 0; padding: 0; list-style: none; border-radius: 16px; border: 1px solid var(--g-line); background: #fff; overflow: hidden; }
.o-feed li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 11px 14px; border-top: 1px solid var(--g-line); }
.o-feed li:first-child { border-top: 0; }
.o-feed time { grid-row: span 2; color: var(--g-muted); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.o-feed b { font-size: 14px; }
.o-feed span { color: var(--g-ink-2); font-size: 13px; line-height: 1.55; }
.o-feed li.is-warn b { color: #a3412f; }
.o-feed li.is-soon b { color: var(--g-brand-deep); }
/* 朋友 · 她不在时提起她的鱼 (town bonds 11-13): each friend's own words as a small card */
.o-missed { display: grid; gap: 8px; }
.o-quote { margin: 0; padding: 10px 14px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--g-line);
  box-shadow: 0 6px 16px -14px rgba(39, 66, 170, .5); }
.o-quote figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.o-quote figcaption b { color: var(--g-brand-deep); font-size: 13.5px; }
.o-quote figcaption time { color: var(--g-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.o-quote blockquote { margin: 6px 0 0; padding: 8px 12px; border-radius: 4px 14px 14px 14px; background: var(--g-sky); color: var(--g-ink);
  font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.o-feed .o-feed-quotes { grid-column: 2; margin-top: 6px; }
.o-feed .o-feed-quotes .o-quote { box-shadow: none; padding: 8px 10px 10px; }
/* 账单 */
.o-bill-top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.o-bill-top div { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #fbfcff, #eaf1ff); border: 1px solid rgba(67, 104, 251, .10); }
.o-bill-top small { color: var(--g-muted); font-size: 12.5px; }
.o-bill-top b { color: var(--g-brand-deep); font-size: 24px; font-variant-numeric: tabular-nums; }
.o-bill-cap { justify-self: end; min-height: 36px; font-size: 13px; }
.o-bill-day { margin-top: 10px; border-radius: 16px; border: 1px solid var(--g-line); background: #fff; overflow: hidden; }
.o-bill-day summary { display: flex; justify-content: space-between; gap: 10px; min-height: 50px; align-items: center; padding: 0 14px; cursor: pointer; list-style: none; }
.o-bill-day summary::-webkit-details-marker { display: none; }
.o-bill-day summary span { color: var(--g-ink-2); font-size: 13.5px; }
.o-bill-day .fb-rows { border: 0; border-top: 1px solid var(--g-line); border-radius: 0; }
.fb-drawer-body { display: grid; gap: 10px; }

/* the admin panes never widen the card (the map scrolls inside its own frame) */
.o-town-pane > *, .o-town-pane, .o-map, .fbp-hero > *, .fbp-block > * { min-width: 0; }
.o-pane.o-town { min-width: 0; max-width: 100%; overflow: hidden; }

.o-bill-wide { grid-column: 1 / -1; }

/* 2026-11-12: her program has not come yet (amber) / is not there now */
.o-pill.is-waiting { background: #fff4e5; color: #b45309; box-shadow: inset 0 0 0 1px rgba(180, 83, 9, .28); }
.o-pill.is-offline { background: #edf0f7; color: var(--g-ink-2); }
.o-row-hint { color: #b45309; font-size: 12px; }
.o-setup-open { margin: -4px 0 16px; }
.o-rules li { min-width: 0; }
.o-rules li .o-code { margin-top: 8px; }
.o-rules code { overflow-wrap: anywhere; }

/* the live town (outside-townmap.js, the hosted renderers' CSS in fb-town.css): /join's card is narrow at every width, so a place's
   scene keeps the whole width and its list goes under it (the hosted admin puts them side by side from 1000 px) */
.o-townmap { margin: 4px 0 14px; }
.o-townmap .fbt-stage.fbt-two { grid-template-columns: minmax(0, 1fr); }

/* 鲸喜大奖 (her page, 她在镇上): the pool and when it is drawn over her tickets */
.o-lot-pool { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; }
.o-lot-pool b { color: var(--g-brand-deep); font-size: 18px; }
.o-lot-pool small { color: var(--g-muted); font-size: 12.5px; }

/* 去充值: 「换成 ¥20？之前那张 ¥50 的单会作废」 (relay 作废订单, 11-14) */
.o-switch-ask {
  margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(67, 104, 251, .28);
  background: linear-gradient(135deg, #f5f8ff 0%, #e6eeff 100%);
}
.o-switch-q { margin: 0; color: var(--g-ink); font-size: 17px; font-weight: 700; line-height: 1.5; }
.o-switch-ask .g-pay-note { margin-top: 6px; }
.o-switch-do { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.o-switch-do .g-button { width: 100%; margin: 0; }

/* 2026-11-14: 战绩 on 她在镇上 (outside-town.js recordBlock) */
.o-rec-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.o-rec-tiles div { display: grid; gap: 2px; padding: 12px 10px; border-radius: 16px; background: linear-gradient(135deg, #fbfcff, #eaf1ff); border: 1px solid rgba(67, 104, 251, .10); text-align: center; }
.o-rec-tiles small { color: var(--g-muted); font-size: 12px; }
.o-rec-tiles b { color: var(--g-brand-deep); font-size: 22px; font-variant-numeric: tabular-nums; }
.o-record > h3 + .o-rec-tiles + .fb-rows, .o-record .fb-rows { margin-top: 2px; }
.o-record h3 + .fb-rows { margin-top: 0; }

/* owner 11-13: her balance and 充值 next to 费用 (and at the top of 账单); red when low */
.o-balance { font-variant-numeric: tabular-nums; }
.o-topup-now { display: inline-flex; width: auto; min-height: 30px; padding: 4px 16px; margin: 0; font-size: 14px;
  font-weight: 800; border-radius: 999px; vertical-align: middle; }
.o-bill-topup { display: flex; width: 100%; justify-content: center; min-height: 44px; margin: 0 0 8px; font-size: 16px; }
.o-topup-now.is-low { background: #d92d20; border-color: #d92d20; color: #fff; }
.o-low { margin: 6px 0 0; color: #d92d20; font-weight: 800; font-size: 14px; }

/* 2026-11-14 小镇社交: 她的一周 and 小手机 join the main tabs (7 or 8 of them: four to a row, the label under its icon), and her look on 自我介绍 */
.o-main-tabs[data-count="7"], .o-main-tabs[data-count="8"] { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.o-main-tabs[data-count="7"] .o-main-tab, .o-main-tabs[data-count="8"] .o-main-tab { flex-direction: column; gap: 3px; min-height: 58px; padding: 0 2px; font-size: 12.5px; }
.o-look { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--g-line); background: #fff; }
.o-look-pic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--g-sky-2); color: var(--g-brand-deep); font-weight: 800; font-size: 20px; overflow: hidden; }
.o-look-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.o-look-text { display: grid; gap: 2px; min-width: 0; }
.o-look-title { margin: 0; font-size: 15px; font-weight: 700; }
.o-look-sub { margin: 0; color: var(--g-muted); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.o-look .o-look-edit { width: auto; min-height: 36px; margin: 0; padding: 0 16px; font-size: 14px; }
.o-look-drop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin: 14px 0 0; padding: 12px; border-radius: 16px; border: 1.5px dashed var(--g-water); background: var(--g-sky); cursor: pointer; }
.o-look-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.o-look-drop:focus-within { box-shadow: 0 0 0 3px rgba(67, 104, 251, .22); }
.o-look-prev { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 18px; background: #fff; border: 1px solid var(--g-line); color: var(--g-brand-deep); font-size: 13px; font-weight: 700; overflow: hidden; text-align: center; }
.o-look-prev img { display: block; width: 100%; height: 100%; object-fit: cover; }
.o-look-drop-text { display: grid; gap: 3px; }
.o-look-drop-text b { font-size: 15px; color: var(--g-brand-deep); }
.o-look-drop-text small { color: var(--g-muted); font-size: 12.5px; line-height: 1.55; }
.o-look-note { min-height: 92px; }