/* 账号安全相关的补丁样式：登录设备列表 + 强制改密弹窗
 *
 * 单独一个文件而不是塞进 style.css，是因为这两块都是这轮新加的
 * 安全功能，将来调整它们的视觉不该去动全局样式表 —— style.css 已经
 * 被十几个视图共用，改错一处会连带影响别处。
 */

/* ---------- 登录设备列表 ---------- */
.sess-list{display:flex;flex-direction:column;gap:8px}

.sess-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);
}
.sess-row.cur{
  /* 本机不靠颜色区分，靠左侧一条竖线 —— 整行染色在列表里太重，
   * 而「哪台是我现在用的」是这张表里最该一眼看到的。 */
  border-color:#c7d7f7;background:#f7faff;box-shadow:inset 3px 0 0 var(--brand);
}

.sess-main{min-width:0;flex:1}
.sess-main strong{font-size:13px;font-weight:600;word-break:break-word}

.sess-tag{
  display:inline-block;margin-left:7px;padding:1px 7px;border-radius:20px;
  font-size:10.5px;font-weight:600;line-height:1.7;
  background:var(--brand-soft);color:var(--brand);vertical-align:1px;
}

.sess-sub{
  margin-top:3px;font-size:11.5px;color:var(--txt-3);line-height:1.55;
  word-break:break-word;
}

.sess-note{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:20px;
  font-size:10.5px;background:var(--bg);color:var(--txt-2);border:1px solid var(--line-2);
}

/* ---------- 强制改密弹窗 ---------- */

/* 用 fixed 全屏遮罩，刻意不用项目里的 openModal ——
 * 那个弹窗点背景能关掉。这里是「你还在用初始密码」的提醒，
 * 一碰就消失等于没有。遮罩本身也就成了唯一能拦住误触的东西。 */
.force-pw-mask{
  position:fixed;inset:0;z-index:9000;
  display:grid;place-items:center;padding:20px;
  background:rgba(16,24,40,.46);
}

.force-pw{
  width:min(430px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:22px 22px 16px;box-shadow:0 12px 40px rgba(16,24,40,.22);
}
.force-pw h3{margin:0 0 6px;font-size:16px}
.force-pw .hint{margin:0 0 14px;font-size:12.5px;color:var(--txt-2);line-height:1.6}
.force-pw .switch-row{margin-bottom:8px}

.force-pw-foot{
  display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
  margin-top:6px;padding-top:12px;border-top:1px solid var(--line-2);
}

@media (max-width:520px){
  .force-pw{padding:18px 16px 14px}
  /* 窄屏按钮要撑满整行，否则「先去用」和「立即修改」两个按钮
   * 挤成两个小方块，手指点不准。 */
  .force-pw-foot{flex-direction:column-reverse}
  .force-pw-foot .btn{width:100%}
}