/* ==============================================================
   素拼音乐下载 · 员工通道独立页
   依赖 main.css 的设计变量（--paper/--ink/--seal 等）。
   ============================================================== */

/* ---------- 门禁区 ---------- */
.gate-sec{padding:72px 0 96px;background:
  linear-gradient(160deg,var(--paper) 55%,var(--paper-2) 55.2%)}
.gate-sec .login-box{max-width:420px;margin:0 auto}

.login-box{background:var(--paper);border:1px solid var(--paper-4);border-radius:var(--r);
  padding:36px 32px 28px;box-shadow:var(--shadow-lg);border-top:4px solid var(--seal);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.login-mark{width:52px;height:52px;border-radius:var(--r);background:linear-gradient(140deg,var(--seal),var(--accent));
  color:var(--paper);font-size:26px;font-weight:900;display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;letter-spacing:0}
.login-box h1{font-size:22px;font-weight:900;color:var(--ink);text-align:center;margin:0 0 6px;letter-spacing:.06em}
.gate-sub{font-size:13px;color:var(--ink-3);text-align:center;margin:0 0 22px}
.login-box .f{margin-bottom:14px}
.login-box label{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:5px;letter-spacing:.04em}
.login-box input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--paper-4);
  border-radius:var(--r-sm);background:var(--paper-2);font-size:14px;color:var(--ink)}
.login-box input:focus{outline:2px solid var(--seal-soft);border-color:var(--seal)}
.req{color:var(--seal)}
.login-err{min-height:18px;font-size:12.5px;color:var(--danger);margin:2px 0 6px}
.btn-go{width:100%;margin-top:6px}
.gate-note{margin-top:16px;padding:10px 12px;background:var(--paper-2);border-left:3px solid var(--paper-5);
  font-size:12px;color:var(--ink-4);line-height:1.6}

/* ---------- 列表区 ---------- */
.list-sec{padding:48px 0 80px;min-height:52vh}
.list-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.list-tip{font-size:12.5px;color:var(--ink-4)}
.cnt-badge{display:inline-block;min-width:26px;padding:1px 8px;background:var(--seal-soft);color:var(--seal);
  border-radius:999px;font-size:14px;font-weight:700;text-align:center;vertical-align:4px;margin-left:8px}

.tlist{display:flex;flex-direction:column;gap:10px}
.trow{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--paper);
  border:1px solid var(--paper-4);border-radius:var(--r)}
.trow:hover{border-color:var(--paper-5)}
.tcov{flex:none;width:46px;height:46px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  color:var(--paper);font-weight:900;font-size:18px;background:linear-gradient(140deg,var(--seal),var(--accent),var(--paper-3))}
.tinfo{flex:1;min-width:0}
.tinfo b{display:block;font-size:14.5px;color:var(--ink)}
.tinfo .sub2{display:block;font-size:12px;color:var(--ink-4);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-block;padding:1px 8px;font-size:11px;border:1px solid var(--paper-5);border-radius:999px;
  color:var(--ink-3);vertical-align:1px}
.pill.slot{background:var(--seal);border-color:var(--seal);color:var(--paper);font-weight:700}
.tacts{flex:none;display:flex;gap:8px;align-items:center}
.icon-mini{width:34px;height:34px;border:1px solid var(--paper-4);background:var(--paper-2);border-radius:var(--r-sm);
  cursor:pointer;font-size:12px;color:var(--ink-2)}
.icon-mini:hover{border-color:var(--seal);color:var(--seal)}
.btn-dl{padding:8px 14px;background:var(--seal);color:var(--paper);border:1px solid var(--seal);
  border-radius:var(--r-sm);font-weight:700;font-size:13px;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.btn-dl:hover{background:var(--seal-2)}
.btn-dl:disabled{opacity:.6;cursor:wait}
.trow.playing{border-color:var(--seal);box-shadow:3px 3px 0 var(--seal-soft)}

.empty{padding:48px 0;text-align:center;color:var(--ink-4);font-size:14px}

/* ---------- 页脚 ---------- */
.foot{border-top:3px solid var(--seal);background:var(--paper-2);padding:20px 0}
.foot-note{font-size:12px;color:var(--ink-4);text-align:center}

@media (max-width:560px){
  .gate-sec{padding:40px 0 64px}
  .trow{flex-wrap:wrap}
  .tacts{width:100%;justify-content:flex-end}
}