/* DEEPMINE UI v4 — profile page styles: 我的 (data-mode="profile") and 邀请分析 (data-mode="analytics").
   Every rule is scoped to .profile-panel or .invite-panel, which only exist inside these two panels. */
@layer pages {
  /* ═════════════ 我的 · player hub ═════════════ */
  .profile-panel {
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    display: grid;
    gap: 14px;
    min-width: 0;
  }
  .profile-panel > *, .profile-section { min-width: 0; }
  /* Single-column grids never grow past the sheet, whatever the string length (localisation). */
  :is(.profile-panel, .profile-hero, .profile-section, .profile-card, .profile-confirmation, .profile-steps, .profile-step-body, .profile-field,
      .invite-panel, .invite-link-card, .invite-link-controls, .invite-history, .invite-people, .invite-person, .invite-rules) { grid-template-columns: minmax(0, 1fr); }
  /* Words wrap only between words (break-word keeps min-content); figures never split (see the nowrap rules on amounts). */
  :is(.profile-panel, .invite-panel) :is(h3, h4, p, strong, small, dt, label) { overflow-wrap: break-word; }
  :is(.profile-panel, .invite-panel) :is(.currency-amount, time, .invite-person-meta b) { white-space: nowrap; }
  /* Unit captions after amounts (components: .72em) stay readable at 11px. */
  :is(.profile-panel, .invite-panel) .currency-amount small { font-size: max(var(--fs-11), .72em); }
  .profile-section { display: grid; }
  .profile-section > .section-head { margin: 2px 2px 8px; }
  /* A long caption (English) moves under the heading instead of squeezing it onto two lines. */
  :is(.profile-panel, .invite-panel) .section-head { flex-wrap: wrap; row-gap: 2px; }
  :is(.profile-panel, .invite-panel) .section-head h3 { flex: 1 0 auto; max-width: 100%; }
  :is(.profile-panel, .invite-panel) .section-head > :is(small, span) { margin-left: auto; }
  .profile-panel .section-head small { font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; }

  /* ───────── Player card ───────── */
  .profile-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: var(--r-xl);
    border: 1px solid var(--line-gold);
    background:
      radial-gradient(70% 90% at 0% 0%, rgb(245 200 105 / .2), transparent 62%),
      radial-gradient(80% 70% at 100% 100%, rgb(51 166 240 / .09), transparent 60%),
      var(--grad-panel), var(--surface-2);
    box-shadow: var(--hl-top), var(--sh-2);
  }
  .profile-hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0 0 auto 30%;
    height: 104px;
    background: url(/art/premium/forest.jpg) right 40% / cover no-repeat;
    opacity: .3;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%), linear-gradient(180deg, #000 40%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 70%), linear-gradient(180deg, #000 40%, transparent);
    mask-composite: intersect;
  }
  .profile-hero-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .profile-portrait {
    flex: none;
    position: relative;
    width: 72px;
    height: 72px;
    padding: 3px;
    border-radius: 20px;
    background: var(--grad-gold);
    box-shadow: var(--sh-plate-gold), 0 0 24px -6px rgb(245 190 80 / .55);
  }
  .profile-portrait-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 17px;
    background: radial-gradient(circle at 50% 28%, #4a9070 0%, #1e4a39 58%, #0f2a20 100%);
    box-shadow: inset 0 0 0 1.5px rgb(79 50 13 / .7);
  }
  .profile-portrait-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 -12px 16px -10px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .18);
  }
  .profile-portrait img {
    position: absolute;
    left: 50%;
    top: 3px;
    width: 166%;
    max-width: none;
    height: auto;
    transform: translateX(-50%);
    filter: drop-shadow(0 3px 4px rgb(0 0 0 / .45));
  }
  .profile-id { flex: 1; min-width: 0; display: grid; justify-items: start; gap: 2px; }
  .profile-id-kicker { font: 700 11px/1.2 var(--font-display); letter-spacing: .18em; color: var(--gold-300); }
  .profile-id h3 { font-size: var(--fs-hero-title); font-weight: 800; line-height: 1.2; text-shadow: 0 2px 8px rgb(0 0 0 / .55); }
  .profile-uid { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
  .profile-uid .profile-id-chip { min-width: 0; }
  .profile-uid-copy { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: var(--text-2); background: var(--surface-inset); border: 1px solid var(--line-2); }
  .profile-uid-copy .icon { width: 16px; height: 16px; }
  .profile-uid-copy:active { transform: scale(.94); }
  .profile-id h3.profile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* v10.3 #2: the Telegram photo covers the painted miner (which stays visible if the photo cannot load) */
  .profile-portrait img.profile-photo { left: 0; top: 0; width: 100%; height: 100%; transform: none; object-fit: cover; border-radius: inherit; z-index: 1; }
  .profile-id-chip { max-width: 100%; margin-top: 3px; min-height: 24px; padding: 1px 9px 1px 6px; font-size: var(--fs-12); }
  .profile-id-chip .gi { width: 16px; height: 16px; }
  .profile-id-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .profile-id p { margin-top: 2px; font-size: var(--fs-11); line-height: 1.4; color: var(--text-3); }
  .profile-refresh {
    flex: none;
    align-self: flex-start;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: rgb(6 19 14 / .6);
    border: 1px solid var(--line-2);
    color: var(--gold-200);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 2px 0 rgb(0 0 0 / .45);
    transition: transform var(--dur-1) var(--ease-out), color var(--dur-2);
  }
  .profile-refresh .gi { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .5)); }
  .profile-refresh:active:not(:disabled) { transform: translateY(1px) scale(.96); }
  .profile-refresh:disabled { color: var(--text-4); box-shadow: none; }
  /* Busy: a few turns only (no endless loop in panel content), off for reduced motion and low quality. */
  .profile-refresh:disabled .gi { animation: dm-spin 1s var(--ease-in-out) 4; filter: saturate(.3) brightness(.8); }
  html.low-quality .profile-panel .profile-refresh:disabled .gi { animation: none; }

  /* Balances: two inset wells. The renderer shortens long figures (exact value in title / screen-reader text)
     and sets --balance-length; the font scales to it, and an ellipsis is the last resort — never a hidden scroll. */
  .profile-balances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .profile-balance {
    container-type: inline-size;
    position: relative;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 10px 12px 11px;
    border-radius: var(--r-md);
    background: rgb(4 15 11 / .5);
    border: 1px solid var(--line-1);
    box-shadow: inset 0 2px 10px rgb(0 0 0 / .4), 0 1px 0 rgb(255 255 255 / .05);
  }
  .profile-balance.is-dmt {
    border-color: rgb(245 200 105 / .3);
    background: radial-gradient(90% 120% at 100% 0%, rgb(245 200 105 / .12), transparent 60%), rgb(4 15 11 / .5);
  }
  .profile-balance.is-ton {
    border-color: rgb(51 166 240 / .3);
    background: radial-gradient(90% 120% at 100% 0%, rgb(51 166 240 / .13), transparent 60%), rgb(4 15 11 / .5);
  }
  .profile-balance-label { display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 13px/1.2 var(--font-display); letter-spacing: .08em; color: var(--text-2); }
  .profile-balance-label .currency-icon { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .5)); }
  .profile-balance strong {
    display: block;
    max-width: 100%;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-22);
    font-size: clamp(var(--fs-14), calc(100cqi / var(--balance-length, 1) * 1.7), 28px);
    height: 36px;
    line-height: 36px;
    letter-spacing: .01em;
    color: var(--gold-100);
    text-shadow: 0 2px 0 rgb(0 0 0 / .4), 0 0 18px rgb(245 200 105 / .25);
  }
  .profile-balance.is-ton strong { color: var(--text-1); text-shadow: 0 2px 0 rgb(0 0 0 / .4), 0 0 18px rgb(51 166 240 / .25); }
  .profile-balance small { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--fs-11); color: var(--text-3); line-height: 1.35; }
  .profile-balance small .icon { width: 12px; height: 12px; flex: none; }
  /* The held amount drops under its label when a translation is long, rather than being cut. */
  .profile-balance small > span { min-width: 0; }
  .profile-balance small b { font-family: var(--font-display); font-weight: 700; color: var(--info); white-space: nowrap; }

  /* ───────── Quick actions: chunky icon tiles ───────── */
  .profile-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  /* progressive unlocks: fewer tiles (账本 alone before TON opens) share the row */
  .profile-actions[style*="--tiles"] { grid-template-columns: repeat(var(--tiles), minmax(0, 1fr)); }
  .profile-actions[style*="--tiles"] .profile-action { min-height: 72px; grid-auto-flow: column; justify-content: center; align-items: center; gap: 12px; }
  .profile-action {
    --tile-glow: rgb(245 200 105 / .22);
    position: relative;
    min-width: 0;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 5px;
    min-height: 92px;
    padding: 10px 6px 9px;
    border-radius: var(--r-lg);
    color: var(--text-1);
    background: var(--grad-jade-plate);
    border: 1px solid rgb(150 225 185 / .22);
    border-bottom-color: rgb(0 0 0 / .35);
    box-shadow: var(--sh-plate-jade);
    transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), filter var(--dur-2);
  }
  .profile-action.is-deposit { --tile-glow: rgb(80 200 140 / .3); }
  .profile-action.is-withdraw { --tile-glow: rgb(51 166 240 / .28); }
  .profile-action:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 1px 0 rgb(3 12 8 / .8), 0 4px 8px -6px rgb(0 0 0 / .8); }
  @media (hover: hover) and (pointer: fine) { .profile-action:hover { filter: brightness(1.08); } }
  .profile-action-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, var(--tile-glow), rgb(0 0 0 / .2) 72%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07), inset 0 -4px 8px rgb(0 0 0 / .28);
  }
  .profile-action-icon .gi { width: 36px; height: 36px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .5)); }
  .profile-action-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-14); font-weight: 800; letter-spacing: .04em; text-shadow: 0 1px 0 rgb(0 0 0 / .45); }
  /* Latin/Cyrillic verbs ("Пополнить", "Einzahlen") fill a third of the row: tighter tracking, one size down on narrow phones. */
  :root:not(:lang(zh)) .profile-action-label { letter-spacing: .01em; }
  @media (max-width: 359px) { :root:not(:lang(zh)) .profile-action-label { font-size: var(--fs-13); } }

  /* ───────── Permissions ───────── */
  .profile-perm {
    --perm-accent: transparent;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 11px 12px 11px 14px;
  }
  .profile-perm + .profile-perm { border-top: 1px solid var(--line-1); }
  .profile-perm::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--perm-accent);
    box-shadow: 0 0 10px var(--perm-accent);
  }
  .profile-perm-icon {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--r-md);
    background: var(--grad-jade-plate);
    border: 1px solid var(--line-2);
    box-shadow: var(--hl-top), 0 2px 0 rgb(0 0 0 / .3);
  }
  .profile-perm-icon .gi { width: 32px; height: 32px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .45)); }
  .profile-perm-copy { flex: 1; min-width: 0; display: grid; gap: 4px; }
  .profile-perm-copy strong { font-size: var(--fs-15); font-weight: 800; line-height: 1.25; }
  .profile-perm-price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-12); color: var(--text-3); }
  .profile-perm-price .currency-amount { gap: 4px; }
  .profile-perm-price .currency-amount > span { font-size: var(--fs-15); color: var(--gold-100); }
  .profile-perm-price .currency-icon { width: 16px; height: 16px; }
  .profile-perm-flag {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: var(--fs-11);
    font-weight: 700;
    line-height: 1.2;
    color: var(--warn);
    background: var(--warn-bg);
    border: 1px solid rgb(255 196 92 / .26);
  }
  /* Row actions are the standard .btn--sm (40px visual, 44px hit area). */
  .profile-perm-action { flex: none; min-width: 72px; }
  .profile-perm-action .gi { width: 20px; height: 20px; margin: -2px 0; }
  .profile-perm-action.btn--primary .gi { --gi-base: var(--gold-50); }
  .profile-perm .chip { flex: none; min-height: 28px; padding: 2px 10px; font-size: var(--fs-12); }
  .profile-perm .chip .icon { width: 14px; height: 14px; }
  .profile-perm.is-owned { --perm-accent: var(--jade-400); background: linear-gradient(90deg, rgb(80 200 140 / .09), transparent 65%); }
  .profile-perm.is-owned .profile-perm-icon { border-color: rgb(120 230 170 / .5); box-shadow: var(--hl-top), var(--glow-jade); }
  .profile-perm.is-ready { --perm-accent: var(--gold-300); background: linear-gradient(90deg, rgb(245 200 105 / .1), transparent 65%); }
  .profile-perm.is-ready .profile-perm-icon { border-color: var(--line-gold-strong); box-shadow: var(--hl-top), var(--glow-gold); }
  .profile-perm:is(.is-guest, .is-short) { --perm-accent: rgb(255 203 107 / .75); }
  .profile-perm:is(.is-guest, .is-short, .is-wait) .profile-perm-icon .gi { filter: saturate(.35) brightness(.85) drop-shadow(0 2px 2px rgb(0 0 0 / .45)); }
  .profile-perm:is(.is-guest, .is-short) .profile-perm-icon::after {
    content: '';
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3a2a0c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcb6b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 11px no-repeat;
    border: 1px solid rgb(255 203 107 / .55);
    box-shadow: 0 0 0 2px var(--surface-1);
  }
  .profile-perm.is-wait .profile-perm-copy strong { color: var(--text-2); }

  /* Guest with 我的 open but no TON yet (progressive unlocks §3.6): how to get TON deposit, withdrawal and swaps. */
  .profile-guest-ton { align-items: center; gap: 10px; }
  .profile-guest-ton-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: rgb(0 0 0 / .2); border: 1px solid rgb(120 196 255 / .26); }
  .profile-guest-ton-icon .currency-icon { width: 28px; height: 28px; }
  .profile-guest-ton p { flex: 1; min-width: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--text-1); text-wrap: pretty; }

  /* ───────── Menu ───────── */
  .profile-menu-row { min-height: 60px; transition: background var(--dur-2); }
  .profile-menu-row .list-icon { width: 42px; height: 42px; border-radius: var(--r-md); }
  .profile-menu-row .list-icon .gi { width: 30px; height: 30px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .45)); }
  .profile-menu-row .list-title { font-size: var(--fs-15); }
  .profile-menu-row .list-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-menu-row .list-trail .icon { width: 18px; height: 18px; color: var(--gold-300); opacity: .8; }
  @media (hover: hover) and (pointer: fine) { .profile-menu-row:hover { background: rgb(255 255 255 / .03); } }

  /* ───────── Sub-tab toolbar ───────── */
  .profile-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 44px; }
  /* Latin/Cyrillic back labels ("Mein Konto", "Mon compte") outgrow a third of the bar: the back button takes its own
     width and the title centres in what is left, instead of the label ending in an ellipsis. */
  :root:not(:lang(zh)) .profile-toolbar { grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; }
  /* Back: the shared .btn.btn--ghost.btn--sm with a left chevron (same as the bag detail back link). */
  .profile-back { justify-self: start; max-width: 100%; gap: 4px; padding: 0 12px 0 6px; }
  .profile-back > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-back-icon { width: 18px; height: 18px; color: var(--gold-300); transform: rotate(180deg); }
  .profile-toolbar h3 { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; font-size: var(--fs-card-title); font-weight: 800; }
  .profile-toolbar h3 .gi { width: 26px; height: 26px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .45)); }
  .profile-toolbar h3 > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-toolbar .profile-refresh { justify-self: end; align-self: center; }

  /* ───────── Deposit / withdraw cards ───────── */
  .profile-card {
    container: profile-card / inline-size;
    position: relative;
    display: grid;
    gap: 14px;
    padding: 16px 14px 14px;
    border-radius: var(--r-lg);
    background: radial-gradient(110% 70% at 100% 0%, rgb(51 166 240 / .08), transparent 60%), var(--grad-panel), var(--surface-1);
    border: 1px solid var(--line-2);
    box-shadow: var(--hl-top), var(--sh-2);
  }
  /* Heading: coin + title, with the available balance on the right. A long balance wraps to its own line instead of
     overflowing; on narrow cards (320px phones) it always takes a full-width row. */
  .profile-card-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
  .profile-card-coin {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: radial-gradient(circle at 50% 35%, rgb(51 166 240 / .32), rgb(51 166 240 / .06) 72%);
    border: 1px solid rgb(51 166 240 / .38);
    box-shadow: var(--hl-top);
  }
  .profile-card-coin .currency-icon { width: 30px; height: 30px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .5)); }
  .profile-card-heading h3 { flex: 1 1 auto; min-width: 0; font-size: var(--fs-card-title); font-weight: 800; line-height: 1.3; }
  .profile-card-balance { flex: 0 1 auto; min-width: 0; max-width: 100%; margin-left: auto; display: grid; justify-items: end; gap: 1px; }
  .profile-card-balance small { font-size: var(--fs-11); color: var(--text-3); line-height: 1.2; }
  .profile-card-balance .currency-amount { min-width: 0; max-width: 100%; }
  .profile-card-balance .currency-amount > span { min-width: 0; font-size: var(--fs-18); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; }
  @container profile-card (max-width: 300px) {
    .profile-card-balance {
      flex: 1 1 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-left: 0;
      padding: 8px 12px;
      border-radius: var(--r-sm);
      background: var(--surface-inset);
      border: 1px solid var(--line-1);
    }
    /* The figure keeps its digits; a long (translated) label wraps instead. */
    .profile-card-balance small { flex: 0 1 auto; min-width: 0; font-size: var(--fs-12); }
    .profile-card-balance .currency-amount { flex: 0 0 auto; }
    .profile-card-balance .currency-amount > span { font-size: var(--fs-16); }
  }
  .profile-card .note { margin: 0; }
  .profile-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 700; color: var(--text-2); letter-spacing: .02em; }
  .profile-label.is-required { color: var(--warn); }
  .profile-field { display: grid; gap: 6px; min-width: 0; }
  .profile-panel textarea, .profile-panel input[type="text"] { font-size: 16px; }
  #wallet-address, #wallet-deposit-address, #wallet-deposit-memo { font-family: var(--mono); font-size: 16px; line-height: 1.4; letter-spacing: 0; word-break: break-all; }
  .profile-amount-field { position: relative; display: flex; align-items: center; min-width: 0; }
  .profile-amount-field input {
    min-height: 56px;
    padding-right: 86px;
    font-family: var(--font-display);
    font-size: var(--fs-22);
    font-weight: 700;
    color: var(--gold-100);
  }
  .profile-amount-field input::placeholder { color: var(--text-4); font-weight: 600; }
  .profile-amount-unit {
    position: absolute;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 5px;
    border-radius: 999px;
    background: rgb(51 166 240 / .12);
    border: 1px solid rgb(51 166 240 / .3);
    font: 700 13px/1 var(--font-display);
    color: var(--text-1);
    pointer-events: none;
  }
  .profile-amount-unit .currency-icon { width: 20px; height: 20px; }
  .profile-limits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
  .profile-limits .chip { font-family: var(--font-display); font-size: var(--fs-12); min-height: 24px; padding: 1px 10px; }

  /* Steps: numbered gold medallions joined by a thin line. */
  .profile-steps { display: grid; gap: 14px; }
  .profile-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
  .profile-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 32px;
    bottom: -12px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--line-gold), transparent);
  }
  .profile-step-no {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--grad-gold);
    color: var(--text-on-gold);
    font: 800 14px/1 var(--font-display);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 2px 0 var(--gold-edge);
  }
  .profile-step-body { display: grid; gap: 6px; min-width: 0; }
  .profile-step-body .profile-label { min-height: 28px; }
  .profile-copy-field { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
  .profile-copy-field :is(textarea, input) { flex: 1; min-width: 0; color: var(--text-1); background: rgb(3 12 8 / .7); }
  .profile-copy-field input { text-overflow: ellipsis; }
  .profile-copy { flex: none; flex-direction: column; gap: 2px; min-width: 58px; padding: 6px 10px; font-size: var(--fs-12); }
  .profile-copy .gi { width: 22px; height: 22px; margin: 0; }
  .profile-copy-field input[readonly], .profile-copy-field textarea[readonly] { color: var(--text-1); }
  /* Narrow phones: the field takes the full width and the copy button sits beneath it. */
  @media (max-width: 379px) {
    .profile-copy-field { flex-direction: column; }
    .profile-copy { flex-direction: row; align-self: flex-end; min-height: 44px; padding: 0 16px; font-size: var(--fs-13); }
    .profile-step { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
    .profile-step-no { width: 24px; height: 24px; font-size: 13px; }
    .profile-step:not(:last-child)::before { left: 11px; top: 28px; }
    .profile-step-body .profile-label { min-height: 24px; }
  }
  /* Label and amount share a line when they fit; a long amount moves under its label (right-aligned) instead of
     squeezing the label or running out of the well. */
  .profile-fact { align-items: center; flex-wrap: wrap; gap: 2px 12px; }
  .profile-facts { padding: 2px 12px; border-radius: 12px; background: var(--surface-inset); border: 1px solid var(--line-1); }
  .profile-fact dt { flex: 1 1 auto; color: var(--text-3); }
  .profile-fact dd { min-width: 0; max-width: 100%; margin-left: auto; }
  .profile-fact dd .currency-amount { max-width: 100%; }
  .profile-fact dd .currency-amount > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-15); }
  .profile-fact dd .currency-icon { width: 16px; height: 16px; }
  .profile-fact.is-emphasis dt { color: var(--text-1); font-weight: 700; }
  .profile-fact.is-emphasis dd .currency-amount > span { font-size: var(--fs-20); color: var(--gold-100); }
  .profile-fact.is-emphasis dd .currency-icon { width: 20px; height: 20px; }
  @container profile-card (max-width: 300px) {
    .profile-fact.is-emphasis dd .currency-amount > span { font-size: var(--fs-18); }
  }
  .profile-primary { width: 100%; }

  /* Withdraw confirmation sheet */
  .profile-confirmation {
    display: grid;
    gap: 10px;
    padding: 14px 12px 12px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-gold);
    background: radial-gradient(100% 80% at 100% 0%, rgb(245 200 105 / .13), transparent 60%), var(--surface-2);
    box-shadow: var(--hl-top), var(--sh-1);
  }
  .profile-confirmation h4 { display: flex; align-items: center; gap: 6px; font-size: var(--fs-card-title); font-weight: 800; color: var(--gold-100); }
  .profile-confirmation h4 .gi { width: 24px; height: 24px; }
  .profile-confirm-address {
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--surface-inset);
    border: 1px dashed var(--line-2);
    font-family: var(--mono);
    font-size: var(--fs-12);
    line-height: 1.45;
    color: var(--text-2);
    word-break: break-all;
  }

  /* State cards (components .empty-state sets the title and spacing) and errors */
  .profile-message.is-locked .empty-icon { background: radial-gradient(circle at 50% 35%, #2a4a3d, #142e24); border-color: var(--line-2); }
  /* Painted mascot art (art-manifest) replaces the glyph medallion with a larger, frameless figure. */
  :is(.profile-message, .invite-empty).is-painted .empty-icon { width: 96px; height: 96px; background: none; border: 0; box-shadow: none; }
  :is(.profile-message, .invite-empty).is-painted .empty-icon img { width: 100%; height: 100%; object-fit: contain; }
  .profile-error { align-items: center; font-size: var(--fs-13); font-weight: 600; }
  .profile-error > span { min-width: 0; overflow-wrap: break-word; }

  /* ───────── Withdrawal records ───────── */
  .profile-withdrawal { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }
  .profile-withdrawal + .profile-withdrawal { border-top: 1px solid var(--line-1); }
  .profile-withdrawal-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--grad-jade-plate);
    border: 1px solid var(--line-2);
    box-shadow: var(--hl-top);
  }
  .profile-withdrawal-icon .gi { width: 28px; height: 28px; }
  .profile-withdrawal.is-muted .profile-withdrawal-icon .gi, .profile-withdrawal.is-bad .profile-withdrawal-icon .gi { filter: saturate(.25) brightness(.85); }
  .profile-withdrawal-copy { flex: 1; min-width: 0; display: grid; gap: 4px; }
  /* A long amount pushes the status pill to the next line rather than being cut. */
  .profile-withdrawal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-width: 0; }
  .profile-withdrawal-head strong { min-width: 0; max-width: 100%; overflow: hidden; }
  .profile-withdrawal-head .currency-amount { max-width: 100%; }
  .profile-withdrawal-head .currency-amount > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-16); }
  .profile-withdrawal-head .currency-icon { width: 17px; height: 17px; }
  .profile-withdrawal.is-muted .profile-withdrawal-head strong { color: var(--text-3); }
  .profile-withdrawal p { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: var(--fs-12); color: var(--text-3); line-height: 1.4; }
  .profile-withdrawal p > span { flex: none; font-family: var(--font-display); }
  .profile-withdrawal p > .profile-withdrawal-address { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: var(--fs-11); color: var(--text-3); }
  .profile-cancel { justify-self: start; margin-top: 4px; }
  .profile-status {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 1px 9px 1px 7px;
    border-radius: 999px;
    font-size: var(--fs-11);
    font-weight: 700;
    white-space: nowrap;
    color: var(--text-3);
    background: rgb(255 255 255 / .05);
    border: 1px solid var(--line-1);
  }
  .profile-status::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
  .profile-status.tone-wait { color: var(--warn); background: var(--warn-bg); border-color: rgb(255 196 92 / .3); }
  .profile-status.tone-info { color: var(--info); background: var(--info-bg); border-color: rgb(120 196 255 / .3); }
  .profile-status.tone-done { color: var(--jade-200); background: var(--success-bg); border-color: rgb(80 200 140 / .32); }
  .profile-status.tone-bad { color: var(--danger); background: var(--danger-bg); border-color: rgb(255 120 90 / .3); }
  .profile-status.tone-muted::before { box-shadow: none; opacity: .6; }

  /* ───────── Wallet ledger ───────── */
  .profile-ledger-head { margin: 2px 2px -4px; }
  .profile-ledger-row { container-type: inline-size; display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 14px; }
  .profile-ledger-row + .profile-ledger-row { border-top: 1px solid var(--line-1); }
  .profile-ledger-symbol {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    background: var(--grad-jade-plate);
    border: 1px solid var(--line-2);
    box-shadow: var(--hl-top);
  }
  /* Up to 50 rows: no per-glyph filter. */
  .profile-ledger-symbol .gi { width: 28px; height: 28px; }
  .profile-ledger-copy { flex: 1; min-width: 0; display: grid; gap: 1px; }
  .profile-ledger-copy strong { font-size: var(--fs-14); font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-ledger-copy small { font-family: var(--font-display); font-size: var(--fs-11); color: var(--text-3); line-height: 1.35; }
  .profile-ledger-copy .profile-ledger-held { color: var(--info); }
  /* Amounts keep every digit: the figure scales down (by --amount-length from the renderer) to fit 60% of the row,
     with an ellipsis only as a last resort. */
  .profile-ledger-values { flex: 0 1 auto; min-width: 0; max-width: 60%; display: grid; justify-items: end; gap: 3px; }
  .profile-ledger-amount {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    font: 700 15px/1.25 var(--font-display);
    font-size: clamp(var(--fs-12), calc((60cqi - 20px) / (var(--amount-length, 8) * .6)), var(--fs-15));
    font-variant-numeric: tabular-nums;
    color: var(--text-1);
  }
  .profile-ledger-amount > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .profile-ledger-amount.is-income { color: var(--jade-300); }
  .profile-ledger-amount .currency-icon { width: 16px; height: 16px; flex: none; }
  .profile-ledger-none { color: var(--text-3); font-family: var(--font-display); }

  /* Narrow phones */
  @media (max-width: 359px) {
    .profile-panel { gap: 12px; }
    .profile-hero { padding: 12px; gap: 10px; }
    .profile-portrait { width: 62px; height: 62px; border-radius: 18px; }
    .profile-portrait-inner { border-radius: 15px; }
    .profile-balance { padding: 9px 10px 10px; }
    .profile-actions { gap: 6px; }
    .profile-action { min-height: 84px; }
    .profile-perm { gap: 10px; padding-inline: 12px 10px; }
    .profile-perm-icon { width: 42px; height: 42px; }
    .profile-card { padding: 14px 12px 12px; }
    .profile-ledger-row { gap: 10px; padding-inline: 12px; }
    .profile-ledger-symbol { width: 36px; height: 36px; }
  }
  /* Short screens: tighten the vertical rhythm so the main CTA sits closer to the fold. */
  @media (max-height: 640px) {
    .profile-hero { padding-block: 12px; gap: 10px; }
    .profile-action { min-height: 80px; gap: 3px; }
    .profile-action-icon { width: 44px; height: 44px; }
    .profile-action-icon .gi { width: 32px; height: 32px; }
    .profile-perm { min-height: 62px; padding-block: 9px; }
    .profile-card { gap: 12px; padding-block: 14px 12px; }
    .profile-card-coin { width: 40px; height: 40px; }
    .profile-amount-field input { min-height: 50px; }
  }

  /* ═════════════ 邀请分析 · invite analytics ═════════════ */
  .invite-panel {
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    display: grid;
    gap: 14px;
    min-width: 0;
  }
  .invite-panel > * { min-width: 0; }

  /* Toolbar: connection state + refresh */
  .invite-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
  .invite-connection {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 30px;
    padding: 2px 12px 2px 9px;
    border-radius: 999px;
    font-size: var(--fs-12);
    font-weight: 700;
    color: var(--text-3);
    background: rgb(255 255 255 / .05);
    border: 1px solid var(--line-2);
  }
  .invite-connection > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Latin/Cyrillic states ("Identität ungeprüft") wrap onto a second line beside the refresh button instead of an ellipsis. */
  :root:not(:lang(zh)) .invite-connection { border-radius: 15px; }
  :root:not(:lang(zh)) .invite-connection > span { white-space: normal; overflow-wrap: break-word; line-height: 1.2; }
  .invite-connection .icon { width: 15px; height: 15px; flex: none; }
  .invite-connection.is-connected { color: var(--jade-200); background: var(--success-bg); border-color: rgb(80 200 140 / .34); }
  .invite-connection.is-unverified { color: var(--warn); background: var(--warn-bg); border-color: rgb(255 196 92 / .3); }
  .invite-connection.is-syncing { color: var(--info); background: var(--info-bg); border-color: rgb(120 196 255 / .3); }
  .invite-refresh {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px 0 10px;
    border-radius: var(--r-md);
    background: rgb(6 19 14 / .6);
    border: 1px solid var(--line-2);
    color: var(--text-1);
    font-size: var(--fs-13);
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 2px 0 rgb(0 0 0 / .45);
    transition: transform var(--dur-1) var(--ease-out);
  }
  .invite-refresh .gi { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .5)); }
  .invite-refresh:active:not(:disabled) { transform: translateY(1px); }
  .invite-refresh:disabled { color: var(--text-3); box-shadow: none; }
  /* Busy: a few turns only (the label already says 正在刷新); off for reduced motion and low quality. */
  .invite-refresh:disabled .gi { animation: dm-spin 1s var(--ease-in-out) 4; filter: saturate(.3) brightness(.8); }
  html.low-quality .invite-panel .invite-refresh:disabled .gi { animation: none; }

  /* Login guide for players without a verified Telegram identity */
  .invite-identity-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: var(--r-lg);
    border: 1px solid rgb(255 196 92 / .38);
    background: radial-gradient(110% 100% at 0% 0%, rgb(255 196 92 / .15), transparent 62%), var(--grad-panel), var(--surface-2);
    box-shadow: var(--hl-top), var(--sh-2);
  }
  .invite-guide-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    background: radial-gradient(circle at 50% 35%, #2f604a, #173a2c);
    border: 1px solid var(--line-gold);
    box-shadow: var(--hl-top), 0 0 0 4px rgb(245 200 105 / .06);
  }
  .invite-guide-icon .gi { width: 36px; height: 36px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .5)); }
  .invite-guide-copy { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 4px; }
  .invite-guide-copy strong { font-size: var(--fs-card-title); font-weight: 800; line-height: 1.35; color: var(--text-1); }
  .invite-guide-copy p { font-size: var(--fs-12); line-height: 1.55; color: var(--text-2); }
  .invite-bot-link { margin-top: 6px; max-width: 100%; }
  .invite-bot-link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .invite-error { align-items: flex-start; }
  .invite-error > div { display: grid; gap: 2px; min-width: 0; }
  .invite-error strong { font-size: var(--fs-13); }
  .invite-error p { overflow-wrap: break-word; }

  /* Stat tiles */
  .invite-gift { display: grid; gap: 10px; padding: 14px; margin-bottom: 12px; }
  .invite-gift-head { display: flex; align-items: flex-start; gap: 10px; }
  .invite-gift-head h3 { margin: 0 0 2px; font-size: var(--fs-15); font-weight: 800; }
  .invite-gift-head p { margin: 0; font-size: var(--fs-12); line-height: 1.5; color: var(--text-2); }
  .invite-gift-head b { color: var(--gold-100, #f6d77e); }
  .invite-gift-icon { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--surface-inset); }
  .invite-gift-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .invite-gift-stats > div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--surface-inset); }
  .invite-gift-stats strong { font-size: var(--fs-18, 18px); font-weight: 800; }
  .invite-gift-stats small { font-size: var(--fs-11); color: var(--text-3); }
  .invite-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .invite-stat {
    container-type: inline-size;
    --stat-glow: rgb(245 200 105 / .22);
    --stat-line: var(--line-1);
    min-width: 0;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 1px;
    padding: 12px 6px 11px;
    text-align: center;
    border-radius: var(--r-md);
    background: radial-gradient(90% 70% at 50% 0%, var(--stat-glow), transparent 70%), var(--grad-panel), var(--surface-1);
    border: 1px solid var(--stat-line);
    box-shadow: var(--hl-top), var(--sh-1);
  }
  .invite-stat.is-total { --stat-line: var(--line-gold); }
  .invite-stat.is-effective { --stat-glow: rgb(80 200 140 / .2); --stat-line: rgb(80 200 140 / .3); }
  .invite-stat.is-paid { --stat-glow: rgb(120 196 255 / .2); --stat-line: rgb(120 196 255 / .3); --gi-accent: #9fd6ff; --gi-accent-shade: #3f8fd2; }
  .invite-stat-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 2px; }
  .invite-stat-icon .gi { width: 32px; height: 32px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .5)); }
  .invite-stat-value {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-26);
    font-size: clamp(var(--fs-15), calc(100cqi / var(--stat-length, 2) * 1.6), 28px);
    height: 32px;
    font-weight: 800;
    line-height: 32px;
    color: var(--text-1);
    text-shadow: 0 2px 0 rgb(0 0 0 / .35);
  }
  .invite-stat.is-total .invite-stat-value { color: var(--gold-100); }
  .invite-stat.is-effective .invite-stat-value { color: var(--jade-200); }
  .invite-stat.is-paid .invite-stat-value { color: #cfe8ff; }
  .invite-stat-label { max-width: 100%; font-size: var(--fs-12); font-weight: 800; line-height: 1.3; color: var(--text-1); }
  .invite-stat small { max-width: 100%; font-size: var(--fs-11); line-height: 1.35; color: var(--text-3); }
  /* Long Latin/Cyrillic words ("Действительный") stay inside their third-width card (hyphenated where the platform can). */
  :root:not(:lang(zh)) :is(.invite-stat-label, .invite-stat small) { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

  /* Invite link card */
  .invite-link-card {
    display: grid;
    gap: 10px;
    padding: 16px 14px 14px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line-2);
    background: var(--grad-panel), var(--surface-1);
    box-shadow: var(--hl-top), var(--sh-1);
  }
  .invite-link-card.is-ready {
    border-color: var(--line-gold);
    background: radial-gradient(120% 90% at 100% 0%, rgb(245 200 105 / .14), transparent 58%), var(--grad-panel), var(--surface-2);
    box-shadow: var(--hl-top), var(--sh-2);
  }
  .invite-section-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .invite-section-heading > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .invite-link-glyph {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--r-md);
    background: var(--grad-jade-plate);
    border: 1px solid var(--line-gold);
    box-shadow: var(--hl-top);
  }
  .invite-link-glyph .gi { width: 32px; height: 32px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .45)); }
  .invite-section-heading h3 { font-size: var(--fs-card-title); font-weight: 800; line-height: 1.3; }
  .invite-section-heading p { font-size: var(--fs-12); line-height: 1.5; color: var(--text-3); }
  .invite-link-label { margin-top: 2px; font-size: var(--fs-12); font-weight: 700; color: var(--text-2); }
  .invite-link-controls { display: grid; gap: 10px; min-width: 0; }
  #invite-link {
    font-family: var(--mono);
    font-size: 16px;
    letter-spacing: 0;
    color: var(--gold-100);
    background: rgb(3 12 8 / .7);
    text-overflow: ellipsis;
  }
  #invite-link::placeholder { font-family: var(--font-ui); color: var(--text-4); }
  .invite-copy { width: 100%; }
  .invite-copy .gi { width: 24px; height: 24px; margin: -4px 0; }
  .invite-copy > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .invite-link-note { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-12); line-height: 1.5; color: var(--text-3); }
  .invite-link-note .icon { flex: none; width: 14px; height: 14px; margin-top: 2px; }

  /* Recent invites */
  .invite-history { display: grid; min-width: 0; }
  .invite-history-heading { margin: 2px 2px 10px; }
  .invite-history-heading span { font-family: var(--font-display); font-weight: 600; }
  .invite-people { display: grid; gap: 10px; }
  .invite-person {
    min-width: 0;
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: var(--r-lg);
    background: var(--grad-panel), var(--surface-1);
    border: 1px solid var(--line-1);
    box-shadow: var(--hl-top), var(--sh-1);
  }
  .invite-person:has(.invite-person-badge.is-effective) { border-color: rgb(80 200 140 / .26); }
  .invite-person:has(.is-claimable) { border-color: var(--line-gold); background: radial-gradient(100% 80% at 100% 100%, rgb(245 200 105 / .1), transparent 60%), var(--grad-panel), var(--surface-1); }
  .invite-person-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .invite-person-avatar {
    --av-1: #f8d67c;
    --av-2: #b77a2a;
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    font: 800 19px/1 var(--font-display);
    text-shadow: 0 1px 2px rgb(0 0 0 / .45);
    background: radial-gradient(circle at 35% 28%, var(--av-1), var(--av-2) 80%);
    border: 2px solid rgb(255 255 255 / .2);
    box-shadow: 0 2px 0 rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .35);
  }
  .invite-person-avatar.tone-1 { --av-1: #8fe6bb; --av-2: #23805a; }
  .invite-person-avatar.tone-2 { --av-1: #8fd0ff; --av-2: #2a72b8; }
  .invite-person-avatar.tone-3 { --av-1: #cfa8ff; --av-2: #6d45b8; }
  .invite-person-avatar.tone-4 { --av-1: #ffaa95; --av-2: #b4492f; }
  .invite-person-avatar .icon { width: 20px; height: 20px; }
  .invite-person-initial { display: block; max-width: 30px; overflow: hidden; }
  .invite-person-name { flex: 1; min-width: 0; display: grid; gap: 1px; }
  .invite-person-name h4 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-card-title); font-weight: 800; line-height: 1.3; }
  .invite-person-name p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); color: var(--text-3); }
  .invite-person-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: var(--fs-11);
    font-weight: 800;
    white-space: nowrap;
    color: var(--text-3);
    background: rgb(255 255 255 / .05);
    border: 1px solid var(--line-1);
  }
  .invite-person-badge.is-effective { color: var(--jade-200); background: var(--success-bg); border-color: rgb(80 200 140 / .36); }
  .invite-person-badge.is-waiting { color: var(--warn); background: var(--warn-bg); border-color: rgb(255 196 92 / .3); }
  .invite-person-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-12); color: var(--text-3); }
  .invite-person-meta > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
  .invite-person-meta .icon { width: 14px; height: 14px; flex: none; color: var(--text-4); }
  .invite-person-meta time, .invite-person-meta b { font-family: var(--font-display); }
  .invite-person-meta b { color: var(--text-1); font-weight: 700; }
  .invite-person-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .invite-fact { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 6px; min-height: 36px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-inset); border: 1px solid var(--line-1); }
  .invite-fact dt { min-width: 0; font-size: var(--fs-11); line-height: 1.3; color: var(--text-3); }
  .invite-fact dd { display: flex; min-width: 0; margin-left: auto; }
  .invite-fact strong { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; font-size: var(--fs-13); font-weight: 700; line-height: 1.3; }
  .invite-fact strong .icon { width: 14px; height: 14px; flex: none; }
  .invite-fact strong.is-verified { color: var(--jade-300); }
  /* Settled "no" reads in --text-2; unknown / not yet synced stays quieter in --text-3 (both pass AA on the inset well). */
  .invite-fact strong.is-pending { color: var(--text-2); font-weight: 600; }
  .invite-fact strong.is-unknown { color: var(--text-3); font-weight: 500; }
  .invite-fact strong.is-claimable { color: var(--gold-200); }
  .invite-fact:has(.is-claimable) { border-color: var(--line-gold); background: rgb(245 200 105 / .08); }

  /* Rules */
  .invite-rules { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: rgb(255 255 255 / .025); border: 1px solid var(--line-1); }
  .invite-rules h4 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-card-title); font-weight: 800; }
  .invite-rules h4 .gi { width: 24px; height: 24px; }
  .invite-rule { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-13); line-height: 1.6; color: var(--text-2); }
  .invite-rule > span:last-child { min-width: 0; }
  .invite-rule-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 1px; border-radius: var(--r-sm); background: var(--surface-inset); border: 1px solid var(--line-1); }
  .invite-rule-icon .gi { width: 22px; height: 22px; }
  .invite-rule b { margin-right: 2px; font-weight: 800; color: var(--gold-100); }

  @media (max-width: 359px) {
    .invite-panel { gap: 12px; }
    .invite-stats { gap: 6px; }
    .invite-stat { padding: 10px 4px; }
    .invite-person { padding: 10px; }
    .invite-person-avatar { width: 38px; height: 38px; font-size: 17px; }
    .invite-identity-note { padding: 12px; gap: 10px; }
    .invite-guide-icon { width: 44px; height: 44px; }
  }
}

