body {font-family: "Microsoft YaHei", Arial, sans-serif; background: #f6f7fb; margin: 0;}
* {box-sizing: border-box;}

.header {background: #2a7cf7; color: #fff; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center;}
.header-actions {display: flex; align-items: center; gap: 12px;}
.user-menu {position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;}
.user-name {font-size: 14px; color: #fff;}
.user-caret {font-size: 12px; opacity: .85;}
.user-dropdown {position: absolute; top: 36px; right: 0; background: #fff; border: 1px solid #e6e9ef; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); display: none; min-width: 160px; z-index: 20;}
.user-dropdown a {display: block; padding: 8px 12px; font-size: 13px; color: #333; text-decoration: none;}
.user-dropdown a:hover {background: #f5f7fb; color: #2a7cf7;}
.user-menu.open .user-dropdown {display: block;}
.header-logout {background: #fff; color: #2a7cf7; border: 1px solid #fff;}

.btn {padding: 6px 12px; background: #fff; color: #2a7cf7; border-radius: 4px; border: 1px solid #fff; cursor: pointer; text-decoration: none;}
.btn-primary {background: #2a7cf7; color: #fff; border: 1px solid #2a7cf7;}
.btn-danger {background: #f56c6c; color: #fff; border: 1px solid #f56c6c;}
.btn-outline {background: #fff; color: #2a7cf7; border: 1px solid #dcdfe6;}

.layout {display: flex; min-height: calc(100vh - 64px);}
.sidebar {width: 220px; background: #ffffff; border-right: 1px solid #e6e9ef; padding: 16px 0;}
.menu-title {padding: 8px 24px; font-weight: 600; color: #333;}
.menu a {display: block; padding: 10px 24px; color: #333; text-decoration: none;}
.menu a.active, .menu a:hover {background: #e9f1ff; color: #2a7cf7;}

.content {flex: 1; padding: 24px;}
.card {background: #fff; border-radius: 8px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.06);}

.filter-row {display: grid; gap: 12px; margin-bottom: 16px;}
.filter-row label {font-size: 13px; color: #555; display: block; margin-bottom: 6px;}
.filter-row input, .filter-row select {width: 100%; padding: 8px 10px; border: 1px solid #dcdfe6; border-radius: 4px;}

.actions {display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px;}
.toolbar {display: flex; justify-content: space-between; align-items: center; margin-top: 12px;}
.pagination {display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 12px; font-size: 13px;}

.table-actions a {display: inline-block; margin-right: 8px; color: #2a7cf7; text-decoration: none; cursor: pointer;}
.table-actions a.delete, .table-actions a.danger {color: #f56c6c;}

table {width: max-content; min-width: 100%; border-collapse: collapse; margin-top: 12px; table-layout: auto;}
th, td {padding: 10px; border-bottom: 1px solid #eee; border-right: 1px solid #eee; text-align: left; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
th:last-child, td:last-child {border-right: none;}
th {background: #f5f7fb; color: #333;}

.col-check {width: 32px; min-width: 32px; text-align: center;}
.col-actions {min-width: 220px; width: 220px;}
.col-remark {width: 220px; min-width: 220px; max-width: 220px;}
.table-actions {white-space: nowrap;}
td.table-actions {overflow: visible; text-overflow: clip;}
.remark-cell {display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;}

.table-scroll {overflow-x: auto; border: 1px solid #eef1f6; border-radius: 6px;}
.table-scroll table {margin-top: 0;}

.modal {position: fixed; inset: 0; background: rgba(0,0,0,.4); display: none; align-items: center; justify-content: center;}
.modal-content {background: #fff; padding: 16px; width: 520px; max-width: 92vw; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.2);}
.modal-content h4 {margin: 0 0 12px;}
.modal-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px;}
.form-row {margin-bottom: 10px;}
.form-row label {display: block; margin-bottom: 6px; font-size: 13px; color: #555;}
.form-row input, .form-row select {width: 100%; height: 34px; padding: 6px 10px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 13px;}
.form-row input:focus, .form-row select:focus {border-color: #2a7cf7; box-shadow: 0 0 0 3px rgba(42,124,247,.12); outline: none;}

.detail-row {display: grid; grid-template-columns: 120px 1fr; padding: 8px 0; border-bottom: 1px dashed #e6e9ef;}
.detail-row span {color: #555;}

.info-modal {position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 50;}
.info-modal-content {background: #fff; width: 760px; max-width: 94vw; border-radius: 12px; padding: 22px 24px; box-shadow: 0 10px 28px rgba(0,0,0,.2);}
.info-modal-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;}
.info-modal-title {font-size: 17px; font-weight: 600; color: #333;}
.info-modal-close {border: none; background: transparent; font-size: 18px; cursor: pointer; color: #666;}
.info-modal-body textarea {width: 100%; min-height: 320px; resize: vertical; border: 1px solid #dcdfe6; border-radius: 8px; padding: 12px; font-size: 14px; line-height: 1.7;}
.info-modal-footer {display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;}
.info-modal.show {display: flex;}

.drawer {position: fixed; top: 0; right: 0; height: 100%; width: 520px; max-width: 92vw; background: #fff; box-shadow: -8px 0 24px rgba(0,0,0,.18); transform: translateX(100%); transition: transform .2s ease; z-index: 60; display: flex; flex-direction: column;}
.drawer.show {transform: translateX(0);}
.drawer-header {display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eef1f6;}
.drawer-title {font-size: 16px; font-weight: 600; color: #333;}
.drawer-close {border: none; background: transparent; font-size: 18px; cursor: pointer; color: #666;}
.drawer-body {padding: 16px 20px; flex: 1; overflow-y: auto;}
.drawer-footer {padding: 12px 20px; border-top: 1px solid #eef1f6; display: flex; justify-content: flex-end; gap: 8px;}
.drawer-overlay {position: fixed; inset: 0; background: rgba(0,0,0,.35); display: none; z-index: 55;}
.drawer-overlay.show {display: block;}
.drawer-textarea {width: 100%; min-height: 320px; resize: vertical; border: 1px solid #dcdfe6; border-radius: 8px; padding: 12px; font-size: 14px; line-height: 1.7;}
.drawer-form {display: grid; gap: 12px;}
.drawer-form label {font-size: 13px; color: #555;}
.drawer-form input {width: 100%; height: 36px; padding: 6px 10px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 13px;}
.drawer-form input:focus {border-color: #2a7cf7; box-shadow: 0 0 0 3px rgba(42,124,247,.12); outline: none;}

.status-badge {display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 12px; line-height: 1.4; font-weight: 600;}
.status-enabled {background: #e7f8ee; color: #1e7d3d; border: 1px solid #bfe8cf;}
.status-disabled {background: #fdeaea; color: #b42318; border: 1px solid #f3b4b4;}

.remark-tooltip {position: fixed; max-width: 360px; background: #fff; border: 1px solid #dcdfe6; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.15); padding: 10px; z-index: 80; display: none;}
.remark-tooltip.show {display: block;}
.remark-tooltip textarea {width: 100%; min-height: 120px; resize: vertical; border: 1px solid #e6e9ef; border-radius: 6px; padding: 8px; font-size: 12px; line-height: 1.5;}
.remark-tooltip .remark-actions {display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px;}

@media (max-width: 720px) {
  .modal-grid {grid-template-columns: 1fr;}
}