From 62b9b6883ecdef5ba5a873453c6e9930a119852a Mon Sep 17 00:00:00 2001
From: feng <1304903146@qq.com>
Date: Tue, 11 Mar 2025 15:04:40 +0800
Subject: [PATCH] perf: report css

---
 apps/accounts/notifications.py                |   4 -
 .../accounts/backup_account_report.html       | 183 ++++++++++++++++-
 .../accounts/change_secret_report.html        | 184 ++++++++++++++++-
 .../accounts/check_account_report.html        | 182 ++++++++++++++++-
 .../accounts/gather_account_report.html       | 181 ++++++++++++++++-
 .../accounts/push_account_report.html         | 185 +++++++++++++++++-
 6 files changed, 890 insertions(+), 29 deletions(-)

diff --git a/apps/accounts/notifications.py b/apps/accounts/notifications.py
index 20807ba97..4ab56963e 100644
--- a/apps/accounts/notifications.py
+++ b/apps/accounts/notifications.py
@@ -2,7 +2,6 @@ from django.template.loader import render_to_string
 from django.utils.translation import gettext_lazy as _
 from premailer import transform
 
-from accounts.models import ChangeSecretRecord
 from common.tasks import send_mail_attachment_async, upload_backup_to_obj_storage
 from notifications.notifications import UserMessage
 from terminal.models.component.storage import ReplayStorage
@@ -122,8 +121,5 @@ class ChangeSecretReportMsg(UserMessage):
 
     @classmethod
     def gen_test_msg(cls):
-        name = 'test'
         user = User.objects.first()
-        record = ChangeSecretRecord.objects.first()
-        execution_id = str(record.execution_id)
         return cls(user, {})
diff --git a/apps/accounts/templates/accounts/backup_account_report.html b/apps/accounts/templates/accounts/backup_account_report.html
index 95179770b..5cd2cc3e3 100644
--- a/apps/accounts/templates/accounts/backup_account_report.html
+++ b/apps/accounts/templates/accounts/backup_account_report.html
@@ -47,10 +47,6 @@
   </section>
 </div>
 
-<style>
-    {% include './css/report.css' %}
-</style>
-
 <script>
     const toggleButtons = document.querySelectorAll('.collapse-toggle')
   
@@ -70,4 +66,181 @@
         }
       })
     })
-  </script>
\ No newline at end of file
+</script>
+
+<style>
+    html {
+        font-size: 10px;
+    }
+
+    body,
+    p {
+        margin: 0;
+        padding: 0;
+    }
+
+    .report-container {
+        display: flex;
+        flex-direction: column;
+        row-gap: 16px;
+    }
+
+    .basic-info-section,
+    .success,
+    .failed {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 16px 20px;
+        margin: 0 20px;
+        border: 1px solid #dee0e3;
+        border-radius: 6px;
+        background-color: #fff;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        transition: all 0.2s ease;
+    }
+
+    .header-container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        height: 32px;
+        margin-bottom: 12px;
+        border-bottom: 1px solid #f0f0f0;
+        padding-bottom: 8px;
+    }
+
+    .header-container h2 {
+        color: #1f2329;
+        font: 500 16px/24px 'PingFang SC';
+        margin: 0;
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+
+    .header-container h2 span {
+        display: inline-flex;
+        margin-left: 8px;
+        font-weight: normal;
+    }
+
+    .triangle-right-icon {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        border-left: 8px solid #1f2329;
+        margin-right: 10px;
+        cursor: pointer;
+    }
+
+    .triangle-down-icon {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 8px solid #1f2329;
+        margin-right: 10px;
+        cursor: pointer;
+    }
+
+    .container-section {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        height: 100%;
+        row-gap: 16px;
+        column-gap: 10px;
+    }
+
+    .collapsible-content {
+        overflow: hidden;
+        max-height: 1000px;
+        opacity: 1;
+        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    }
+
+    .collapsible-content.collapsed {
+        max-height: 0;
+        opacity: 0;
+        margin: 0;
+        padding: 0;
+    }
+
+    .container-section .item {
+        display: flex;
+        flex-basis: calc(33.33% - 10px);
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        gap: 4px;
+        padding: 4px 0;
+    }
+
+    .container-section .item .item-label {
+        color: #646a73;
+        font: 400 14px/22px 'PingFang SC';
+    }
+
+    .container-section .item .item-value {
+        color: #1f2329;
+        font: 500 14px/22px 'PingFang SC';
+    }
+
+
+    .custom-table {
+        margin-bottom: 0;
+        width: 100%;
+        border-collapse: collapse;
+        overflow: hidden;
+    }
+
+    .custom-table th {
+        background-color: #f5f7fa;
+        color: #646A73;
+        font: 500 14px/22px 'PingFang SC';
+        text-align: left;
+        padding: 12px 8px;
+        border-bottom: 1px solid #ebeef5;
+    }
+
+    .custom-table td {
+        color: #1F2329;
+        font: 400 14px/22px 'PingFang SC';
+        padding: 12px 8px;
+        border-bottom: 1px solid #ebeef5;
+    }
+
+    .custom-table tr:nth-child(even) {
+        background-color: #f6f6f6;
+    }
+
+    .custom-table tr:last-child td {
+        border-bottom: none;
+    }
+
+    .no-data {
+        color: #909399;
+        font: 400 14px/22px 'PingFang SC';
+        text-align: center;
+        padding: 20px;
+        font-style: italic;
+        background-color: #f9f9f9;
+        border-radius: 4px;
+        margin: 10px 0;
+        width: 100%;
+    }
+
+    .new-accounts .section-header span {
+        background: #e8f5e9;
+        color: #2e7d32;
+    }
+
+    .lost-accounts .section-header span {
+        background: #fbe9e7;
+        color: #d84315;
+    }
+    </style>
\ No newline at end of file
diff --git a/apps/accounts/templates/accounts/change_secret_report.html b/apps/accounts/templates/accounts/change_secret_report.html
index 17b74f94b..556eae750 100644
--- a/apps/accounts/templates/accounts/change_secret_report.html
+++ b/apps/accounts/templates/accounts/change_secret_report.html
@@ -1,7 +1,6 @@
 {% load i18n %}
 {% load static %}
 
-<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
 
 <div class="report-container">
     <section class="basic-info-section">
@@ -137,9 +136,7 @@
         </div>
     </section>
 </div>
-<style>
-    {% include './css/report.css' %}
-</style>
+
 <script>
   const toggleButtons = document.querySelectorAll('.collapse-toggle')
 
@@ -159,4 +156,181 @@
       }
     })
   })
