.panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.compact-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compact-filter input,
.search-input { width: 220px; }
.compact-filter select { width: 112px; }
.compact-filter input,
.compact-filter select,
.compact-filter button,
.search-input { height: 38px; }

.row-actions,
.list-actions {
  display: flex !important;
  align-items: center;
  gap: 4px !important;
  white-space: nowrap;
}

.list-actions { justify-content: flex-end; }
.row-actions .link,
.list-actions .link { font-size: 12px; }
.device-scope { margin: 16px 20px; padding: 14px 16px; border: 1px solid #bce5e4; border-radius: 12px; background: #f0fbfb; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.device-scope div { display: grid; gap: 4px; }
.device-scope strong { color: var(--navy); }
.device-scope span { color: var(--muted); font-size: 12px; }
.detail-breadcrumb { display: flex; align-items: center; gap: 7px; margin: -2px 0 14px; color: var(--muted); font-size: 13px; }
.detail-breadcrumb .link { padding-left: 0; }
.detail-breadcrumb strong { color: var(--ink); }
.detail-grid { padding: 22px 24px 26px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px 30px; }
.detail-grid div { display: grid; gap: 7px; min-width: 0; }
.detail-grid span { color: var(--muted); font-size: 12px; }
.detail-grid strong { color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.detail-grid small { color: var(--muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; white-space: normal; }
.dialog-form > label { margin-top: 16px; }
.filters { grid-template-columns: repeat(5, minmax(145px, 1fr)) auto; }

.config-layout { display: grid; gap: 20px; }
.config-summary { padding: 22px 24px; display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.config-summary div { display: grid; gap: 7px; }
.config-summary span { color: var(--muted); font-size: 12px; }
.config-summary strong { font-size: 15px; }
.config-note { margin: 0 24px 22px; padding: 12px 14px; border-radius: 10px; color: #315168; background: #f0fbfb; font-size: 12px; }
.config-form { padding: 22px 24px 26px; }
.cert-picker { padding: 14px; border: 1px dashed #a8cbd1; border-radius: 12px; background: #f8fbfc; }
.cert-picker input[type="file"] { height: auto; padding: 9px; background: #fff; }
.field-title { display: block; margin-bottom: 8px; color: #49657a; font-size: 13px; }
.option-grid { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.option-grid label { display: flex; grid-template-columns: none; align-items: center; gap: 7px; color: var(--ink); }
.option-grid input[type="checkbox"] { width: 17px; height: 17px; padding: 0; accent-color: var(--teal); }
.full-field > small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }
.wide-dialog { width: min(760px,calc(100% - 30px)); }
.store-form-grid { gap: 20px 18px; }
#storeForm .form-grid,#deviceForm .form-grid,#userForm .form-grid { grid-template-columns: minmax(0,1fr); }
#storeForm .full-field,#deviceForm .full-field,#userForm .full-field { grid-column: auto; }
#deviceDialog,#userDialog { width: min(520px,calc(100% - 30px)); }
.input-action,.ip-action,.coordinate-action { display: flex; align-items: center; gap: 10px; min-width: 0; }
.input-action input,.coordinate-action input { min-width: 0; flex: 1; }
.input-action button,.ip-action button,.coordinate-action button { flex: 0 0 auto; white-space: nowrap; }
.ip-input { height: 44px; min-width: 0; flex: 1; display: flex; align-items: center; border: 1px solid #d8e3ea; border-radius: 10px; background: #fff; overflow: hidden; }
.ip-input:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8,185,179,.12); }
.ip-input input { width: 25%; min-width: 0; height: 42px; padding: 0 7px; border: 0; border-radius: 0; text-align: center; box-shadow: none!important; }
.ip-input i { color: #78909f; font-style: normal; font-weight: 700; }
.coordinate-field { display: block; }
.coordinate-field .field-title { margin-bottom: 8px; }
#merchantLookupResult.success,#ipLookupResult.success,#coordinateLookupResult.success { color: #18845b; font-weight: 600; }
#merchantLookupResult.error,#ipLookupResult.error,#coordinateLookupResult.error { color: var(--danger); font-weight: 600; }
.terminal-number-list { display: grid; gap: 10px; }
.terminal-number-row { display: flex; align-items: center; gap: 8px; }
.terminal-number-row input { min-width: 0; flex: 1; }
.terminal-number-row .remove-terminal { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 9px; color: var(--danger); background: #fff1f1; font-size: 18px; }
.add-terminal-number { margin: 8px 0 0; padding-left: 0; font-weight: 700; }
#deviceStore:disabled { opacity: 1; color: var(--ink); background: #f4f7f8; cursor: not-allowed; }
.activation-code-cell { font-family: Consolas,"SFMono-Regular",monospace; letter-spacing: .08em; }
#activationCode.multi { max-height: 300px; overflow: auto; white-space: pre-line; text-align: left; letter-spacing: .04em; font-size: 17px; line-height: 1.8; }
.risk-filters { grid-template-columns: repeat(3,minmax(150px,1fr)) auto; }
.risk-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--line); }
.risk-detail div { min-width: 0; padding: 13px 14px; display: grid; gap: 6px; background: #fff; }
.risk-detail dt { color: var(--muted); font-size: 11px; }
.risk-detail dd { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.risk-channel { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.risk-channel.wechat { color: #169b62; }
.risk-channel.alipay { color: #1677ff; }
.config-note.risk-error { color: #a53a3a; background: #fff0f0; }
.activation-actions { display: flex; justify-content: center; gap: 10px; }
.activation-actions button { min-width: 130px; }
.ql-toolbar.ql-snow { border-color: #d8e3ea; border-radius: 10px 10px 0 0; }
.ql-container.ql-snow { border-color: #d8e3ea; border-radius: 0 0 10px 10px; }
.customer-service-config { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 28px; align-items: center; }
.customer-service-fields { display: grid; gap: 18px; }
.customer-service-preview { width: 250px; min-height: 250px; padding: 14px; border: 1px dashed #b9c9d8; border-radius: 18px; background: linear-gradient(145deg,#f8fbff,#eef5ff); display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; }
.customer-service-preview img { display: none; width: 220px; height: 220px; object-fit: contain; border-radius: 12px; background: #fff; }
.customer-service-preview.has-image img { display: block; }
.customer-service-preview.has-image span { display: none; }

.role-dialog { width: min(820px,calc(100% - 30px)); }
.role-dialog .dialog-form { max-height: min(90vh,860px); overflow-y: auto; }
.role-dialog .dialog-head { margin-bottom: 18px; }
.role-dialog .dialog-head h2 { margin: 0 0 5px; }
.role-dialog .dialog-head p { margin: 0; color: var(--muted); font-size: 12px; }
.role-name-field { margin-top: 0 !important; }
.permission-editor { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.permission-editor-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.permission-editor-title { color: var(--ink); font-size: 14px; }
.permission-editor-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.permission-tools { display: flex; gap: 8px; white-space: nowrap; }
.permission-tools .link { font-size: 12px; }
.permission-super { display: flex; grid-template-columns: none; align-items: center; gap: 12px; margin-bottom: 12px; padding: 14px 16px; border: 1px solid #bce5e4; border-radius: 12px; background: #f0fbfb; cursor: pointer; }
.permission-super span,.permission-group-head span { display: grid; gap: 3px; }
.permission-super strong,.permission-group-head strong { color: var(--ink); font-size: 13px; }
.permission-super small,.permission-group-head small { color: var(--muted); font-size: 11px; }
.permission-super input,.permission-group input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; padding: 0; accent-color: var(--teal); }
.permission-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; transition: opacity .2s; }
.permission-groups.disabled { opacity: .46; }
.permission-group { min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfd; }
.permission-group-head { display: flex; grid-template-columns: none; align-items: center; gap: 10px; cursor: pointer; }
.permission-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0 27px; }
.permission-actions label { display: flex; grid-template-columns: none; align-items: center; gap: 6px; color: #49657a; cursor: pointer; }
.permission-actions label span { line-height: 1.35; }
.permission-legacy { margin-top: 10px; padding: 10px 12px; border-radius: 9px; background: #fff7e6; color: #8a6200; font-size: 12px; }
.permission-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: #315168; font-size: 12px; }
.permission-summary small { color: var(--muted); }
.role-info { min-width: 0; padding-right: 12px; }
.role-info small { max-width: 480px; overflow-wrap: anywhere; line-height: 1.5; white-space: normal; }

.pagination {
  min-height: 62px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
}

.pagination-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.page-button {
  min-width: 54px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #d8e3ea;
  border-radius: 8px;
  color: #315168;
  background: #fff;
}

.page-button:not(:disabled):hover { border-color: var(--teal); color: #068f91; }
.page-button:disabled { color: #a9b7c1; background: #f5f8fa; cursor: not-allowed; }
.page-current { min-width: 82px; text-align: center; color: var(--ink); }
.page-size { display: flex; align-items: center; gap: 6px; }
.page-size select { width: 76px; height: 34px; padding: 0 8px; border-radius: 8px; }

@media (max-width: 1200px) {
  .panel-head { align-items: flex-start; }
  .panel-actions { max-width: 70%; }
  .compact-filter input,
  .search-input { width: 170px; }
}

@media (max-width: 1050px) {
  .panel-head { align-items: stretch; gap: 14px; flex-direction: column; }
  .panel-actions { max-width: none; justify-content: flex-start; }
  .filters { grid-template-columns: 1fr 1fr; }
  .config-summary { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .compact-filter { align-items: stretch; flex-direction: column; }
  .compact-filter input,
  .compact-filter select,
  .search-input { width: 100%; }
  .filters { grid-template-columns: 1fr; }
  .pagination { align-items: flex-start; flex-direction: column; }
  .pagination-actions { justify-content: flex-start; }
  .config-summary { grid-template-columns: 1fr; }
  .customer-service-config { grid-template-columns: 1fr; }
  .customer-service-preview { width: min(100%,250px); }
  .device-scope { align-items: stretch; flex-direction: column; }
  .detail-grid { grid-template-columns: 1fr; }
  .risk-filters,.risk-detail { grid-template-columns: 1fr; }
  .ip-action,.coordinate-action { align-items: stretch; flex-direction: column; }
  .ip-input { width: 100%; flex: none; }
  .ip-action button,.coordinate-action button { width: 100%; }
  .permission-editor-head,.permission-summary { align-items: flex-start; flex-direction: column; }
  .permission-groups { grid-template-columns: 1fr; }
}