/* ============================================================
   pc.css —— 桌面端专属布局（独立信息架构，非手机端放大）
   侧边常驻导航 / 多列栅格 / hover / 表格
   ============================================================ */

:root {
  --side-w: 236px;
  --top-h: 60px;
  --pc-gutter: 28px;
}

body { font-size: var(--pc-fs-body); line-height: var(--pc-lh-body); background: var(--paper); }

.shell { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }

/* ---------------- 侧边导航 ---------------- */
.side {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  padding: 22px 14px 16px;
  background: #fbfaf8;
  border-right: 1px solid var(--line);
}
.side__brand { display: flex; align-items: center; gap: 9px; padding: 0 8px 22px; }
.side__brand svg { width: 22px; height: 22px; color: var(--brand-600); stroke-width: 1.55; }
.side__brand b { font-size: 15.5px; font-weight: var(--fw-sb); letter-spacing: 0.14em; }
.side__brand span { font-size: 9.5px; letter-spacing: 0.18em; color: var(--ink-300); padding-top: 2px; }

.side__group { padding: 16px 10px 7px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-300); font-weight: var(--fw-sb); }
.side__item {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 10px; border-radius: 9px;
  font-size: 13.5px; color: var(--ink-600); font-weight: var(--fw-m);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.side__item svg { width: 17px; height: 17px; color: var(--ink-400); transition: color var(--dur-1) var(--ease); }
.side__item:hover { background: rgba(21, 24, 27, 0.04); color: var(--ink-900); }
.side__item.is-active { background: var(--surface); color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); font-weight: var(--fw-sb); }
.side__item.is-active svg { color: var(--brand-600); }
.side__badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--err-500); color: #fff; font-size: 10px; line-height: 18px; text-align: center; }

.side__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.side__user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; }
.side__user:hover { background: rgba(21, 24, 27, 0.04); }
.side__user b { display: block; font-size: 13px; font-weight: var(--fw-sb); }
.side__user span { display: block; font-size: 11px; color: var(--ink-400); }

/* ---------------- 主区 ---------------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  height: var(--top-h); padding: 0 var(--pc-gutter);
  background: rgba(247, 246, 243, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(21, 24, 27, 0.05);
}
.top__crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-400); }
.top__crumb b { color: var(--ink-900); font-weight: var(--fw-sb); }
.top__search { width: 300px; margin-left: auto; height: 38px; }
.top__actions { display: flex; align-items: center; gap: 10px; }

.content { padding: 26px var(--pc-gutter) 44px; max-width: 1320px; width: 100%; margin: 0 auto; }

/* 页头 */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-head h1 { font-size: var(--pc-fs-h1); line-height: var(--pc-lh-h1); font-weight: var(--fw-sb); letter-spacing: -0.025em; }
.page-head p { margin-top: 7px; font-size: 13px; color: var(--ink-400); }

/* ---------------- 卡片 ---------------- */
.pcard {
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line-soft), var(--sh-1);
}
.pcard--pad { padding: 20px; }
.pcard--lg { border-radius: var(--r-lg); }
.pcard__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; }
.pcard__title { font-size: 14.5px; font-weight: var(--fw-sb); letter-spacing: -0.01em; }
.pcard__body { padding: 0 18px 18px; }

.hover-lift { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); }

/* ---------------- 首页三栏 ---------------- */
.home-grid { display: grid; grid-template-columns: 288px minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.home-grid > .col { display: flex; flex-direction: column; gap: 16px; }
.home-grid .sticky-col { position: sticky; top: calc(var(--top-h) + 20px); }

.hero-block { padding: 4px 0 20px; }
.hero-block h2 { font-size: 30px; line-height: 1.24; font-weight: var(--fw-sb); letter-spacing: -0.03em; }
.hero-block h2 em { font-style: normal; color: var(--brand-600); }
.hero-block .meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--ink-400); }
.hero-block .meta b { color: var(--ink-800); font-weight: var(--fw-sb); }

