/* 我的途研（账户）页专属样式。.tabs / .tab / .panel / .status-tabs / .item / .badge / .message-* 由页面脚本依赖或生成。
   .card / .grid / .tag / .empty 直接复用 ds.css 组件。 */

.page-account main { padding-bottom: var(--space-16); }

/* 标题区 */
.account-masthead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin: var(--space-6) 0 var(--space-8); padding: clamp(28px, 5vw, 56px); border-radius: var(--r-2xl); background: var(--aurora), var(--bg-elevated); box-shadow: var(--shadow-1); }
.account-masthead h1 { font-size: var(--fs-display); line-height: 1.1; letter-spacing: var(--ls-hero); }
.account-masthead .sub { margin-top: var(--space-2); color: var(--text-2); font-size: var(--fs-callout); }

/* 工作区：左侧导航 + 右侧内容 */
.account-workspace { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.account-rail { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--r-xl); background: var(--bg-elevated); box-shadow: var(--shadow-1); }
.account-rail > h2 { padding: 0 var(--space-3); color: var(--text-3); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em; }
.account-rail > p { padding: var(--space-3) var(--space-3) 0; border-top: 1px solid var(--line); color: var(--text-3); font-size: var(--fs-caption); line-height: 1.6; }
.tabs { display: grid; gap: 2px; }
.tab { display: flex; align-items: center; min-height: 40px; padding: 0 var(--space-3); border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-callout); transition: background var(--dur-1) var(--ease); }
.tab:hover { background: var(--bg-inset); }
.tab.active { background: var(--text); color: #fff; font-weight: 600; }

.panel { display: none; }
.panel.active { display: block; animation: acc-in var(--dur-2) var(--ease-out); }
@keyframes acc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.account-content .card { padding: var(--space-6); }
.account-content .card h2 { font-size: var(--fs-title-3); letter-spacing: var(--ls-tight); }
.account-content .card h2 + p { margin-top: var(--space-2); }
.account-content .card p { color: var(--text-2); font-size: var(--fs-footnote); line-height: 1.7; }
.account-content .card p + h2 { margin-top: var(--space-6); }
#minePanel .grid { --cols: 1; grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
#minePanel .grid > aside.card { background: var(--bg-subtle); box-shadow: none; }

/* 筛选按钮组（分段控件外观） */
.status-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--bg-inset); }
.status-tabs:empty { display: none; }
.status-tabs button { min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-2); font-size: var(--fs-footnote); font-weight: 600; white-space: nowrap; }
.status-tabs button.active, .status-tabs button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.06); }
#statusTabs { margin-bottom: var(--space-4); }

/* 列表条目 */
.item { display: grid; gap: var(--space-2); padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; padding-top: 0; }
.item h3 { margin: 0; font-size: var(--fs-headline); font-weight: 600; line-height: 1.5; }
.item h3 a:hover { color: var(--accent); }
.item .tag { margin: 0 6px 0 0; }
.item .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3); color: var(--text-3); font-size: var(--fs-caption); }
.item-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-caption); font-weight: 700; }
.badge.pending { background: var(--warn-bg); color: var(--warn); }
.badge.published { background: var(--ok-bg); color: var(--ok); }
.badge.rejected { background: var(--danger-bg); color: var(--danger); }
.badge.withdrawn, .badge.unpublished { background: var(--muted-bg); color: var(--muted); }
.item .reason { padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: var(--danger-bg); color: var(--text); font-size: var(--fs-footnote); }

/* 消息 */
.message-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
#messagesStatus { margin-bottom: var(--space-3); color: var(--text-3); font-size: var(--fs-footnote); }
#messagesStatus:empty { display: none; }
.message-error { color: var(--danger); }
.message-item.unread { margin: 0 calc(var(--space-4) * -1); padding-inline: var(--space-4); border-radius: var(--r-md); background: var(--accent-soft); }
.message-item.unread + .item { border-top-color: transparent; }
.message-state { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.message-state[data-read="false"] { color: var(--accent); }
.message-state[data-read="false"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.message-actions { display: flex; gap: var(--space-2); }

/* 设置表单 */
#settingsPanel form { display: grid; gap: var(--space-2); max-width: 440px; margin-top: var(--space-5); }
#settingsPanel label { margin-top: var(--space-2); font-size: var(--fs-footnote); font-weight: 600; }
#settingsPanel input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--bg-inset); font-size: 16px; }
#settingsPanel input:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); }
#settingsPanel .btn { justify-self: start; margin-top: var(--space-3); }
.settings-divider { margin: var(--space-8) 0; border: 0; border-top: 1px solid var(--line); }
.account-content .message { color: var(--ok); font-size: var(--fs-footnote); }
.account-content .message:empty { display: none; }

@media (max-width: 900px) {
  .account-workspace { grid-template-columns: 1fr; gap: var(--space-4); }
  .account-rail { position: static; padding: var(--space-2); }
  .account-rail > h2, .account-rail > p { display: none; }
  .tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .tab { flex: none; border-radius: var(--r-pill); }
  #minePanel .grid { grid-template-columns: 1fr; }
  .message-item.unread { margin: 0; }
}
@media (max-width: 860px) {
  .message-head { flex-direction: column; }
  .message-head .status-tabs { align-self: flex-start; }
}
.tab:focus-visible, .status-tabs button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .panel.active { animation: none; } }