/* ── S3: 媒体库分类页专用样式 ── */

/* 筛选条 */
.zones-filter-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
}

.zones-filter-bar select,
.zones-filter-bar input {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}

.zones-filter-bar select:focus,
.zones-filter-bar input:focus { border-color: var(--accent); }

.zones-filter-bar input { min-width: 200px; }

/* 顶部操作区 */
.page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-primary {
  padding: 7px 16px;
  border: none;
  border-radius: 20px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.btn-primary:hover:not(:disabled) { background: #3a7de8; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* Zone 卡片网格 */
.zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* Zone 卡片 */
.zone-card {
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.zone-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.zone-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.zone-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.zone-card-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
}

.zone-card-badge.enabled  { background: #e8f5e9; color: #2e7d32; }
.zone-card-badge.disabled { background: #f0f0f0; color: #757575; }

.zone-card-divider { height: 1px; background: var(--border); margin: 10px 0; }

.zone-card-stat {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 2px;
}

.zone-card-stat-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.zone-card-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.zone-card-meta strong { color: var(--text-primary); }

.zone-card-footer {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.zone-card-detail-btn {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s;
}

.zone-card-detail-btn:hover { background: var(--accent-soft); }

/* 加载/空状态 */
.loading-hint { padding: 40px; text-align: center; color: var(--text-secondary); font-size: 13px; }

/* ── Drawer ── */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 200;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s;
}

.drawer-overlay.show { display: block; opacity: 1; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  height: 100vh;
  z-index: 201;
  background: var(--card-bg);
  backdrop-filter: saturate(180%) var(--card-blur);
  -webkit-backdrop-filter: saturate(180%) var(--card-blur);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
}

.drawer.show { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.drawer-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.drawer-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.drawer-close:hover { background: rgba(0,0,0,0.1); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Drawer 内容区段 */
.drawer-section { margin-bottom: 20px; }

.drawer-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
}

.drawer-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}

.drawer-info-row:last-child { border-bottom: none; }
.drawer-info-label { color: var(--text-secondary); }
.drawer-info-value { font-weight: 500; color: var(--text-primary); text-align: right; max-width: 60%; }

/* 成员表格 */
.members-search {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  outline: none;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.6);
  color: var(--text-primary);
  box-sizing: border-box;
}

.members-search:focus { border-color: var(--accent); }

.members-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.members-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
}

.members-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

.members-table tbody tr:last-child td { border-bottom: none; }
.members-table tbody tr:hover td { background: rgba(0,0,0,0.015); }

/* 资产标记 */
.asset-mark { font-size: 11px; letter-spacing: 1px; }
.asset-full    { color: var(--accent); }
.asset-partial { color: var(--text-primary); }
.asset-warn    { color: #ff9500; }
.asset-empty   { color: #ff3b30; }

/* 分页 */
.members-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.page-btn {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.15s;
}

.page-btn:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.page-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.drawer-warning {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #856404;
  margin-bottom: 10px;
}

/* ── S5: 模态框 ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;display:none;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal-dialog{background:#1e2130;border:1px solid #2d3250;border-radius:10px;width:420px;max-width:92vw;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #2d3250}
.modal-title{font-size:15px;font-weight:600;color:#e2e8f0;margin:0}
.modal-close{background:none;border:none;color:#94a3b8;font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px}
.modal-close:hover{color:#e2e8f0;background:#2d3250}
.modal-body{padding:16px 20px;color:#cbd5e1;font-size:14px;line-height:1.6}
.modal-body p{margin:0 0 8px}
.modal-body ul,.modal-list{margin:8px 0 8px 18px;padding:0;color:#94a3b8;font-size:13px}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid #2d3250}
.modal-check-label{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;cursor:pointer}
.btn-danger{background:#dc2626;color:#fff;border:none;padding:8px 18px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500}
.btn-danger:hover:not(:disabled){background:#b91c1c}
.btn-danger:disabled{opacity:.45;cursor:not-allowed}
.btn-cancel{background:#2d3250;color:#94a3b8;border:1px solid #3d4470;padding:8px 18px;border-radius:6px;cursor:pointer;font-size:13px}
.btn-cancel:hover{background:#3d4470;color:#e2e8f0}

/* ── S5: 表单 Drawer ── */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:900;display:none}
.drawer-overlay.show{display:block}
#zone-form-drawer{position:fixed;top:0;right:-480px;width:460px;max-width:95vw;height:100vh;background:#1e2130;border-left:1px solid #2d3250;z-index:950;display:flex;flex-direction:column;transition:right .25s ease;box-shadow:-4px 0 24px rgba(0,0,0,.4)}
#zone-form-drawer.show{right:0}
.drawer-footer{padding:14px 20px;border-top:1px solid #2d3250;display:flex;gap:10px;justify-content:flex-end}
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:13px;color:#94a3b8;margin-bottom:6px;font-weight:500}
.form-required{color:#f87171}
.form-input{width:100%;background:#0f1117;border:1px solid #2d3250;border-radius:6px;color:#e2e8f0;padding:8px 12px;font-size:14px;box-sizing:border-box;outline:none}
.form-input:focus{border-color:#6366f1}
.form-textarea{resize:vertical;min-height:60px}
.form-error{color:#f87171;font-size:12px;margin-top:4px;min-height:16px}
.form-checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:#cbd5e1;cursor:pointer;margin-bottom:6px}
.form-hint{font-size:12px;color:#64748b;line-height:1.5;margin-top:4px;padding:8px;background:#0f1117;border-radius:6px;border:1px solid #1e2130}

/* ── S5: 搜索结果 ── */
.member-search-row{display:flex;gap:8px;margin-bottom:12px}
.member-search-row .form-input{flex:1}
.search-result-header{font-size:12px;color:#64748b;margin-bottom:8px}
.search-result-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto}
.search-result-item{display:flex;align-items:center;justify-content:space-between;background:#0f1117;border:1px solid #2d3250;border-radius:6px;padding:8px 12px;gap:10px}
.sr-info{flex:1;min-width:0}
.sr-title{display:block;font-size:13px;color:#e2e8f0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-meta{font-size:11px;color:#64748b}
.sr-key{display:block;font-size:11px;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-add-member{background:#6366f1;color:#fff;border:none;padding:5px 12px;border-radius:5px;cursor:pointer;font-size:12px;white-space:nowrap;flex-shrink:0}
.btn-add-member:hover:not(:disabled){background:#4f46e5}
.btn-added{background:#16a34a!important;cursor:default}
.btn-remove-member{background:none;border:1px solid #dc2626;color:#f87171;padding:3px 8px;border-radius:4px;cursor:pointer;font-size:11px}
.btn-remove-member:hover{background:#dc2626;color:#fff}
.manual-action-badge{font-size:11px;padding:2px 7px;border-radius:10px;font-weight:500}
.manual-action-badge.pinned{background:#1e3a5f;color:#60a5fa}
.manual-action-badge.excluded{background:#3b1515;color:#f87171}
.members-table{width:100%;border-collapse:collapse;font-size:13px}
.members-table th{color:#64748b;font-weight:500;padding:6px 8px;border-bottom:1px solid #2d3250;text-align:left}
.members-table td{padding:6px 8px;border-bottom:1px solid #1a1f35;color:#cbd5e1}
.loading-hint,.empty-hint{color:#64748b;font-size:13px;padding:16px;text-align:center}
.drawer-footer-actions{padding:12px 0 0;display:flex;justify-content:flex-end}

/* ── S5: Toast ── */
.toast{position:fixed;bottom:24px;right:24px;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:500;z-index:2000;animation:toast-in .2s ease;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.toast-success{background:#16a34a;color:#fff}
.toast-error{background:#dc2626;color:#fff}
.toast-info{background:#2563eb;color:#fff}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}