/* 桌面版式 · 账号与后台（docs/specs/2026-10-08-web-desktop-ux-design.md）；全部规则在 900px / hover 媒体查询里。
   我的 (/me), 账号与安全 and its pages (/me/*), the admin console (/admin/*), and the logged-out pages (登录, 注册,
   找回密码, 设置密码, 撤销注销: body.login-page). Widths on body (--page-w, desktop.css); setting rows with the value
   beside its label; the action rows of the admin console as buttons; hover and focus for what can be clicked, none for
   what cannot. The only rule outside a media query hides what admin_users.html adds for wide screens (.u-cols). The
   visible form labels are every width's (css/login.css). */

.u-cols { display: none; }

/* ---------------------------------------------------------------- widths (design §3.2, §14.6–14.7) */
@media (min-width: 900px) {
  /* 账号与安全, 登录设备, 登录记录, 管理员查看记录: M 720; the one-form pages (邮箱, 修改密码, 改登录名, 注销): S 560 */
  body.account-page { --page-w: 720px; }
  body.account-page:has(> main.page .acct-form) { --page-w: 560px; }
  /* 确认身份 (a has-nav admin page with the login card in it) */
  body.admin-page:has(> main.page .adm-confirm) { --page-w: 560px; }
  /* 我的: L 960 (the default); its header bar only repeats the navigation's 我的 */
  body.me .nav { display: none; }
  body.me.has-topnav { --nav-h: var(--top-h); }
}

/* ---------------------------------------------------------------- 600–899: a tablet, a half-screen window (review
   2026-10-08 #5: the phone's layout across 768px, a 662px box, a value 500px from its label). The phone's frame stays
   (header bar, tab bar); only the content is narrowed and centred: forms 560, the setting pages 720, the logged-out
   card 480, and a value follows its label as on the computer. Below 600px nothing changes. */
@media (min-width: 600px) and (max-width: 899px) {
  :is(body.account-page, body.admin-page) main.page { max-width: 720px; margin-inline: auto; }
  body.account-page:has(> main.page .acct-form) main.page, body.admin-page:has(> main.page .adm-confirm) main.page {
    max-width: 560px; }
  body.login-page .login { max-width: 480px; margin-inline: auto; }
  .acct-row .k { flex: 0 0 auto; min-width: 9em; }
  .acct-row .v { flex: 0 1 auto; text-align: left; }
  .acct-row .chev, .acct-row .v + .chev { margin-left: auto; }
}

