docs: explain stylesheet ownership, responsive rules and display boundaries

app/assets/styles/vouchers.5FV4ozrh.css

@@ -1,3 +1,5 @@
+/* 优惠券中心：券面金额、使用门槛、可用/失效状态及分页。 */
+/* 导入方：app/pages/vouchers/index.vue。 */
 .voucher-page[data-v-b08e3df0] {
   flex-direction: column;
   gap: 21px;
@@ -149,12 +151,14 @@
 .face-value small[data-v-b08e3df0] {
   font-size: 1.125rem;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .face-value strong[data-v-b08e3df0] {
   overflow-wrap: anywhere;
   font-size: clamp(24px, 2.6vw, 36px);
   font-weight: 650;
   line-height: 1.2;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .face-threshold[data-v-b08e3df0] {
   overflow-wrap: anywhere;
   font-size: 0.875rem;
@@ -236,6 +240,7 @@
 .voucher-footer .p-button[data-v-b08e3df0] {
   flex-shrink: 0;
 }
+/* 不可用券的视觉弱化，实际可用性仍须由后端结算校验。 */
 .inactive .voucher-face[data-v-b08e3df0],
 .use-tip[data-v-b08e3df0] {
   color: var(--p-text-muted-color);
@@ -282,11 +287,13 @@
   background: 0 0;
   padding: 0;
 }
+/* 视口条件 (width<=1000px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=1000px) {
   .guide-note[data-v-b08e3df0] {
     display: none;
   }
 }
+/* 视口条件 (width<=640px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=640px) {
   .page-head[data-v-b08e3df0] {
     flex-wrap: wrap;