/* ── v10 (docs/v10-systems.md §1.5, §1.6, §6.2): four permissions (材料市场 emblem, 离线挖矿 clock), presence status,
   achievement ring chip on the player card. ── */
@layer pages {
  .profile-perm-emblem { width: 32px; height: 32px; object-fit: contain; }
  .profile-perm-icon > .icon { width: 26px; height: 26px; color: var(--gold-200); }
  .profile-ring-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; min-height: 28px; cursor: pointer; }
  .profile-ring-chip img { width: 18px; height: 18px; object-fit: contain; }
  .profile-presence { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0; }
  .profile-presence-icon .icon { width: 22px; height: 22px; }
  .profile-presence p { display: grid; gap: 2px; margin: 0; min-width: 0; }
  .profile-presence strong { font-size: var(--fs-13); line-height: 1.45; overflow-wrap: anywhere; }
  .profile-presence small { font-size: var(--fs-12); color: var(--text-3); }
  @media (max-width: 359px) {
    .profile-presence { grid-template-columns: auto minmax(0, 1fr); }
    .profile-presence .btn { grid-column: 1 / -1; }
  }
}

/* ── v10.1 (docs/v10-1-reveal-swap-excitement.md D5): the 统计 / 成就 entries under the asset tiles (profile-panel.mjs
   records()); the nav no longer carries a 成就 button. Two painted tiles share the row; one alone spans it. ── */
