/* Shared interaction and layout rules for both workspaces.
   Color/radius tokens live in the two base templates; do not redeclare them here. */
:root {
  --space:20px}

body {
  -webkit-font-smoothing:antialiased}
button,.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  min-height:36px;
  line-height:1.4}
a.btn {
  color:white}
button:disabled {
  opacity:.55;
  cursor:wait}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px}

h1 {
  line-height:1.35}
main.wrap>h1 {
  margin:4px 0 24px}
.page-head {
  align-items:center;
  min-height:40px;
  margin:4px 0 24px}
.page-head .muted {
  max-width:65ch}
.card {
  overflow:hidden}
.card:has(>table),.card:has(>.tbl) {
  overflow-x:auto}
table,.tbl {
  font-size:14px}
th,.tbl th {
  font-size:12.5px;
  letter-spacing:0;
  padding-top:12px;
  padding-bottom:12px}
td,.tbl td {
  padding-top:14px;
  padding-bottom:14px}
th.right,.tbl th.right {
  text-align:right}
.badge,.chip {
  white-space:nowrap;
  flex-shrink:0}
.badge {
  line-height:1.5}
/* 列表状态格的次行信息（如到账账号）：小号等宽、超长省略，行高与单行格保持一致 */
.cell-sub {
  margin-top:4px;
  font-size:12px;
  line-height:1.45;
  font-family:var(--mono);
  color:var(--sub);
  max-width:230px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap}
.num,.money {
  font-variant-numeric:tabular-nums}
.money,.right {
  white-space:nowrap}
td:has(>a[href*='/orders/']),td.num,td:has(>time) {
  white-space:nowrap}
.top nav a {
  white-space:nowrap;
  flex-shrink:0}
.top nav {
  min-width:0}
.top-in {
  height:60px}
.wrap {
  padding-top:32px}
.top .brand {
  flex-shrink:0}
.top .u {
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap}
.tabs {
  flex-wrap:wrap;
  gap:8px}
.tabs a {
  white-space:nowrap}
.row>* {
  max-width:100%}
.form-grid>* {
  min-width:0}
.form-grid .span2 {
  grid-column:1/-1}
.form-grid input,.form-grid select {
  width:100%;
  min-width:0}
.form-grid label {
  font-size:13px}
.form-grid {
  gap:18px}
.grid {
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.detail-grid {
  display:block!important}
.detail-grid>div {
  min-width:0}
.detail-grid .card {
  margin-bottom:20px}
.steps li>b {
  display:block;
  margin-bottom:4px}
.steps .muted b {
  display:inline}
.steps .muted {
  line-height:1.85}
.foot {
  flex-wrap:wrap}
.foot span {
  max-width:100%}
.stat {
  min-width:0}
.stat .v {
  font-size:clamp(20px,2.4vw,28px);
  white-space:nowrap}
/* flash 的语义配色（error/success/warn）由两个 base 模板的样式块定义，此处不再重复 */

dialog.modal,dialog.ui-modal {
  border:1px solid var(--line);
  border-radius:14px;
  padding:0;
  width:min(620px,calc(100vw - 32px));
  max-height:calc(100dvh - 40px);
  overflow:auto;
  color:var(--ink);
  background:var(--surface);
  box-shadow:0 12px 40px rgba(18,20,18,.16),0 32px 90px rgba(18,20,18,.20)}
dialog::backdrop {
  background:rgba(18,20,18,.40)}
.modal-head,.modal-body,.modal-foot {
  padding:20px 24px}
.modal-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:16px}
.modal-head h2 {
  margin:0}
.modal-body {
  overflow-wrap:anywhere}
.modal-foot {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  background:var(--surface-2);
  border-top:1px solid var(--line)}
.modal-head button {
  background:transparent;
  color:var(--sub);
  padding:5px 10px}
.modal-body label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color:var(--sub)}
.modal-body form+form {
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:24px}
.modal-body .row {
  margin-top:12px}
.modal-body input,.modal-body select {
  max-width:100%}
.dlg-err {
  color:var(--bad)}
[hidden] {
  display:none!important}
.helper {
  font-size:13px;
  color:var(--sub);
  margin:8px 0 0}
.table-scroll {
  overflow:auto}
.table-scroll table {
  min-width:700px}
.product-list td:first-child {
  width:42%}
.product-list .product-name {
  font-size:14px;
  font-weight:650;
  line-height:1.6}
.price-summary {
  background:var(--paper);
  border:1px solid var(--line);
  padding:14px;
  border-radius:8px;
  margin-top:18px}
.field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px}
.filter-bar {
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:12px;
  margin-bottom:24px}
.filter-bar label {
  font-size:13px;
  color:var(--sub);
  display:flex;
  flex-direction:column;
  gap:6px}
.filter-bar input,.filter-bar select {
  min-height:40px}
/* 筛选/重置同高：主操作实底，次操作 ghost 描边，同一按钮形态 */
.filter-bar button,.filter-bar .btn {
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding-top:0;
  padding-bottom:0}
