docs: explain stylesheet ownership, responsive rules and display boundaries

app/assets/styles/AuthProviders.CgAWouSf.css

@@ -1,3 +1,5 @@
+/* 第三方扫码登录：渠道切换、二维码占位/失效遮罩及客户端入口。 */
+/* 导入方：app/components/AuthProviders.vue、app/pages/login.vue。 */
 .auth-providers[data-v-9d0ee2f9] {
   border-left: 1px solid var(--p-content-border-color);
   background: var(--p-content-hover-background);
@@ -87,6 +89,7 @@
   opacity: 0.45;
   cursor: not-allowed;
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .provider-tabs button[data-v-9d0ee2f9]:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: -2px;
@@ -98,6 +101,7 @@
   min-height: 44px;
   font-size: 1em;
 }
+/* 视口条件 (width<=760px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=760px) {
   .auth-providers[data-v-9d0ee2f9] {
     border-left: 0;
@@ -113,6 +117,7 @@
     height: 152px;
   }
 }
+/* 尊重减少动态效果偏好：保留状态信息，降低或取消非必要动画。 */
 @media (prefers-reduced-motion: reduce) {
   .provider-tab-indicator[data-v-9d0ee2f9] {
     transition: none;

app/assets/styles/BackendNavEntry.Bx6IPica.css

@@ -1,3 +1,5 @@
+/* 后端配置的单条导航：外链图标与不可用项的视觉区分。 */
+/* 导入方：app/components/BackendNavEntry.vue、app/components/BackendNavigation.vue、app/layouts/default.vue。 */
 .configured-external[data-v-b0009398],
 .nav-unavailable[data-v-b0009398] {
   align-items: center;

app/assets/styles/BackendNavigation.CEj4LnzI.css

@@ -1,3 +1,5 @@
+/* 后端导航加载状态：错误提示及占位骨架。 */
+/* 导入方：app/components/BackendNavigation.vue、app/layouts/default.vue。 */
 .nav-load-error[data-v-02b58e93] {
   color: var(--p-text-muted-color);
   justify-content: space-between;

app/assets/styles/BuildUpdateNotice.CuqdqvlF.css

@@ -1,3 +1,5 @@
+/* 构建更新通知：固定提示条及用户确认/刷新操作区。 */
+/* 导入方：app/components/BuildUpdateNotice.vue、nuxt.config.ts。 */
 .build-notice[data-v-fc2ba853] {
   z-index: 1100;
   border: 1px solid var(--p-content-border-color);
@@ -22,6 +24,7 @@
   gap: 8px;
   display: flex;
 }
+/* 视口条件 (width<=500px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=500px) {
   .build-notice[data-v-fc2ba853] {
     bottom: 12px;

app/assets/styles/CaptchaField.BSN3ZbsD.css

@@ -1,3 +1,5 @@
+/* 图形验证码字段：输入、图片与换图行布局。 */
+/* 导入方：app/components/CaptchaField.vue、app/components/SecurityVerificationDialog.vue、app/components/instance/DcimActions.vue、app/components/instance/DcimBilling.vue、app/components/instance/DcimManage.vue、app/components/instance/InstanceAccess.vue、app/components/instance/InstanceBilling.vue、app/components/instance/InstanceSmsCode.vue、app/pages/account/index.vue、app/pages/forgot-password.vue、app/pages/login.vue、app/pages/oauth/bind.vue、app/pages/register.vue、app/pages/transfer/index.vue。 */
 .field[data-v-5ba6618f] {
   flex-direction: column;
   gap: 6px;

app/assets/styles/ChartBox.CYP_mhat.css

@@ -1,3 +1,5 @@
+/* 图表容器：限制子图表宽度并裁剪溢出，实际高度由组件传入。 */
+/* 导入方：app/components/ChartBox.vue、app/components/home/HomeConsumeTrend.vue、app/components/instance/CommonManage.vue、app/pages/servers/server.vue。 */
 .chart-box[data-v-c86d748f] {
   width: 100%;
   min-width: 0;

app/assets/styles/ClientLevelDialog.DcYabp-W.css

@@ -1,3 +1,5 @@
+/* 会员等级弹窗：等级指标、描述和加载状态。 */
+/* 导入方：app/components/ClientLevelDialog.vue、app/pages/account/index.vue。 */
 .lvl-state[data-v-7c5ffb84] {
   text-align: center;
   color: var(--p-text-muted-color, #94a3b8);
@@ -45,6 +47,7 @@
 .lvl-value[data-v-7c5ffb84] {
   font-size: 1.25rem;
 }
+/* 视口条件 (width<=480px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=480px) {
   .lvl-grid[data-v-7c5ffb84] {
     grid-template-columns: minmax(0, 1fr);

app/assets/styles/CloudAccessExtras.CnBJlFAZ.css

@@ -1,3 +1,5 @@
+/* 云实例附加访问信息：键值表格与行内操作。 */
+/* 导入方：app/components/instance/CloudAccessExtras.vue、app/components/instance/InstanceAccess.vue。 */
 .cloud-extras[data-v-94e7f654] {
   flex-direction: column;
   gap: 14px;
@@ -33,6 +35,7 @@
   padding: 14px;
   font-weight: 600;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .kv > div[data-v-94e7f654] {
   overflow-wrap: anywhere;
   min-width: 0;
@@ -57,6 +60,7 @@
   font-size: 0.875rem;
   line-height: 1.6;
 }
+/* 视口条件 (width<=480px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=480px) {
   .kv[data-v-94e7f654] {
     grid-template-columns: 100px minmax(0, 1fr);

app/assets/styles/CloudProductPicker.CAm9rmUl.css

@@ -1,3 +1,5 @@
+/* 云商品选择器：区域/商品选项、选中状态及空目录提示。 */
+/* 导入方：app/components/config/CloudProductPicker.vue、app/pages/products/cloud-server.vue。 */
 .cloud-product-picker[data-v-a438862d] {
   flex-direction: column;
   gap: 24px;
@@ -32,6 +34,7 @@
   gap: 14px;
   display: grid;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .product-option[data-v-a438862d],
 .zone-option[data-v-a438862d] {
   border: 1px solid var(--p-content-border-color);
@@ -88,6 +91,7 @@
   opacity: 0.55;
   cursor: not-allowed;
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .product-option[data-v-a438862d]:focus-visible,
 .zone-option[data-v-a438862d]:focus-visible {
   outline: 2px solid var(--p-primary-color);
@@ -108,6 +112,7 @@
   color: var(--p-primary-color);
   text-decoration: none;
 }
+/* 视口条件 (width<=767px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=767px) {
   .product-options[data-v-a438862d],
   .zone-options[data-v-a438862d] {
@@ -115,6 +120,7 @@
     gap: 8px;
   }
 }
+/* 视口条件 (width<=390px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=390px) {
   .product-options[data-v-a438862d] {
     grid-template-columns: minmax(0, 1fr);

app/assets/styles/CommonConfig.Cfik-oMe.css

@@ -1,3 +1,5 @@
+/* 通用商品配置：级联/重复项、磁盘网格和周期异常提示。 */
+/* 导入方：app/components/config/CommonConfig.vue、app/pages/products/[id].vue、app/pages/products/cloud-server.vue。 */
 .cycle-warn[data-v-bc59a2b1] {
   flex-shrink: 0;
 }
@@ -39,6 +41,7 @@
   gap: 16px;
   display: grid;
 }
+/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=639px) {
   .storage-grid[data-v-bc59a2b1] {
     grid-template-columns: minmax(0, 1fr);

app/assets/styles/CommonManage.qcc2l13i.css

@@ -1,3 +1,5 @@
+/* 通用实例管理：标签页、表单、操作区及图表容器。 */
+/* 导入方：app/components/instance/CommonManage.vue、app/pages/servers/server.vue。 */
 .common-manage[data-v-34fd3c5d] {
   border: 1px solid var(--p-content-border-color);
   background: var(--p-content-background);
@@ -44,6 +46,7 @@
 .muted[data-v-34fd3c5d] {
   color: var(--p-text-muted-color);
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .common-grid dd[data-v-34fd3c5d] {
   overflow-wrap: anywhere;
   margin: 8px 0 0;
@@ -74,6 +77,7 @@
 .common-body[data-v-34fd3c5d] .p-datatable {
   max-width: 100%;
 }
+/* 视口条件 (width<=600px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=600px) {
   .common-body[data-v-34fd3c5d] {
     padding: 16px;

app/assets/styles/CommonUpgrade.C8sZ-ExM.css

@@ -1,3 +1,5 @@
+/* 通用商品升级：配置选项和升级工具栏。 */
+/* 导入方：app/components/instance/CommonManage.vue、app/components/instance/CommonUpgrade.vue、app/pages/servers/server.vue。 */
 .common-upgrade[data-v-830ee5e4],
 .upgrade-option[data-v-830ee5e4] {
   gap: 14px;

app/assets/styles/ConfigBandwidth.CWSH1WJZ.css

@@ -1,3 +1,5 @@
+/* 带宽配置：容量单位、滑块和说明文本。 */
+/* 导入方：app/components/config/ConfigBandwidth.vue、app/components/config/JyCloudConfig.vue、app/components/config/KkyEcsConfig.vue、app/components/config/MfCloudConfig.vue、app/components/instance/DcimManage.vue、app/components/instance/DcimUpgrade.vue、app/components/instance/InstanceBilling.vue、app/components/kkyecs/KkyUpgrade.vue、app/components/mfcloud/MfCloudResourceUpgrade.vue、app/pages/products/[id].vue、app/pages/products/cloud-server.vue。 */
 .bandwidth-field[data-v-45a9c613] {
   flex-direction: column;
   gap: 12px;
@@ -30,6 +32,7 @@
 .bandwidth-help > i[data-v-45a9c613] {
   font-size: 1rem;
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .bandwidth-help[data-v-45a9c613]:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: 3px;
@@ -103,6 +106,7 @@
   height: 19px;
   box-shadow: 0 1px 2px #0000002e;
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .bandwidth-slider[data-v-45a9c613]:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: 9px;
@@ -113,6 +117,7 @@
 .bandwidth-capacity.is-disabled[data-v-45a9c613] {
   opacity: 0.6;
 }
+/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=639px) {
   .bandwidth-field[data-v-45a9c613] {
     max-width: none;

app/assets/styles/ConfigDiskAdd.C92e9ZuF.css

@@ -1,3 +1,5 @@
+/* 新增磁盘入口：与已有磁盘卡片对齐的操作区域。 */
+/* 导入方：app/components/config/ConfigDiskAdd.vue、app/components/config/JyCloudConfig.vue、app/components/config/KkyEcsConfig.vue、app/components/config/MfCloudConfig.vue、app/pages/products/[id].vue、app/pages/products/cloud-server.vue。 */
 .storage-add[data-v-68361f8e] {
   border: 2px dashed var(--p-content-border-color);
   width: 100%;
@@ -30,6 +32,7 @@
   color: var(--p-primary-color);
   background: var(--p-highlight-background);
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .storage-add[data-v-68361f8e]:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: 3px;
@@ -38,6 +41,7 @@
   cursor: not-allowed;
   opacity: 0.55;
 }
+/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=639px) {
   .storage-add[data-v-68361f8e] {
     min-height: 170px;

app/assets/styles/ConfigDiskCard.Dx9IqqQ_.css

@@ -1,3 +1,5 @@
+/* 磁盘配置卡片：容量输入、滑块、说明和移除操作。 */
+/* 导入方：app/components/config/CommonConfig.vue、app/components/config/ConfigDiskCard.vue、app/components/config/FinanceConfig.vue、app/components/config/JyCloudConfig.vue、app/components/config/KkyEcsConfig.vue、app/components/config/MfCloudConfig.vue、app/components/config/MfDcimConfig.vue、app/pages/products/[id].vue、app/pages/products/cloud-server.vue、app/pages/products/dedicated-server/customize.vue。 */
 .storage-field[data-v-83c644c5] {
   min-width: 0;
 }
@@ -27,6 +29,7 @@
   min-height: 20px;
   display: flex;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .storage-card-header strong[data-v-83c644c5] {
   color: var(--p-highlight-color);
   overflow-wrap: anywhere;
@@ -103,6 +106,7 @@
   height: 19px;
   box-shadow: 0 1px 2px #0000002e;
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .storage-slider[data-v-83c644c5]:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: 9px;
@@ -144,6 +148,7 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=639px) {
   .storage-card[data-v-83c644c5] {
     gap: 20px;

app/assets/styles/ConfigResourceOption.Dj4VopnA.css

@@ -1,3 +1,5 @@
+/* 资源范围选项：范围控件与辅助说明。 */
+/* 导入方：app/components/config/ConfigResourceOption.vue、app/components/config/JyCloudConfig.vue、app/components/config/MfCloudConfig.vue、app/pages/products/[id].vue、app/pages/products/cloud-server.vue。 */
 .resource-range[data-v-5a04c843] {
   flex-wrap: wrap;
   align-items: center;

app/assets/styles/ConsoleLegalFooter.DAYWmXIB.css

@@ -1,3 +1,5 @@
+/* 控制台法律页脚：备案/协议链接与打印布局。 */
+/* 导入方：app/components/ConsoleLegalFooter.vue、app/layouts/default.vue、app/layouts/public-order.vue。 */
 .console-legal-footer[data-v-81b185f4] {
   border-top: 1px solid var(--console-panel-border, #e2e8f0);
   color: var(--p-text-muted-color, #64748b);
@@ -15,11 +17,13 @@
   padding: 18px 14px 22px;
   display: flex;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .legal-footer-inner[data-v-81b185f4] > * {
   overflow-wrap: anywhere;
   min-width: 0;
   max-width: 100%;
 }
+/* 打印介质覆盖：独立处理纸张上的显隐和排版，不直接沿用屏幕布局。 */
 @media print {
   .console-legal-footer[data-v-81b185f4] {
     display: none;
@@ -35,11 +39,13 @@
   text-underline-offset: 3px;
   text-decoration: underline;
 }
+/* 视口条件 (width<=1023px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=1023px) {
   .main:has(.config-mobile-total) .console-legal-footer {
     margin-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
   }
 }
+/* 视口条件 (width<=640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=640px) {
   .legal-footer-inner[data-v-81b185f4] {
     flex-direction: column;

app/assets/styles/DcimActions.Da2op5wy.css

@@ -1,8 +1,11 @@
+/* 独立服务器操作确认：目标说明、表单与风险确认勾选。 */
+/* 导入方：app/components/instance/DcimActions.vue、app/components/instance/DcimManage.vue。 */
 .action-form[data-v-a1044895] {
   flex-direction: column;
   gap: 10px;
   display: flex;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .target[data-v-a1044895] {
   overflow-wrap: anywhere;
   margin: 0 0 4px;
@@ -29,6 +32,7 @@
 .muted[data-v-a1044895] {
   color: var(--p-text-muted-color);
 }
+/* 视口条件 (width<=480px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=480px) {
   .form-grid[data-v-a1044895] {
     grid-template-columns: 1fr;

app/assets/styles/DcimBilling.QV7PUjnH.css

@@ -1,3 +1,5 @@
+/* 独立服务器账务：计费键值、关联订单和操作表单。 */
+/* 导入方：app/components/instance/DcimBilling.vue。 */
 .billing[data-v-9a8e05c2] {
   flex-direction: column;
   gap: 14px;
@@ -33,6 +35,7 @@ dt[data-v-9a8e05c2] {
   color: var(--p-text-muted-color);
   font-weight: 600;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 dd[data-v-9a8e05c2] {
   overflow-wrap: anywhere;
   flex-wrap: wrap;
@@ -69,6 +72,7 @@ dd small[data-v-9a8e05c2] {
 .form p[data-v-9a8e05c2] {
   margin: 0;
 }
+/* 视口条件 (width<=600px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=600px) {
   .rows > div[data-v-9a8e05c2] {
     grid-template-columns: 95px minmax(0, 1fr);

app/assets/styles/DcimDefence.BYaQccXZ.css

@@ -1,3 +1,5 @@
+/* 独立服务器防御设置：状态、配置失败与操作表单。 */
+/* 导入方：app/components/instance/DcimDefence.vue。 */
 .defence[data-v-2f38c55b],
 .form[data-v-2f38c55b] {
   flex-direction: column;
@@ -53,6 +55,7 @@ dd[data-v-2f38c55b] {
   margin: 0;
   padding: 28px;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .form p[data-v-2f38c55b],
 .muted[data-v-2f38c55b] {
   overflow-wrap: anywhere;
@@ -65,6 +68,7 @@ dd[data-v-2f38c55b] {
   gap: 7px;
   display: flex;
 }
+/* 视口条件 (width<=600px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=600px) {
   .rows > div[data-v-2f38c55b] {
     grid-template-columns: 100px 1fr;

app/assets/styles/DcimDomains.BT2s5hGW.css

@@ -1,3 +1,5 @@
+/* 独立服务器域名管理：工具栏和空列表提示。 */
+/* 导入方：app/components/instance/DcimDomains.vue。 */
 .domains[data-v-6c2c5ee1] {
   flex-direction: column;
   gap: 14px;

app/assets/styles/DcimManage.BlqFeSOi.css

@@ -1,3 +1,5 @@
+/* 独立服务器综合管理：概览卡片、资源、访问凭据、网络与记录列表。 */
+/* 导入方：app/components/instance/DcimManage.vue。 */
 .compact-monitor-slot[data-v-e2d08c68] {
   min-width: 0;
   min-height: 154px;
@@ -104,6 +106,7 @@
   color: var(--p-text-muted-color);
   flex-shrink: 0;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .compact-rows dd[data-v-e2d08c68] {
   overflow-wrap: anywhere;
   text-align: right;
@@ -143,6 +146,7 @@
   gap: 7px;
   display: flex;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .resource-list dd[data-v-e2d08c68] {
   overflow-wrap: anywhere;
   text-align: right;
@@ -363,6 +367,7 @@
 .mono[data-v-e2d08c68] {
   font-family: var(--font-mono, monospace);
 }
+/* 视口条件 (width<=1199px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=1199px) {
   .overview[data-v-e2d08c68],
   .stack[data-v-e2d08c68] {
@@ -375,6 +380,7 @@
     font-size: 0.9375rem;
   }
 }
+/* 视口条件 (width<=950px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=950px) {
   .overview[data-v-e2d08c68] {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -385,6 +391,7 @@
     display: grid;
   }
 }
+/* 视口条件 (width<=600px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=600px) {
   .overview[data-v-e2d08c68] {
     grid-template-columns: 1fr;

app/assets/styles/DcimMonitor.CiStTCbZ.css

@@ -1,3 +1,5 @@
+/* 独立服务器监控：图表视口、入站/出站图例、空态与失败态。 */
+/* 导入方：app/components/instance/DcimMonitor.vue。 */
 .chart-viewport[data-v-eb47944f] {
   min-width: 0;
 }

app/assets/styles/DcimReinstallStatus.CuXeXmZ3.css

@@ -1,3 +1,5 @@
+/* 重装系统任务进度：任务状态与错误反馈。 */
+/* 导入方：app/components/instance/DcimManage.vue、app/components/instance/DcimReinstallStatus.vue。 */
 .task-status[data-v-d99d9473] {
   flex-wrap: wrap;
   align-items: center;
@@ -12,6 +14,7 @@
   color: var(--p-red-600);
   overflow: hidden;
 }
+/* 视口条件 (width<=600px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=600px) {
   .task-status[data-v-d99d9473] {
     align-content: center;

app/assets/styles/DcimUpgrade.DaLApYFa.css

@@ -1,3 +1,5 @@
+/* 独立服务器升级面板的基础排列。 */
+/* 导入方：app/components/instance/DcimManage.vue、app/components/instance/DcimUpgrade.vue。 */
 .dcim-upgrade[data-v-790898bc] {
   gap: 14px;
   display: grid;

app/assets/styles/FinanceConfig.CLwX1CC8.css

@@ -1,3 +1,6 @@
+/* 财务模块商品配置：必填标记、磁盘网格和固定容量展示。 */
+/* 导入方：app/components/config/FinanceConfig.vue、app/pages/products/[id].vue、app/pages/products/cloud-server.vue。 */
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .hint[data-v-1ac7876b] {
   color: var(--p-text-muted-color);
   overflow-wrap: anywhere;
@@ -27,6 +30,7 @@
   color: var(--p-text-muted-color);
   font-size: 1rem;
 }
+/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=639px) {
   .storage-grid[data-v-1ac7876b] {
     grid-template-columns: minmax(0, 1fr);

app/assets/styles/FlowPacketPanel.-RJSx13z.css

@@ -1,3 +1,5 @@
+/* 流量包面板：剩余包列表、可购卡片与不可用状态。 */
+/* 导入方：app/components/instance/DcimManage.vue、app/components/instance/FlowPacketPanel.vue、app/components/instance/InstanceManage.vue、app/components/instance/InstanceNetwork.vue、app/components/instance/InstanceOverview.vue、app/components/instance/InstanceServiceInfo.vue、app/pages/servers/server.vue。 */
 .block[data-v-ca0029df] {
   flex-direction: column;
   gap: 14px;
@@ -29,6 +31,7 @@
   font-size: 1rem;
   display: grid;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .kv[data-v-ca0029df] > * {
   overflow-wrap: anywhere;
   min-width: 0;
@@ -62,6 +65,7 @@
   padding: 0;
   font-size: 1rem;
 }
+/* 视口条件 (width<=767px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=767px) {
   .kv[data-v-ca0029df] {
     grid-template-columns: 100px minmax(0, 1fr);

app/assets/styles/GeetestField.DiieTibK.css

@@ -1,3 +1,5 @@
+/* 极验入口：验证码触发按钮的可见状态。 */
+/* 导入方：app/components/CaptchaField.vue、app/components/GeetestField.vue、app/components/SecurityVerificationDialog.vue、app/components/instance/DcimActions.vue、app/components/instance/DcimBilling.vue、app/components/instance/DcimManage.vue、app/components/instance/InstanceAccess.vue、app/components/instance/InstanceBilling.vue、app/components/instance/InstanceSmsCode.vue、app/pages/account/index.vue、app/pages/forgot-password.vue、app/pages/login.vue、app/pages/oauth/bind.vue、app/pages/register.vue、app/pages/transfer/index.vue。 */
 .geetest-field[data-v-4cd14cdc] {
   flex-direction: column;
   gap: 8px;
@@ -21,6 +23,7 @@
 .geetest-trigger[data-v-4cd14cdc]:hover:not(:disabled) {
   border-color: var(--p-primary-color);
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .geetest-trigger[data-v-4cd14cdc]:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: 2px;

app/assets/styles/GenericOAuthProviders.Bv8oNwXP.css

@@ -1,3 +1,5 @@
+/* 第三方登录入口：多渠道按钮的排列与间距。 */
+/* 导入方：app/components/GenericOAuthProviders.vue、app/pages/login.vue。 */
 .oauth-providers[data-v-45e5a5aa] {
   text-align: center;
   gap: 12px;

app/assets/styles/GlobalSearch.BQqObidy.css

@@ -1,3 +1,5 @@
+/* 全局搜索浮层：查询框、分组结果、加载/错误/重试状态。 */
+/* 导入方：app/components/GlobalSearch.vue。 */
 .gs[data-v-bc4d898a] {
   margin-right: 4px;
   position: relative;
@@ -64,6 +66,7 @@
   padding: 6px;
   text-decoration: underline;
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .gs-item[data-v-bc4d898a]:focus-visible,
 .gs-retry[data-v-bc4d898a]:focus-visible {
   outline: 2px solid var(--p-primary-color);

app/assets/styles/HomeConsumeTrend.DfrmEdD9.css

@@ -1,3 +1,5 @@
+/* 首页消费趋势：图表占位区域与容器尺寸。 */
+/* 导入方：app/components/home/HomeConsumeTrend.vue。 */
 .chart-wrap[data-v-90c11ad2] {
   padding: 0 10px 10px;
 }

app/assets/styles/HomeExpiringPanel.Ckflw2Hv.css

@@ -1,3 +1,5 @@
+/* 首页到期资源：资源列表与临近到期徽标。 */
+/* 导入方：app/components/home/HomeExpiringPanel.vue、app/pages/index.vue。 */
 .home-list[data-v-9017f053] {
   padding: 0 18px 14px;
 }

app/assets/styles/HomeNoticePanel.e5-qgzAs.css

@@ -1,3 +1,5 @@
+/* 首页公告：骨架、标题列表及公告详情内容。 */
+/* 导入方：app/components/home/HomeNoticePanel.vue、app/pages/index.vue。 */
 .home-list[data-v-a93c47c1] {
   padding: 0 18px;
 }
@@ -30,6 +32,7 @@
 .notice-row:hover .notice-title[data-v-a93c47c1] {
   color: var(--p-primary-color, #0052d9);
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .notice-row[data-v-a93c47c1]:focus-visible {
   outline: 2px solid var(--p-primary-color, #0052d9);
   outline-offset: -2px;
@@ -40,6 +43,7 @@
   margin-bottom: 12px;
   font-size: 0.9375rem;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .detail-content[data-v-a93c47c1] {
   overflow-wrap: anywhere;
   font-size: 1rem;

app/assets/styles/HomeReferralPanel.DsgN33ME.css

@@ -1,3 +1,5 @@
+/* 首页推广卡片：余额、邀请统计、空态及窄容器排版。 */
+/* 导入方：app/components/home/HomeReferralPanel.vue、app/pages/index.vue。 */
 .home-referral[data-v-8690c3a5] {
   container-type: inline-size;
 }
@@ -27,6 +29,7 @@
   font-size: 0.875rem;
   line-height: 1.286rem;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .referral-overview dd[data-v-8690c3a5],
 .referral-stats dd[data-v-8690c3a5] {
   font-variant-numeric: tabular-nums;
@@ -132,6 +135,7 @@
   margin-top: 18px;
   display: grid;
 }
+/* 容器条件 (width<=380px) 下调整内部排列，判断的是容器可用宽度，不是整个视口。 */
 @container (width<=380px) {
   .referral-body[data-v-8690c3a5] {
     gap: 20px;

app/assets/styles/HomeServerPanel.Do7AgMDx.css

@@ -1,3 +1,5 @@
+/* 首页服务器卡片：资源分类标签、列表骨架及分页。 */
+/* 导入方：app/components/home/HomeServerPanel.vue、app/pages/index.vue。 */
 .home-tabs[data-v-7ce76df7],
 .server-head[data-v-7ce76df7] {
   border-bottom: 1px solid var(--p-content-border-color);
@@ -76,6 +78,7 @@
 .server-pagination[data-v-7ce76df7] .p-paginator {
   background: 0 0;
 }
+/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=639px) {
   .server-head[data-v-7ce76df7] {
     flex-wrap: wrap;

app/assets/styles/HomeTicketPanel.LxPesukM.css

@@ -1,3 +1,5 @@
+/* 首页工单卡片：列表骨架、工单行及状态标记。 */
+/* 导入方：app/components/home/HomeTicketPanel.vue、app/pages/index.vue。 */
 .home-list[data-v-bacdfa58] {
   padding: 0 18px;
 }

app/assets/styles/HomeTicketStat.C4kzybrY.css

@@ -1,3 +1,5 @@
+/* 首页工单统计：统计网格、数字和分类名称。 */
+/* 导入方：app/components/home/HomeTicketStat.vue。 */
 .stat-grid[data-v-6971a1b9] {
   grid-template-columns: 1fr 1fr;
   gap: 8px;

app/assets/styles/HomeWalletCard.C5SHzGlJ.css

@@ -1,3 +1,5 @@
+/* 首页钱包卡片：余额展示及单/多操作按钮排列。 */
+/* 导入方：app/components/home/HomeWalletCard.vue、app/pages/index.vue。 */
 .wallet-body[data-v-0dbd1f86] {
   flex-direction: column;
   flex: 1;
@@ -28,6 +30,7 @@
 .wallet-actions[data-v-0dbd1f86] .p-button {
   min-height: 36px;
 }
+/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=639px) {
   .wallet-body[data-v-0dbd1f86] {
     padding-top: 28px;

app/assets/styles/HostList.B3U15sJm.css

@@ -1,3 +1,5 @@
+/* 资源列表：备注编辑、流量进度、批量确认及续费金额区域。 */
+/* 导入方：app/components/HostList.vue、app/pages/cloud-servers/index.vue、app/pages/dedicated-servers/index.vue。 */
 .traffic-error[data-v-e23fddb0] {
   color: var(--p-text-muted-color);
   align-items: center;
@@ -22,6 +24,7 @@
 .catalog-empty-action[data-v-e23fddb0]:hover {
   background: var(--p-primary-hover-color);
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .catalog-empty-action[data-v-e23fddb0]:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: 3px;
@@ -52,6 +55,7 @@
 .host-detail-link[data-v-e23fddb0]:hover {
   text-decoration: underline;
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .host-detail-link[data-v-e23fddb0]:focus-visible {
   outline: 2px solid var(--p-primary-color, #0052d9);
   outline-offset: 4px;
@@ -66,6 +70,7 @@
   max-width: 280px;
   display: flex;
 }
+/* 备注使用按钮样式而非普通文本，保留键盘焦点和可点击反馈。 */
 .host-notes-edit[data-v-e23fddb0] {
   max-width: 100%;
   min-height: 24px;
@@ -115,6 +120,7 @@
 .table-scroll-hint[data-v-e23fddb0] {
   display: none;
 }
+/* 流量显示区域：区分进度、周期、异常与无限流量，不用同一根进度条代表所有状态。 */
 .host-traffic[data-v-e23fddb0] {
   --traffic-accent: var(--p-green-600, #16a34a);
   flex-direction: column;
@@ -217,6 +223,7 @@
   color: var(--p-text-muted-color, #94a3b8);
   font-size: 0.9375rem;
 }
+/* 批量操作与续费弹窗区域；数量/金额由脚本计算，这里仅控制展示。 */
 .batch-dlg[data-v-e23fddb0] {
   flex-direction: column;
   gap: 16px;
@@ -290,6 +297,7 @@
   flex-shrink: 0;
   font-size: 0.9375rem;
 }
+/* 视口条件 (width<=768px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=768px) {
   .list-toolbar-right > .host-search[data-v-e23fddb0] {
     flex-basis: 100%;

app/assets/styles/InstanceAccess.DIZBrksv.css

@@ -1,3 +1,5 @@
+/* 实例访问管理：凭据、修复/重装选项、系统选择及风险确认。 */
+/* 导入方：app/components/instance/InstanceAccess.vue。 */
 .ac[data-v-cd28d8b4] {
   gap: 42px;
 }
@@ -45,6 +47,7 @@
   padding: 14px;
   font-weight: 600;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .kv > div[data-v-cd28d8b4] {
   overflow-wrap: anywhere;
   min-width: 0;
@@ -112,6 +115,7 @@
   font-size: 0.875rem;
   line-height: 1.6;
 }
+/* 重装系统表单按镜像、登录方式、磁盘处理排列；此处的视觉确认不能替代接口安全验证。 */
 .re-form[data-v-cd28d8b4] {
   flex-direction: column;
   gap: 21px;
@@ -262,6 +266,7 @@
   font-size: 1rem;
   line-height: 1.7;
 }
+/* 视口条件 (width<=480px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=480px) {
   .kv[data-v-cd28d8b4] {
     grid-template-columns: 100px minmax(0, 1fr);

app/assets/styles/InstanceBilling.CvIGLT2J.css

@@ -1,3 +1,5 @@
+/* 实例计费管理：续费/升级信息、自动续费与退款状态。 */
+/* 导入方：app/components/instance/InstanceBilling.vue。 */
 .bill[data-v-4e83e0f6] {
   gap: 28px;
 }
@@ -38,6 +40,7 @@
   padding: 14px;
   font-weight: 600;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .kv[data-v-4e83e0f6] > :last-child {
   overflow-wrap: anywhere;
   min-width: 0;
@@ -79,11 +82,13 @@
   border-radius: 6px;
   padding: 14px;
 }
+/* 视口条件 (width<=767px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=767px) {
   .kv[data-v-4e83e0f6] {
     grid-template-columns: 100px minmax(0, 1fr);
   }
 }
+/* 自动续费状态与操作区域，实际开关结果以接口回读为准。 */
 .auto-renew[data-v-4e83e0f6] {
   align-items: center;
   gap: 10px;

app/assets/styles/InstanceDisks.Ca7NZxYd.css

@@ -1,3 +1,5 @@
+/* 实例磁盘管理：磁盘分组、行操作、扩容报价及错误状态。 */
+/* 导入方：app/components/instance/InstanceDisks.vue。 */
 .disks[data-v-22ec0282] {
   gap: 42px;
 }
@@ -66,6 +68,7 @@
   color: var(--p-text-muted-color, #64748b);
   font-size: 1rem;
 }
+/* 扩容报价展示；价格有效性和提交条件由组件逻辑核对。 */
 .quote[data-v-22ec0282] {
   border-top: 1px solid var(--p-content-border-color, #e2e8f0);
   justify-content: space-between;

app/assets/styles/InstanceLoadingShell.CwfiUwdU.css

@@ -1,3 +1,5 @@
+/* 实例页面加载骨架：复现概览栏位以减少加载过程的布局跳动。 */
+/* 导入方：app/components/instance/DcimManage.vue、app/components/instance/InstanceLoadingShell.vue、app/components/instance/InstanceManage.vue、app/components/instance/LegacyDcimManage.vue、app/pages/servers/server.vue。 */
 .instance-loading-shell[data-v-f12d9300] {
   min-width: 0;
 }
@@ -44,17 +46,20 @@
 .shell-secondary[data-v-f12d9300] {
   min-height: 230px;
 }
+/* 视口条件 (width<=1199px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=1199px) {
   .dcim .shell-column[data-v-f12d9300],
   .dcim .shell-grid[data-v-f12d9300] {
     gap: 14px;
   }
 }
+/* 视口条件 (width<=1023px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=1023px) {
   .instance-loading-shell:not(.dcim) .shell-grid[data-v-f12d9300] {
     grid-template-columns: 1fr;
   }
 }
+/* 视口条件 (width<=950px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=950px) {
   .dcim .shell-grid[data-v-f12d9300] {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -65,6 +70,7 @@
     display: grid;
   }
 }
+/* 视口条件 (width<=600px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=600px) {
   .dcim .shell-grid[data-v-f12d9300] {
     grid-template-columns: 1fr;

app/assets/styles/InstanceManage.apzbBV1c.css

@@ -1,3 +1,5 @@
+/* 实例管理容器：备份等子面板的基础间距。 */
+/* 导入方：app/components/instance/InstanceManage.vue。 */
 .instance-manage[data-v-627058ac] {
   min-width: 0;
 }

app/assets/styles/InstanceMonitor.B0X15iQt.css

@@ -1,3 +1,5 @@
+/* 实例监控：时间范围、图表标题/单位及错误/无数据提示。 */
+/* 导入方：app/components/instance/InstanceMonitor.vue。 */
 .mon[data-v-6a900feb] {
   flex-direction: column;
   gap: 21px;

app/assets/styles/InstanceMonitorSkeleton.C0FT51jJ.css

@@ -1,3 +1,5 @@
+/* 监控加载骨架：范围切换、图例、图表和刷新占位。 */
+/* 导入方：app/components/instance/DcimManage.vue、app/components/instance/InstanceManage.vue、app/components/instance/InstanceMonitorSkeleton.vue。 */
 .monitor-skeleton[data-v-5a1fd568] {
   flex-direction: column;
   gap: 21px;

app/assets/styles/InstanceNetwork.CyucZaZp.css

@@ -1,3 +1,5 @@
+/* 实例网络信息：键值项、操作列与网络空态。 */
+/* 导入方：app/components/instance/InstanceNetwork.vue。 */
 .nw[data-v-aa906366] {
   flex-direction: column;
   gap: 28px;
@@ -65,6 +67,7 @@
 .nw[data-v-aa906366] .network-table .empty {
   padding: 0;
 }
+/* 视口条件 (width<=767px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=767px) {
   .nw[data-v-aa906366] .network-head {
     align-items: flex-start;
@@ -104,6 +107,7 @@
 .kv > span[data-v-aa906366] {
   color: var(--p-text-muted-color, #64748b);
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .kv > b[data-v-aa906366] {
   overflow-wrap: anywhere;
   min-width: 0;
@@ -153,6 +157,7 @@
 .info-table .kv > span[data-v-aa906366] {
   font-weight: 600;
 }
+/* 视口条件 (width<=767px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=767px) {
   .info-table .kv[data-v-aa906366] {
     grid-template-columns: 100px minmax(0, 1fr);

app/assets/styles/InstanceOnDemand.okGWwgIJ.css

@@ -1,3 +1,5 @@
+/* 按需计费：计费操作按钮和确认说明区域。 */
+/* 导入方：app/components/instance/InstanceOnDemand.vue。 */
 .on-demand[data-v-2710106c] {
   gap: 12px;
   font-size: 13px;

app/assets/styles/InstanceOverview.C9ExpxMB.css

@@ -1,3 +1,5 @@
+/* 实例概览：信息卡片、资源图表、网络状态和磁盘摘要。 */
+/* 导入方：app/components/instance/InstanceManage.vue、app/components/instance/InstanceOverview.vue。 */
 .ov[data-v-fe24aa37] {
   flex-direction: column;
   gap: 12px;
@@ -116,6 +118,7 @@
   max-width: 100%;
   overflow: hidden;
 }
+/* 资源概览区：图表、数值和不可用状态分开布局。 */
 .res[data-v-fe24aa37] {
   flex-direction: column;
 }
@@ -234,6 +237,7 @@
   margin: 0;
   font-size: 0.875rem;
 }
+/* 视口条件 (width<=1023px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=1023px) {
   .grid[data-v-fe24aa37] {
     grid-template-columns: 1fr;

app/assets/styles/InstanceRenewDialog.BHDAL6d3.css

@@ -1,3 +1,5 @@
+/* 实例续费弹窗：周期、优惠码、折扣及最终报价行。 */
+/* 导入方：app/components/instance/DcimBilling.vue、app/components/instance/InstanceBilling.vue、app/components/instance/InstanceRenewDialog.vue。 */
 .rd[data-v-01429388] {
   flex-direction: column;
   gap: 16px;
@@ -54,6 +56,7 @@
   white-space: nowrap;
   flex-shrink: 0;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .rd-code[data-v-01429388] {
   overflow-wrap: anywhere;
   background: var(--p-content-hover-background);
@@ -68,6 +71,7 @@
   margin: 0;
   font-size: 0.875rem;
 }
+/* 视口条件 (width<=480px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=480px) {
   .rd-row[data-v-01429388] {
     flex-direction: column;

app/assets/styles/InstanceServiceInfo.BftSVIeW.css

@@ -1,3 +1,5 @@
+/* 实例服务信息：键值资料、密码显示按钮及流量恢复说明。 */
+/* 导入方：app/components/instance/DcimManage.vue、app/components/instance/InstanceManage.vue、app/components/instance/InstanceServiceInfo.vue、app/pages/servers/server.vue。 */
 .service-info[data-v-0ff5d554] {
   background: var(--console-panel-bg);
   border: 1px solid var(--console-panel-border);
@@ -30,6 +32,7 @@ dt[data-v-0ff5d554] {
   color: var(--p-text-muted-color);
   flex: 0 0 88px;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 dd[data-v-0ff5d554] {
   overflow-wrap: anywhere;
   min-width: 0;
@@ -53,6 +56,7 @@ dd[data-v-0ff5d554] {
   margin: 0;
   line-height: 1.7;
 }
+/* 视口条件 (width<=767px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=767px) {
   .service-rows[data-v-0ff5d554] {
     grid-template-columns: 1fr;

app/assets/styles/InstanceSmsCode.CsITfIEU.css

@@ -1,3 +1,5 @@
+/* 实例操作短信验证：验证码输入与发送按钮排列。 */
+/* 导入方：app/components/instance/DcimActions.vue、app/components/instance/DcimManage.vue、app/components/instance/InstanceAccess.vue、app/components/instance/InstanceSmsCode.vue。 */
 .instance-code[data-v-741dd729] {
   gap: 8px;
   display: grid;

app/assets/styles/InstanceTraffic.CyyEAXl3.css

@@ -1,3 +1,5 @@
+/* 实例流量详情：汇总数据、恢复操作与流量表格。 */
+/* 导入方：app/components/instance/InstanceManage.vue、app/components/instance/InstanceNetwork.vue、app/components/instance/InstanceOverview.vue、app/components/instance/InstanceTraffic.vue。 */
 .traffic-summary[data-v-484c7b21] {
   flex-direction: column;
   gap: 12px;
@@ -18,6 +20,7 @@
 .traffic-row > span[data-v-484c7b21] {
   flex-shrink: 0;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .traffic-row > b[data-v-484c7b21] {
   overflow-wrap: anywhere;
   text-align: right;
@@ -62,6 +65,7 @@
   min-height: 49px;
   display: grid;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .traffic-table .traffic-row[data-v-484c7b21] > * {
   overflow-wrap: anywhere;
   min-width: 0;
@@ -86,6 +90,7 @@
 .traffic-table .traffic-error[data-v-484c7b21] {
   flex-wrap: wrap;
 }
+/* 视口条件 (width<=767px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=767px) {
   .traffic-table .traffic-row[data-v-484c7b21] {
     grid-template-columns: 100px minmax(0, 1fr);

app/assets/styles/JyCloudConfig.kGfttaHi.css

@@ -1,3 +1,5 @@
+/* 对应云产品配置：机型筛选表、资源滑块和防御选项。 */
+/* 导入方：app/components/config/JyCloudConfig.vue、app/pages/products/[id].vue、app/pages/products/cloud-server.vue。 */
 .storage-system[data-v-7837d303] {
   width: calc(50% - 8px);
 }
@@ -105,6 +107,7 @@
   cursor: pointer;
   margin: 0;
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .jy-model-table td input[type="radio"][data-v-7837d303]:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: 3px;
@@ -141,6 +144,7 @@
   grid-area: 1/1;
   margin: 0;
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .jy-resource-slider[data-v-7837d303]:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: 5px;
@@ -200,6 +204,7 @@
 .jy-dcim-config .image-groups[data-v-7837d303] {
   max-width: 960px;
 }
+/* 视口条件 (width<=767px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=767px) {
   .jy-config-row[data-v-7837d303] {
     grid-template-columns: 1fr;
@@ -220,6 +225,7 @@
     gap: 5px 12px;
   }
 }
+/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=639px) {
   .storage-system[data-v-7837d303] {
     width: 100%;

app/assets/styles/KkyEcsConfig.BFaAwQPZ.css

@@ -1,3 +1,5 @@
+/* 弹性云产品配置：系统/数据磁盘与流量套餐展示。 */
+/* 导入方：app/components/config/KkyEcsConfig.vue、app/pages/products/[id].vue、app/pages/products/cloud-server.vue。 */
 .cycle-warn[data-v-e8ce6418] {
   flex-shrink: 0;
 }
@@ -29,6 +31,7 @@
   font-size: 1rem;
   font-weight: 500;
 }
+/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=639px) {
   .storage-system[data-v-e8ce6418] {
     width: 100%;

app/assets/styles/KkyUpgrade.CkDmxFBM.css

@@ -1,3 +1,5 @@
+/* 弹性云升级：当前规格、套餐选择、磁盘变更及报价汇总。 */
+/* 导入方：app/components/instance/InstanceBilling.vue、app/components/kkyecs/KkyUpgrade.vue。 */
 .up[data-v-625e699a] {
   flex-direction: column;
   gap: 14px;

app/assets/styles/LegacyDcimActions.DcIrQby6.css

@@ -1,3 +1,5 @@
+/* 旧版独立服务器操作面板：操作按钮、目标说明和确认项。 */
+/* 导入方：app/components/instance/LegacyDcimActions.vue、app/components/instance/LegacyDcimManage.vue。 */
 .legacy-actions[data-v-e3236d5c] {
   flex-direction: column;
   gap: 14px;
@@ -13,6 +15,7 @@
   gap: 10px;
   display: flex;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .target[data-v-e3236d5c] {
   overflow-wrap: anywhere;
   margin: 0 0 4px;

app/assets/styles/LegacyDcimManage.5YRq508t.css

@@ -1,3 +1,5 @@
+/* 旧版独立服务器概览：资源卡片、流量、IP和详细资料。 */
+/* 导入方：app/components/instance/LegacyDcimManage.vue。 */
 .legacy-dcim-manage[data-v-f40d7201] {
   min-width: 0;
 }
@@ -71,6 +73,7 @@
   color: var(--p-text-muted-color);
   flex-shrink: 0;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .compact-rows dd[data-v-f40d7201] {
   overflow-wrap: anywhere;
   text-align: right;
@@ -104,6 +107,7 @@
   color: var(--p-text-muted-color);
   flex-shrink: 0;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .resource-list dd[data-v-f40d7201] {
   overflow-wrap: anywhere;
   text-align: right;
@@ -192,6 +196,7 @@
 .mono[data-v-f40d7201] {
   font-family: var(--font-mono, monospace);
 }
+/* 视口条件 (width<=1199px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=1199px) {
   .overview[data-v-f40d7201],
   .stack[data-v-f40d7201] {
@@ -204,6 +209,7 @@
     padding: 10px;
   }
 }
+/* 视口条件 (width<=950px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=950px) {
   .overview[data-v-f40d7201] {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -214,6 +220,7 @@
     display: grid;
   }
 }
+/* 视口条件 (width<=600px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=600px) {
   .overview[data-v-f40d7201] {
     grid-template-columns: 1fr;

app/assets/styles/LegacyProductUpgrade.dzWGwGgY.css

@@ -1,3 +1,5 @@
+/* 既有产品升级组件的基础布局。 */
+/* 导入方：app/components/instance/CommonManage.vue、app/components/instance/InstanceBilling.vue、app/components/instance/LegacyDcimManage.vue、app/components/instance/LegacyProductUpgrade.vue、app/pages/servers/server.vue。 */
 .product-upgrade[data-v-3bd25322] {
   gap: 12px;
   display: grid;

app/assets/styles/MfCloudBackupPanel.BTlEe-fy.css

@@ -1,3 +1,5 @@
+/* 云备份面板：引导、数量、备份操作与报价/确认表单。 */
+/* 导入方：app/components/MfCloudBackupPanel.vue。 */
 .info-table[data-v-a7ffe460] {
   border: 1px solid var(--console-panel-border);
   box-shadow: var(--console-panel-shadow);

app/assets/styles/MfCloudConfig.DbgUu8qr.css

@@ -1,3 +1,5 @@
+/* 对应云产品配置：周期提示、系统盘与数据盘排列。 */
+/* 导入方：app/components/config/MfCloudConfig.vue、app/pages/products/[id].vue、app/pages/products/cloud-server.vue。 */
 .cycle-warn[data-v-8ba1c9ae] {
   flex-shrink: 0;
 }
@@ -20,6 +22,7 @@
   font-size: 0.875rem;
   line-height: 1.429rem;
 }
+/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=639px) {
   .storage-system[data-v-8ba1c9ae] {
     width: 100%;

app/assets/styles/MfCloudDefence.B2vl5Yip.css

@@ -1,3 +1,5 @@
+/* 云防御面板：防御状态与IP展示。 */
+/* 导入方：app/components/instance/InstanceNetwork.vue、app/components/mfcloud/MfCloudDefence.vue。 */
 .defence[data-v-b0c2bd86],
 .form[data-v-b0c2bd86] {
   flex-direction: column;

app/assets/styles/MfCloudIps.jhFnuvcs.css

@@ -1,3 +1,5 @@
+/* 云IP管理：数量、空态、购买表单及报价。 */
+/* 导入方：app/components/instance/InstanceNetwork.vue、app/components/mfcloud/MfCloudIps.vue。 */
 .ips[data-v-9ba8a1b3],
 .ipv6-group[data-v-9ba8a1b3] {
   flex-direction: column;
@@ -13,6 +15,7 @@
   table-layout: fixed;
   min-width: 0;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .ips[data-v-9ba8a1b3] .col-mono {
   overflow-wrap: anywhere;
 }

app/assets/styles/MfCloudLogs.MTqtLGjA.css

@@ -1,3 +1,5 @@
+/* 云操作日志：标题、筛选工具栏、日志正文与分页。 */
+/* 导入方：app/components/mfcloud/MfCloudLogs.vue。 */
 .logs[data-v-c4521240] {
   flex-direction: column;
   gap: 18px;
@@ -33,6 +35,7 @@
   border-radius: 6px;
   overflow: hidden;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .log-content[data-v-c4521240] {
   white-space: pre-wrap;
   overflow-wrap: anywhere;
@@ -49,6 +52,7 @@
   font-size: 0.9375rem;
   display: flex;
 }
+/* 视口条件 (width<=640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=640px) {
   .logs-toolbar > .p-iconfield[data-v-c4521240] {
     flex: 1;

app/assets/styles/MfCloudNat.C1uXa4fX.css

@@ -1,3 +1,5 @@
+/* 云NAT管理：操作表单及辅助说明。 */
+/* 导入方：app/components/mfcloud/MfCloudNat.vue。 */
 .form[data-v-1ff078ab],
 .nat-panel[data-v-1ff078ab] {
   flex-direction: column;

app/assets/styles/MfCloudResourceUpgrade.bSwLWjPg.css

@@ -1,3 +1,5 @@
+/* 云资源升级：可选配置、资源选项与汇总金额。 */
+/* 导入方：app/components/instance/InstanceBilling.vue、app/components/mfcloud/MfCloudResourceUpgrade.vue。 */
 .resource-upgrade[data-v-c9212028] {
   gap: 24px;
 }
@@ -49,6 +51,7 @@
   margin: 0;
   font-size: 0.875rem;
 }
+/* 视口条件 (width<=640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=640px) {
   .upgrade-total[data-v-c9212028] {
     flex-direction: column;

app/assets/styles/MfCloudUpgrade.N7TNG8F1.css

@@ -1,3 +1,5 @@
+/* 云套餐升级：当前规格、套餐卡片与底部报价栏。 */
+/* 导入方：app/components/instance/InstanceBilling.vue、app/components/mfcloud/MfCloudUpgrade.vue。 */
 .up[data-v-b98b2e63] {
   flex-direction: column;
   gap: 14px;
@@ -94,6 +96,7 @@
 .hint[data-v-b98b2e63] {
   margin: 0;
 }
+/* 视口条件 (width<=640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=640px) {
   .bar[data-v-b98b2e63],
   .current[data-v-b98b2e63] {

app/assets/styles/MfCloudVpc.CpOEbuWs.css

@@ -1,3 +1,5 @@
+/* 云VPC管理：配置表单及辅助说明。 */
+/* 导入方：app/components/instance/InstanceNetwork.vue、app/components/mfcloud/MfCloudVpc.vue。 */
 .form[data-v-1d12fc4b],
 .vpc-panel[data-v-1d12fc4b] {
   flex-direction: column;

app/assets/styles/MfDcimConfig.BhC_eZ0V.css

@@ -1,3 +1,5 @@
+/* 独立服务器产品配置：基础规格、可选资源、协议与镜像费用提示。 */
+/* 导入方：app/components/config/MfDcimConfig.vue、app/pages/products/[id].vue、app/pages/products/dedicated-server/customize.vue。 */
 .storage-grid[data-v-b5ff32bb] {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   align-items: start;
@@ -23,6 +25,7 @@
   width: 0;
   min-width: 0;
 }
+/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=639px) {
   .storage-grid[data-v-b5ff32bb] {
     grid-template-columns: 1fr;
@@ -61,6 +64,7 @@
   min-width: 0;
   font-size: 0.875rem;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .base-specs strong[data-v-b5ff32bb] {
   color: var(--p-text-color);
   overflow-wrap: anywhere;
@@ -68,6 +72,7 @@
   font-weight: 500;
   display: block;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .base-specs small[data-v-b5ff32bb] {
   overflow-wrap: anywhere;
   font-size: 0.8125rem;
@@ -148,6 +153,7 @@
 .config-change-fields .form-row[data-v-b5ff32bb] {
   margin-bottom: 0;
 }
+/* 视口条件 (width<=767px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=767px) {
   .config-change-fields[data-v-b5ff32bb] {
     grid-template-columns: 1fr;

app/assets/styles/NotificationPreferences.DcH8Noxd.css

@@ -1,3 +1,5 @@
+/* 通知偏好：说明、渠道开关及保存反馈的排列。 */
+/* 导入方：app/components/NotificationPreferences.vue、app/pages/messages/index.vue。 */
 .notification-preferences[data-v-f4132ec8] {
   border: 1px solid var(--console-panel-border);
   background: var(--console-panel-bg);
@@ -61,6 +63,7 @@
   font-size: 0.875rem;
   line-height: 1.4;
 }
+/* 视口条件 (width<=640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=640px) {
   .notification-preferences[data-v-f4132ec8] {
     padding: 14px 16px;

app/assets/styles/OperationToasts.DfA_b8om.css

@@ -1,3 +1,5 @@
+/* 全站操作提示：图标、结果说明及批量结果明细。 */
+/* 导入方：app/components/OperationToasts.vue、nuxt.config.ts。 */
 .operation-toasts.p-toast {
   width: min(380px, 100% - 24px);
   top: 76px !important;
@@ -34,6 +36,7 @@
 .operation-toast-icon.notice-info {
   color: var(--p-primary-color);
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .operation-toast-copy {
   overflow-wrap: anywhere;
   flex: 1;
@@ -58,12 +61,14 @@
 .operation-toast-results li + li {
   margin-top: 6px;
 }
+/* 视口条件 (width<=600px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=600px) {
   .operation-toasts.p-toast {
     top: 68px !important;
     right: 12px !important;
   }
 }
+/* 尊重减少动态效果偏好：保留状态信息，降低或取消非必要动画。 */
 @media (prefers-reduced-motion: reduce) {
   .operation-toasts .p-toast-message {
     transition: none !important;

app/assets/styles/OsIcon.CAi4Iz2S.css

@@ -1,3 +1,5 @@
+/* 操作系统图标：统一尺寸与未知系统的占位图形。 */
+/* 导入方：app/components/HostList.vue、app/components/OsIcon.vue、app/components/config/CommonConfig.vue、app/components/config/ConfigChoiceGrid.vue、app/components/config/ConfigResourceOption.vue、app/components/config/FinanceConfig.vue、app/components/config/JyCloudConfig.vue、app/components/config/KkyEcsConfig.vue、app/components/config/MfCloudConfig.vue、app/components/config/MfDcimConfig.vue、app/components/instance/DcimManage.vue、app/components/instance/InstanceAccess.vue、app/components/instance/InstanceManage.vue、app/components/instance/InstanceOverview.vue、app/components/instance/LegacyDcimManage.vue、app/pages/cloud-servers/index.vue、app/pages/dedicated-servers/index.vue、app/pages/products/[id].vue、app/pages/products/cloud-server.vue、app/pages/products/dedicated-server/customize.vue。 */
 .os-icon[data-v-01907ce4] {
   -o-object-fit: contain;
   object-fit: contain;

app/assets/styles/PageInfoNotice._16xRFrB.css

@@ -1,3 +1,5 @@
+/* 页面说明容器：静态提示的边界、颜色与内容间距。 */
+/* 导入方：app/components/PageInfoNotice.vue、app/pages/invoices/index.vue、app/pages/invoices/request.vue、app/pages/security/groups/index.vue。 */
 .page-info-notice[data-v-8f81f268] {
   min-width: 0;
   box-shadow: none;
@@ -16,6 +18,7 @@
   font-size: 14px;
   display: inline-flex;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .page-info-notice[data-v-8f81f268] .p-message-text {
   overflow-wrap: anywhere;
   min-width: 0;

app/assets/styles/PageSteps.B5K7G9zF.css

@@ -1,3 +1,5 @@
+/* 步骤条：当前/完成步骤圆点、文案与连接线。 */
+/* 导入方：app/components/PageSteps.vue、app/pages/account/index.vue、app/pages/account/realname/company.vue、app/pages/account/realname/index.vue、app/pages/account/realname/personal.vue。 */
 .steps[data-v-a16c5dea] {
   margin: 0;
   padding: 4px 0 2px;

app/assets/styles/PaymentDialog.BNFKQF1U.css

@@ -1,3 +1,5 @@
+/* 订单支付面板：渠道、余额组合、代金券、支付反馈及内嵌操作区。 */
+/* 导入方：app/components/HostList.vue、app/components/PaymentDialog.vue、app/components/RechargeDialog.vue、app/components/home/HomeWalletCard.vue、app/components/instance/DcimActions.vue、app/components/instance/DcimManage.vue、app/components/instance/ImagePurchaseDialog.vue、app/components/instance/InstanceAccess.vue、app/components/instance/LegacyDcimManage.vue、app/pages/account/index.vue、app/pages/account/realname/company.vue、app/pages/account/realname/index.vue、app/pages/account/realname/personal.vue、app/pages/bills/[id].vue、app/pages/cart/index.vue、app/pages/cloud-servers/index.vue、app/pages/dedicated-servers/index.vue、app/pages/finance/index.vue、app/pages/index.vue、app/pages/invoices/index.vue、app/pages/invoices/request.vue、app/pages/orders/[id].vue、app/pages/orders/order/index.vue、app/pages/orders/order/paid.vue、app/pages/orders/order/pay.vue、app/pages/products/[id].vue、app/pages/products/cloud-server.vue、app/pages/products/dedicated-server/customize.vue、app/pages/transfer/index.vue。 */
 .order-line[data-v-4931e21e] {
   color: var(--p-text-muted-color, #64748b);
   justify-content: space-between;
@@ -10,6 +12,7 @@
   color: #ef4444;
   font-weight: 600;
 }
+/* 支付渠道与余额选择区域；选中样式由组件状态驱动，不以CSS决定实际付款渠道。 */
 .gateway-list[data-v-4931e21e] {
   flex-direction: column;
   gap: 10px;
@@ -74,6 +77,7 @@
 .msg[data-v-4931e21e] {
   margin-top: 12px;
 }
+/* 代金券选项及反馈；无可用券和加载状态应与已选中状态清晰区分。 */
 .voucher-row[data-v-4931e21e] {
   border: 1px solid var(--p-content-border-color);
   border-radius: 6px;
@@ -128,6 +132,7 @@
   gap: 8px;
   display: flex;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .voucher-choice[data-v-4931e21e] {
   white-space: normal;
   overflow-wrap: anywhere;
@@ -161,6 +166,7 @@
 .gateway-item + .gateway-item[data-v-4931e21e] {
   margin-top: -1px;
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .gateway-item[data-v-4931e21e]:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: 2px;
@@ -251,6 +257,7 @@
 .amount[data-v-4931e21e] {
   color: var(--p-text-color);
 }
+/* 内嵌支付模式的外壳覆盖，与弹窗共用同一套支付逻辑。 */
 .inline-payment h3[data-v-4931e21e] {
   margin: 0 0 14px;
   font-size: 1rem;
@@ -269,6 +276,7 @@
   min-height: 56px;
   padding: 14px 18px;
 }
+/* 视口条件 (width<=640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=640px) {
   .order-line[data-v-4931e21e] {
     gap: 10px;

app/assets/styles/PhoneCodeField.CwyHXfML.css

@@ -1,3 +1,5 @@
+/* 手机号国家区号字段：区号选择、输入与字段错误说明。 */
+/* 导入方：app/components/PhoneCodeField.vue、app/pages/forgot-password.vue、app/pages/oauth/bind.vue、app/pages/register.vue。 */
 .phone-code-field[data-v-24cb0489] {
   gap: 6px;
   display: grid;

app/assets/styles/ProductCategoryNotice.CwaR3eXN.css

@@ -1,3 +1,5 @@
+/* 商品分类说明：图标、富文本和纯文本内容区域。 */
+/* 导入方：app/components/ProductCategoryNotice.vue、app/pages/products/index.vue。 */
 .category-notice[data-v-faa6a7a3] {
   border: 1px solid
     color-mix(
@@ -24,6 +26,7 @@
   margin-top: 4px;
   font-size: 1.125rem;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .category-notice-content[data-v-faa6a7a3] {
   overflow-wrap: anywhere;
   flex: 1;
@@ -66,6 +69,7 @@
   text-underline-offset: 3px;
   text-decoration: underline;
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .category-notice-content[data-v-faa6a7a3] a:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: 3px;
@@ -107,6 +111,7 @@
 .category-notice-content[data-v-faa6a7a3] > :last-child {
   margin-bottom: 0;
 }
+/* 视口条件 (width<=760px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=760px) {
   .category-notice[data-v-faa6a7a3] {
     gap: 10px;

app/assets/styles/ProductConfigurationSummary.BqZns1LB.css

@@ -1,3 +1,6 @@
+/* 商品配置摘要：配置项换行与分隔符。 */
+/* 导入方：app/components/ProductConfigurationSummary.vue、app/pages/products/index.vue。 */
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .product-configuration-summary[data-v-cb8d72e4] {
   color: var(--p-text-muted-color);
   overflow-wrap: anywhere;

app/assets/styles/ProductCustomFields.B2QMnPil.css

@@ -1,3 +1,5 @@
+/* 商品自定义字段：表单区域和字段说明。 */
+/* 导入方：app/components/config/CommonConfig.vue、app/components/config/FinanceConfig.vue、app/components/config/JyCloudConfig.vue、app/components/config/KkyEcsConfig.vue、app/components/config/MfCloudConfig.vue、app/components/config/MfDcimConfig.vue、app/components/config/ProductCustomFields.vue、app/pages/products/[id].vue、app/pages/products/cloud-server.vue、app/pages/products/dedicated-server/customize.vue。 */
 .product-custom-fields[data-v-9d2a6f70] {
   min-width: 0;
 }

app/assets/styles/ProductDescription.Ctb7jDuO.css

@@ -1,3 +1,6 @@
+/* 商品详情说明：结构化配置分区、富文本、折叠预览与空态。 */
+/* 导入方：app/components/ProductDescription.vue、app/pages/products/index.vue。 */
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .product-description[data-v-8a6cfb44] {
   min-width: 0;
   max-width: 100%;
@@ -115,6 +118,7 @@
 .description-compact .description-paragraph[data-v-8a6cfb44] {
   color: var(--p-text-muted-color);
 }
+/* 折叠预览与展开操作的展示边界，正文内容清理由业务组件负责。 */
 .description-preview[data-v-8a6cfb44] {
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -143,6 +147,7 @@
   text-underline-offset: 3px;
   text-decoration: underline;
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .description-toggle[data-v-8a6cfb44]:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: 3px;
@@ -151,6 +156,7 @@
 .description-toggle i[data-v-8a6cfb44] {
   font-size: 0.875rem;
 }
+/* 后端富文本的排版规则；这些选择器不提供HTML消毒或授权功能。 */
 .description-rich[data-v-8a6cfb44] {
   min-width: 0;
   padding-top: 8px;
@@ -246,6 +252,7 @@
 .description-rich[data-v-8a6cfb44] > :last-child {
   margin-bottom: 0;
 }
+/* 视口条件 (width<=760px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=760px) {
   .description-header[data-v-8a6cfb44] {
     padding: 10px 20px;

app/assets/styles/ProductGroupLabel.B1kWpFA-.css

@@ -1,3 +1,5 @@
+/* 商品分组标题：名称与附加徽标的排列。 */
+/* 导入方：app/components/ProductGroupLabel.vue、app/components/config/CloudProductPicker.vue、app/pages/products/cloud-server.vue、app/pages/products/index.vue。 */
 .product-group-label[data-v-6806c62d] {
   align-items: center;
   justify-content: inherit;
@@ -8,10 +10,12 @@
   max-width: 100%;
   display: inline-flex;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .product-group-name[data-v-6806c62d] {
   overflow-wrap: anywhere;
   min-width: 0;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .product-group-badge[data-v-6806c62d] {
   border: 1px solid
     color-mix(in srgb, var(--p-primary-color) 24%, var(--p-content-background));

app/assets/styles/PromoCodeField.qFEkB6Hm.css

@@ -1,3 +1,5 @@
+/* 优惠码输入：输入/操作区及校验说明。 */
+/* 导入方：app/components/config/CommonConfig.vue、app/components/config/ConfigCheckout.vue、app/components/config/FinanceConfig.vue、app/components/config/JyCloudConfig.vue、app/components/config/KkyEcsConfig.vue、app/components/config/MfCloudConfig.vue、app/components/config/MfDcimConfig.vue、app/components/config/PromoCodeField.vue、app/pages/products/[id].vue、app/pages/products/cloud-server.vue、app/pages/products/dedicated-server/customize.vue。 */
 .promo summary[data-v-a17e621a] {
   color: var(--p-primary-color);
   cursor: pointer;

app/assets/styles/RechargeDialog.DpsMly4r.css

@@ -1,3 +1,5 @@
+/* 余额充值：预设金额、手工金额与步骤表单。 */
+/* 导入方：app/components/RechargeDialog.vue、app/components/home/HomeWalletCard.vue、app/pages/finance/index.vue、app/pages/index.vue。 */
 .step[data-v-c038cb91] {
   flex-direction: column;
   gap: 14px;
@@ -27,6 +29,7 @@
   color: var(--p-primary-color);
   background: var(--p-highlight-background);
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .recharge-option[data-v-c038cb91]:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: 2px;
@@ -40,6 +43,7 @@
   min-width: 0;
   height: 56px;
 }
+/* 视口条件 (width<=480px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=480px) {
   .recharge-options[data-v-c038cb91] {
     grid-template-columns: repeat(2, minmax(0, 1fr));

app/assets/styles/RemfUpgrade.4stQ5ASH.css

@@ -1,3 +1,5 @@
+/* 资源升级信息：加载状态、配置字段与价格说明。 */
+/* 导入方：app/components/instance/CommonManage.vue、app/components/instance/InstanceBilling.vue、app/components/instance/LegacyDcimManage.vue、app/components/instance/RemfUpgrade.vue、app/pages/servers/server.vue。 */
 .upg[data-v-7efd9d4d] {
   flex-direction: column;
   gap: 14px;
@@ -28,6 +30,7 @@
 .kv[data-v-7efd9d4d]:nth-child(2n) {
   background: var(--console-page-bg);
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .kv[data-v-7efd9d4d] > * {
   overflow-wrap: anywhere;
   min-width: 0;
@@ -54,6 +57,7 @@
 .action-cell[data-v-7efd9d4d] .p-button {
   max-width: 100%;
 }
+/* 视口条件 (width<=767px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=767px) {
   .kv[data-v-7efd9d4d] {
     grid-template-columns: 100px minmax(0, 1fr);

app/assets/styles/RemoteConsole.DLmX5UZu.css

@@ -1,3 +1,5 @@
+/* 嵌入式远程控制台：连接状态、工具栏、屏幕容器与凭据表单。 */
+/* 导入方：app/components/instance/RemoteConsole.vue、app/pages/remote-console.vue。 */
 .remote-console[data-v-e696489e] {
   color: #23324d;
   background: #f8fafc;
@@ -111,6 +113,7 @@
   padding: 9px 20px;
   font-size: 0.875rem;
 }
+/* 远控屏幕容器与覆盖层，连接/凭据状态由脚本驱动，不直接由CSS建立连接。 */
 .console-display[data-v-e696489e] {
   background: #141b2b;
   flex: 1;
@@ -160,6 +163,7 @@
   font-size: 0.9375rem;
   line-height: 1.8;
 }
+/* 仅在连接需要凭据时显示表单；输入生命周期和清理由组件负责。 */
 .credential-form[data-v-e696489e] {
   flex-direction: column;
   gap: 10px;
@@ -200,6 +204,7 @@
   width: 100vw;
   height: 100dvh;
 }
+/* 视口条件 (width<=640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=640px) {
   .console-header[data-v-e696489e] {
     gap: 9px;
@@ -226,6 +231,7 @@
     font-size: 0.8125rem;
   }
 }
+/* 尊重减少动态效果偏好：保留状态信息，降低或取消非必要动画。 */
 @media (prefers-reduced-motion: reduce) {
   .pi-spin[data-v-e696489e] {
     animation: none;

app/assets/styles/RichTextEditor.NkmgPT5m.css

@@ -1,3 +1,5 @@
+/* 富文本编辑器：工具栏、可编辑正文、空内容占位及禁用态。 */
+/* 导入方：app/components/RichTextEditor.vue、app/pages/tickets/[id].vue、app/pages/tickets/create.vue、app/pages/tickets/ticket.vue。 */
 .rich-editor[data-v-858a2ddd] {
   border: 1px solid var(--p-form-field-border-color);
   background: var(--p-form-field-background);
@@ -29,6 +31,8 @@
 .editor-toolbar i[data-v-858a2ddd] {
   font-size: 0.875rem;
 }
+/* 正文区域保留长文本换行；空态伪元素只是提示，不作为实际编辑内容提交。 */
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .editor-content[data-v-858a2ddd] {
   overflow-wrap: anywhere;
   outline: none;

app/assets/styles/RingProgress.CVwR7il5.css

@@ -1,3 +1,5 @@
+/* 环形进度：SVG进度描边与中央数值/标签。 */
+/* 导入方：app/components/RingProgress.vue、app/components/instance/InstanceManage.vue、app/components/instance/InstanceOverview.vue。 */
 .ring[data-v-bff6718d] {
   flex-shrink: 0;
   position: relative;

app/assets/styles/RoxyMascot.CDqPSf2d.css

@@ -1,3 +1,5 @@
+/* 站点吉祥物：CSS分层造型、头部摇摆和眨眼动画。 */
+/* 导入方：app/components/home/RoxyMascot.vue。 */
 .roxy-mascot[data-v-65169a82] {
   --roxy-ink: #45465f;
   --roxy-hair: #779aca;
@@ -131,6 +133,7 @@
   left: 7px;
   box-shadow: 4px 0 #d7af9b;
 }
+/* 头部、五官与发型使用独立图层；底部关键帧仅改变装饰姿态。 */
 .roxy-head[data-v-65169a82] {
   transform-origin: 59% 94%;
   width: 151px;
@@ -436,6 +439,7 @@
   transform: rotate(30deg);
   box-shadow: inset 3px 2px #f0c5d4;
 }
+/* 动画 roxy-head-sway-65169a82 的关键帧；动画名称与引用该名称的选择器需要同步维护。 */
 @keyframes roxy-head-sway-65169a82 {
   0%,
   to {
@@ -446,6 +450,7 @@
     transform: rotate(4deg);
   }
 }
+/* 动画 roxy-blink-65169a82 的关键帧；动画名称与引用该名称的选择器需要同步维护。 */
 @keyframes roxy-blink-65169a82 {
   0%,
   43%,
@@ -457,12 +462,14 @@
     scale: 1 0.08;
   }
 }
+/* 视口条件 (width<=767px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=767px) {
   .roxy-eye[data-v-65169a82],
   .roxy-head[data-v-65169a82] {
     animation: none;
   }
 }
+/* 尊重减少动态效果偏好：保留状态信息，降低或取消非必要动画。 */
 @media (prefers-reduced-motion: reduce) {
   .roxy-eye[data-v-65169a82],
   .roxy-head[data-v-65169a82] {

app/assets/styles/SecurityVerificationDialog.skYFo4v7.css

@@ -1,3 +1,5 @@
+/* 安全验证弹窗：输入、错误提示、操作及二维码区域。 */
+/* 导入方：app/components/SecurityVerificationDialog.vue、app/components/instance/DcimBilling.vue、app/components/instance/InstanceBilling.vue、app/pages/account/index.vue、app/pages/login.vue、app/pages/transfer/index.vue。 */
 .security-verify[data-v-ff4061ec] {
   gap: 8px;
   font-size: 13px;

app/assets/styles/SensitiveValue.BSZlaRHT.css

@@ -1,3 +1,5 @@
+/* 敏感信息展示：掩码文本和显示/隐藏按钮。 */
+/* 导入方：app/components/SensitiveValue.vue、app/pages/account/index.vue、app/pages/index.vue。 */
 .sensitive-value[data-v-07008ebf] {
   vertical-align: middle;
   align-items: center;
@@ -6,6 +8,7 @@
   max-width: 100%;
   display: inline-flex;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .sensitive-value-text[data-v-07008ebf] {
   overflow-wrap: anywhere;
   min-width: 0;
@@ -29,6 +32,7 @@
   color: var(--p-primary-color);
   background: var(--p-content-hover-background);
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .sensitive-value-toggle[data-v-07008ebf]:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: 2px;

app/assets/styles/TicketAttachments.DtbJGLkE.css

@@ -1,3 +1,5 @@
+/* 工单附件：图片缩略图、文件入口、预览错误及下载操作。 */
+/* 导入方：app/components/TicketAttachments.vue、app/pages/tickets/[id].vue、app/pages/tickets/ticket.vue。 */
 .message-attachments[data-v-77cd676b] {
   border-top: 1px solid var(--p-content-border-color);
   flex-direction: column;
@@ -57,6 +59,7 @@
   min-width: 0;
   display: flex;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .attachment-name[data-v-77cd676b] {
   color: var(--p-primary-color);
   overflow-wrap: anywhere;
@@ -71,6 +74,7 @@
   min-width: 0;
   display: flex;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .file-attachment a[data-v-77cd676b] {
   color: var(--p-primary-color);
   overflow-wrap: anywhere;
@@ -79,6 +83,7 @@
   margin-left: 4px;
   font-size: 0.8125rem;
 }
+/* 附件不可用状态与可下载链接明确区分，实际下载/预览权限由脚本和后端控制。 */
 .attachment-unavailable[data-v-77cd676b] {
   color: var(--p-text-muted-color);
   overflow-wrap: anywhere;
@@ -91,6 +96,7 @@
 .preview-error[data-v-77cd676b] {
   padding: 24px 0;
 }
+/* 图片预览区域与下载操作分开，加载失败时保留可理解的错误反馈。 */
 .image-preview[data-v-77cd676b] {
   background: var(--p-content-hover-background);
   border-radius: 6px;
@@ -137,6 +143,7 @@
 .download-image[data-v-77cd676b]:hover {
   background: var(--p-primary-hover-color);
 }
+/* 视口条件 (width<=480px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=480px) {
   .thumbnail[data-v-77cd676b] {
     flex-basis: 80px;

app/assets/styles/UploadField.BbTCTv6C.css

@@ -1,3 +1,5 @@
+/* 文件上传字段：选择行、进度状态、移除与错误提示。 */
+/* 导入方：app/components/UploadField.vue、app/pages/account/index.vue、app/pages/account/realname/company.vue、app/pages/account/realname/index.vue、app/pages/account/realname/personal.vue。 */
 .field[data-v-8267b59f] {
   flex-direction: column;
   gap: 6px;

app/assets/styles/WechatConnection.DI5ko1xy.css

@@ -1,3 +1,5 @@
+/* 微信账号绑定：加载状态和绑定帮助说明。 */
+/* 导入方：app/components/WechatConnection.vue、app/pages/account/connections.vue。 */
 .wechat-connection[data-v-4c933481] {
   min-width: 0;
 }

app/assets/styles/WithdrawDialog.ks0wdKEK.css

@@ -1,3 +1,5 @@
+/* 提现弹窗：规则提示、金额表单与费用计算摘要。 */
+/* 导入方：app/components/WithdrawDialog.vue、app/components/home/HomeWalletCard.vue、app/pages/finance/index.vue、app/pages/index.vue、app/pages/recommend/index.vue。 */
 .sk[data-v-e4be3b52] {
   padding: 8px 0;
 }
@@ -87,10 +89,12 @@
 .calc-row.total > b[data-v-e4be3b52] {
   color: var(--p-text-color);
 }
+/* 应用深色主题覆盖，保持在基础颜色之后；主题切换只改变外观，不改变业务状态。 */
 .app-dark .notice {
   background: #172554;
   border-color: #1e3a8a;
 }
+/* 应用深色主题覆盖，保持在基础颜色之后；主题切换只改变外观，不改变业务状态。 */
 .app-dark .notice ul,
 .app-dark .notice-title {
   color: #bfdbfe;

app/assets/styles/_id_.C-0--Lx-.css

@@ -1,3 +1,5 @@
+/* 工单详情：消息线程、回复表单、附件和状态资料。 */
+/* 导入方：app/pages/tickets/[id].vue、app/pages/tickets/ticket.vue。 */
 .page[data-v-3743a20f] {
   flex-direction: column;
   gap: 16px;
@@ -178,6 +180,7 @@
 .field label[data-v-3743a20f] {
   font-size: 0.875rem;
 }
+/* 视口条件 (width<=768px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=768px) {
   .list-search[data-v-3743a20f],
   .list-select[data-v-3743a20f],
@@ -270,6 +273,7 @@
 .reply-box[data-v-3743a20f] textarea {
   min-height: 160px;
 }
+/* 视口条件 (width<=768px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=768px) {
   .reply-box[data-v-3743a20f],
   .thread[data-v-3743a20f] {

app/assets/styles/_id_.CSXsMADH.css

@@ -1,3 +1,5 @@
+/* 商品详情页：商品标题、相关入口与返回操作。 */
+/* 导入方：app/pages/products/[id].vue。 */
 .page[data-v-49461ec8] {
   flex-direction: column;
   gap: 32px;
@@ -14,6 +16,7 @@
   min-height: 36px;
   display: flex;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .product-head h1[data-v-49461ec8] {
   overflow-wrap: anywhere;
   margin: 0;
@@ -45,6 +48,7 @@
 .cart-link[data-v-49461ec8]:hover {
   color: var(--p-primary-color);
 }
+/* 视口条件 (width<=639px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=639px) {
   .product-head[data-v-49461ec8] {
     flex-wrap: wrap;

app/assets/styles/_id_.gjoJy9S8.css

@@ -1,3 +1,5 @@
+/* 订单详情/付款凭据：收据明细、流水、转账凭证及打印区域。 */
+/* 导入方：app/pages/bills/[id].vue、app/pages/orders/[id].vue、app/pages/orders/order/index.vue、app/pages/orders/order/paid.vue、app/pages/orders/order/pay.vue。 */
 .receipt-page[data-v-b3b3cd9c] {
   width: 100%;
   max-width: 560px;
@@ -22,6 +24,7 @@
 .receipt-nav a[data-v-b3b3cd9c]:hover {
   color: var(--p-primary-color);
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .receipt-nav > span[data-v-b3b3cd9c] {
   overflow-wrap: anywhere;
   text-align: right;
@@ -74,6 +77,7 @@
   height: 49px;
   display: grid;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .receipt-heading h2[data-v-b3b3cd9c] {
   overflow-wrap: anywhere;
   margin: 0 0 4px;
@@ -342,6 +346,7 @@
   gap: 14px;
   display: grid;
 }
+/* 视口条件 (width<=900px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=900px) {
   .payment-page .receipt-layout[data-v-b3b3cd9c] {
     grid-template-columns: minmax(0, 1fr);
@@ -359,6 +364,7 @@
     margin-bottom: 28px;
   }
 }
+/* 视口条件 (width<=600px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=600px) {
   .receipt[data-v-b3b3cd9c] {
     gap: 35px;
@@ -409,6 +415,7 @@
     margin-inline: 0;
   }
 }
+/* 打印介质覆盖：独立处理纸张上的显隐和排版，不直接沿用屏幕布局。 */
 @media print {
   .receipt-actions[data-v-b3b3cd9c],
   .receipt-feedback[data-v-b3b3cd9c],

app/assets/styles/account.CTvLXxT_.css

@@ -1,3 +1,5 @@
+/* 账号设置：等级、选项卡、资料字段和社交账号入口。 */
+/* 导入方：app/pages/account/index.vue。 */
 .acct[data-v-8ca4eb3d] {
   gap: 16px;
   width: 100%;
@@ -150,6 +152,7 @@
   padding-top: 18px;
   display: flex;
 }
+/* 视口条件 (width<=768px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=768px) {
   .tabs[data-v-8ca4eb3d] {
     gap: 0;
@@ -171,6 +174,7 @@
 .tabs[data-v-8ca4eb3d] {
   scrollbar-width: thin;
 }
+/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
 .tab[data-v-8ca4eb3d]:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: -3px;
@@ -184,6 +188,7 @@
 .social-field .sec-desc[data-v-8ca4eb3d] {
   margin: 7px 0;
 }
+/* 视口条件 (width<=640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=640px) {
   .acct[data-v-8ca4eb3d] {
     gap: 14px;

app/assets/styles/api-keys.Bq3Csr53.css

@@ -1,3 +1,5 @@
+/* API密钥管理：创建表单、密钥文本及IP白名单编辑。 */
+/* 导入方：app/pages/account/api-keys.vue。 */
 .create-key[data-v-76e29360] {
   border-top: 1px solid var(--console-panel-border);
   flex-wrap: wrap;
@@ -26,6 +28,7 @@
   gap: 8px;
   display: flex;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .token[data-v-76e29360] {
   overflow-wrap: anywhere;
   white-space: normal;
@@ -39,6 +42,7 @@
   gap: 16px;
   display: grid;
 }
+/* 视口条件 (width<=640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=640px) {
   .create-key-field[data-v-76e29360] {
     max-width: none;

app/assets/styles/bind.CFZQE2UH.css

@@ -1,3 +1,5 @@
+/* 第三方账号绑定：账号表单、区号和协议确认。 */
+/* 导入方：app/pages/oauth/bind.vue。 */
 .session-status[data-v-146faed1] {
   justify-content: center;
   align-items: center;
@@ -54,6 +56,7 @@ legend[data-v-146faed1] {
   flex-shrink: 0;
   margin-top: 4px;
 }
+/* 视口条件 (width<=360px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=360px) {
   .input-row[data-v-146faed1]:has(button) {
     flex-wrap: wrap;