/* 账号与权限页 + 侧栏左下角「我的账号」菜单 + 登录框的一行注脚。
   单独一个文件：app.css 末尾是 V6 语言层，好几个在开的 PR 都往那儿追加，
   这里挤进去只会互相冲突。颜色一律走 app.css 的 token，不写死色值。 */

/* ── 侧栏左下角：我是谁 + 菜单 ─────────────────────────────────── */

.sidebar-user { position: relative; }
.user-btn {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; min-height: 2.75rem; padding: 0.3rem 0.4rem;
  border: 0; border-radius: var(--r-pill); background: transparent;
  color: var(--ink-2); font-size: var(--text-sm); text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.user-btn:hover, .user-btn[aria-expanded="true"] { background: var(--paper-2); color: var(--ink); }
.user-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.user-btn .user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 70;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-pop);
}
.user-menu[hidden] { display: none; }
.user-menu-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0.5rem 0.6rem 0.45rem; margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.user-menu-head b { font-size: var(--text-base); color: var(--ink); }
.user-menu-head small { font-size: var(--text-xs); color: var(--ink-3); }
.user-menu button {
  display: block; width: 100%; min-height: 2.5rem; padding: 0.4rem 0.6rem;
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--ink); font-size: var(--text-sm); text-align: left; cursor: pointer;
}
.user-menu button:hover, .user-menu button:focus-visible {
  background: var(--accent-soft); color: var(--accent-d); outline: none;
}
.user-menu button[hidden] { display: none; }

/* 图标栏那一档（761–1000）侧栏只有 68px：菜单往右边伸出去，别挤成一条 */
@media (min-width: 761px) and (max-width: 1000px) {
  .user-menu { right: auto; width: 15rem; }
}

.gate-foot { font-size: var(--text-xs); color: var(--ink-4); }
.gate-foot[hidden] { display: none; }

/* ── 页面骨架 ──────────────────────────────────────────────────── */

.acc-status { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.acc-warn { margin-bottom: var(--space-3); }
.acc-warn p { margin: 0; }

.acc-steps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3);
  margin: 0 0 var(--space-3); padding: 0; list-style: none; counter-reset: accstep;
}
.acc-steps li {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: var(--space-2);
  row-gap: 2px; padding: var(--space-2) var(--space-3);
  background: var(--paper-2); border: 1px solid var(--line-soft); counter-increment: accstep;
}
.acc-steps li::before {
  content: counter(accstep); grid-row: span 2;
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 999px; background: var(--line-soft); color: var(--ink-2);
  font-size: var(--text-sm); font-weight: 650;
}
.acc-steps li.on { border-color: var(--accent-line); }
.acc-steps li.on::before { background: var(--accent); color: var(--accent-ink); }
.acc-steps b { font-size: var(--text-base); }
.acc-steps span { font-size: var(--text-xs); color: var(--ink-3); line-height: 1.6; }

.acc-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
  gap: var(--space-3); align-items: start;
}
.acc-side { display: flex; flex-direction: column; }
.acc-main, .acc-side .panel { min-width: 0; }

.acc-head { display: flex; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; }
.acc-head h2 { flex: 1 1 18rem; }

/* ── 新增账号 ──────────────────────────────────────────────────── */

.acc-new {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--sidebar); border: 1px dashed var(--line-hard);
}
.acc-new[hidden] { display: none; }
.acc-new > b { font-size: var(--text-sm); }
.acc-new-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}
.acc-new-grid > label {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--text-xs); color: var(--ink-3);
}
.acc-new .form-actions { flex-wrap: wrap; }

