docs: explain stylesheet ownership, responsive rules and display boundaries

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