refactor: replace media queries with mixin for responsive design consistency

assets/css/_core/_mixin/_theme-vars.scss

@@ -39,6 +39,21 @@
   }
 }
 
+/// Light mode content wrapper
+/// - Explicit light mode: [data-theme-mode='light']
+/// - Auto mode with system light preference: [data-theme-mode='auto'] + prefers-color-scheme
+@mixin light-mode {
+  [data-theme-mode='light'] & {
+    @content;
+  }
+
+  @media (prefers-color-scheme: light) {
+    [data-theme-mode='auto'] & {
+      @content;
+    }
+  }
+}
+
 /// Dark mode content wrapper
 /// - Explicit dark mode: [data-theme-mode='dark']
 /// - Auto mode with system dark preference: [data-theme-mode='auto'] + prefers-color-scheme
@@ -48,7 +63,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    :root[data-theme-mode='auto'] & {
+    [data-theme-mode='auto'] & {
       @content;
     }
   }

assets/css/_page/_single/_shortcodes/_douyin.scss

@@ -15,7 +15,7 @@
   }
 }
 
-@media only screen and (max-width: 680px) {
+@include media('xs') {
   .douyin {
     width: 92%;
     margin-inline: 4%;

assets/css/_page/_single/_shortcodes/_tabs.scss

@@ -526,7 +526,7 @@ tab-container {
 // ========================================
 // Responsive design for smaller screens
 // ========================================
-@media only screen and (max-width: 680px) {
+@include media('xs') {
   tab-container {
     &[type='underline'] {
       &[placement='top'],

assets/css/_page/_special/_friends.scss

@@ -9,7 +9,7 @@
     flex-wrap: wrap;
   }
 
-  @media (max-width: 576px) {
+  @include media('xs') {
     .friend-links {
       justify-content: space-around;
     }