.balance-mini {
  padding: 18px; border-radius: var(--r-lg); color: #fff;
  background:
    radial-gradient(120% 100% at 92% 0%, rgba(127, 182, 178, 0.32), transparent 58%),
    linear-gradient(155deg, var(--brand-800), var(--brand-900));
  box-shadow: 0 18px 36px -26px rgba(12, 58, 56, 0.9);
}
.balance-mini .label { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.balance-mini .num { margin-top: 8px; font-family: var(--font-num); font-size: 30px; font-weight: var(--fw-sb); letter-spacing: -0.03em; }
.balance-mini .num small { font-size: 14px; opacity: 0.6; margin-right: 2px; }
.balance-mini .row { margin-top: 16px; display: flex; gap: 8px; }
.balance-mini .row .btn { height: 32px; font-size: 12px; border-radius: var(--r-xs); background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.balance-mini .row .btn:first-child { background: #fff; color: var(--brand-800); }

/* 紧凑列表行 */
.rowline { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.rowline + .rowline { border-top: 1px solid var(--line-soft); }
.rowline__t { font-size: 13px; font-weight: var(--fw-m); color: var(--ink-800); }
.rowline__s { font-size: 11.5px; color: var(--ink-400); margin-top: 2px; }

/* 陪玩卡（PC 版本，横向结构） */
.pw-tile {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; background: var(--surface); border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line-soft), var(--sh-1);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  cursor: pointer;
}
.pw-tile:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); }
.pw-tile__top { display: flex; gap: 12px; }
.pw-tile__name { display: flex; align-items: center; gap: 7px; font-size: 15.5px; font-weight: var(--fw-sb); letter-spacing: -0.01em; }
.pw-tile__meta { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-tile__tags { display: flex; gap: 6px; margin-top: 8px; }
.pw-tile__foot { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-soft); min-height: 32px; }
.pw-tile__slot { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-tile__slot svg { width: 11px; height: 11px; }
.pw-tile__price { flex: none; white-space: nowrap; }
.pw-tile .price, .pw-tile__meta .rate { white-space: nowrap; }
.pw-tile__price { margin-left: auto; display: flex; align-items: baseline; }
.pw-tile__price .price { font-size: 18px; }
.pw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* 可约清单 */
.slotline { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.slotline + .slotline { border-top: 1px solid var(--line-soft); }
.slotline__bar { flex: 1; }
.slotline__time { font-size: 11px; color: var(--ink-400); font-variant-numeric: tabular-nums; }

/* ---------------- 发现页 ---------------- */
.filter-side { display: flex; flex-direction: column; gap: 18px; }
.filter-side .pcard { padding: 16px; }
.filter-side h4 { font-size: 12px; font-weight: var(--fw-sb); color: var(--ink-700); margin-bottom: 10px; }
.filter-side .filter-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-side .filter-tag { height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--r-xs); }
.filter-side .filter-tag.is-on { background: var(--ink-900); color: #fff; box-shadow: none; }

.market-grid { display: grid; grid-template-columns: 216px minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.market-grid .sticky-col { position: sticky; top: calc(var(--top-h) + 20px); }

.list-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.list-head .count { font-size: 12px; color: var(--ink-400); }

.prow {
  display: grid; grid-template-columns: minmax(0, 1fr) 118px 84px 84px;
  align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-soft), var(--sh-1);
  border-radius: var(--r-md); cursor: pointer;
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.prow + .prow { margin-top: 10px; }
.prow:hover { box-shadow: inset 0 0 0 1px var(--brand-200), var(--sh-2); transform: translateX(2px); }
.prow.is-active { box-shadow: inset 0 0 0 1.5px var(--brand-400), var(--sh-2); }
.prow__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prow__name { font-size: 14.5px; font-weight: var(--fw-sb); display: flex; align-items: center; gap: 6px; min-width: 0; }
.prow__name > b { font-weight: var(--fw-sb); flex: none; max-width: 8em; }
.prow__name .tag, .prow__name .rank { flex: none; }
.prow__sub { font-size: 11.5px; color: var(--ink-400); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow__stat { text-align: right; white-space: nowrap; }
.prow__stat b { display: block; font-size: 14px; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.prow__stat span { font-size: 10.5px; color: var(--ink-400); }
.prow__actions { display: flex; justify-content: flex-end; }

/* 预览面板 */
.preview__cover { height: 96px; border-radius: var(--r-md) var(--r-md) 0 0; background: linear-gradient(150deg, #1a6461, #104a47); position: relative; overflow: hidden; }
.preview__cover span { position: absolute; right: -14px; bottom: -18px; width: 112px; height: 112px; color: #fff; opacity: 0.1; }
.preview__cover span svg { width: 100%; height: 100%; }
.preview__body { padding: 0 18px 18px; margin-top: -30px; }
.preview__avatar { box-shadow: 0 0 0 3px var(--surface); }
.preview__name { margin-top: 10px; font-size: 17px; font-weight: var(--fw-sb); }
.preview__stat { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0; padding: 12px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.preview__stat div { text-align: center; }
.preview__stat b { display: block; font-size: 15px; font-family: var(--font-num); font-weight: var(--fw-sb); }
.preview__stat span { font-size: 10.5px; color: var(--ink-400); }

/* ---------------- 选手主页（PC） ---------------- */
.detail-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.profile-card { overflow: hidden; }
.profile-card__cover { height: 120px; position: relative; background: linear-gradient(150deg, #1a6461, #104a47 60%, #172b2a); }
.profile-card__cover span.wm { position: absolute; right: -20px; bottom: -24px; width: 150px; height: 150px; color: #fff; opacity: 0.08; }
.profile-card__cover span.wm svg { width: 100%; height: 100%; }
.profile-card__body { padding: 0 20px 20px; margin-top: -36px; }
.profile-card__name { margin-top: 12px; font-size: 21px; font-weight: var(--fw-sb); letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.profile-card__meta { margin-top: 6px; font-size: 12px; color: var(--ink-400); }
.profile-card__quote { margin-top: 14px; font-size: 13px; line-height: 1.7; color: var(--ink-600); }

.seg-tabs { display: flex; gap: 2px; padding: 3px; background: var(--surface-3); border-radius: 11px; width: max-content; }
.seg-tabs button { height: 32px; padding: 0 16px; border-radius: 9px; font-size: 13px; color: var(--ink-500); }
.seg-tabs button.is-active { background: var(--surface); color: var(--ink-900); font-weight: var(--fw-sb); box-shadow: 0 1px 2px rgba(21, 24, 27, 0.08); }

/* ---------------- 下单（PC 双栏） ---------------- */
.create-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.summary-card { position: sticky; top: calc(var(--top-h) + 20px); }

/* ---------------- 订单表格 ---------------- */
.table-card { padding: 6px 4px 10px; }
.table-card .table td { padding: 17px 16px; }
.table-card .table td .btn + .btn { margin-left: 6px; }
.table-card .table td:last-child { white-space: nowrap; }
.table-card .table th { padding-bottom: 12px; }
.table-sum { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--ink-400); }
.table-sum b { color: var(--ink-900); font-family: var(--font-num); font-size: 14px; }
.filters-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }

/* ---------------- 聊天（PC 三栏） ---------------- */
.chat-layout {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px;
  height: calc(100vh - var(--top-h));
  border-top: 1px solid var(--line-soft);
}
.chat-list { border-right: 1px solid var(--line); overflow-y: auto; background: #fbfaf8; }
.chat-list__head { padding: 16px 16px 10px; }
.chat-item { display: flex; gap: 10px; padding: 12px 16px; cursor: pointer; }
.chat-item:hover { background: rgba(21, 24, 27, 0.035); }
.chat-item.is-active { background: var(--surface); box-shadow: inset 2px 0 0 var(--brand-500); }
.chat-item__t { font-size: 13px; font-weight: var(--fw-sb); display: flex; justify-content: space-between; gap: 8px; }
.chat-item__s { font-size: 11.5px; color: var(--ink-400); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-main { display: flex; flex-direction: column; min-width: 0; }
.chat-main__head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
.chat-main__body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.chat-main__foot { padding: 14px 20px; border-top: 1px solid var(--line-soft); display: flex; gap: 10px; align-items: flex-end; }

.chat-side { border-left: 1px solid var(--line); padding: 18px; overflow-y: auto; background: #fbfaf8; }

/* ---------------- 钱包（PC） ---------------- */
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat-card { padding: 18px; }
.stat-card .k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400); }
.stat-card .v { margin-top: 10px; font-family: var(--font-num); font-size: 26px; font-weight: var(--fw-sb); letter-spacing: -0.02em; }
.stat-card .v small { font-size: 13px; color: var(--ink-400); margin-left: 4px; font-weight: var(--fw-r); }
.wallet-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }

/* ---------------- 设置（PC 左导航） ---------------- */
.settings-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--top-h) + 20px); }
.settings-nav button { text-align: left; height: 36px; padding: 0 12px; border-radius: 8px; font-size: 13px; color: var(--ink-600); }
.settings-nav button:hover { background: rgba(21, 24, 27, 0.04); }
.settings-nav button.is-active { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); color: var(--ink-900); font-weight: var(--fw-sb); }

/* ---------------- 通用工具 ---------------- */
.hstack { display: flex; align-items: center; gap: 10px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; }
.op-60 { opacity: 0.6; }
.tnum { font-variant-numeric: tabular-nums; font-family: var(--font-num); }
.pc-empty { padding: 60px 20px; }
.kbd { display: inline-flex; align-items: center; height: 19px; padding: 0 5px; border-radius: 4px; font-size: 10px; color: var(--ink-400); box-shadow: inset 0 0 0 1px var(--line); background: var(--surface-2); }

/* ---------------- 结算清单（PC 下单/确认） ---------------- */
.sum-list { display: flex; flex-direction: column; }
.sum-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 13px; color: var(--ink-500); }
.sum-row b { color: var(--ink-900); font-weight: var(--fw-m); font-variant-numeric: tabular-nums; }
.sum-row--total { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.sum-row--total b { font-family: var(--font-num); font-size: 22px; font-weight: var(--fw-sb); letter-spacing: -0.02em; }
.sum-row .neg { color: var(--err-500); }