抽离平台配置页共享样式

apps/frontend/src/styles/admin-platform-shops.css

@@ -0,0 +1,553 @@
+.admin-platform-shops {
+  display: grid;
+  gap: 16px;
+}
+
+.admin-platform-shops .hero-card,
+.admin-platform-shops .meta-card,
+.admin-platform-shops .table-card,
+.admin-platform-shops .empty-block,
+.admin-platform-shops .error-copy {
+  padding: 20px;
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(86, 108, 138, 0.1);
+}
+
+.admin-platform-shops .hero-card,
+.admin-platform-shops .section-title-row,
+.admin-platform-shops .hero-actions,
+.admin-platform-shops .section-actions,
+.admin-platform-shops .platform-head,
+.admin-platform-shops .shop-summary,
+.admin-platform-shops .shop-actions,
+.admin-platform-shops .platform-switcher,
+.admin-platform-shops .overview-grid,
+.admin-platform-shops .result-grid {
+  display: flex;
+  gap: 12px;
+}
+
+.admin-platform-shops .hero-card,
+.admin-platform-shops .section-title-row,
+.admin-platform-shops .shop-summary,
+.admin-platform-shops .shop-actions {
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.admin-platform-shops .hero-copy h1,
+.admin-platform-shops .section-title-row h3 {
+  margin: 0;
+  color: #1d3555;
+}
+
+.admin-platform-shops .hero-copy p,
+.admin-platform-shops .section-title-row p {
+  margin: 8px 0 0;
+  color: #64748b;
+}
+
+.admin-platform-shops .hero-actions,
+.admin-platform-shops .section-actions,
+.admin-platform-shops .platform-switcher {
+  flex-wrap: wrap;
+}
+
+.admin-platform-shops .overview-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+}
+
+.admin-platform-shops .platform-overview-card {
+  appearance: none;
+  -webkit-appearance: none;
+  border: 1px solid rgba(86, 108, 138, 0.12);
+  background: rgba(255, 255, 255, 0.92);
+  border-radius: 20px;
+  padding: 18px;
+  text-align: left;
+  cursor: pointer;
+  display: grid;
+  gap: 10px;
+  transition: 0.2s ease;
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  color: inherit;
+  outline: none;
+}
+
+.admin-platform-shops .platform-overview-card:hover,
+.admin-platform-shops .platform-overview-card.is-active {
+  border-color: rgba(37, 99, 235, 0.28);
+  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.08);
+}
+
+.admin-platform-shops .platform-badge,
+.admin-platform-shops .platform-tag,
+.admin-platform-shops .switch-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 30px;
+  padding: 0 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.admin-platform-shops .platform-badge {
+  background: rgba(37, 99, 235, 0.1);
+  color: #2559a7;
+}
+
+.admin-platform-shops .platform-tag {
+  background: rgba(15, 23, 42, 0.05);
+  color: #475467;
+}
+
+.admin-platform-shops .platform-overview-card strong {
+  color: #1d3555;
+  font-size: 26px;
+  line-height: 1.1;
+}
+
+.admin-platform-shops .platform-overview-card > span,
+.admin-platform-shops .platform-metrics {
+  color: #64748b;
+}
+
+.admin-platform-shops .platform-metrics {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  font-size: 12px;
+}
+
+.admin-platform-shops .switch-chip {
+  appearance: none;
+  -webkit-appearance: none;
+  border: 1px solid rgba(86, 108, 138, 0.12);
+  background: rgba(255, 255, 255, 0.94);
+  color: #475467;
+  cursor: pointer;
+  font: inherit;
+  outline: none;
+}
+
+.admin-platform-shops .switch-chip.is-active {
+  background: #2563eb;
+  border-color: #2563eb;
+  color: #fff;
+}
+
+.admin-platform-shops .meta-card,
+.admin-platform-shops .meta-line,
+.admin-platform-shops .cell-stack {
+  display: grid;
+  gap: 6px;
+}
+
+.admin-platform-shops .meta-label {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.admin-platform-shops .form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.admin-platform-shops .field-block {
+  display: grid;
+  gap: 8px;
+}
+
+.admin-platform-shops .field-block span {
+  color: #475467;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.admin-platform-shops .field-wide {
+  grid-column: 1 / -1;
+}
+
+.admin-platform-shops .kuaishou-workspace,
+.admin-platform-shops .kuaishou-debug-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr);
+  gap: 16px;
+}
+
+.admin-platform-shops .kuaishou-shop-stack,
+.admin-platform-shops .kuaishou-side-panel,
+.admin-platform-shops .kuaishou-debug-panel {
+  display: grid;
+  gap: 14px;
+}
+
+.admin-platform-shops .kuaishou-base-grid {
+  padding: 14px;
+  border-radius: 18px;
+  background:
+    .admin-platform-shops radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 38%),
+    linear-gradient(180deg, rgba(239, 246, 255, 0.86), rgba(248, 250, 252, 0.96));
+  border: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.admin-platform-shops .text-input,
+.admin-platform-shops .text-area {
+  width: 100%;
+  min-height: 42px;
+  padding: 0 14px;
+  border-radius: 14px;
+  border: 1px solid rgba(86, 108, 138, 0.18);
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.admin-platform-shops .text-area {
+  min-height: 96px;
+  padding: 12px 14px;
+  resize: vertical;
+}
+
+.admin-platform-shops .shop-card {
+  margin-top: 14px;
+  border-radius: 18px;
+  background: #f8fafc;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  overflow: hidden;
+}
+
+.admin-platform-shops .shop-card:first-of-type {
+  margin-top: 0;
+}
+
+.admin-platform-shops .shop-summary {
+  width: 100%;
+  border: 0;
+  padding: 16px;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+
+.admin-platform-shops .shop-summary-main,
+.admin-platform-shops .shop-summary-side {
+  display: grid;
+  gap: 4px;
+}
+
+.admin-platform-shops .shop-summary-side {
+  justify-items: end;
+}
+
+.admin-platform-shops .shop-summary-main strong,
+.admin-platform-shops .shop-toggle {
+  color: #1d3555;
+}
+
+.admin-platform-shops .shop-summary-copy,
+.admin-platform-shops .cell-subtle {
+  color: #64748b;
+  font-size: 12px;
+}
+
+.admin-platform-shops .kuaishou-shop-card {
+  margin-top: 0;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
+  border-color: rgba(96, 165, 250, 0.18);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.admin-platform-shops .kuaishou-shop-card.is-active {
+  border-color: rgba(37, 99, 235, 0.34);
+  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.12);
+}
+
+.admin-platform-shops .kuaishou-shop-card.is-expanded {
+  transform: translateY(-1px);
+}
+
+.admin-platform-shops .kuaishou-shop-summary {
+  align-items: center;
+  gap: 16px;
+}
+
+.admin-platform-shops .kuaishou-shop-head,
+.admin-platform-shops .shop-title-row,
+.admin-platform-shops .shop-tag-row,
+.admin-platform-shops .kuaishou-debug-head {
+  display: flex;
+  gap: 10px;
+}
+
+.admin-platform-shops .kuaishou-shop-head {
+  align-items: center;
+}
+
+.admin-platform-shops .shop-title-row,
+.admin-platform-shops .shop-tag-row,
+.admin-platform-shops .kuaishou-debug-head {
+  flex-wrap: wrap;
+}
+
+.admin-platform-shops .shop-title-row {
+  align-items: center;
+}
+
+.admin-platform-shops .shop-avatar {
+  width: 54px;
+  height: 54px;
+  border-radius: 18px;
+  overflow: hidden;
+  background: linear-gradient(135deg, #dbeafe, #eff6ff);
+  color: #1d4ed8;
+  font-size: 20px;
+  font-weight: 800;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  border: 1px solid rgba(37, 99, 235, 0.14);
+}
+
+.admin-platform-shops .shop-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.admin-platform-shops .shop-mini-tag {
+  display: inline-flex;
+  align-items: center;
+  min-height: 26px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.05);
+  color: #475467;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.admin-platform-shops .shop-mini-tag.is-ready {
+  background: rgba(22, 163, 74, 0.12);
+  color: #166534;
+}
+
+.admin-platform-shops .shop-mini-tag.is-highlight {
+  background: rgba(37, 99, 235, 0.12);
+  color: #1d4ed8;
+}
+
+.admin-platform-shops .kuaishou-shop-body {
+  padding-top: 16px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(248, 250, 252, 0.96));
+}
+
+.admin-platform-shops .kuaishou-shop-actions {
+  margin-top: 14px;
+  padding-top: 14px;
+}
+
+.admin-platform-shops .kuaishou-cookie-area {
+  min-height: 128px;
+  line-height: 1.6;
+}
+
+.admin-platform-shops .kuaishou-side-panel {
+  align-content: start;
+}
+
+.admin-platform-shops .kuaishou-side-card {
+  min-height: 132px;
+}
+
+.admin-platform-shops .kuaishou-guide-card {
+  background:
+    .admin-platform-shops radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 35%),
+    linear-gradient(180deg, rgba(239, 246, 255, 0.9), rgba(248, 250, 252, 0.98));
+}
+
+.admin-platform-shops .kuaishou-guide-card p {
+  font-size: 13px;
+}
+
+.admin-platform-shops .kuaishou-debug-panel {
+  padding: 16px;
+  border-radius: 20px;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  background: rgba(248, 250, 252, 0.76);
+}
+
+.admin-platform-shops .kuaishou-debug-panel-soft {
+  background:
+    .admin-platform-shops radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 34%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
+}
+
+.admin-platform-shops .kuaishou-debug-head {
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.admin-platform-shops .kuaishou-debug-head strong {
+  display: block;
+  margin-top: 4px;
+  color: #1d3555;
+  font-size: 22px;
+}
+
+.admin-platform-shops .shop-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: rgba(22, 163, 74, 0.12);
+  color: #166534;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.admin-platform-shops .shop-status.is-disabled {
+  background: rgba(148, 163, 184, 0.14);
+  color: #475467;
+}
+
+.admin-platform-shops .shop-body {
+  padding: 0 16px 16px;
+  border-top: 1px solid rgba(148, 163, 184, 0.18);
+}
+
+.admin-platform-shops .checkbox-line {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  color: #475467;
+}
+
+.admin-platform-shops .checkbox-box {
+  min-height: 42px;
+  padding: 0 14px;
+  border-radius: 14px;
+  border: 1px solid rgba(86, 108, 138, 0.18);
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.admin-platform-shops .result-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.admin-platform-shops .result-card {
+  display: grid;
+  gap: 6px;
+  padding: 14px;
+  border-radius: 16px;
+  background: #f8fafc;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+}
+
+.admin-platform-shops .result-label {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.admin-platform-shops .result-card strong {
+  color: #1d3555;
+  font-size: 22px;
+}
+
+.admin-platform-shops .result-card p {
+  margin: 0;
+  color: #64748b;
+}
+
+.admin-platform-shops .compact-meta {
+  margin-top: 16px;
+}
+
+.admin-platform-shops .data-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 12px;
+}
+
+.admin-platform-shops .data-table th,
+.admin-platform-shops .data-table td {
+  padding: 12px 10px;
+  text-align: left;
+  border-bottom: 1px solid rgba(86, 108, 138, 0.08);
+  color: #334155;
+  vertical-align: top;
+}
+
+.admin-platform-shops .data-table th {
+  color: #64748b;
+  font-size: 13px;
+}
+
+.admin-platform-shops .empty-block,
+.admin-platform-shops .empty-inline {
+  color: #64748b;
+}
+
+.admin-platform-shops .error-copy {
+  color: #b42318;
+}
+
+.admin-platform-shops .debug-result {
+  margin: 0;
+  padding: 14px;
+  border-radius: 16px;
+  background: #0f172a;
+  color: #e2e8f0;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+@media (max-width: 1100px) {
+  .admin-platform-shops .overview-grid,
+  .admin-platform-shops .result-grid,
+  .admin-platform-shops .form-grid,
+  .admin-platform-shops .kuaishou-workspace,
+  .admin-platform-shops .kuaishou-debug-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 980px) {
+  .admin-platform-shops .hero-card,
+  .admin-platform-shops .section-title-row,
+  .admin-platform-shops .shop-actions,
+  .admin-platform-shops .shop-summary {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .admin-platform-shops .kuaishou-shop-head,
+  .admin-platform-shops .shop-title-row,
+  .admin-platform-shops .shop-tag-row,
+  .admin-platform-shops .kuaishou-debug-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .admin-platform-shops .shop-summary-side {
+    justify-items: start;
+  }
+}

apps/frontend/src/views/admin/AdminPlatformShopsView.vue

@@ -14,6 +14,7 @@ import {
 } from '@/services/admin'
 import { hasAdminRole } from '@/utils/admin-auth'
 import { formatAdminDateTime } from '@/utils/admin-time'
+import '@/styles/admin-platform-shops.css'
 
 const loading = ref(true)
 const isDevMode = import.meta.env.DEV
@@ -167,7 +168,7 @@ onMounted(loadConfigs)
 </script>
 
 <template>
-  <section class="admin-panel">
+  <section class="admin-panel admin-platform-shops">
     <header class="hero-card">
       <div class="hero-copy">
         <h1>平台配置</h1>
@@ -1146,558 +1147,3 @@ onMounted(loadConfigs)
   </section>
 </template>
 
-<style scoped>
-.admin-panel {
-  display: grid;
-  gap: 16px;
-}
-
-.hero-card,
-.meta-card,
-.table-card,
-.empty-block,
-.error-copy {
-  padding: 20px;
-  border-radius: 22px;
-  background: rgba(255, 255, 255, 0.94);
-  border: 1px solid rgba(86, 108, 138, 0.1);
-}
-
-.hero-card,
-.section-title-row,
-.hero-actions,
-.section-actions,
-.platform-head,
-.shop-summary,
-.shop-actions,
-.platform-switcher,
-.overview-grid,
-.result-grid {
-  display: flex;
-  gap: 12px;
-}
-
-.hero-card,
-.section-title-row,
-.shop-summary,
-.shop-actions {
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
-.hero-copy h1,
-.section-title-row h3 {
-  margin: 0;
-  color: #1d3555;
-}
-
-.hero-copy p,
-.section-title-row p {
-  margin: 8px 0 0;
-  color: #64748b;
-}
-
-.hero-actions,
-.section-actions,
-.platform-switcher {
-  flex-wrap: wrap;
-}
-
-.overview-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 16px;
-}
-
-.platform-overview-card {
-  appearance: none;
-  -webkit-appearance: none;
-  border: 1px solid rgba(86, 108, 138, 0.12);
-  background: rgba(255, 255, 255, 0.92);
-  border-radius: 20px;
-  padding: 18px;
-  text-align: left;
-  cursor: pointer;
-  display: grid;
-  gap: 10px;
-  transition: 0.2s ease;
-  width: 100%;
-  box-sizing: border-box;
-  font: inherit;
-  color: inherit;
-  outline: none;
-}
-
-.platform-overview-card:hover,
-.platform-overview-card.is-active {
-  border-color: rgba(37, 99, 235, 0.28);
-  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.08);
-}
-
-.platform-badge,
-.platform-tag,
-.switch-chip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 30px;
-  padding: 0 12px;
-  border-radius: 999px;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.platform-badge {
-  background: rgba(37, 99, 235, 0.1);
-  color: #2559a7;
-}
-
-.platform-tag {
-  background: rgba(15, 23, 42, 0.05);
-  color: #475467;
-}
-
-.platform-overview-card strong {
-  color: #1d3555;
-  font-size: 26px;
-  line-height: 1.1;
-}
-
-.platform-overview-card > span,
-.platform-metrics {
-  color: #64748b;
-}
-
-.platform-metrics {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-  font-size: 12px;
-}
-
-.switch-chip {
-  appearance: none;
-  -webkit-appearance: none;
-  border: 1px solid rgba(86, 108, 138, 0.12);
-  background: rgba(255, 255, 255, 0.94);
-  color: #475467;
-  cursor: pointer;
-  font: inherit;
-  outline: none;
-}
-
-.switch-chip.is-active {
-  background: #2563eb;
-  border-color: #2563eb;
-  color: #fff;
-}
-
-.meta-card,
-.meta-line,
-.cell-stack {
-  display: grid;
-  gap: 6px;
-}
-
-.meta-label {
-  color: #64748b;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.field-block {
-  display: grid;
-  gap: 8px;
-}
-
-.field-block span {
-  color: #475467;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.field-wide {
-  grid-column: 1 / -1;
-}
-
-.kuaishou-workspace,
-.kuaishou-debug-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr);
-  gap: 16px;
-}
-
-.kuaishou-shop-stack,
-.kuaishou-side-panel,
-.kuaishou-debug-panel {
-  display: grid;
-  gap: 14px;
-}
-
-.kuaishou-base-grid {
-  padding: 14px;
-  border-radius: 18px;
-  background:
-    radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 38%),
-    linear-gradient(180deg, rgba(239, 246, 255, 0.86), rgba(248, 250, 252, 0.96));
-  border: 1px solid rgba(148, 163, 184, 0.18);
-}
-
-.text-input,
-.text-area {
-  width: 100%;
-  min-height: 42px;
-  padding: 0 14px;
-  border-radius: 14px;
-  border: 1px solid rgba(86, 108, 138, 0.18);
-  background: rgba(255, 255, 255, 0.96);
-}
-
-.text-area {
-  min-height: 96px;
-  padding: 12px 14px;
-  resize: vertical;
-}
-
-.shop-card {
-  margin-top: 14px;
-  border-radius: 18px;
-  background: #f8fafc;
-  border: 1px solid rgba(148, 163, 184, 0.18);
-  overflow: hidden;
-}
-
-.shop-card:first-of-type {
-  margin-top: 0;
-}
-
-.shop-summary {
-  width: 100%;
-  border: 0;
-  padding: 16px;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-}
-
-.shop-summary-main,
-.shop-summary-side {
-  display: grid;
-  gap: 4px;
-}
-
-.shop-summary-side {
-  justify-items: end;
-}
-
-.shop-summary-main strong,
-.shop-toggle {
-  color: #1d3555;
-}
-
-.shop-summary-copy,
-.cell-subtle {
-  color: #64748b;
-  font-size: 12px;
-}
-
-.kuaishou-shop-card {
-  margin-top: 0;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
-  border-color: rgba(96, 165, 250, 0.18);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
-}
-
-.kuaishou-shop-card.is-active {
-  border-color: rgba(37, 99, 235, 0.34);
-  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.12);
-}
-
-.kuaishou-shop-card.is-expanded {
-  transform: translateY(-1px);
-}
-
-.kuaishou-shop-summary {
-  align-items: center;
-  gap: 16px;
-}
-
-.kuaishou-shop-head,
-.shop-title-row,
-.shop-tag-row,
-.kuaishou-debug-head {
-  display: flex;
-  gap: 10px;
-}
-
-.kuaishou-shop-head {
-  align-items: center;
-}
-
-.shop-title-row,
-.shop-tag-row,
-.kuaishou-debug-head {
-  flex-wrap: wrap;
-}
-
-.shop-title-row {
-  align-items: center;
-}
-
-.shop-avatar {
-  width: 54px;
-  height: 54px;
-  border-radius: 18px;
-  overflow: hidden;
-  background: linear-gradient(135deg, #dbeafe, #eff6ff);
-  color: #1d4ed8;
-  font-size: 20px;
-  font-weight: 800;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-  border: 1px solid rgba(37, 99, 235, 0.14);
-}
-
-.shop-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.shop-mini-tag {
-  display: inline-flex;
-  align-items: center;
-  min-height: 26px;
-  padding: 0 10px;
-  border-radius: 999px;
-  background: rgba(15, 23, 42, 0.05);
-  color: #475467;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.shop-mini-tag.is-ready {
-  background: rgba(22, 163, 74, 0.12);
-  color: #166534;
-}
-
-.shop-mini-tag.is-highlight {
-  background: rgba(37, 99, 235, 0.12);
-  color: #1d4ed8;
-}
-
-.kuaishou-shop-body {
-  padding-top: 16px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(248, 250, 252, 0.96));
-}
-
-.kuaishou-shop-actions {
-  margin-top: 14px;
-  padding-top: 14px;
-}
-
-.kuaishou-cookie-area {
-  min-height: 128px;
-  line-height: 1.6;
-}
-
-.kuaishou-side-panel {
-  align-content: start;
-}
-
-.kuaishou-side-card {
-  min-height: 132px;
-}
-
-.kuaishou-guide-card {
-  background:
-    radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 35%),
-    linear-gradient(180deg, rgba(239, 246, 255, 0.9), rgba(248, 250, 252, 0.98));
-}
-
-.kuaishou-guide-card p {
-  font-size: 13px;
-}
-
-.kuaishou-debug-panel {
-  padding: 16px;
-  border-radius: 20px;
-  border: 1px solid rgba(148, 163, 184, 0.16);
-  background: rgba(248, 250, 252, 0.76);
-}
-
-.kuaishou-debug-panel-soft {
-  background:
-    radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 34%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
-}
-
-.kuaishou-debug-head {
-  justify-content: space-between;
-  align-items: flex-start;
-}
-
-.kuaishou-debug-head strong {
-  display: block;
-  margin-top: 4px;
-  color: #1d3555;
-  font-size: 22px;
-}
-
-.shop-status {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 28px;
-  padding: 0 10px;
-  border-radius: 999px;
-  background: rgba(22, 163, 74, 0.12);
-  color: #166534;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.shop-status.is-disabled {
-  background: rgba(148, 163, 184, 0.14);
-  color: #475467;
-}
-
-.shop-body {
-  padding: 0 16px 16px;
-  border-top: 1px solid rgba(148, 163, 184, 0.18);
-}
-
-.checkbox-line {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  color: #475467;
-}
-
-.checkbox-box {
-  min-height: 42px;
-  padding: 0 14px;
-  border-radius: 14px;
-  border: 1px solid rgba(86, 108, 138, 0.18);
-  background: rgba(255, 255, 255, 0.96);
-}
-
-.result-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-  margin-top: 16px;
-}
-
-.result-card {
-  display: grid;
-  gap: 6px;
-  padding: 14px;
-  border-radius: 16px;
-  background: #f8fafc;
-  border: 1px solid rgba(148, 163, 184, 0.14);
-}
-
-.result-label {
-  color: #64748b;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.result-card strong {
-  color: #1d3555;
-  font-size: 22px;
-}
-
-.result-card p {
-  margin: 0;
-  color: #64748b;
-}
-
-.compact-meta {
-  margin-top: 16px;
-}
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 12px;
-}
-
-.data-table th,
-.data-table td {
-  padding: 12px 10px;
-  text-align: left;
-  border-bottom: 1px solid rgba(86, 108, 138, 0.08);
-  color: #334155;
-  vertical-align: top;
-}
-
-.data-table th {
-  color: #64748b;
-  font-size: 13px;
-}
-
-.empty-block,
-.empty-inline {
-  color: #64748b;
-}
-
-.error-copy {
-  color: #b42318;
-}
-
-.debug-result {
-  margin: 0;
-  padding: 14px;
-  border-radius: 16px;
-  background: #0f172a;
-  color: #e2e8f0;
-  overflow: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-size: 12px;
-  line-height: 1.6;
-}
-
-@media (max-width: 1100px) {
-  .overview-grid,
-  .result-grid,
-  .form-grid,
-  .kuaishou-workspace,
-  .kuaishou-debug-layout {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 980px) {
-  .hero-card,
-  .section-title-row,
-  .shop-actions,
-  .shop-summary {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .kuaishou-shop-head,
-  .shop-title-row,
-  .shop-tag-row,
-  .kuaishou-debug-head {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .shop-summary-side {
-    justify-items: start;
-  }
-}
-</style>