adjust dark mode and layout

src/faq/KugouFAQ.tsx

@@ -10,7 +10,7 @@ export function KugouFAQ() {
       <p>
         酷狗现在对部分用户推送了 <code>kgg</code> 加密格式（安卓、Windows 客户端）。
       </p>
-      <p>根据平台不同，你需要提取密钥数据库。</p>
+      <p className="my-4">根据平台不同，你需要提取密钥数据库。</p>
 
       <div className="p-2 @container">
         <div className="alert alert-warning">

src/faq/KuwoFAQ.tsx

@@ -11,7 +11,7 @@ export function KuwoFAQ() {
     <>
       <Header4>解锁失败</Header4>
       <SegmentTryOfficialPlayer />
-      <p>
+      <p className="my-4">
         日前，仅<HiWord>手机客户端</HiWord>下载的
         <VQuote>
           <strong>至臻全景声</strong>
@@ -22,10 +22,10 @@ export function KuwoFAQ() {
         </VQuote>
         音质的音乐文件采用新版加密。
       </p>
-      <p>其他音质目前不需要提取密钥。</p>
-      <p>PC平台暂未推出使用新版加密的音质。</p>
+      <p className="my-4">其他音质目前不需要提取密钥。</p>
+      <p className="my-4">PC平台暂未推出使用新版加密的音质。</p>
 
-      <div className="alert alert-warning">
+      <div className="alert alert-warning mb-4">
         <RiErrorWarningLine className="text-2xl" />
         <div>
           <p>安卓用户提取密钥需要 root 权限，或注入文件提供器。</p>

src/faq/OtherFAQ.tsx

@@ -50,8 +50,8 @@ export function OtherFAQ() {
         对安卓设备获取 root 特权通常会破坏系统的完整性并导致部分功能无法使用。
         例如部分厂商的安卓设备会在解锁后丧失保修资格，或导致无法使用 NFC 移动支付等限制。
       </p>
-      <p>如果希望不破坏系统完整性，你可以考虑在电脑上使用安卓模拟器。</p>
-      <p>
+      <p className="my-2">如果希望不破坏系统完整性，你可以考虑在电脑上使用安卓模拟器。</p>
+      <p className="my-2">
         很多安卓模拟器都提供了 root 特权支持，可以很方便的启用，例如
         <VQuote>
           <ExtLink href="https://mumu.163.com/">网易 MuMu 模拟器（安卓 12，推荐）</ExtLink>

src/faq/QQMusicFAQ.tsx

@@ -7,8 +7,8 @@ export function QQMusicFAQ() {
     <>
       <Header4>解锁失败</Header4>
       <SegmentTryOfficialPlayer />
-      <p>重复下载同一首的歌曲不重复扣下载配额，但是同一首歌的两个版本会重复扣下载配额，请仔细分辨。</p>
-      <p className="mb-2">
+      <p className="my-4">重复下载同一首的歌曲不重复扣下载配额，但是同一首歌的两个版本会重复扣下载配额，请仔细分辨。</p>
+      <p className="mb-4">
         部分平台获取的加密文件未包含密钥。选择你<strong>下载文件时</strong>使用的客户端来查看说明。
       </p>
 

src/faq/SegmentKeyImportInstructions.tsx

@@ -16,7 +16,7 @@ export function SegmentKeyImportInstructions({
 }: SegmentKeyImportInstructionsProps) {
   return (
     <>
-      <p>导入密钥可以参考下面的步骤：</p>
+      <p className="mt-2">导入密钥可以参考下面的步骤：</p>
       <ol className="list-decimal pl-5">
         <li>
           <SegmentTopNavSettings />
@@ -28,7 +28,7 @@ export function SegmentKeyImportInstructions({
           <SegmentAddKeyDropdown />
         </li>
         <li>
-          <p>{keyInstructionText}</p>
+          <p className="mb-2">{keyInstructionText}</p>
           {clientInstructions}
         </li>
       </ol>

src/faq/SegmentTryOfficialPlayer.tsx

@@ -1,8 +1,8 @@
 import { RiErrorWarningLine } from 'react-icons/ri';
 
-export function SegmentTryOfficialPlayer() {
+export function SegmentTryOfficialPlayer({ className = '' }: { className?: string }) {
   return (
-    <div className="alert alert-warning">
+    <div className={`alert alert-warning ${className}`}>
       <RiErrorWarningLine className="text-2xl" />
       <p>尝试用下载音乐的设备播放一次看看，如果官方客户端都无法播放，那解锁肯定会失败哦。</p>
     </div>