.catalog {
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.catalog .pcard {
  padding:0;
  gap:0;
  box-shadow:none}
.catalog .pname {
  font-size:15.5px;
  min-height:46px}
.catalog .pmeta {
  line-height:1.7}
.catalog .price-row {
  display:flex;
  margin-top:13px;
  padding-top:13px;
  border-top:1px dashed var(--paper-sub)}
.catalog .price {
  min-height:0;
  flex-wrap:wrap}
.buy-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:16px}
.buy-row label {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--sub);
  font-size:13px}
.buy-row input {
  width:70px;
  min-width:0}
.buy-row button {
  min-height:42px}
.order-total {
  font-size:30px;
  font-weight:700;
  margin:20px 0}
.summary-list {
  display:grid;
  grid-template-columns:90px 1fr;
  gap:12px;
  font-size:14px}
.summary-list dt {
  color:var(--sub)}
.summary-list dd {
  margin:0;
  overflow-wrap:anywhere}
.role-help {
  margin:20px 0;
  color:var(--sub);
  font-size:13px}
.role-help summary {
  cursor:pointer}
.role-help p {
  margin:10px 0}
.skip {
  position:absolute;
  left:12px;
  top:-100px;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line-2);
  border-radius:8px;
  padding:12px;
  z-index:100}
.skip:focus {
  top:12px}

@media(max-width:900px) {
  .top-in {
  gap:10px}
.top nav a {
  padding-inline:9px}
.wrap {
  padding-top:24px}
.stat-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))!important}
.top .u {
  max-width:100px}
}

@media(max-width:760px) {
  .top-in {
  height:auto;
  flex-wrap:wrap;
  padding:12px 16px;
  gap:10px}
.top nav {
  order:3;
  width:100%;
  overflow:auto;
  flex-wrap:nowrap;
  padding:4px 0}
.top nav a {
  min-height:36px;
  display:flex;
  align-items:center}
.top .sp {
  flex:1}
.top .u {
  display:none}
.wrap {
  padding:24px 16px 48px}
.page-head {
  flex-wrap:wrap;
  gap:8px}
.page-head .muted {
  font-size:13px}
.card {
  padding:20px 16px}
table,.tbl {
  display:table;
  min-width:640px}
.card:has(table) {
  overflow-x:auto}
.kv {
  min-width:0;
  display:table}
.kv th {
  width:90px}
.detail-grid {
  display:block!important}
.catalog {
  grid-template-columns:1fr}
.catalog .pname {
  min-height:0}
.balance-pill {
  padding:4px 10px}
.top .out {
  padding:6px}
.stat-grid {
  grid-template-columns:1fr!important}
.stat-grid .stat:first-child {
  grid-column:auto!important}
.stat .v {
  font-size:26px}
.form-grid,.field-row {
  grid-template-columns:1fr}
.form-grid .span2 {
  grid-column:auto}
.modal-head,.modal-body,.modal-foot {
  padding:18px}
.modal-body input,.modal-body select {
  width:100%}
.modal-body .row {
  align-items:stretch}
.modal-body .row input {
  flex:1;
  min-width:0}
.filter-bar {
  align-items:stretch}
.filter-bar label {
  flex:1;
  min-width:120px}
.foot {
  padding-inline:16px}
.auth-grid>div {
  padding:28px 24px!important}
.auth-grid>div:first-child {
  display:none!important}
}

@media(prefers-reduced-motion:reduce) {
  * {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}

.pagination {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:20px 0}
.pagination .helper {
  margin:0}
.pagination a.btn {
  color:var(--accent)}
.pcard[hidden] {
  display:none}
.catalog-empty {
  padding:32px 0;
  color:var(--sub)}

.card>form.row>label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color:var(--sub)}

@media(max-width:760px) {
  html .stat-grid {
  grid-template-columns:minmax(0,1fr)!important}
.filter-bar label:first-child {
  flex-basis:100%}
.filter-bar button,.filter-bar .btn {
  align-self:flex-end;
  height:40px}
.catalog .pcard {
  padding:20px}
.catalog .pname {
  min-height:0}
.card>form.row {
  align-items:flex-end}
}

.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px}
.form-grid label {
  display:flex;
  flex-direction:column;
  gap:6px}
.form-grid>button {
  justify-self:start;
  align-self:end}
.form-grid .pwd-row,.form-grid label>.row {
  margin-top:0}
.form-grid label>.row input {
  width:100%;
  min-width:0}

@media(max-width:760px) {
  .form-grid {
  grid-template-columns:minmax(0,1fr)}
.modal-body select {
  width:100%!important}
}

dialog .modal-head {
  position:sticky;
  top:0;
  background:var(--surface);
  z-index:2}
dialog .modal-foot {
  position:sticky;
  bottom:0;
  z-index:2}
dialog .modal-head h2 {
  font-size:16px}
.table-scroll {
  max-width:100%;
  overscroll-behavior-x:contain}
.table-scroll:focus-visible {
  outline:2px solid var(--accent)}