/* ---------------------------------------------------------------- setting rows (design §6.1, §6.4; AS-07–09) */
@media (min-width: 900px) {
  .acct { padding-top: 16px; }
  .acct-h2 { margin-top: 22px; }
  .acct-card { overflow: hidden; }
  /* the label a column of its own, the value right after it (not 1600px away), › at the row's end */
  .acct-row .k { flex: 0 0 auto; min-width: 10em; }
  .acct-row .v { flex: 0 1 auto; text-align: left; color: var(--text-2d); }
  .acct-row .chev { margin-left: auto; }
  .acct-row .v + .chev { margin-left: auto; }
  .acct-row .v.warn { color: var(--orange); }
  .acct-row .badge, .ss-here, .ss-bad { font-size: 12px; }
  .acct-row + .acct-row::before, .ss-row + .ss-row::before, .u-row + .u-row::before, .log-row + .log-row::before {
    height: 1px; background: var(--line-2); }
  a.acct-row, button.acct-row { cursor: pointer; }
  .acct-row:focus-visible, .u-row:focus-visible { outline-offset: -2px; }
  /* 退出登录 and 登出其他设备 side by side, under the cards */
  .acct-actions { flex-direction: row; }
  .acct-actions form { flex: 1; }
  /* 登录设备 / 登录记录: denser rows (AS-31), 下线 readable on grey */
  .ss-row { min-height: 48px; padding-block: 6px; }
  .ss-revoke { color: #ff8a84; }  /* on its #3a3a3c button: 5.0:1 (--red-d is 4.0 there) */
  .acct-hint { line-height: 18px; }
}
@media (hover: hover) and (pointer: fine) {
  a.acct-row:hover, button.acct-row:not(:disabled):hover { background: var(--hover); }
  .acct-btn:hover { background: var(--hover-2); }
  .ss-revoke:not(:disabled):hover { background: #48484a; }
}

/* ---------------------------------------------------------------- the pill forms (design §10.1; AS-04/05/28/33) */
@media (min-width: 900px) {
  .login.acct-form { padding-top: 32px; }
  .login .pill:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.25); }
  .login .pill input::placeholder { color: #8e8e93; }
  .login .pill input:focus-visible { outline: 0; }
  /* 注销账号: 取消 back to 账号与安全, then the red button at its own width (not a 500px red bar) */
  .acct-danger-row { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 4px; }
  .acct-danger-row .btn-primary { min-width: 160px; margin-top: 0; padding: 0 24px; }
  .acct-cancel { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 43.2px;
    padding: 0 20px; border-radius: 21.6px; background: var(--panel-2); color: var(--text); font-size: 15px; }
  /* 注销's 先导出 rows are links: a › like every other row that opens something */
  .acct-form .acct-top a.acct-row::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 6px 0 auto;
    border: solid #6e6e70; border-width: 1.9px 1.9px 0 0; transform: rotate(45deg); }
  .acct-form .acct-top a.acct-row .v { margin-right: 0; }
  /* 验证现有邮箱 / 换成别的邮箱 */
  .acct-form .login-link { width: fit-content; margin-inline: auto; padding-inline: 12px; }
  .login .remember input:focus-visible { outline-offset: 2px; }
}
@media (hover: hover) and (pointer: fine) {
  .login a.login-link:hover, .login .login-link a:hover, .login-row .forgot:hover, .reg-resend .login-link:not(:disabled):hover {
    text-decoration: underline; text-underline-offset: 3px; }
  .acct-cancel:hover { background: var(--hover-2); }
  .login .remember:hover input:not(:checked), .reg-agree:hover input:not(:checked) { filter: brightness(1.25); }
}

/* ---------------------------------------------------------------- 我的 /me (design §14.6; AS-17/18/51) */
@media (min-width: 900px) {
  .me-page { padding-top: 24px; }
  .me-card { margin-inline: 16px; overflow: hidden; }
  /* four tiles a row, each at most 180px, from the left (not 350px apart) */
  .me-grid { grid-template-columns: repeat(4, minmax(0, 180px)); justify-content: start; }
  .me-grid .tile { margin-block: -4px; padding-block: 4px; border-radius: 10px; }
  .me-acct, .me-admin-row, .me-event, .me-plus { cursor: pointer; }
  /* not built yet: dimmer, no hover, a small 即将上线 (a press still says so, as on the phone) */
  body.me [data-soon] { cursor: default; }
  body.me .tile[data-soon] .ic, body.me .tile[data-soon] span, body.me .me-event[data-soon] > *,
  body.me .me-plus[data-soon] > * { opacity: 0.55; }
  body.me .me-event[data-soon]::after, body.me .me-plus[data-soon] > span::after {
    content: "即将上线"; margin-left: 8px; padding: 1px 6px; border-radius: 6px; background: #3a3a3c; color: #aeaeb2;
    font-size: 12px; font-weight: 400; line-height: 16px; }
  body.me .me-event[data-soon]::after { order: 2; margin-right: 8px; }
  body.me .me-event[data-soon] .chev { order: 3; }
  /* 联系客服: in the page's flow above the footer, not floating over it */
  body.me .me-service { position: static; display: block; margin: 24px auto 0; transform: none; }
  .me-backup, .me-sync { margin-inline: 22px; }
}
@media (hover: hover) and (pointer: fine) {
  .me-acct:hover, .me-admin-row:hover { background: var(--hover); }
  body.me .tile:not([data-soon]):hover { background: var(--hover); }
  .me-sync a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* ---------------------------------------------------------------- the logged-out pages (design §14.7; AS-35–39) */
@media (min-width: 900px) {
  /* a centred card on the black page, the footer under it */
  body.login-page .page { display: grid; place-items: center; align-content: center; gap: 16px; min-height: 100vh;
    padding: 40px 24px; }
  body.login-page .login { width: 420px; max-width: 100%; padding: 40px 32px 28px; border-radius: 20px;
    background: var(--panel); }
  body.login-page .login.reg { width: 480px; }
  body.login-page .login .notice, body.login-page .reg-invite { background: var(--panel-2); }
  body.login-page .fcp { width: 480px; max-width: 100%; margin: 0; padding-bottom: 0; }
  /* 确认身份 in the admin console's frame: the same card, under the header bar */
  .login.adm-confirm { margin-top: 40px; padding: 36px 32px 28px; border-radius: 20px; background: var(--panel); }
}

/* ---------------------------------------------------------------- the admin console (design §14.6; AS-20–27) */
@media (min-width: 900px) {
  .adm { padding-top: 12px; }
  .adm-bar { margin-inline: 0; border-radius: 12px; padding-inline: 16px 8px; }
  .adm-tabs { max-width: 560px; margin-top: 2px; }
  .adm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adm-tiles.four .adm-tile span, .adm-status { font-size: 13px; }
  /* 概览: the two tiles that open a list say so at their corner; the two facts stay plain (review 2026-10-08 #4: the
     four looked the same and only two were links) */
  a.adm-tile { position: relative; }
  a.adm-tile::after { content: "查看 ›"; position: absolute; top: 12px; right: 14px; font-size: 12px; line-height: 16px;
    color: var(--text-2d); }
  a.adm-tile:focus-visible { outline-offset: 2px; }
  .adm-search { max-width: 560px; }
  .adm-form { max-width: 560px; }
  .adm-wide { display: inline-block; width: auto; padding: 0 24px; }
  /* 用户: the list as a table: who | 状态 | 最近登录 | 藏品, a header line over it (admin_users.html .u-cols) */
  .u-cols { display: flex; gap: 12px; margin: 14px 0 6px; padding: 0 12px 0 14px; font-size: 12px; color: var(--text-2d); }
  .u-cols .u-main { padding-left: 52px; }
  .u-cols > span:not(.u-main), .u-row .u-side > span { flex: none; width: 120px; text-align: left; }
  .u-cols + .adm-list { margin-top: 0; }
  .u-row .u-side { flex-direction: row; align-items: center; gap: 12px; font-size: 13px; color: var(--text-2d); }
  .u-row .u-side .st { color: var(--text); }
  /* 用户详情: the actions are buttons (they open a confirmation), not rows like the facts under them */
  .adm .acct-card:has(> button.acct-row) { display: flex; flex-wrap: wrap; gap: 8px; background: none; overflow: visible; }
  .adm .acct-card > button.acct-row { flex: 0 0 auto; width: auto; min-height: 40px; padding: 0 16px; gap: 6px;
    border-radius: 10px; background: var(--panel-2); }
  .adm .acct-card > button.acct-row::before { display: none; }
  .adm .acct-card > button.acct-row .k { min-width: 0; }
  .adm .acct-card > button.acct-row .v { font-size: 13px; }
  .adm .acct-card > button.acct-row.danger { margin-left: auto; }
  .adm .acct-card > button.acct-row.danger .k { color: var(--red-d); }
  .adm .acct-card:has(> button.acct-row) > div.acct-row { flex-basis: 100%; min-height: 32px; padding-left: 4px;
    color: var(--text-2d); }
  .adm .acct-card:has(> button.acct-row) > div.acct-row::before { display: none; }
  /* 审计: denser rows, the filter on one line */
  .log-row { min-height: 36px; padding-block: 6px; }
  .adm-filter { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; }
  .adm-filter .full { grid-column: 1 / -1; }
  .adm-filter .btns { grid-column: 3 / -1; }
  .adm details summary { cursor: pointer; }
}
@media (hover: hover) and (pointer: fine) {
  .u-row:hover { background: var(--hover); }
  a.adm-tile:hover { background: var(--hover-2, #3a3a3c); }
  a.adm-tile:hover::after { color: var(--text); }
  .adm .acct-card > button.acct-row:not(:disabled):hover { background: var(--hover-2); }
  .adm-tabs a:not(.on):hover { background: var(--panel-2); color: var(--text); }
  .adm-new:hover, .adm-wide:not(:disabled):hover, .adm-search button:hover { filter: brightness(1.2); }
  .adm-bar button:hover { text-decoration: underline; text-underline-offset: 3px; }
  .adm details summary:hover { color: var(--text); }
  .adm-filter .btns :is(button, a):hover { filter: brightness(1.2); }
}
@media (min-width: 900px) {
  .adm-search:focus-within { box-shadow: 0 0 0 2px var(--focus); }
  .adm-search input:focus-visible { outline: 0; }
}