-</script>
\ No newline at end of file
+</script>
+
+<style>
+    html {
+        font-size: 10px;
+    }
+
+    body,
+    p {
+        margin: 0;
+        padding: 0;
+    }
+
+    .report-container {
+        display: flex;
+        flex-direction: column;
+        row-gap: 16px;
+    }
+
+    .basic-info-section,
+    .success,
+    .failed {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 16px 20px;
+        margin: 0 20px;
+        border: 1px solid #dee0e3;
+        border-radius: 6px;
+        background-color: #fff;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        transition: all 0.2s ease;
+    }
+
+    .header-container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        height: 32px;
+        margin-bottom: 12px;
+        border-bottom: 1px solid #f0f0f0;
+        padding-bottom: 8px;
+    }
+
+    .header-container h2 {
+        color: #1f2329;
+        font: 500 16px/24px 'PingFang SC';
+        margin: 0;
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+
+    .header-container h2 span {
+        display: inline-flex;
+        margin-left: 8px;
+        font-weight: normal;
+    }
+
+    .triangle-right-icon {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        border-left: 8px solid #1f2329;
+        margin-right: 10px;
+        cursor: pointer;
+    }
+
+    .triangle-down-icon {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 8px solid #1f2329;
+        margin-right: 10px;
+        cursor: pointer;
+    }
+
+    .container-section {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        height: 100%;
+        row-gap: 16px;
+        column-gap: 10px;
+    }
+
+    .collapsible-content {
+        overflow: hidden;
+        max-height: 1000px;
+        opacity: 1;
+        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    }
+
+    .collapsible-content.collapsed {
+        max-height: 0;
+        opacity: 0;
+        margin: 0;
+        padding: 0;
+    }
+
+    .container-section .item {
+        display: flex;
+        flex-basis: calc(33.33% - 10px);
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        gap: 4px;
+        padding: 4px 0;
+    }
+
+    .container-section .item .item-label {
+        color: #646a73;
+        font: 400 14px/22px 'PingFang SC';
+    }
+
+    .container-section .item .item-value {
+        color: #1f2329;
+        font: 500 14px/22px 'PingFang SC';
+    }
+
+
+    .custom-table {
+        margin-bottom: 0;
+        width: 100%;
+        border-collapse: collapse;
+        overflow: hidden;
+    }
+
+    .custom-table th {
+        background-color: #f5f7fa;
+        color: #646A73;
+        font: 500 14px/22px 'PingFang SC';
+        text-align: left;
+        padding: 12px 8px;
+        border-bottom: 1px solid #ebeef5;
+    }
+
+    .custom-table td {
+        color: #1F2329;
+        font: 400 14px/22px 'PingFang SC';
+        padding: 12px 8px;
+        border-bottom: 1px solid #ebeef5;
+    }
+
+    .custom-table tr:nth-child(even) {
+        background-color: #f6f6f6;
+    }
+
+    .custom-table tr:last-child td {
+        border-bottom: none;
+    }
+
+    .no-data {
+        color: #909399;
+        font: 400 14px/22px 'PingFang SC';
+        text-align: center;
+        padding: 20px;
+        font-style: italic;
+        background-color: #f9f9f9;
+        border-radius: 4px;
+        margin: 10px 0;
+        width: 100%;
+    }
+
+    .new-accounts .section-header span {
+        background: #e8f5e9;
+        color: #2e7d32;
+    }
+
+    .lost-accounts .section-header span {
+        background: #fbe9e7;
+        color: #d84315;
+    }
+    </style>
diff --git a/apps/accounts/templates/accounts/check_account_report.html b/apps/accounts/templates/accounts/check_account_report.html
index af00a8ed5..14df6bb2b 100644
--- a/apps/accounts/templates/accounts/check_account_report.html
+++ b/apps/accounts/templates/accounts/check_account_report.html
@@ -109,9 +109,6 @@
     </section>
 </div>
 
-<style>
-    {% include './css/report.css' %}
-</style>
 <script>
   const toggleButtons = document.querySelectorAll('.collapse-toggle')
 
@@ -131,4 +128,181 @@
       }
     })
   })
