/* ============================================================
   管理后台样式
   ============================================================ */

/* ---- 登录 ---- */
.login-sec { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; }
.login-card { width:100%; max-width:380px; background:var(--surf); border:1px solid var(--bdr); border-radius:var(--r-lg); padding:40px 32px; animation:fadeIn .5s ease; }
.login-title { font-family:var(--ff-d); font-size:2rem; font-weight:700; color:var(--txt); text-align:center; margin-bottom:8px; }
.login-sub { text-align:center; font-size:.8rem; color:var(--txt3); margin-bottom:32px; }
.login-form { display:flex; flex-direction:column; gap:16px; }
.login-input { background:var(--bg); border:1px solid var(--bdr); border-radius:var(--r-sm); padding:14px 16px; color:var(--txt); font-family:var(--ff-m); font-size:.9rem; outline:none; transition:border-color .2s; }
.login-input:focus { border-color:var(--acc2); }
.login-btn { background:var(--acc); color:var(--bg); border:none; border-radius:var(--r-sm); padding:14px; font-family:var(--ff-m); font-size:.9rem; font-weight:500; cursor:pointer; transition:opacity .2s; }
.login-btn:hover { opacity:.9; }
.login-hint { text-align:center; font-size:.75rem; color:var(--txt3); margin-top:8px; min-height:20px; }
.login-err { color:#e85454; }

/* ---- 仪表盘 ---- */
.dash-sec { min-height:100vh; }
.adm-hd { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--bdr); background:var(--surf); position:sticky; top:0; z-index:100; }
.adm-back { font-size:.8rem; color:var(--txt3); text-decoration:none; transition:color .2s; }
.adm-back:hover { color:var(--acc); }
.adm-title { font-family:var(--ff-d); font-size:1.2rem; font-weight:600; color:var(--txt); }
.adm-logout { background:transparent; border:1px solid var(--bdr); border-radius:var(--r-sm); padding:8px 16px; color:var(--txt3); font-family:var(--ff-m); font-size:.75rem; cursor:pointer; transition:all .2s; }
.adm-logout:hover { border-color:#e85454; color:#e85454; }
.adm-body { max-width:800px; margin:0 auto; padding:24px; }

/* ---- 分类标签 ---- */
.tabs-wrap { display:flex; align-items:center; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.tabs { display:flex; gap:8px; flex-wrap:wrap; }
.tab { padding:8px 16px; border:1px solid var(--bdr); border-radius:var(--r-sm); background:transparent; color:var(--txt2); font-family:var(--ff-m); font-size:.8rem; cursor:pointer; transition:all .2s; white-space:nowrap; }
.tab:hover { border-color:var(--bdr2); color:var(--txt); }
.tab.on { background:var(--acc); border-color:var(--acc); color:var(--bg); }
.tab-add { width:34px; height:34px; border:1px dashed var(--bdr2); border-radius:var(--r-sm); background:transparent; color:var(--txt3); font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.tab-add:hover { border-color:var(--acc); color:var(--acc); }

/* ---- 编辑区 ---- */
.editor { animation:fadeIn .3s ease; }
.empty { text-align:center; padding:60px 24px; color:var(--txt3); font-size:.85rem; }
.ed-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--bdr); }
.ed-cat-name { font-family:var(--ff-d); font-size:1.3rem; font-weight:600; color:var(--txt); }
.ed-acts { display:flex; gap:8px; }
.ed-acts button { background:transparent; border:1px solid var(--bdr); border-radius:var(--r-sm); padding:6px 12px; color:var(--txt3); font-family:var(--ff-m); font-size:.7rem; cursor:pointer; transition:all .2s; }
.ed-acts .btn-ec:hover { border-color:var(--acc); color:var(--acc); }
.ed-acts .btn-dc:hover { border-color:#e85454; color:#e85454; }

/* ---- 站点列表 ---- */
.slist { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.sitem { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--surf); border:1px solid var(--bdr); border-radius:var(--r-md); transition:border-color .2s; }
.sitem:hover { border-color:var(--bdr2); }
.sitem-icon { width:28px; height:28px; border-radius:6px; object-fit:contain; flex-shrink:0; background:var(--bdr); }
.sitem-icon-fb { width:28px; height:28px; border-radius:6px; background:var(--acc-glow); border:1px solid var(--bdr2); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:500; color:var(--acc); flex-shrink:0; }
.sitem-info { flex:1; min-width:0; }
.sitem-name { font-size:.85rem; font-weight:500; color:var(--txt); }
.sitem-url { font-size:.7rem; color:var(--txt3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sitem-acts { display:flex; gap:6px; flex-shrink:0; }
.sitem-acts button { background:transparent; border:1px solid var(--bdr); border-radius:6px; padding:5px 10px; color:var(--txt3); font-family:var(--ff-m); font-size:.65rem; cursor:pointer; transition:all .2s; }
.sitem-acts .btn-es:hover { border-color:var(--acc); color:var(--acc); }
.sitem-acts .btn-ds:hover { border-color:#e85454; color:#e85454; }

.add-site { width:100%; padding:12px; border:1px dashed var(--bdr2); border-radius:var(--r-md); background:transparent; color:var(--txt3); font-family:var(--ff-m); font-size:.8rem; cursor:pointer; transition:all .2s; }
.add-site:hover { border-color:var(--acc); color:var(--acc); }

/* ---- 弹窗 ---- */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:10001; padding:24px; }
.modal { width:100%; max-width:480px; background:var(--surf); border:1px solid var(--bdr); border-radius:var(--r-lg); overflow:hidden; animation:mIn .25s ease; }
.modal-sm { max-width:380px; }
@keyframes mIn { from{opacity:0;transform:translateY(12px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }

.modal-hd { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 16px; border-bottom:1px solid var(--bdr); }
.modal-hd h3 { font-family:var(--ff-d); font-size:1.2rem; font-weight:600; color:var(--txt); }
.modal-x { background:none; border:none; color:var(--txt3); font-size:1.5rem; cursor:pointer; line-height:1; transition:color .2s; }
.modal-x:hover { color:var(--txt); }
.modal-fm { padding:20px 24px 24px; }
.fg { margin-bottom:16px; }
.fg label { display:block; font-size:.75rem; color:var(--txt2); margin-bottom:6px; letter-spacing:.02em; }
.req { color:#e85454; }
.fi { width:100%; background:var(--bg); border:1px solid var(--bdr); border-radius:var(--r-sm); padding:10px 14px; color:var(--txt); font-family:var(--ff-m); font-size:.85rem; outline:none; transition:border-color .2s; }
.fi:focus { border-color:var(--acc2); }
.fi-sm { font-size:.75rem; padding:8px 12px; margin-top:8px; }
.fi::placeholder { color:var(--txt3); }

.icon-row { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.icon-pv { width:48px; height:48px; border-radius:var(--r-sm); border:1px solid var(--bdr); display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--bg); flex-shrink:0; }
.icon-pv img { width:100%; height:100%; object-fit:contain; }
.icon-ph { color:var(--txt3); font-size:1.2rem; }
.icon-acts { display:flex; flex-direction:column; gap:6px; }
.btn-sm { padding:6px 12px; border:1px solid var(--bdr); border-radius:6px; background:transparent; color:var(--txt2); font-family:var(--ff-m); font-size:.7rem; cursor:pointer; transition:all .2s; text-align:center; }
.btn-sm:hover { border-color:var(--acc); color:var(--acc); }
.btn-up { cursor:pointer; }

.modal-acts { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.btn-cn { padding:10px 20px; border:1px solid var(--bdr); border-radius:var(--r-sm); background:transparent; color:var(--txt3); font-family:var(--ff-m); font-size:.8rem; cursor:pointer; transition:all .2s; }
.btn-cn:hover { border-color:var(--bdr2); color:var(--txt2); }
.btn-ok { padding:10px 24px; border:none; border-radius:var(--r-sm); background:var(--acc); color:var(--bg); font-family:var(--ff-m); font-size:.8rem; font-weight:500; cursor:pointer; transition:opacity .2s; }
.btn-ok:hover { opacity:.9; }

/* ---- Toast ---- */
.toasts { position:fixed; bottom:24px; right:24px; z-index:10002; display:flex; flex-direction:column; gap:8px; }
.toast { padding:12px 20px; background:var(--surf); border:1px solid var(--bdr); border-radius:var(--r-sm); color:var(--txt); font-family:var(--ff-m); font-size:.8rem; animation:tIn .3s ease, tOut .3s ease 2.5s forwards; box-shadow:0 8px 24px rgba(0,0,0,.3); }
.toast-err { border-color:rgba(232,84,84,.3); color:#e85454; }
.toast-ok  { border-color:rgba(76,201,120,.3); color:#4cc978; }
@keyframes tIn  { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes tOut { from{opacity:1} to{opacity:0} }

/* ---- 响应式 ---- */
@media(max-width:640px){
  .adm-hd{padding:12px 16px}
  .adm-body{padding:16px}
  .modal{max-width:100%;margin:0 12px}
  .sitem{flex-wrap:wrap}
  .sitem-acts{width:100%;justify-content:flex-end;margin-top:4px}
}