/* ============================================================
   铃音Township · 成员管理页
   ------------------------------------------------------------
   本文件只服务 users.html。

   设计取向：Apple「液态玻璃」—— 半透明面 + 背景模糊 + 一圈几乎看不见的亮边。
   版式取向：每行用【固定列宽的网格】。旧版是 flex-wrap，而行内控件数量会随
             权限（管理员/普通成员）和状态（待确认多一个「通过加入」、自己那行没有
             「删除」）变化 —— 控件一多就各自换行，表现为"元素会飘"。固定网格根治它。

   两条实现纪律：
     · 颜色 / 圆角 / 阴影一律取自 css/tokens.css，本文件不写死色值
     · backdrop-filter 只用在【大面】上（卡片、面板）；按钮/输入框这类小控件
       用半透明底即可 —— 几十个小元素各带一层模糊会明显掉帧
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* 玻璃必须有东西「透过去」才成立：给页面底铺一层固定的柔和色雾 */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 6% -12%, rgba(168,80,47,.07), transparent 60%),
    radial-gradient(1000px 640px at 98% 0%, rgba(201,138,46,.06), transparent 58%),
    radial-gradient(900px 620px at 50% 118%, rgba(63,122,94,.05), transparent 62%);
}
a{color:inherit}

/* ---------- 版心 ---------- */
.portal-main{position:relative;z-index:1;margin:0 auto;max-width:72rem;padding:6.4rem 4vw 7rem}

/* ---------- 页头 ---------- */
.portal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.portal-head h1{font-family:var(--serif);font-weight:900;font-size:clamp(1.7rem,3vw,2.15rem);letter-spacing:.06em;margin:0}
.portal-head p{color:var(--text-soft);font-size:.78rem;line-height:1.9;margin:.5rem 0 0;max-width:46em}

/* ---------- 玻璃面 ---------- */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-glass);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}
/* 浏览器不支持背景模糊时提高不透明度，宁可不够通透也不能看不清字 */
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){
  .glass{background:var(--glass-raised)}
}

/* ---------- 设置面板（管理员密钥 / 公会密钥）---------- */
.portal-panel{padding:1.15rem 1.3rem;margin-top:1rem}
.panel-label{display:block;font-size:.68rem;letter-spacing:.24em;color:var(--text-faint);text-transform:uppercase;margin-bottom:.75rem}
/* 输入 + 按钮固定两列：不给它换行的机会 */
.setting-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.7rem;align-items:center}
.portal-status{margin:.75rem 0 0;color:var(--text-soft);font-size:.75rem;line-height:1.75;min-height:1.1rem}
.portal-status:empty{margin:0;min-height:0}

/* ---------- 工具条：筛选项 + 计数 ---------- */
.member-toolbar{align-items:center;display:flex;gap:.6rem;margin:1.5rem 0 .9rem;flex-wrap:wrap}
.member-filters{display:flex;flex-wrap:wrap;gap:.4rem}
.member-count{color:var(--text-soft);font-size:.74rem;letter-spacing:.06em;margin-left:auto;white-space:nowrap}

/* ---------- 成员列表 ---------- */
.member-list{padding:.4rem}
.notification-empty{color:var(--text-soft);font-size:.8rem;line-height:1.9;padding:2.4rem 1.4rem;text-align:center}
.notification-empty .portal-button{margin-top:.9rem}

/* 一行 = 一个固定网格。
   列宽写死（只有「身份」「备注」允许伸缩），所以行内控件多少都不会挤动别的列。 */
.member-row{
  align-items:center;
  display:grid;
  gap:.85rem;
  padding:.95rem 1.1rem;
  border-radius:var(--radius-sm);
  transition:background-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.member-row + .member-row{border-top:1px solid var(--glass-edge)}
.member-row:hover{background:var(--glass-tint)}
.member-row.pending{background:rgba(168,80,47,.045)}
.member-row.pending:hover{background:rgba(168,80,47,.075)}

/* ---------- 身份列 ---------- */
.member-id{align-items:center;display:flex;gap:.7rem;min-width:0}
.member-avatar{
  align-items:center;background:var(--well);border:1px solid var(--glass-line);
  border-radius:50%;color:var(--text-soft);display:flex;flex:0 0 auto;
  font-family:var(--latin);font-size:.95rem;font-weight:600;height:2.3rem;
  justify-content:center;letter-spacing:.02em;width:2.3rem;
}
.member-id-body{min-width:0}
.member-name{
  align-items:center;color:var(--text);display:flex;font-family:var(--serif);
  font-size:.95rem;font-weight:600;gap:.45rem;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.member-meta{color:var(--text-faint);font-size:.7rem;letter-spacing:.05em;margin-top:.22rem;white-space:nowrap}

/* ---------- 字段单元（标签在上，控件在下）---------- */
.member-cell{display:flex;flex-direction:column;gap:.32rem;min-width:0}
.member-cell-label{color:var(--text-faint);font-size:.64rem;letter-spacing:.2em;white-space:nowrap}
.member-cell--mod .member-cell-label{margin-bottom:.05rem}
/* 控件为空时的占位符：撑住与 .portal-input 相同的高度，行高才不会被拉矮 */
.member-cell-empty{color:var(--text-faint);font-size:.78rem;line-height:2.15rem}

/* ---------- 操作列：固定宽度并右对齐，行间按钮永远对齐 ---------- */
.member-actions{align-items:center;display:flex;gap:.4rem;justify-content:flex-end}

/* ---------- 表单控件（半透明，不上模糊）---------- */
.portal-input,.portal-select{
  -webkit-appearance:none;appearance:none;
  background:var(--glass-tint);
  border:1px solid var(--glass-line);
  border-radius:var(--radius-xs);
  color:var(--text);
  font-family:var(--sans);font-size:.78rem;
  min-height:2.15rem;padding:.45rem .6rem;width:100%;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),background-color .2s var(--ease-out);
}
.portal-input::placeholder{color:var(--text-faint)}
.portal-input:hover,.portal-select:hover{border-color:var(--glass-edge);background:var(--glass-raised)}
.portal-input:focus,.portal-select:focus{
  outline:none;background:var(--glass-raised);
  border-color:var(--accent);box-shadow:var(--focus-ring);
}
.portal-input:disabled,.portal-select:disabled{opacity:.5;cursor:not-allowed}
.portal-input[readonly]{cursor:default;color:var(--text-soft)}
/* 下拉箭头：用 token 色内联成 data-URI（var() 在 data-URI 里不可用，只能写死取值） */
.portal-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a8502f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:right .55rem center;background-repeat:no-repeat;background-size:.72rem;
  cursor:pointer;padding-right:1.8rem;
}
.portal-select option{background:var(--bg-elevated);color:var(--text)}