-</script>
\ No newline at end of file
+</script>
+
+<style>
+    html {
+        font-size: 10px;
+    }
+
+    body,
+    p {
+        margin: 0;
+        padding: 0;
+    }
+
+    .report-container {
+        display: flex;
+        flex-direction: column;
+        row-gap: 16px;
+    }
+
+    .basic-info-section,
+    .success,
+    .failed {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 16px 20px;
+        margin: 0 20px;
+        border: 1px solid #dee0e3;
+        border-radius: 6px;
+        background-color: #fff;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        transition: all 0.2s ease;
+    }
+
+    .header-container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        height: 32px;
+        margin-bottom: 12px;
+        border-bottom: 1px solid #f0f0f0;
+        padding-bottom: 8px;
+    }
+
+    .header-container h2 {
+        color: #1f2329;
+        font: 500 16px/24px 'PingFang SC';
+        margin: 0;
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+
+    .header-container h2 span {
+        display: inline-flex;
+        margin-left: 8px;
+        font-weight: normal;
+    }
+
+    .triangle-right-icon {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        border-left: 8px solid #1f2329;
+        margin-right: 10px;
+        cursor: pointer;
+    }
+
+    .triangle-down-icon {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 8px solid #1f2329;
+        margin-right: 10px;
+        cursor: pointer;
+    }
+
+    .container-section {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        height: 100%;
+        row-gap: 16px;
+        column-gap: 10px;
+    }
+
+    .collapsible-content {
+        overflow: hidden;
+        max-height: 1000px;
+        opacity: 1;
+        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    }
+
+    .collapsible-content.collapsed {
+        max-height: 0;
+        opacity: 0;
+        margin: 0;
+        padding: 0;
+    }
+
+    .container-section .item {
+        display: flex;
+        flex-basis: calc(33.33% - 10px);
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        gap: 4px;
+        padding: 4px 0;
+    }
+
+    .container-section .item .item-label {
+        color: #646a73;
+        font: 400 14px/22px 'PingFang SC';
+    }
+
+    .container-section .item .item-value {
+        color: #1f2329;
+        font: 500 14px/22px 'PingFang SC';
+    }
+
+
+    .custom-table {
+        margin-bottom: 0;
+        width: 100%;
+        border-collapse: collapse;
+        overflow: hidden;
+    }
+
+    .custom-table th {
+        background-color: #f5f7fa;
+        color: #646A73;
+        font: 500 14px/22px 'PingFang SC';
+        text-align: left;
+        padding: 12px 8px;
+        border-bottom: 1px solid #ebeef5;
+    }
+
+    .custom-table td {
+        color: #1F2329;
+        font: 400 14px/22px 'PingFang SC';
+        padding: 12px 8px;
+        border-bottom: 1px solid #ebeef5;
+    }
+
+    .custom-table tr:nth-child(even) {
+        background-color: #f6f6f6;
+    }
+
+    .custom-table tr:last-child td {
+        border-bottom: none;
+    }
+
+    .no-data {
+        color: #909399;
+        font: 400 14px/22px 'PingFang SC';
+        text-align: center;
+        padding: 20px;
+        font-style: italic;
+        background-color: #f9f9f9;
+        border-radius: 4px;
+        margin: 10px 0;
+        width: 100%;
+    }
+
+    .new-accounts .section-header span {
+        background: #e8f5e9;
+        color: #2e7d32;
+    }
+
+    .lost-accounts .section-header span {
+        background: #fbe9e7;
+        color: #d84315;
+    }
+    </style>
\ No newline at end of file
diff --git a/apps/accounts/templates/accounts/gather_account_report.html b/apps/accounts/templates/accounts/gather_account_report.html
index a19d10086..fa9b4bb51 100644
--- a/apps/accounts/templates/accounts/gather_account_report.html
+++ b/apps/accounts/templates/accounts/gather_account_report.html
@@ -135,10 +135,6 @@
   </section>
 </div>
 
-<style>
-  {% include './css/report.css' %}
-</style>
-
 <script>
   const toggleButtons = document.querySelectorAll('.collapse-toggle')
 
@@ -159,3 +155,180 @@
     })
   })
 </script>
