.personal-settings { min-height:100%; background:var(--paper); color:var(--ink); }
.personal-settings main { width:min(620px,100%); margin:0 auto; padding:16px 14px 34px; box-sizing:border-box; }
.personal-settings section { margin:0 0 22px; }
.personal-settings h2 { margin:0 4px 9px; color:var(--ink-3); font-size:13px; font-weight:700; }
.ps-group { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow-card); }
.ps-row { min-height:66px; display:flex; align-items:center; gap:12px; padding:10px 14px; box-sizing:border-box; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.ps-row:last-child { border-bottom:0; }
.ps-row:active { background:#f6f8fc; }
.ps-row > .ico { width:21px; height:21px; flex:none; color:var(--felt-600); }
.ps-row > span { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.ps-row b { font-size:15px; }
.ps-row small { overflow-wrap:anywhere; color:var(--ink-3); font-size:12px; line-height:1.4; }
.ps-row > i { color:var(--ink-3); font:normal 24px/1 sans-serif; }
.ps-error { margin:0 0 16px; padding:11px 12px; border-radius:10px; background:#fff0ed; color:var(--red); font-size:13px; line-height:1.5; }
.ps-error button { min-height:44px; margin-left:8px; border:0; background:transparent; color:inherit; text-decoration:underline; cursor:pointer; }
.ps-logout { width:100%; min-height:52px; border:1px solid #e5b8b2; border-radius:14px; background:var(--card); color:var(--red); font:700 15px/1 inherit; cursor:pointer; }
.ps-logout:active { background:#fff5f3; }
@media (max-width:360px) { .personal-settings main { padding-left:11px; padding-right:11px; } }

/* ============================================================
   我的（FE-004 + 视觉对齐 docs/design-references/me-candidate-1-20260910.png）
   只用纯 CSS 与内联 SVG（views.js 的 ME_SUITS / ME_ICON_BODY）近似参考图：
   深蓝渐变头部 + 花形水印、白卡（蓝竖条标题）、三栏竞技档案与成长进度条、
   四等分常用功能、药丸按钮待办、平台规则行。数值一律来自服务端，不在此写门槛。
   令牌：品牌蓝 #002080／深色文字 #001040／淡蓝 #e8f0fb·#0b2a63／页面底 #fafbfe。
   ============================================================ */
.me-page { min-height:calc(100vh - var(--tab-h)); background:#fafbfe; padding-bottom:12px; }

/* ---- 深蓝渐变头部 ---- */
.me-hero { padding:4px 18px 20px; }
.me-hero.felt { background:var(--hero-bg); }
.me-suits { position:absolute; inset:0; color:#fff; opacity:.10; pointer-events:none; }
.me-suit { position:absolute; }
.me-suit.s1 { width:116px; height:116px; top:-24px; right:20px; transform:rotate(-12deg); }
.me-suit.s2 { width:94px; height:94px; top:62px; right:-24px; transform:rotate(14deg); }
.me-suit.s3 { width:70px; height:70px; top:-14px; right:126px; transform:rotate(8deg); }
.me-head { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:46px; }
.me-title { font-size:22px; font-weight:800; letter-spacing:.02em; }
.me-settings { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 4px; border:0;
  background:none; color:#fff; font:600 13px/1 inherit; cursor:pointer; }
.me-settings:active { opacity:.7; }
.me-settings .me-ico { width:17px; height:17px; }
.me-identity { display:flex; align-items:center; gap:14px; margin-top:8px; }
.me-avatar { width:56px; height:56px; flex:none; border-radius:50%; overflow:hidden; cursor:pointer;
  background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center; }
.me-avatar img { width:56px; height:56px; object-fit:cover; display:block; }
.me-avatar .me-ico { width:30px; height:30px; color:rgba(255,255,255,.82); }
.me-who { flex:1; min-width:0; }
.me-name { font-size:22px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.me-region { display:inline-flex; align-items:center; gap:3px; margin-top:3px; color:rgba(255,255,255,.86);
  font-size:13px; text-decoration:none; }
.me-region .chev { color:rgba(255,255,255,.7); font-size:15px; line-height:1; }
.me-avatar-remove { margin-top:3px; color:rgba(255,255,255,.78); font-size:11.5px; text-decoration:underline; cursor:pointer; }

/* ---- 白卡定式：蓝竖条标题 + 右侧动作 ---- */
.me-card { padding:14px 16px; }
.me-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.me-head-left { display:flex; align-items:center; gap:8px; min-width:0; }
.me-bar { width:4px; height:15px; border-radius:2px; background:#002080; flex:none; }
.me-card-title { font-size:15.5px; font-weight:700; color:#001040; }
.me-card-more { display:inline-flex; align-items:center; gap:2px; flex:none; font-size:13px;
  color:var(--ink-3); text-decoration:none; }
.me-card-more .chev { font-size:15px; line-height:1; }
.me-ico { width:22px; height:22px; flex:none; }

/* ---- 我的竞技档案：三栏 + 成长进度 ---- */
.me-arch-cols { display:grid; grid-template-columns:repeat(3,1fr); }
.me-arch-col { min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:2px 4px; color:var(--ink); text-decoration:none; }
.me-arch-col + .me-arch-col { border-left:1px solid var(--line); }
.me-arch-col small { display:inline-flex; align-items:center; gap:2px; color:var(--ink-3); font-size:12px; }
.me-arch-col small .chev { font-size:14px; line-height:1; }
.me-arch-col strong { max-width:100%; font-size:23px; font-weight:800; line-height:1.2; color:#001040;
  letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.me-arch-col.is-long strong { font-size:19px; }
.me-arch-col.is-xlong strong { font-size:16px; }
.me-arch-growth { margin-top:12px; }
.me-arch-gtop { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:7px; }
.me-arch-glabel { font-size:13.5px; font-weight:700; color:var(--ink); min-width:0; }
.me-arch-glabel b { font-weight:800; color:#001040; }
.me-arch-gnote { min-width:0; color:var(--ink-3); font-size:12px; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.me-arch-bar { position:relative; height:15px; border-radius:999px; background:#eceff0; overflow:hidden; }
.me-arch-bar > i { display:block; height:100%; border-radius:999px;
  background:linear-gradient(180deg,#002a6e,#001040); }
.me-arch-bar > .me-arch-pct { position:absolute; top:0; left:0; height:100%; display:flex; align-items:center;
  justify-content:flex-end; padding-right:7px; color:#fff; font:700 11px/1 inherit; }
.me-arch-bar > .me-arch-pct.is-out { justify-content:flex-start; padding:0 0 0 7px; color:var(--ink-3); white-space:nowrap; }
.me-arch-note { margin-top:6px; color:var(--ink-3); font-size:12px; }
.me-arch-link { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px;
  padding-top:9px; border-top:1px solid var(--line); color:var(--ink-2); font-size:12.5px; text-decoration:none; }
.me-arch-link .chev { font-size:16px; line-height:1; }

/* ---- 常用功能：白卡内四等分 ---- */
.me-quick { display:grid; grid-template-columns:repeat(4,1fr); }
.me-quick-item { min-width:0; min-height:76px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:7px; padding:8px 2px; border-radius:12px; color:var(--ink); text-decoration:none; }
.me-quick-item + .me-quick-item { box-shadow:inset 1px 0 0 #eef0f7; }
.me-quick-item:active { background:#f4f7fc; }
.me-quick-item .me-ico { width:25px; height:25px; color:#002080; }
.me-quick-item > span { max-width:100%; font-size:12.5px; line-height:1.25; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- 待办提醒：图标 + 标题/说明 + 淡蓝药丸按钮 ---- */
.me-todo { display:flex; flex-direction:column; }
.me-todo-row { display:flex; align-items:center; gap:12px; padding:11px 0; cursor:pointer;
  border-top:1px solid #eef0f7; }
.me-todo-row:first-child { border-top:0; }
.me-todo-row:active { background:#f8fafd; }
.me-todo-row > .me-ico { width:22px; height:22px; color:#002080; }
.me-todo-main { flex:1; min-width:0; }
.me-todo-title { font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.me-todo-sub { margin-top:2px; color:var(--ink-3); font-size:12.5px; line-height:1.45;
  white-space:normal; overflow-wrap:anywhere; }
.me-todo-btn { flex:none; display:inline-flex; align-items:center; gap:3px; min-height:34px; padding:0 12px;
  border-radius:999px; background:#e8f0fb; color:#0b2a63; font-size:12.5px; font-weight:700; }
.me-todo-btn .chev { color:#0b2a63; font-size:15px; line-height:1; }
.me-todo-count { margin-top:10px; padding:0 2px; }
.me-todo-card .ps-error { margin-bottom:0; }

/* ---- 平台规则 ---- */
.me-rules { padding:13px 16px; }
.me-rule-row { display:flex; align-items:center; gap:12px; cursor:pointer; }
.me-rule-row .me-ico { width:24px; height:24px; color:#002080; }
.me-rule-main { flex:1; min-width:0; }
.me-rule-title { font-size:15px; font-weight:700; }
.me-rule-sub { margin-top:2px; color:var(--ink-3); font-size:12.5px; line-height:1.45; overflow-wrap:anywhere; }
.me-footnote { text-align:center; padding:2px 28px 14px; }

/* 320px：收紧卡片内距与数值字号，保持四等分与三栏不折行 */
@media (max-width:360px) {
  .me-hero { padding:4px 14px 18px; }
  .me-card { padding:12px 12px; }
  .me-rules { padding:12px 12px; }
  .me-arch-col strong { font-size:20px; }
  .me-arch-col.is-long strong { font-size:17px; }
  .me-arch-col.is-xlong strong { font-size:15px; }
  .me-region { font-size:12.5px; }
  .me-quick-item { min-height:70px; gap:6px; }
  .me-quick-item .me-ico { width:23px; height:23px; }
  .me-todo-btn { padding:0 10px; font-size:12px; }
}
/* 宽视口：保持与 390 相同的信息密度（#phone 上限 430，这里只是兜底） */
@media (min-width:431px) {
  .me-card, .me-rules { max-width:600px; margin-left:auto; margin-right:auto; }
}

/* ---- 我的奖品（独立页面）：筛选、卡片与状态，领取由场务核销，本页不自助领取 ---- */
.pz-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.pz-chip { min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink-3); font:600 13px/1 inherit; cursor:pointer; }
.pz-chip.on { border-color:var(--felt-600); background:var(--felt-600); color:#fff; }
.pz-card { margin:0 0 12px; padding:12px 14px; }
.pz-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pz-head b { min-width:0; font-size:15px; overflow-wrap:anywhere; }
.pz-line { margin-top:5px; color:var(--ink-3); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.pz-code { margin-top:9px; padding:9px 11px; border-radius:10px; background:#f2f5fb; color:var(--ink);
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:13px; }
.pz-code b { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:16px; letter-spacing:.06em; }
.pz-why { margin-top:9px; color:var(--amber-700,#8a5b00); font-size:12px; }
.pz-empty { padding:26px 16px; color:var(--ink-3); font-size:13px; text-align:center; }
.pz-more { margin:4px 0 14px; text-align:center; }
.pz-tip { margin-top:6px; padding:0 4px; color:var(--ink-3); font-size:11px; line-height:1.6; }

/* ---- 我的参赛（FE-ME-001）：正式/轮转切换后各自的轻量筛选 ----
   筛选条横向滚动，按钮触控高度不小于 44px；筛选全部由服务端在分页前执行。 */
.fe-chips { display:flex; gap:7px; margin:8px 14px 0; overflow-x:auto; padding-bottom:2px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.fe-chips::-webkit-scrollbar { display:none; }
.fe-chip { flex:none; min-height:36px; padding:0 13px; border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--ink-3); font:600 13px/1 inherit; cursor:pointer; white-space:nowrap; }
.fe-chip.on { border-color:var(--felt-600); background:var(--felt-600); color:#fff; }
/* 320px：两行筛选条不挤压卡片标题 */
@media (max-width:340px) { .fe-chip { font-size:12px; padding:0 11px; } }

/* ---- U4 卡片布局：标题/摘要占满整行，状态与操作下移一行 ----
   同行混排会把长赛事名挤成省略号，导致本人看不到自己在哪一场。 */
.u4-card { flex-direction:column; align-items:stretch; gap:8px; cursor:default; }
.u4-card-top { display:flex; align-items:flex-start; gap:10px; }
.u4-card-top > .li-main { flex:1; min-width:0; }
.u4-card .li-title { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.u4-card .li-sub { white-space:normal; overflow:visible; overflow-wrap:anywhere; }
.u4-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.u4-card-foot > .row { gap:6px; flex-wrap:wrap; }
/* 待办摘要含截止时间，截断会丢掉关键信息，允许整行换行 */
.u4-todo .li-sub { white-space:normal; overflow:visible; overflow-wrap:anywhere; }