:root {
      --paper: #f1e9d9; --paper2: #f8f1e3; --ink: #221d15; --soft: #6f655550;
      --mut: #6f6650; --rule: #d3c6a9; --accent: #b8542f; --accent-ink: #8c3c1d;
      --gold: #b58227; --gold-deep: #7e5712; --sea: #355f53;
      --shadow: 0 1px 3px rgba(60,46,30,.06);
      --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "Georgia", "Times New Roman", serif;
      --sans: -apple-system, system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    * { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body {
      margin: 0; background: var(--paper); color: var(--ink);
      font: 16px/1.66 var(--sans);
    }
    /* faint world-map watermark — the field-journal backdrop */
    body::before {
      content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background: url(/web/world-bg.svg) center 30% / 125% auto no-repeat;
    }
    .page {
      max-width: 768px; margin: 0 auto; padding: 0 26px 90px;
    }

    /* masthead — a travel-magazine cover plate */
    header { padding: 46px 0 18px; text-align: center; }
    .rule-d { border: 0; border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
              height: 3px; width: 60px; margin: 0 auto 18px; opacity: .85; }
    .kicker {
      font: 11px/1 var(--sans); letter-spacing: .5em; text-transform: uppercase;
      color: var(--gold-deep); margin-bottom: 16px; padding-left: .5em;
    }
    h1 {
      margin: 0; font-family: var(--serif); font-weight: 700;
      font-size: clamp(38px, 8vw, 60px); letter-spacing: .015em; color: var(--ink);
      line-height: 1.04;
    }
    .tagline {
      font-family: var(--serif); font-style: italic; font-size: 17.5px;
      color: var(--mut); margin: 14px auto 0; max-width: 30em;
    }
    .disclaimer {
      color: var(--mut); font-size: 11.5px; margin-top: 18px; opacity: .85;
      letter-spacing: .02em;
    }

    /* nav — letterspaced gallery tabs */
    nav { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center;
          margin: 30px 0 4px; padding-bottom: 0; border-bottom: 1px solid var(--rule); }
    .tab {
      background: none; border: 0; cursor: pointer; font: 13.5px var(--sans);
      color: var(--mut); padding: 0 2px 13px; margin-bottom: -1px;
      border-bottom: 2.5px solid transparent; letter-spacing: .14em;
    }
    .tab:hover { color: var(--ink); }
    .tab.active { color: var(--ink); border-bottom-color: var(--gold); }
    .tbadge { display: inline-block; min-width: 16px; padding: 1px 4px; margin-left: 5px;
      border-radius: 9px; background: var(--gold); color: #fff; font-size: 10px;
      line-height: 14px; letter-spacing: 0; vertical-align: 2px; }

    /* 发现 — discovery candidate cards */
    .ccard { padding: 20px 0; border-top: 1px solid var(--rule); }
    .ccard h3 { margin: 6px 0 0; font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--ink); }
    .ccard .cwhy { font-family: var(--serif); color: var(--ink); font-size: 15px; line-height: 1.65; margin: 10px 0 0; }
    .ccard .cwhy .lab { font: 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
      color: var(--gold); display: block; margin-bottom: 5px; }
    .ccard .cfacts { color: var(--mut); font-size: 13px; margin: 9px 0 0; line-height: 1.7; }
    .ccard .cfacts a { color: var(--mut); }
    .ccard .cbtns { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
    .ccard.handled { opacity: .55; }
    .ccard .cstate { font: 11px var(--sans); letter-spacing: .12em; color: var(--gold); }
    .ccard .creason { flex: 1; min-width: 180px; max-width: 340px; border: 0;
      border-bottom: 1px solid var(--rule); background: transparent; font: 14px var(--sans);
      color: var(--ink); padding: 4px 2px; }
    .ccard .creason:focus { outline: 0; border-bottom-color: var(--gold-deep); }
    .ccard .creasonshown { font-family: var(--serif); font-style: italic; color: var(--mut); font-size: 13px; }

    .count { text-align: center; color: var(--mut); font-size: 13px; margin: 18px 0 26px;
             font-family: var(--serif); font-style: italic; }

    /* one section-header component for all five views (department tag + title + sub) */
    .vhead { text-align: center; margin: 8px 0 24px; }
    .vkick { font: 11px/1 var(--sans); letter-spacing: .4em; text-transform: uppercase;
             color: var(--gold-deep); margin-bottom: 9px; padding-left: .4em; }
    .vtitle { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 25px; color: var(--ink); }
    .vsub { font-family: var(--serif); font-style: italic; color: var(--mut); font-size: 14px;
            margin-top: 7px; max-width: 34em; margin-left: auto; margin-right: auto; }

    /* understated filter line — sticky so it stays reachable across a long list */
    .filters {
      display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: baseline;
      justify-content: center; margin-bottom: 26px;
      position: sticky; top: 0; z-index: 5; padding: 12px 0 11px;
      background: var(--paper); border-bottom: 1px solid var(--rule);
    }
    .filters .spacer { flex: 1; }
    .vtoggle { align-self: center; }
    .filters input[type=search] {
      border: 0; border-bottom: 1px solid var(--rule); background: transparent;
      font: 15px var(--sans); color: var(--ink); padding: 4px 2px; min-width: 200px;
      flex: 1; max-width: 320px;
    }
    .filters input[type=search]:focus { outline: 0; border-bottom-color: var(--gold-deep); }
    .filters select {
      border: 0; background: transparent; font: 14px var(--sans); color: var(--mut);
      cursor: pointer; border-bottom: 1px solid var(--rule); padding: 4px 0;
    }
    label.toggle { display: inline-flex; gap: 6px; align-items: center; color: var(--mut); font-size: 13px; cursor: pointer; }

    /* wishes as editorial entries, hairline-separated, airy */
    .feed { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
    @media (max-width: 620px) { .feed { grid-template-columns: 1fr; } }

    /* compact list view — dense rows, a topic-art thumbnail, inline ★/status */
    body.compact .feed { grid-template-columns: 1fr; gap: 0; }
    .row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto auto auto auto;
      gap: 11px; align-items: center; padding: 5px 4px 5px 0; border-top: 1px solid var(--rule); }
    /* v6 reclassify: a quiet growth picker on each row + card */
    .rgrowth { border: 0; background: none; color: var(--mut); font: 12px var(--sans);
      cursor: pointer; max-width: 4.2em; border-bottom: 1px solid transparent; }
    .rgrowth:hover, .rgrowth:focus { color: var(--gold-deep); border-bottom-color: var(--rule); outline: 0; }
    @media (max-width: 620px) { .rgrowth { max-width: 3.4em; } }
    .entry .cardtools .growthsel { border: 0; border-bottom: 1px solid var(--rule); background: none;
      color: var(--mut); font: 13px var(--sans); cursor: pointer; padding: 2px 0; }
    .entry .cardtools .missionbtn { font-size: 12px; }
    .row .rthumb { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; flex: none;
      cursor: pointer; border: 1px solid var(--rule); background: var(--paper2); }
    .row .rthumb svg, .row .rthumb img { width: 40px; height: 40px; display: block; object-fit: cover; }
    .row .rmain { min-width: 0; }
    .row .rkind { font: 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
    .row .rtitle { margin: 2px 0 1px; font-family: var(--serif); font-weight: 600; font-size: 15px;
      line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .row .rwhere { font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .row .rwhere .tbd { font-style: italic; }
    .row .rstars { white-space: nowrap; }
    .row .rstars .star { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px;
      color: var(--mut); }
    .row .rstars .star.on, .row .rstars .star:hover { color: var(--gold-deep); }
    .row .rstatus { background: none; border: 1px solid var(--rule); border-radius: 999px;
      width: 24px; height: 24px; cursor: pointer; color: var(--mut); font-size: 13px; line-height: 1; }
    .row .rstatus:hover { border-color: var(--sea); color: var(--sea); }
    .row .rstatus.st-planned { border-color: var(--gold); color: var(--gold-deep); }
    .row.done .rstatus { border-color: var(--sea); color: var(--sea); }
    .row.done { opacity: .68; }
    .row.done .rtitle { color: var(--mut); }
    .row .rm { background: none; border: 0; cursor: pointer; color: var(--rule); font-size: 16px; padding: 0 2px; }
    .row .rm:hover { color: var(--accent); }
    @media (max-width: 560px) { .row .rstars { display: none; } }
    .entry { padding: 22px 0; border-top: 1px solid var(--rule); }
    .entry .ek {
      font: 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
      color: var(--gold-deep); margin-bottom: 8px;
    }
    .entry h3 {
      margin: 0; font-family: var(--serif); font-weight: 600; font-size: 20px;
      line-height: 1.32; color: var(--ink); letter-spacing: .005em;
    }
    .entry .where { margin-top: 6px; color: var(--ink); font-size: 14px; }
    .entry .where .sea { color: var(--sea); font-style: italic; }
    .entry .where .tbd { color: var(--mut); font-style: italic; }
    .entry .est { margin-top: 5px; color: var(--mut); font-size: 13px; }
    .esttag { color: var(--accent-ink); font-size: 11px; letter-spacing: .08em;
              border: 1px solid var(--rule); border-radius: 999px; padding: 1px 7px; }
    .entry .why { margin-top: 7px; font-family: var(--serif); font-style: italic;
                  color: var(--mut); font-size: 14px; }
    .entry .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
    .chip { font-size: 11px; letter-spacing: .02em; line-height: 1.5;
            border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px;
            color: var(--mut); background: var(--paper2); white-space: nowrap; }
    .chip.tag { color: var(--sea); }
    .chip.planned { color: var(--gold-deep); border-color: var(--gold); font-weight: 600; }
    .chip.eff { color: var(--accent-ink); }
    .chip.eff-high { border-color: var(--accent); }
    .chip.mission { color: var(--gold-deep); border-color: var(--gold); letter-spacing: .14em; font-weight: 600; }
    .entry.done { opacity: .72; }
    .entry.done .ek::after { content: " · 已游历"; color: var(--mut); }

    /* v6 成长 face — growth nav (primary axis), sections, done drawer, mission mark */
    /* v6 ④ 成长组合 — a life-trajectory overview (✓ realized / ◑ committed / ○ pursued) */
    .portfolio { margin: 4px 0 6px; }
    .pfhead { text-align: center; font: 11px var(--sans); letter-spacing: .16em; text-transform: uppercase;
      color: var(--gold-deep); margin-bottom: 12px; }
    .pfhead b { font-family: var(--serif); font-size: 15px; letter-spacing: 0; color: var(--ink); }
    .pfgrid { display: grid; gap: 7px 18px; grid-template-columns: 1fr 1fr; max-width: 560px; margin: 0 auto; }
    @media (max-width: 520px) { .pfgrid { grid-template-columns: 1fr; } }
    .pfcls { display: grid; grid-template-columns: 3em 1fr auto; gap: 9px; align-items: center; }
    .pfk { font-family: var(--serif); font-size: 14px; color: var(--ink); }
    .pfbar { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: var(--paper2);
      border: 1px solid var(--rule); }
    .pfbar i { display: block; height: 100%; }
    .pfbar .d { background: var(--sea); }          /* ✓ realized */
    .pfbar .p { background: var(--gold); }          /* ◑ committed */
    .pfbar .o { background: var(--rule); }          /* ○ pursued */
    .pfbar .pfempty { width: 100%; background: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--rule) 4px, var(--rule) 5px); opacity: .5; }
    .pfn { font: 11px var(--sans); color: var(--sea); min-width: 2.4em; text-align: right; }
    .growthnav { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center;
      margin: 18px 0 2px; padding-bottom: 0; border-bottom: 1px solid var(--rule); }
    .gtab { background: none; border: 0; cursor: pointer; font: 13px var(--sans); color: var(--mut);
      padding: 6px 2px 11px; margin-bottom: -1px; border-bottom: 2.5px solid transparent; letter-spacing: .12em;
      min-height: 44px; }
    .gtab:hover { color: var(--ink); }
    .gtab.on { color: var(--ink); border-bottom-color: var(--gold); }
    .gtab .gn { color: var(--gold-deep); font-size: 10.5px; margin-left: 4px; letter-spacing: 0; }
    .gsec { margin: 34px 0 0; }
    .gsec .gvhead { text-align: left; margin: 8px 0 12px; }
    .gsec .gvhead .vtitle { font-size: 24px; }
    .gsec .gvhead .vsub { margin-left: 0; margin-right: 0; }
    .gcount { font: 11px var(--sans); color: var(--mut); letter-spacing: .06em; margin-top: 9px; }
    .ginvite { font-family: var(--serif); font-style: italic; color: var(--mut); font-size: 14px;
      padding: 6px 2px 18px; border-top: 1px solid var(--rule); }
    .donetoggle { background: none; border: 0; cursor: pointer; font: 12px var(--sans); color: var(--mut);
      letter-spacing: .08em; padding: 10px 2px; margin-top: 4px; }
    .donetoggle:hover { color: var(--ink); }
    .donedrawer { margin-top: 2px; }
    /* mission mark (compact row): heavier serif title + a letterspaced gold kicker — no new glyph */
    .row.mission .rtitle { font-weight: 700; }
    .mkick { font: 9px/1 var(--sans); letter-spacing: .18em; color: var(--gold-deep);
      margin-left: 8px; vertical-align: 1px; }
    /* first-open hint */
    .v6hint { font-family: var(--serif); font-style: italic; color: var(--mut); font-size: 13.5px;
      text-align: center; background: var(--paper2); border: 1px solid var(--rule); border-radius: 8px;
      padding: 10px 14px; margin: 0 0 18px; }
    .v6hint button { background: none; border: 0; color: var(--gold-deep); cursor: pointer; font: 12px var(--sans); margin-left: 8px; }

    .empty { grid-column: 1 / -1; text-align: center; color: var(--mut);
             font-family: var(--serif); font-style: italic; padding: 40px 0; }

    /* plan */
    .planbar {
      display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: end;
      justify-content: center; padding: 22px; background: var(--paper2);
      border: 1px solid var(--rule); border-radius: 14px; margin-bottom: 26px;
      box-shadow: var(--shadow);
    }
    .field { display: flex; flex-direction: column; gap: 4px; font-size: 11px;
             letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
    .field input, .field select {
      border: 0; border-bottom: 1px solid var(--rule); background: transparent;
      font: 15px var(--sans); color: var(--ink); padding: 4px 2px; text-transform: none; letter-spacing: 0;
    }
    .field input:focus, .field select:focus { outline: 0; border-bottom-color: var(--gold-deep); }
    button.go {
      background: var(--accent); color: #fff; border: 0; border-radius: 999px;
      padding: 11px 26px; font: 15px var(--sans); cursor: pointer; letter-spacing: .03em;
    }
    button.go:hover { background: var(--accent-ink); }
    .planmap { margin: 14px 0 20px; }
    .planmap svg { width: 100%; height: auto; display: block; border: 1px solid var(--rule);
      border-radius: 12px; background: #eef2f6; }
    .planmap-cap { text-align: center; color: var(--mut); font-size: 11.5px; margin-top: 7px; }
    .note { color: var(--accent-ink); font-family: var(--serif); font-style: italic;
            font-size: 15px; text-align: center; margin: 22px 0; line-height: 1.6; }
    .opt { padding: 18px 0; border-top: 1px solid var(--rule); }
    .opt h3 { margin: 0 0 4px; font-family: var(--serif); font-size: 18px; }
    .opt .meta { color: var(--mut); font-size: 13px; }
    .bars { margin-top: 10px; }
    .bar { display: grid; grid-template-columns: 48px 1fr 132px; gap: 10px; align-items: center;
           font-size: 12px; color: var(--mut); margin: 3px 0; }
    .bar .track { background: #eadfce; border-radius: 999px; height: 5px; overflow: hidden; }
    .bar .fill { background: var(--sea); height: 100%; }
    .itin { padding: 18px 0; border-top: 1px solid var(--rule); }
    .itin .lead { font-family: var(--serif); font-size: 17px; }
    .itin .meta { color: var(--mut); font-size: 13px; }
    .itin ol { margin: 10px 0; padding-left: 20px; color: var(--ink); font-size: 14px; }
    .itin ol li { margin: 1px 0; }
    .trade { color: var(--mut); font-style: italic; font-size: 13px; margin-top: 4px; }
    /* utility class — must win over any later display rule (.addform etc.) */
    .hidden { display: none !important; }

    /* visible keyboard focus everywhere */
    :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 3px; }

    /* "为什么?" disclosure for the scoring breakdown (kept out of the default view) */
    .why-d { margin-top: 8px; }
    .why-d > summary { cursor: pointer; color: var(--gold-deep); font-size: 12px;
      letter-spacing: .04em; list-style: none; }
    .why-d > summary::-webkit-details-marker { display: none; }
    .why-d > summary::before { content: '▸ '; }
    .why-d[open] > summary::before { content: '▾ '; }

    /* wishlist tools + add form */
    .wltools { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
    .wltools .spacer { flex: 1; }
    button.go.sm { padding: 7px 14px; font-size: 13px; }
    button.ghost {
      background: transparent; border: 1px solid var(--rule); color: var(--mut);
      border-radius: 999px; padding: 6px 13px; font: 13px var(--sans); cursor: pointer;
    }
    button.ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
    .rmline { color: var(--mut); font-size: 12px; }
    .rmline a { color: var(--accent-ink); cursor: pointer; }
    .addform {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px;
      padding: 16px; background: var(--paper2); border: 1px solid var(--rule); border-radius: 14px;
    }
    .addform input {
      border: 0; border-bottom: 1px solid var(--rule); background: transparent;
      font: 14px var(--sans); color: var(--ink); padding: 6px 2px;
    }
    .addform input:focus { outline: 0; border-bottom-color: var(--gold-deep); }
    .addform #f-title { grid-column: 1 / -1; font-size: 16px; }
    .addform .doneopt { display: inline-flex; gap: 7px; align-items: center; color: var(--mut); font-size: 13px; }
    .addform .formbtns { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }
    .ghnote { grid-column: 1 / -1; margin: 0; color: var(--mut); font-size: 12.5px; line-height: 1.5; }
    .ghstatus { color: var(--mut); font-size: 12.5px; }
    .ghstatus.ok { color: var(--sea); }
    .ghstatus.err { color: var(--accent-ink); }
    .entry { position: relative; }
    .entry .rm {
      position: absolute; top: 18px; right: 0; background: none; border: 0; cursor: pointer;
      color: var(--rule); font-size: 17px; line-height: 1; padding: 2px 4px;
    }
    .entry .rm:hover { color: var(--accent); }
    .entry .mine { color: var(--sea); }
    .entry .cover { margin: 0 0 12px; border-radius: 9px; overflow: hidden;
      background: var(--paper2); border: 1px solid var(--rule); box-shadow: var(--shadow); }
    .entry .cover img { display: block; width: 100%; height: 158px; object-fit: cover; }
    .entry .cover.gen svg { display: block; width: 100%; height: 158px; }
    .entry .cardtools { margin-top: 9px; }
    .entry .imgbtn { background: none; border: 0; cursor: pointer; padding: 0;
      color: var(--mut); font: 11.5px var(--sans); letter-spacing: .03em; }
    .entry .imgbtn:hover { color: var(--gold-deep); }
    .entry .desire { margin-top: 9px; line-height: 1; user-select: none; }
    .entry .desire .star {
      background: none; border: 0; padding: 0 1px; cursor: pointer; font-size: 17px;
      color: var(--mut); transition: color .08s;
    }
    .entry .desire .star:hover, .entry .desire .star.on { color: var(--gold-deep); }
    .entry .desire .dhint { font-size: 11px; letter-spacing: .04em; color: var(--mut); font-family: var(--sans); margin-left: 4px; }
    .entry .statusrow { margin-top: 11px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .entry .st {
      background: transparent; border: 1px solid var(--rule); color: var(--mut);
      border-radius: 999px; padding: 5px 13px; font: 12px var(--sans); cursor: pointer;
    }
    .entry .st:hover { border-color: var(--sea); color: var(--sea); }
    .entry .st.done { border-color: var(--sea); color: var(--sea); }
    .entry .yrl { color: var(--mut); font-size: 12px; }
    .entry .yr {
      width: 60px; border: 0; border-bottom: 1px solid var(--rule); background: transparent;
      color: var(--ink); font: 13px var(--sans); padding: 2px; text-align: center;
    }
    .entry .yr:focus { outline: 0; border-bottom-color: var(--sea); }
    .entry.done h3 { color: var(--mut); }

    /* map */
    /* 2:1 matches the SVG's 720×360 viewBox, and — crucially — keeps the box
       height when the SVG is display:none in globe mode, so the absolutely-
       positioned canvas still has a real height to render into. */
    .mapwrap { position: relative; aspect-ratio: 2 / 1; }
    .maptools { display: flex; justify-content: flex-end; margin-bottom: 8px; min-height: 20px; }
    #worldmap { width: 100%; height: auto; display: block;
      background: var(--paper2); border: 1px solid var(--rule); border-radius: 14px; }
    /* The SVG map always provides the box height + is the loading skeleton,
       WebGL fallback, and flat-view. The globe canvas absolutely overlays it
       and fades in (opacity driven by globe.js); its transparent start lets the
       skeleton show through for the 400ms cross-fade. */
    #worldglobe { position: absolute; inset: 0; width: 100%; height: 100%;
      display: block; border-radius: 14px; touch-action: none; cursor: grab; }
    #worldglobe:active { cursor: grabbing; }
    #worldglobe.hidden { display: none; }
    #globeToggle[hidden] { display: none; }
    #worldmap .land { fill: #e5dbc6; stroke: none; }
    #worldmap .border { fill: none; stroke: #b39a63; stroke-width: .35; opacity: .8; } /* country borders + coastlines */
    #worldmap .link { stroke: var(--sea); stroke-width: 1; opacity: .5; }
    #worldmap .dot { fill: var(--accent); cursor: pointer; transition: r .1s; }
    #worldmap .dot.done { fill: #c8bca6; }
    #worldmap .dot:hover { fill: var(--accent-ink); }
    #worldmap .dot.sel { fill: var(--sea); stroke: #fff; stroke-width: 1.5; }
    #worldmap .dot.near { fill: var(--sea); }
    .tooltip {
      position: absolute; pointer-events: none; background: var(--ink); color: #fff;
      font-size: 12px; padding: 5px 9px; border-radius: 7px; transform: translate(-50%, -130%);
      white-space: nowrap; z-index: 5; box-shadow: 0 2px 8px rgba(0,0,0,.2);
    }
    #nearby { margin-top: 22px; }
    #nearby .selhead { font-family: var(--serif); font-size: 20px; margin-bottom: 2px; }
    #nearby .selsub { color: var(--mut); font-size: 13px; margin-bottom: 14px; }
    #nearby .near { padding: 12px 0; border-top: 1px solid var(--rule);
      display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
    #nearby .near .t { font-family: var(--serif); font-size: 16px; }
    #nearby .near .d { color: var(--sea); font-size: 13px; white-space: nowrap; }
    #nearby .near .w { color: var(--mut); font-size: 12px; }

    /* sidequest threads (线程) — read-only resume cards */
    .qgroup { margin-bottom: 30px; }
    .qumb-h { margin: 30px 0 2px; font-family: var(--serif); font-weight: 700; font-size: 24px;
      color: var(--ink); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
      padding-bottom: 8px; border-bottom: 2px solid var(--gold); }
    .qcore { font-family: var(--serif); font-style: italic; color: var(--mut); font-size: 14px; margin: 8px 0 0; }
    .qmeta { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
      color: var(--mut); font-size: 12px; margin-top: 4px; }
    .qbadge { font: 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
      border: 1px solid var(--rule); border-radius: 999px; padding: 3px 9px; color: var(--mut); }
    .qbadge.active { color: var(--sea); border-color: var(--sea); }
    .qbadge.completed { color: var(--gold-deep); border-color: var(--gold); }
    .qbadge.deferred { color: var(--accent-ink); border-color: var(--accent); }
    .qcard { padding: 20px 0; border-top: 1px solid var(--rule); }
    .qcard h3 { margin: 6px 0 0; font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--ink); }
    .qresume { margin: 12px 0; padding: 11px 14px; background: var(--paper2); border: 1px solid var(--rule);
      border-left: 3px solid var(--gold); border-radius: 8px; font-size: 14px; line-height: 1.55; }
    .qresume .lab { font: 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
      color: var(--gold-deep); display: block; margin-bottom: 5px; }
    .qthemes { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
    .qchip { font-size: 12px; color: var(--mut); border: 1px solid var(--rule); border-radius: 999px; padding: 3px 10px; }
    .qchip.active { color: var(--sea); border-color: var(--sea); }
    .qchip.graduated { opacity: .55; text-decoration: line-through; }
    .qsec { margin-top: 14px; }
    .qsec .qlab { font: 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
      color: var(--gold-deep); margin-bottom: 7px; }
    .qentry { padding: 7px 0; border-top: 1px solid var(--rule); font-size: 14px; }
    .qentry:first-of-type { border-top: 0; }
    .qentry .qt { font-family: var(--serif); color: var(--ink); }
    .qentry .qd { color: var(--mut); font-size: 12px; }
    .qentry .qlogic { color: var(--mut); font-style: italic; font-size: 13px; margin-top: 2px; }
    .qbody { margin-top: 8px; }
    .qbody p { margin: 8px 0; font-size: 14px; }
    .qbody h4.qh { font-family: var(--serif); font-size: 15px; margin: 12px 0 4px; color: var(--ink); }
    .qbody ul { margin: 8px 0; padding-left: 20px; font-size: 14px; }
    .qbody strong { color: var(--ink); }
    .qlinks { font-size: 13px; line-height: 1.9; }
    .qlinks a { color: var(--accent-ink); }

    /* mobile */
    @media (max-width: 560px) {
      .page { padding: 0 16px 70px; }
      nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
      .planbar { flex-direction: column; align-items: stretch; }
      .planbar .field { width: 100%; }
      .planbar .field input, .planbar .field select { width: 100% !important; min-width: 0 !important; }
      .planbar button.go { width: 100%; }
      .addform, #ghPanel { grid-template-columns: 1fr; }
      #worldmap .dot { r: 4.6; }
      .tab { min-height: 40px; }
    }