+
+<style>
+    html {
+        font-size: 10px;
+    }
+
+    body,
+    p {
+        margin: 0;
+        padding: 0;
+    }
+
+    .report-container {
+        display: flex;
+        flex-direction: column;
+        row-gap: 16px;
+    }
+
+    .basic-info-section,
+    .success,
+    .failed {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 16px 20px;
+        margin: 0 20px;
+        border: 1px solid #dee0e3;
+        border-radius: 6px;
+        background-color: #fff;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        transition: all 0.2s ease;
+    }
+
+    .header-container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        height: 32px;
+        margin-bottom: 12px;
+        border-bottom: 1px solid #f0f0f0;
+        padding-bottom: 8px;
+    }
+
+    .header-container h2 {
+        color: #1f2329;
+        font: 500 16px/24px 'PingFang SC';
+        margin: 0;
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+
+    .header-container h2 span {
+        display: inline-flex;
+        margin-left: 8px;
+        font-weight: normal;
+    }
+
+    .triangle-right-icon {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        border-left: 8px solid #1f2329;
+        margin-right: 10px;
+        cursor: pointer;
+    }
+
+    .triangle-down-icon {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 8px solid #1f2329;
+        margin-right: 10px;
+        cursor: pointer;
+    }
+
+    .container-section {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        height: 100%;
+        row-gap: 16px;
+        column-gap: 10px;
+    }
+
+    .collapsible-content {
+        overflow: hidden;
+        max-height: 1000px;
+        opacity: 1;
+        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    }
+
+    .collapsible-content.collapsed {
+        max-height: 0;
+        opacity: 0;
+        margin: 0;
+        padding: 0;
+    }
+
+    .container-section .item {
+        display: flex;
+        flex-basis: calc(33.33% - 10px);
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        gap: 4px;
+        padding: 4px 0;
+    }
+
+    .container-section .item .item-label {
+        color: #646a73;
+        font: 400 14px/22px 'PingFang SC';
+    }
+
+    .container-section .item .item-value {
+        color: #1f2329;
+        font: 500 14px/22px 'PingFang SC';
+    }
+
+
+    .custom-table {
+        margin-bottom: 0;
+        width: 100%;
+        border-collapse: collapse;
+        overflow: hidden;
+    }
+
+    .custom-table th {
+        background-color: #f5f7fa;
+        color: #646A73;
+        font: 500 14px/22px 'PingFang SC';
+        text-align: left;
+        padding: 12px 8px;
+        border-bottom: 1px solid #ebeef5;
+    }
+
+    .custom-table td {
+        color: #1F2329;
+        font: 400 14px/22px 'PingFang SC';
+        padding: 12px 8px;
+        border-bottom: 1px solid #ebeef5;
+    }
+
+    .custom-table tr:nth-child(even) {
+        background-color: #f6f6f6;
+    }
+
+    .custom-table tr:last-child td {
+        border-bottom: none;
+    }
+
+    .no-data {
+        color: #909399;
+        font: 400 14px/22px 'PingFang SC';
+        text-align: center;
+        padding: 20px;
+        font-style: italic;
+        background-color: #f9f9f9;
+        border-radius: 4px;
+        margin: 10px 0;
+        width: 100%;
+    }
+
+    .new-accounts .section-header span {
+        background: #e8f5e9;
+        color: #2e7d32;
+    }
+
+    .lost-accounts .section-header span {
+        background: #fbe9e7;
+        color: #d84315;
+    }
+    </style>
diff --git a/apps/accounts/templates/accounts/push_account_report.html b/apps/accounts/templates/accounts/push_account_report.html
index e8138856f..b2fe345c5 100644
--- a/apps/accounts/templates/accounts/push_account_report.html
+++ b/apps/accounts/templates/accounts/push_account_report.html
@@ -1,8 +1,6 @@
 {% load i18n %}
 {% load static %}
 
-<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
-
 <div class="report-container">
     <section class="basic-info-section">
         <div class="header-container">
@@ -138,10 +136,6 @@
     </section>
 </div>
 
-<style>
-    {% include './css/report.css' %}
-</style>
-
 <script>
     const toggleButtons = document.querySelectorAll('.collapse-toggle')
   
@@ -161,4 +155,181 @@
         }
       })
     })