/* ---------- 认领开关：iOS 那种胶囊滑钮 ---------- */
.switch{align-items:center;cursor:pointer;display:inline-flex;position:relative}
.switch input{height:1px;margin:0;opacity:0;position:absolute;width:1px}
.switch-track{
  background:rgba(31,30,29,.17);border-radius:var(--radius-pill);
  box-shadow:inset 0 1px 2px rgba(31,30,29,.10);
  display:block;height:1.45rem;position:relative;width:2.5rem;
  transition:background-color .24s var(--ease-out);
}
.switch-track::after{
  background:var(--bg-elevated);border-radius:50%;box-shadow:0 1px 3px rgba(31,30,29,.3);
  content:'';height:1.17rem;left:.14rem;position:absolute;top:.14rem;width:1.17rem;
  transition:transform .24s var(--ease-out);
}
.switch input:checked + .switch-track{background:var(--accent)}
.switch input:checked + .switch-track::after{transform:translateX(1.05rem)}
.switch input:focus-visible + .switch-track{box-shadow:var(--focus-ring)}
.switch:hover .switch-track{background:rgba(31,30,29,.24)}
.switch:hover input:checked + .switch-track{background:var(--accent-deep)}

/* ---------- 标签 ---------- */
.member-tag{
  border:1px solid var(--glass-edge);border-radius:var(--radius-pill);
  color:var(--text-soft);display:inline-block;font-size:.68rem;
  letter-spacing:.08em;padding:.2rem .6rem;white-space:nowrap;
}
.member-tag.pending{background:var(--accent-soft);border-color:transparent;color:var(--accent)}

/* ============================================================
   响应式：**每一档都给出确定的网格**，不靠换行去凑
   ============================================================ */

/* 桌面：全部字段排成一行 */
@media (min-width:1081px){
  .member-row{
    /* 操作列给足：待确认那一行会同时出现「通过加入 + 重置密码 + 删除」三个按钮，
       按 .74rem 字号估算约 13rem，留到 14rem 免得挤出去 */
    grid-template-columns:minmax(11rem,1.15fr) 4.6rem 7rem minmax(8rem,1fr) 4.2rem 14rem;
  }
}

/* 平板：身份独占一行，字段一行，操作一行 */
@media (min-width:721px) and (max-width:1080px){
  .member-row{
    grid-template-columns:4.6rem 7rem minmax(7rem,1fr) 4.2rem;
    row-gap:.7rem;
  }
  .member-id{grid-column:1/-1}
  .member-actions{grid-column:1/-1;border-top:1px solid var(--glass-edge);justify-content:flex-start;padding-top:.7rem}
}

/* 手机：一律单列，每格都带标签 */
@media (max-width:720px){
  .portal-main{padding:5.2rem 5vw 5rem}
  .portal-head{flex-direction:column;align-items:flex-start;gap:.4rem}
  .member-row{grid-template-columns:minmax(0,1fr);row-gap:.75rem;padding:1rem 1.05rem}
  .member-id{padding-bottom:.5rem;border-bottom:1px solid var(--glass-edge)}
  .member-actions{justify-content:flex-start;border-top:1px solid var(--glass-edge);padding-top:.8rem}
  .member-actions .member-approve,.member-actions .member-reset,.member-actions .member-delete{flex:1 1 auto;justify-content:center}
  .setting-row{grid-template-columns:minmax(0,1fr)}
  .setting-row .portal-button{width:100%}
  .member-count{margin-left:0;width:100%}
  /* iOS 聚焦时会自动放大 16px 以下的输入框，这里顶到 16px 规避 */
  .portal-input,.portal-select{font-size:16px}
}