@charset "UTF-8";

  .social-tabs{display:flex;gap:8px;width:min(94vw,560px);margin:0 auto 14px;}
  .social-tab{flex:1;min-height:44px;border:1px solid var(--line);border-radius:13px;background:var(--card);color:var(--ink-soft);font-family:var(--cjk);font-size:15px;font-weight:800;cursor:pointer;}
  .social-tab.active{background:var(--solid);color:var(--solid-text);border:0;}
  .social-panel{width:min(94vw,560px);margin:0 auto;}
  .social-panel[hidden]{display:none;}
  .social-seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
  .social-seg button{flex:1;min-width:62px;min-height:38px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink-soft);font-family:var(--cjk);font-size:12.5px;font-weight:800;cursor:pointer;}
  .social-seg button.active{color:var(--ws-accent-ink,var(--accent));background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));}
  .social-myrank{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:14px;padding:12px 15px;margin-bottom:12px;color:var(--ink);font-size:13px;}
  .social-myrank b{font-size:20px;color:var(--ws-accent-ink,var(--accent));font-family:var(--serif);}
  .social-list{display:flex;flex-direction:column;gap:8px;}
  .social-row{display:grid;grid-template-columns:30px 38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:12px;background:color-mix(in srgb,var(--card) 60%,transparent);}
  .social-row.me{border-color:var(--accent);background:var(--accent-soft);}
  .social-rank{font-family:var(--serif);font-weight:900;font-size:15px;color:var(--ink-soft);text-align:center;}
  .social-rank.top{color:var(--amber);}
  .social-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--accent-soft),var(--paper));display:grid;place-items:center;color:var(--accent);font-family:var(--serif);font-weight:900;font-size:15px;}
  .social-avatar img{width:100%;height:100%;object-fit:cover;}
  .social-name{min-width:0;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35;overflow:hidden;}
  .social-lv{display:inline-flex;align-items:center;height:16px;padding:0 6px;margin-left:4px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,var(--card));color:var(--ws-accent-ink,var(--accent));font-size:10px;font-weight:900;vertical-align:middle;}
  .social-val{font-size:14px;font-weight:900;color:var(--ws-accent-ink,var(--accent));white-space:nowrap;}
  .social-id-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:14px;box-shadow:var(--shadow);}
  .social-id-card .lbl{font-size:11px;color:var(--ink-soft);}
  .social-id-row{display:flex;align-items:center;gap:10px;margin-top:6px;}
  .social-id-row b{font-family:var(--serif);font-size:22px;color:var(--ink);letter-spacing:1.5px;flex:1;}
  .social-id-copy{border:1px solid var(--line);background:var(--paper);color:var(--ws-accent-ink,var(--accent));border-radius:999px;padding:7px 14px;font-size:12px;font-weight:800;cursor:pointer;}
  .social-add{display:flex;gap:8px;margin-bottom:12px;}
  .social-add input{flex:1;min-width:0;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-family:var(--cjk);font-size:14px;padding:0 13px;}
  .social-add button{border:0;border-radius:12px;background:var(--solid);color:var(--solid-text);font-family:var(--cjk);font-size:14px;font-weight:800;padding:0 18px;cursor:pointer;}
  .social-sec-title{font-size:13px;font-weight:900;color:var(--ink);margin:16px 0 8px;}
  .social-sec-title b{color:var(--accent);}
  .social-friend-actions{display:flex;gap:6px;}
  .social-mini-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;cursor:pointer;}
  .social-mini-btn.primary{background:var(--solid);color:var(--solid-text);border:0;}
  .social-empty{color:var(--ink-soft);font-size:13px;text-align:center;padding:18px 8px;line-height:1.6;}
  .social-name small{font-size:11px;color:var(--ink-faint);font-weight:600;}
  .social-gap{text-align:center;color:var(--ink-faint);font-size:18px;letter-spacing:4px;line-height:1;padding:6px 0 4px;user-select:none;}
  .mobile-home-rank{width:29px;height:29px;border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--accent) 12%,var(--card));color:var(--ws-accent-ink,var(--accent));display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 5px 12px rgba(58,45,28,.06);}
  .mobile-home-rank:active{transform:scale(.94);}
  .mobile-home-rank[hidden],.mobile-home-pill[hidden],.top-install-btn[hidden],.desktop-pill[hidden],nav button[hidden]{display:none!important;}
  .mobile-home-rank.is-locked{opacity:.72;background:color-mix(in srgb,var(--card) 88%,var(--paper));border-style:dashed;color:var(--ink-faint);}
  .mobile-home-pill.is-locked,.top-install-btn.is-locked,.desktop-pill.is-locked{opacity:.7;border-style:dashed;background:color-mix(in srgb,var(--card) 88%,var(--paper));color:var(--ink-soft);}
  .mobile-ach-card.is-locked{background:color-mix(in srgb,var(--card) 86%,var(--paper));border:1px dashed var(--line-strong);opacity:.88;}
  .mobile-ach-card.is-locked .ach-icon{background:color-mix(in srgb,var(--ink-faint) 18%,transparent);color:var(--ink-soft);}
  .feature-unlock-card{max-width:440px;text-align:center;}
  .feature-unlock-icon{width:58px;height:58px;margin:0 auto 12px;border-radius:20px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,var(--card));color:var(--accent);font-weight:950;font-size:24px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));}
  .feature-unlock-progress{margin:10px 0 16px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--accent) 8%,var(--paper));border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));color:var(--ink-soft);font-size:13px;font-weight:800;line-height:1.45;}