-  </script>
\ No newline at end of file
+</script>
+
+<style>
+    html {
+        font-size: 10px;
+    }
+
+    body,
+    p {
+        margin: 0;
+        padding: 0;
+    }
+
+    .report-container {
+        display: flex;
+        flex-direction: column;
+        row-gap: 16px;
+    }
+
+    .basic-info-section,
+    .success,
+    .failed {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: 16px 20px;
+        margin: 0 20px;
+        border: 1px solid #dee0e3;
+        border-radius: 6px;
+        background-color: #fff;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        transition: all 0.2s ease;
+    }
+
+    .header-container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        height: 32px;
+        margin-bottom: 12px;
+        border-bottom: 1px solid #f0f0f0;
+        padding-bottom: 8px;
+    }
+
+    .header-container h2 {
+        color: #1f2329;
+        font: 500 16px/24px 'PingFang SC';
+        margin: 0;
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+
+    .header-container h2 span {
+        display: inline-flex;
+        margin-left: 8px;
+        font-weight: normal;
+    }
+
+    .triangle-right-icon {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        border-left: 8px solid #1f2329;
+        margin-right: 10px;
+        cursor: pointer;
+    }
+
+    .triangle-down-icon {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 8px solid #1f2329;
+        margin-right: 10px;
+        cursor: pointer;
+    }
+
+    .container-section {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        height: 100%;
+        row-gap: 16px;
+        column-gap: 10px;
+    }
+
+    .collapsible-content {
+        overflow: hidden;
+        max-height: 1000px;
+        opacity: 1;
+        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    }
+
+    .collapsible-content.collapsed {
+        max-height: 0;
+        opacity: 0;
+        margin: 0;
+        padding: 0;
+    }
+
+    .container-section .item {
+        display: flex;
+        flex-basis: calc(33.33% - 10px);
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        gap: 4px;
+        padding: 4px 0;
+    }
+
+    .container-section .item .item-label {
+        color: #646a73;
+        font: 400 14px/22px 'PingFang SC';
+    }
+
+    .container-section .item .item-value {
+        color: #1f2329;
+        font: 500 14px/22px 'PingFang SC';
+    }
+
+
+    .custom-table {
+        margin-bottom: 0;
+        width: 100%;
+        border-collapse: collapse;
+        overflow: hidden;
+    }
+
+    .custom-table th {
+        background-color: #f5f7fa;
+        color: #646A73;
+        font: 500 14px/22px 'PingFang SC';
+        text-align: left;
+        padding: 12px 8px;
+        border-bottom: 1px solid #ebeef5;
+    }
+
+    .custom-table td {
+        color: #1F2329;
+        font: 400 14px/22px 'PingFang SC';
+        padding: 12px 8px;
+        border-bottom: 1px solid #ebeef5;
+    }
+
+    .custom-table tr:nth-child(even) {
+        background-color: #f6f6f6;
+    }
+
+    .custom-table tr:last-child td {
+        border-bottom: none;
+    }
+
+    .no-data {
+        color: #909399;
+        font: 400 14px/22px 'PingFang SC';
+        text-align: center;
+        padding: 20px;
+        font-style: italic;
+        background-color: #f9f9f9;
+        border-radius: 4px;
+        margin: 10px 0;
+        width: 100%;
+    }
+
+    .new-accounts .section-header span {
+        background: #e8f5e9;
+        color: #2e7d32;
+    }
+
+    .lost-accounts .section-header span {
+        background: #fbe9e7;
+        color: #d84315;
+    }
+    </style>
\ No newline at end of file