/* 角色：三颗连在一起的胶囊，底下是真 radio（键盘左右键能切） */
.acc-seg { margin: 0; padding: 0; border: 0; min-width: 0; }
.acc-seg legend { padding: 0; margin-bottom: 2px; font-size: var(--text-xs); color: var(--ink-3); }
.acc-seg-opts { display: inline-flex; }
.acc-seg label { position: relative; display: inline-flex; }
.acc-seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.acc-seg span {
  display: inline-block; padding: 0.34rem 0.85rem; font-size: var(--text-sm);
  border: 1px solid var(--line-hard); background: var(--paper-2); color: var(--ink-2);
}
.acc-seg label:first-child span { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.acc-seg label:last-child span { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.acc-seg label + label span { margin-left: -1px; }
.acc-seg input:checked + span {
  position: relative; background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.acc-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 账号表 ────────────────────────────────────────────────────── */

#acc_table td { vertical-align: middle; }
#acc_table td .btn + .btn { margin-left: var(--space-1); }
#acc_table td .hint { margin-left: var(--space-1); }
.acc-row-off td { background: var(--sidebar); color: var(--ink-3); }
.acc-role-sel { border-radius: var(--r-pill); padding-right: 1.6rem; }

.acc-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.18rem 0.6rem; border-radius: var(--r-pill);
  font-size: var(--text-xs); line-height: 1.4; white-space: nowrap;
  background: var(--line-soft); color: var(--ink-2);
}
.acc-me { margin-left: var(--space-1); }
.acc-role-admin { background: var(--accent-soft); color: var(--accent-d); font-weight: 650; }
.acc-role-fin { background: var(--paper-2); color: var(--info-ink); box-shadow: inset 0 0 0 1px var(--accent-line); }
.acc-role-view { background: var(--line-soft); color: var(--ink-2); }
.acc-pending { background: var(--info-soft); color: var(--info-ink); }
.acc-pending-strong { background: var(--warn-soft); color: var(--warn-ink); }
.acc-on, .acc-ok { background: var(--pos-soft); color: var(--pos-ink); }
.acc-off { background: var(--line-soft); color: var(--ink-3); }
.acc-fail { background: var(--neg-soft); color: var(--neg-ink); }
.acc-denied { background: var(--warn-soft); color: var(--warn-ink); }

.acc-dot {
  display: inline-block; width: 7px; height: 7px; margin-right: 0.4rem;
  border-radius: 50%; background: var(--line-hard); vertical-align: 0.05em;
}
.acc-pill .acc-dot { margin-right: 0; }
.acc-dot.on { background: var(--pos); }
.acc-dot.warn { background: var(--warn); }

/* ── 右栏：开启面板、角色表 ────────────────────────────────────── */

/* 比 .stack-form > label（竖排、小灰字）更具体一档：勾选框和那句话要横着、正常字色 */
.stack-form > label.acc-check {
  flex-direction: row; align-items: flex-start; gap: var(--space-1);
  font-size: var(--text-sm); color: var(--ink); line-height: 1.6;
}
.acc-check input { margin-top: 0.3rem; }
#acc_enable_form select { width: 100%; }
#acc_enable_form code { font-family: var(--mono); font-size: var(--text-xs); }

.acc-matrix td, .acc-matrix th { white-space: normal; }
.acc-matrix th:not(:first-child) { white-space: nowrap; }
.acc-matrix th:not(:first-child), .acc-matrix td:not(:first-child) { text-align: center; width: 3.2rem; }
.acc-yes { color: var(--pos); font-weight: 700; }
.acc-no { color: var(--ink-4); }

/* ── 操作记录 ──────────────────────────────────────────────────── */

.acc-filter { display: inline-flex; align-items: center; gap: var(--space-1);
              font-size: var(--text-xs); color: var(--ink-3); }
.acc-time { font-family: var(--mono); font-size: var(--text-xs); color: var(--ink-2);
            font-variant-numeric: tabular-nums; }
.acc-page { display: inline-block; min-width: 4.5em; margin-right: var(--space-1);
            font-size: var(--text-xs); color: var(--ink-3); }

.acc-win { width: min(26rem, calc(100vw - 2 * var(--space-3))); }
.acc-win .stack-form { margin-bottom: 0; }
.acc-win .stack-form > label[hidden] { display: none; }
.acc-win p { margin: 0; line-height: 1.7; }

@media (max-width: 1180px) {
  .acc-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .acc-steps { grid-template-columns: minmax(0, 1fr); }
  .acc-status { justify-content: flex-start; }
}