@layer pages {
  .profile-records { display: grid; grid-template-columns: repeat(var(--tiles, 2), minmax(0, 1fr)); gap: 8px; min-width: 0; }
  .profile-record {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 64px;
    padding: 8px 8px 8px 6px;
    border-radius: var(--r-lg);
    color: var(--text-1);
    text-align: start;
    background: var(--grad-card);
    border: 1px solid var(--line-gold);
    box-shadow: var(--sh-1);
    transition: transform var(--dur-1) var(--ease-out), filter var(--dur-2);
  }
  .profile-record:active { transform: translateY(1px); }
  @media (hover: hover) and (pointer: fine) { .profile-record:hover { filter: brightness(1.08); } }
  .profile-record-art { display: grid; place-items: center; width: 48px; height: 48px; }
  .profile-record-art img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .45)); }
  .profile-record-art .gi { width: 34px; height: 34px; }
  .profile-record-copy { display: grid; gap: 1px; min-width: 0; }
  .profile-record-title { font-size: var(--fs-15); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-record-copy small { font-size: var(--fs-12); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .profile-record > .icon { width: 16px; height: 16px; color: var(--gold-300); opacity: .8; }
  .profile-record.is-achievements .profile-record-copy small { color: var(--gold-200); font-family: var(--font-display); font-weight: 700; }
  @media (max-width: 359px) {
    .profile-record { grid-template-columns: auto minmax(0, 1fr); padding-inline-end: 10px; }
    .profile-record > .icon { display: none; }
    .profile-record-art, .profile-record-art img { width: 40px; height: 40px; }
  }
}