/* ===== Who-Dated-Whom Map：前台知识图谱 + 后台两个列表 ===== */

/* ---------- 后台（admin_dating.html） ---------- */
.dating-pager{margin-top:12px;}
.dating-search{
  flex:1; min-width:120px; max-width:320px;
  border-radius:12px; padding:8px 12px; font-size:13px; font-family:inherit;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:var(--ink);
}
.dating-search::placeholder{color:rgba(244,237,226,.45);}
.dating-select{
  width:100%; border-radius:12px; padding:10px 12px; font-size:14px; font-family:inherit; line-height:1.5;
  border:1px solid rgba(255,255,255,.18); background:#2a221b; color:var(--ink);
}
.dating-select option:disabled{color:rgba(244,237,226,.4);}
.dating-table{min-width:0;}
/* 压掉 style.css 里题库表的固定列宽 / 冻结列（.data-table th:nth-child(k) 的优先级更高，需同权重覆盖） */
.app--wide .dating-table.data-table{min-width:0;table-layout:auto;}
@media (max-width:767px){
  .app--wide .dating-table.data-table{min-width:0;}
}
.dating-table.data-table th,.dating-table.data-table td{width:auto;position:static;background:transparent;}
.dating-table.data-table th{background:#e7e0f7;}
body.admin-dark .dating-table.data-table th{background:#3a3450;}
.dating-people-table.data-table th:nth-child(3),.dating-people-table.data-table td:nth-child(3){width:90px;}
.dating-people-table.data-table th:nth-child(4),.dating-people-table.data-table td:nth-child(4){width:150px;}
.dating-pairs-table.data-table th:nth-child(3),.dating-pairs-table.data-table td:nth-child(3){width:120px;}
.dating-table td{white-space:normal;}

/* ---------- 前台（dating.html） ---------- */
.dating-wrap{
  width:100%; max-width:920px; display:flex; flex-direction:column; gap:14px;
}
.dating-hud{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px 14px; border-radius:16px;
  background:linear-gradient(160deg,rgba(91,110,245,.16),rgba(91,110,245,.05));
  border:1px solid rgba(91,110,245,.35);
}
.dating-hud .dating-search{max-width:none;}   /* 统计挪进水印后，搜索框占满整条 */
.dating-footer{display:flex; align-items:center; padding:0 4px;}
.dating-tools{display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap;}
/* 视图切换：分段控件，当前视图高亮，点另一个即切换 */
.dating-seg{
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  border-radius:12px; border:1px solid rgba(91,110,245,.35); background:rgba(91,110,245,.08);
}
.dating-seg-btn{
  border:none; background:transparent; color:var(--muted);
  border-radius:9px; padding:6px 14px; font-size:13px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:background .18s ease, color .18s ease;
}
.dating-seg-btn.is-on{
  background:rgba(91,110,245,.30); color:#c3ccff;
  box-shadow:0 1px 6px rgba(0,0,0,.25);
}
.dating-btn{
  border:1px solid rgba(91,110,245,.55); background:rgba(91,110,245,.18); color:#b9c4ff;
  border-radius:12px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
  transition:background .18s ease, color .18s ease;
}
.dating-btn:hover{background:rgba(91,110,245,.30); color:#d7deff;}
.dating-btn:active{transform:translateY(1px);}

.dating-stage{
  position:relative; width:100%; height:min(78vh,720px); min-height:460px;
  border-radius:22px; overflow:hidden;
  border:1px solid rgba(91,110,245,.32);
  box-shadow:0 18px 44px rgba(0,0,0,.45), inset 0 0 60px rgba(91,110,245,.08);
  background:#060a16;
}
.dating-stage canvas{display:block; width:100%; height:100%; touch-action:none;}
.dating-empty{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(190,205,255,.75); font-size:14px; text-align:center; padding:0 24px; line-height:1.7;
}
.dating-empty[hidden]{display:none;}

.dating-panel{
  border-radius:18px; padding:14px 16px 16px;
  background:linear-gradient(160deg,rgba(43,35,28,.96),rgba(33,26,20,.96));
  border:1px solid rgba(91,110,245,.35);
}
.dating-panel[hidden]{display:none;}
.dp-head{display:flex; align-items:center; gap:10px;}
.dp-name{font-size:18px; font-weight:800; color:var(--ink);}
.dp-dot{width:10px; height:10px; border-radius:50%; flex:none;}
.dp-close{
  margin-left:auto; border:none; background:transparent; color:var(--muted);
  font-size:22px; line-height:1; cursor:pointer; padding:0 4px;
}
.dp-note{margin-top:6px; font-size:13px; color:var(--muted); line-height:1.6;}
.dp-sub{margin-top:10px; font-size:13px; color:var(--muted);}
.dp-sub b{color:#8fa2ff;}
.dp-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.dp-chip{
  border:1px solid rgba(91,110,245,.45); background:rgba(91,110,245,.14); color:#c3ccff;
  border-radius:999px; padding:5px 12px; font-size:13px; cursor:pointer; font-family:inherit;
}
.dp-chip:hover{background:rgba(91,110,245,.28);}
.dp-empty{font-size:13px; color:var(--muted); margin-top:8px;}

.dating-legend{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:12px; color:var(--muted); padding:0 4px;
}
.dating-legend i{
  display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:-1px;
}
@media (max-width:640px){
  .dating-stage{height:min(66vh,540px); min-height:400px;}
  .dating-footer .dating-tools{margin-left:0; width:100%; justify-content:space-between;}
  /* 「WHO DATED WHOM」标题过长，窄屏收一档避免横向溢出 */
  .topbar .logo{font-size:22px; gap:1px; flex-wrap:wrap;}
  .topbar .logo .dot{width:5px; height:5px; margin:0 1px;}
}

/* 窗口宽度小于高度时隐藏视图操作。 */
@media (aspect-ratio < 1/1){
  .dating-footer .dating-tools{display:none;}
}