docs: explain stylesheet ownership, responsive rules and display boundaries

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;