docs: explain stylesheet ownership, responsive rules and display boundaries

app/assets/styles/entry.Cs9kvuGi.css

@@ -1,3 +1,6 @@
+/* 全局基础样式：本地图标字体、主题变量、表单/弹窗、商品配置、列表及首页卡片。 */
+/* 导入方：nuxt.config.ts。 */
+/* 本地图标字体声明：URL对应public/icons中的字体，后续.pi字符映射依赖同一份字形表。 */
 @font-face {
   font-family: primeicons;
   font-display: block;
@@ -34,6 +37,7 @@
 .pi-spin {
   animation: 2s linear infinite fa-spin;
 }
+/* 尊重减少动态效果偏好：保留状态信息，降低或取消非必要动画。 */
 @media (prefers-reduced-motion: reduce) {
   .pi-spin {
     transition-duration: 0s;
@@ -43,6 +47,7 @@
     animation-delay: -1ms;
   }
 }
+/* 动画 fa-spin 的关键帧；动画名称与引用该名称的选择器需要同步维护。 */
 @keyframes fa-spin {
   0% {
     transform: rotate(0);
@@ -1128,6 +1133,7 @@
 .pi-spinner:before {
   content: "";
 }
+/* 全局设计变量在这里定义；业务样式通过变量读取主题，不应逐组件硬编码一套颜色。 */
 :root {
   --console-page-bg: #f8fafc;
   --console-panel-bg: #fff;
@@ -1155,14 +1161,17 @@
 :before {
   box-sizing: border-box;
 }
+/* 基础页面尺寸与滚动规则；后续滚动条能力检测与这里的布局配合。 */
 html {
   scrollbar-gutter: stable;
 }
+/* 按浏览器是否支持 not (scrollbar-gutter: stable) 分支处理滚动条布局，避免同一能力的两套规则同时生效。 */
 @supports not (scrollbar-gutter: stable) {
   html {
     overflow-y: scroll;
   }
 }
+/* 按浏览器是否支持 (scrollbar-gutter: stable) 分支处理滚动条布局，避免同一能力的两套规则同时生效。 */
 @supports (scrollbar-gutter: stable) {
   body.p-overflow-hidden {
     padding-right: 0 !important;
@@ -1185,6 +1194,7 @@ select,
 textarea {
   -webkit-tap-highlight-color: transparent;
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 [tabindex]:focus-visible,
 a:focus-visible,
 button:focus-visible {
@@ -1195,9 +1205,11 @@ img,
 video {
   max-width: 100%;
 }
+/* 第三方弹窗尺寸/滚动适配，作用于全站，修改前需检查各类业务对话框。 */
 .p-dialog {
   max-width: calc(100vw - 24px);
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .p-dialog-content {
   overflow-wrap: anywhere;
 }
@@ -1218,6 +1230,7 @@ video {
 .p-datatable-header-cell {
   white-space: nowrap;
 }
+/* 视口条件 (width<=768px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=768px) {
   .p-datatable-table:not(:has(.p-datatable-empty-message)) {
     min-width: 680px;
@@ -1231,6 +1244,7 @@ video {
     display: none;
   }
 }
+/* 尊重减少动态效果偏好：保留状态信息，降低或取消非必要动画。 */
 @media (prefers-reduced-motion: reduce) {
   *,
   :after,
@@ -1254,6 +1268,7 @@ video {
   background: var(--p-yellow-950);
   color: var(--p-yellow-300);
 }
+/* 以下为商品配置页共享控件和汇总区域，不绑定某一种供应商模块。 */
 .config-options,
 .config-page {
   flex-direction: column;
@@ -1671,18 +1686,21 @@ video {
 .config-mobile-total {
   display: none;
 }
+/* 视口条件 (width>=1024px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width>=1024px) {
   .config-summary-wrap {
     position: sticky;
     top: 76px;
   }
 }
+/* 视口条件 (width<=1199px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=1199px) {
   .config-choices,
   .config-page .image-groups {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
+/* 视口条件 (width<=1023px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=1023px) {
   .config-layout {
     grid-template-columns: minmax(0, 1fr);
@@ -1753,6 +1771,7 @@ video {
     flex-shrink: 0;
   }
 }
+/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=639px) {
   .config-choices,
   .config-page .image-groups {
@@ -1781,6 +1800,7 @@ video {
     margin-bottom: 24px;
   }
 }
+/* 尊重减少动态效果偏好：保留状态信息，降低或取消非必要动画。 */
 @media (prefers-reduced-motion: reduce) {
   .config-page .pi-spin {
     animation: none;
@@ -1809,6 +1829,7 @@ video {
 .config-page > .config-loading-shell {
   padding-bottom: 0;
 }
+/* 以下为业务列表共享外壳；查询、空态、表格与分页需要一起维持窄屏可用性。 */
 .list-page {
   flex-direction: column;
   gap: 24px;
@@ -2005,6 +2026,7 @@ video {
   gap: 12px;
   display: flex;
 }
+/* 视口条件 (width<=768px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=768px) {
   .list-table:has(.p-datatable-mask)
     .p-datatable-table:has(.p-datatable-empty-message) {
@@ -2059,6 +2081,7 @@ video {
     width: 100%;
   }
 }
+/* 账号管理/绑定页面的共享布局，避免在多个路由重复维护相同排版。 */
 .account-management-page {
   flex-direction: column;
   gap: 21px;
@@ -2155,6 +2178,7 @@ video {
   margin: 6px 0 0;
   font-size: 0.9375rem;
 }
+/* 视口条件 (width<=640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=640px) {
   .account-management-actions {
     width: 100%;
@@ -2169,6 +2193,7 @@ video {
     margin-left: auto;
   }
 }
+/* 首页网格与卡片共享样式；各首页子面板在自身样式文件补充细节。 */
 .home-page {
   flex-direction: column;
   gap: 21px;
@@ -2363,6 +2388,7 @@ button.home-row:hover {
   outline: 2px solid var(--p-primary-color);
   outline-offset: 2px;
 }
+/* 视口条件 (width<=1023px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=1023px) {
   .home-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2383,6 +2409,7 @@ button.home-row:hover {
     grid-column: span 1;
   }
 }
+/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=639px) {
   .home-grid {
     flex-direction: column;