docs: explain stylesheet ownership, responsive rules and display boundaries

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);