@cyberskill/design 2.7.0 → 2.9.0

package/tokens/variables.css

@@ -8,7 +8,7 @@
   --cs-color-text-primary: #45210E;
   --cs-color-text-inverse: #FFFFFF;
   --cs-color-text-accent: #6E3B0E;
-  --cs-color-text-muted: #3F2D21;
+  --cs-color-text-muted: #5E4436;
   --cs-color-semantic-success: #166534;
   --cs-color-semantic-danger: #B42318;
   --cs-color-semantic-warning: #92400E;
@@ -176,9 +176,9 @@
   --cs-glass-heavy-blur: 24px;    --cs-glass-heavy-saturate: 180%;   --cs-glass-heavy-opacity: 90%;
   --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06);
   --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06);
-  --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18);
+  --cs-shadow-md: 0 12px 30px rgba(69, 33, 14, 0.14);
   --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18);
-  --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26);
+  --cs-shadow-xl: 0 24px 80px rgba(69, 33, 14, 0.24);
 }
 [data-theme="dark"] {
   --cs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
@@ -278,7 +278,7 @@
 /* Source: tokens/elements.css */
 :root {
   --cs-accent: #F4BA17;
-  --cs-accent-strong: #916D11;
+  --cs-accent-strong: #A4631E;
   --cs-accent-bright: #F4BA17;
   --cs-accent-on: #45210E;
   --cs-accent-on-strong: #FFFFFF;
@@ -305,7 +305,7 @@
   --_cs-dark-color-text-inverse: #1a1108;
   --_cs-light-color-text-accent: #6E3B0E;
   --_cs-dark-color-text-accent: #FECD5D;
-  --_cs-light-color-text-muted: #3F2D21;
+  --_cs-light-color-text-muted: #5E4436;
   --_cs-dark-color-text-muted: #E9D6C2;
   --_cs-light-color-semantic-success: #166534;
   --_cs-dark-color-semantic-success: #4ADE80;
@@ -357,16 +357,16 @@
   --_cs-dark-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
   --_cs-light-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06);
   --_cs-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42);
-  --_cs-light-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18);
+  --_cs-light-shadow-md: 0 12px 30px rgba(69, 33, 14, 0.14);
   --_cs-dark-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50);
   --_cs-light-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18);
   --_cs-dark-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
-  --_cs-light-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26);
+  --_cs-light-shadow-xl: 0 24px 80px rgba(69, 33, 14, 0.24);
   --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62);
   --_cs-light-accent: #F4BA17;
   --_cs-dark-accent: #F4BA17;
-  --_cs-light-accent-strong: #916D11;
-  --_cs-dark-accent-strong: #916D11;
+  --_cs-light-accent-strong: #A4631E;
+  --_cs-dark-accent-strong: #A4631E;
   --_cs-light-accent-bright: #F4BA17;
   --_cs-dark-accent-bright: #F4BA17;
   --_cs-light-accent-on: #45210E;
@@ -421,6 +421,8 @@
   --_cs-dark-color-text-accent: #F9E5AE;
   --_cs-light-color-link: #695300;
   --_cs-dark-color-link: #F9E5AE;
+  --_cs-light-color-text-muted: #5E4436;
+  --_cs-dark-color-text-muted: #EBD8C4;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -439,8 +441,8 @@
 [data-cs-element="tho"] {
   --_cs-light-accent: #F4BA17;
   --_cs-dark-accent: #E9B321;
-  --_cs-light-accent-strong: #916D11;
-  --_cs-dark-accent-strong: #6E5205;
+  --_cs-light-accent-strong: #A4631E;
+  --_cs-dark-accent-strong: #7D480C;
   --_cs-light-accent-bright: #F4BA17;
   --_cs-dark-accent-bright: #FDD378;
   --_cs-light-accent-on: #45210E;
@@ -459,8 +461,10 @@
   --_cs-dark-accent-grad-b: #C4B78F;
   --_cs-light-color-text-accent: #6E3B0E;
   --_cs-dark-color-text-accent: #FFD57A;
-  --_cs-light-color-link: #644A05;
+  --_cs-light-color-link: #744000;
   --_cs-dark-color-link: #FFD57A;
+  --_cs-light-color-text-muted: #5E4436;
+  --_cs-dark-color-text-muted: #E9D6C2;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -472,7 +476,7 @@
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
   --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #6E5205;
+  --_cs-dark-component-button-primary-bg: #7D480C;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
@@ -501,6 +505,8 @@
   --_cs-dark-color-text-accent: #FFD2AF;
   --_cs-light-color-link: #462402;
   --_cs-dark-color-link: #FFD2AF;
+  --_cs-light-color-text-muted: #442B1E;
+  --_cs-dark-color-text-muted: #E9D6C2;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -541,6 +547,8 @@
   --_cs-dark-color-text-accent: #FDDDDE;
   --_cs-light-color-link: #714B4D;
   --_cs-dark-color-link: #FDDDDE;
+  --_cs-light-color-text-muted: #5E4436;
+  --_cs-dark-color-text-muted: #E9D6C2;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -581,6 +589,8 @@
   --_cs-dark-color-text-accent: #FFD1BA;
   --_cs-light-color-link: #793609;
   --_cs-dark-color-link: #FFD1BA;
+  --_cs-light-color-text-muted: #5E4436;
+  --_cs-dark-color-text-muted: #E9D6C2;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -621,6 +631,8 @@
   --_cs-dark-color-text-accent: #FDD0CA;
   --_cs-light-color-link: #550306;
   --_cs-dark-color-link: #FDD0CA;
+  --_cs-light-color-text-muted: #422A1D;
+  --_cs-dark-color-text-muted: #E9D6C2;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -661,6 +673,8 @@
   --_cs-dark-color-text-accent: #A6F8F6;
   --_cs-light-color-link: #116060;
   --_cs-dark-color-link: #A6F8F6;
+  --_cs-light-color-text-muted: #5E4436;
+  --_cs-dark-color-text-muted: #EBD8C4;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -701,6 +715,8 @@
   --_cs-dark-color-text-accent: #79EDFF;
   --_cs-light-color-link: #0D535C;
   --_cs-dark-color-link: #79EDFF;
+  --_cs-light-color-text-muted: #5E4436;
+  --_cs-dark-color-text-muted: #E9D6C2;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -741,6 +757,8 @@
   --_cs-dark-color-text-accent: #AFE2FA;
   --_cs-light-color-link: #003142;
   --_cs-dark-color-link: #AFE2FA;
+  --_cs-light-color-text-muted: #452D1F;
+  --_cs-dark-color-text-muted: #E9D6C2;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -781,6 +799,8 @@
   --_cs-dark-color-text-accent: #DCF0B1;
   --_cs-light-color-link: #4A5B02;
   --_cs-dark-color-link: #DCF0B1;
+  --_cs-light-color-text-muted: #5E4436;
+  --_cs-dark-color-text-muted: #EBD8C4;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -821,6 +841,8 @@
   --_cs-dark-color-text-accent: #B2EC9E;
   --_cs-light-color-link: #24570B;
   --_cs-dark-color-link: #B2EC9E;
+  --_cs-light-color-text-muted: #5E4436;
+  --_cs-dark-color-text-muted: #E9D6C2;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -861,6 +883,8 @@
   --_cs-dark-color-text-accent: #B0E7C3;
   --_cs-light-color-link: #04361D;
   --_cs-dark-color-link: #B0E7C3;
+  --_cs-light-color-text-muted: #452D1F;
+  --_cs-dark-color-text-muted: #E9D6C2;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -901,6 +925,8 @@
   --_cs-dark-color-text-accent: #D6E9FD;
   --_cs-light-color-link: #3D5670;
   --_cs-dark-color-link: #D6E9FD;
+  --_cs-light-color-text-muted: #5E4436;
+  --_cs-dark-color-text-muted: #EBD8C4;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -941,6 +967,8 @@
   --_cs-dark-color-text-accent: #E5DBBA;
   --_cs-light-color-link: #564B27;
   --_cs-dark-color-link: #E5DBBA;
+  --_cs-light-color-text-muted: #5E4436;
+  --_cs-dark-color-text-muted: #E9D6C2;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -981,6 +1009,8 @@
   --_cs-dark-color-text-accent: #C8DBFD;
   --_cs-light-color-link: #1B2E4C;
   --_cs-dark-color-link: #C8DBFD;
+  --_cs-light-color-text-muted: #442B1E;
+  --_cs-dark-color-text-muted: #E9D6C2;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -1052,6 +1082,9 @@
 [data-cs-style="liquid-glass"] {
   --cs-style-pack: liquid-glass;
 }
+[data-cs-style="matte-paper"] {
+  --cs-style-pack: matte-paper;
+}
 /* Source: tokens/theme-attributes.css */
 :root {
   --cs-density-space-1: var(--cs-space-1);
@@ -1166,14 +1199,14 @@
   --cs-term-dot: #5b4331;
   --cs-term-bg: #1a1108;
   --cs-term-fg: #f5ead9;
-  --cs-term-muted: #c9b7a3;
+  --cs-term-muted: #e9d6c2;
 }
 /* Source: base/collections.css */
 .cs-code {
   --cs-code-bg: #2b1e14;
   --cs-code-fg: #f5ead9;
   --cs-code-border: #4a3a2c;
-  --cs-code-muted: #c9b7a3;
+  --cs-code-muted: #e9d6c2;
 }
 /* Source: base/shell.css */
 /* Source: base/glass.css */

package/tokens/viewer.html

@@ -24,6 +24,7 @@
   .chips button[aria-pressed="true"]{background:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre));color:var(--_cs-light,var(--cs-color-text-inverse)) var(--_cs-dark,var(--cs-color-brand-umber));border-color:var(--_cs-light,var(--cs-color-brand-umber)) var(--_cs-dark,var(--cs-color-brand-ochre))}
   .chips :is(.n,.num){font-family:var(--cs-font-family-mono);font-size:12px;opacity:.85;margin-inline-start:4px}
   .panel{flex:1;min-height:0;min-width:0;max-width:100%;overflow:auto}
+  #tablePanel{padding-block-end:20px}
   .panel.hide{display:none}
   table{width:100%;border-collapse:collapse;font-size:13px}
   th,td{text-align:start;padding:8px 12px;border-block-end:1px solid var(--cs-color-border-default);vertical-align:top}

package/ui_kits/status-hub/login.html

@@ -29,7 +29,7 @@
   .fine { text-align: center; font-size: 13px; color: var(--cs-color-text-muted); margin-top: 4px; }
   .state-bar { max-width: calc(100% - 96px); position: fixed; left: 20px; bottom: 20px; z-index: 60; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: 12px; box-shadow: var(--cs-shadow-xs); font-size: 13px; }
   .state-bar label { flex-wrap: wrap; display: flex; align-items: center; gap: 6px; color: var(--cs-color-text-muted); }
-  .state-bar select { font: inherit; }
+  .state-bar select { font: inherit; border: 1px solid var(--cs-component-textfield-border-default, var(--cs-color-border-default)); border-radius: var(--cs-radius-sm); background: var(--cs-color-surface-page); color: var(--cs-color-text-primary); padding: 4px 8px; }
   [hidden] { display: none !important; }
   @media (max-width: 820px) { .state-bar { position: static; margin: 0 76px 20px 20px; } .login { grid-template-columns: minmax(0, 1fr); } .pane-brand { display: none; } }
 </style>
@@ -80,13 +80,13 @@
     </select>
   </label>
 </div>
-<button id="themeToggle" aria-label="Toggle theme" data-vi-aria-label="Đổi giao diện" style="position:fixed;right:20px;bottom:20px;z-index:60;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);width:44px;height:44px;border-radius:999px;cursor:pointer;box-shadow:var(--cs-shadow-md)">☾</button>
+<button id="themeToggle" type="button" aria-label="Toggle theme" data-vi-aria-label="Đổi giao diện" style="position:fixed;right:20px;bottom:20px;z-index:60;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);width:44px;height:44px;border-radius:999px;cursor:pointer;box-shadow:var(--cs-shadow-md);display:grid;place-items:center"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path id="themeTogglePath" d="M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z"/></svg></button>
 <script>
   document.querySelector("form").addEventListener("submit", function (event) { event.preventDefault(); });
   document.getElementById("themeToggle").addEventListener("click", function () {
     var el = document.documentElement, dark = el.getAttribute("data-theme") === "dark";
     el.setAttribute("data-theme", dark ? "light" : "dark");
-    this.textContent = dark ? "☾" : "☀";
+    document.getElementById("themeTogglePath").setAttribute("d", dark ? "M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z" : "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4");
   });
   function applyState(state) {
     var banner = document.getElementById("errBanner");

package/ui_kits/status-hub/project.html

@@ -17,7 +17,7 @@
   .crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cs-color-text-muted); margin: 18px 0 16px; flex-wrap: wrap; }
   .crumb a { color: var(--cs-color-text-muted); text-decoration: none; white-space: nowrap; }
   .crumb a:hover { color: var(--cs-color-text-accent); }
-  .crumb .sep { color: var(--cs-color-border-default); }
+  .crumb .sep { color: var(--cs-color-text-muted); }
   .crumb .cur { color: var(--cs-color-text-primary); font-weight: 600; }
   .pd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
   .pd-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
@@ -34,7 +34,6 @@
   .task:first-of-type { border-top: 0; }
   .task .mono { font-family: var(--cs-font-family-mono); font-size: 12.5px; color: var(--cs-color-text-primary); }
   .task .nm { flex: 1; font-size: 14px; }
-  .toggle { position: fixed; right: 20px; bottom: 20px; z-index: 60; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); width: 44px; height: 44px; border-radius: 999px; cursor: pointer; box-shadow: var(--cs-shadow-xs); display: grid; place-items: center; }
   @media (max-width: 820px) { .pd-grid { grid-template-columns: 1fr; } }
   @container cs (max-width: 768px) { .pd-grid { grid-template-columns: 1fr; } }
 </style>
@@ -48,7 +47,7 @@
         <span class="hd-mark"><img src="../../assets/logo-mark.svg" alt="" /></span>
         <div><h1>Status Hub</h1><p class="hd-sub" data-vi="CyberSkill · chi tiết dự án">CyberSkill · project detail</p></div>
       </div>
-      <div class="hd-side"><button type="button" class="cs-button cs-button--secondary cs-button--sm" data-preview-language-toggle>Tiếng Việt</button><p class="hd-meta"><span data-vi="Dữ liệu minh họa">Sample data</span><br /><span data-vi="2 giờ trước · An Le">2h ago · An Le</span></p></div>
+      <div class="hd-side"><p class="hd-meta"><span data-vi="Dữ liệu minh họa">Sample data</span><br /><span data-vi="2 giờ trước · An Le">2h ago · An Le</span></p><button type="button" class="btn ghost" style="width:auto;padding:0 12px;font-weight:700;font-size:13px" data-preview-language-toggle>Tiếng Việt</button><button type="button" class="btn ghost" id="themeToggle" aria-label="Toggle theme" data-vi-aria-label="Đổi giao diện"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path id="themeTogglePath" d="M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z"/></svg></button></div>
     </div>
   </header>
 
@@ -81,7 +80,7 @@
       <div class="stat"><div class="l" data-vi="Tiến độ">Progress</div><div class="v">72%</div></div>
       <div class="stat"><div class="l" data-vi="Công việc">Tasks</div><div class="v">18</div></div>
       <div class="stat"><div class="l" data-vi="Đã ra mắt">Shipped</div><div class="v">13</div></div>
-      <div class="stat"><div class="l" data-vi="Mục tiêu">Target</div><div class="v" style="font-size:18px;padding-top:6px" data-vi="Tuần này">This week</div></div>
+      <div class="stat"><div class="l" data-vi="Mục tiêu">Target</div><div class="v" style="font-size:21px;padding-top:4px" data-vi="Tuần này">This week</div></div>
     </div>
 
     <div style="margin:8px 0 22px">
@@ -129,13 +128,12 @@
     </div>
   </main>
 </div>
-<button class="toggle" id="themeToggle" aria-label="Toggle theme" data-vi-aria-label="Đổi giao diện">☾</button>
 <script>
   document.getElementById("themeToggle").addEventListener("click", function () {
     var el = document.documentElement;
     var dark = el.getAttribute("data-theme") === "dark";
     el.setAttribute("data-theme", dark ? "light" : "dark");
-    this.textContent = dark ? "☾" : "☀";
+    document.getElementById("themeTogglePath").setAttribute("d", dark ? "M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z" : "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4");
   });
 </script>
 <script src="static-locale.js"></script>

package/ui_kits/status-hub/settings.html

@@ -37,7 +37,7 @@
         <span class="hd-mark"><img src="../../assets/logo-mark.svg" alt="" /></span>
         <div><h1 data-vi="Cài đặt">Settings</h1><p class="hd-sub" data-vi="CyberSkill · không gian làm việc và tùy chọn">CyberSkill · workspace &amp; preferences</p></div>
       </div>
-      <div class="hd-side"><div class="hd-meta"><span data-vi="Hồ sơ minh họa">Sample profile</span><br />an@cyberskill.world</div></div>
+      <div class="hd-side"><div class="hd-meta"><span data-vi="Hồ sơ minh họa">Sample profile</span><br />an@cyberskill.world</div><button type="button" class="btn ghost" id="themeToggle" aria-label="Toggle theme" data-vi-aria-label="Đổi giao diện"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path id="themeTogglePath" d="M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z"/></svg></button></div>
     </div>
   </header>
 
@@ -93,13 +93,12 @@
     </form>
   </main>
 </div>
-<button id="themeToggle" aria-label="Toggle theme" data-vi-aria-label="Đổi giao diện" style="position:fixed;right:20px;bottom:20px;z-index:60;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);width:44px;height:44px;border-radius:999px;cursor:pointer;box-shadow:var(--cs-shadow-md)">☾</button>
 <script>
   document.querySelector("form").addEventListener("submit", function (event) { event.preventDefault(); });
   document.getElementById("themeToggle").addEventListener("click", function () {
     var el = document.documentElement, dark = el.getAttribute("data-theme") === "dark";
     el.setAttribute("data-theme", dark ? "light" : "dark");
-    this.textContent = dark ? "☾" : "☀";
+    document.getElementById("themeTogglePath").setAttribute("d", dark ? "M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z" : "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4");
   });
 
   document.getElementById("appearance-theme").addEventListener("click", function(){ document.getElementById("themeToggle").click(); });

package/ui_kits/status-hub/status.css

@@ -56,7 +56,7 @@ html, body { overflow-x: clip; }
 .hd-mark img { width: 42px; height: 42px; display: block; }
 .hd h1 { margin: 0; font-size: 24px; letter-spacing: .2px; line-height: var(--cs-font-lineHeight-heading); }
 .hd-sub { margin: 2px 0 0; font-size: 13.5px; opacity: .8; }
-.hd-side { display: flex; align-items: center; gap: var(--cs-space-4); }
+.hd-side { display: flex; align-items: center; gap: var(--cs-space-4); flex-wrap: wrap; }
 .hd-meta { margin: 0; font-size: 12.5px; opacity: .75; text-align: right; }
 
 /* buttons */
@@ -65,7 +65,11 @@ html, body { overflow-x: clip; }
   font: inherit; font-size: 13.5px; font-weight: 600; }
 .btn:hover { border-color: var(--cs-color-brand-ochre); }
 .hd .btn.ghost { background: transparent; border-color: var(--cs-status-ghost-border);
-  color: var(--cs-status-header-fg); width: 38px; height: 38px; padding: 0; display: grid; place-items: center; }
+  color: var(--cs-status-header-fg); width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
+.hd .btn.ghost:hover { border-color: var(--cs-color-brand-ochre); }
+@media (pointer: coarse) {
+  .hd .btn.ghost { min-width: 44px; min-height: 44px; }
+}
 
 /* deck */
 .deck { margin: var(--cs-space-6) 0 var(--cs-space-4); display: grid; gap: var(--cs-space-4);
@@ -93,10 +97,10 @@ html, body { overflow-x: clip; }
 .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
 .spark { display: flex; align-items: flex-end; gap: 6px; height: 96px; margin-top: var(--cs-space-2); }
 .spark a { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
-  gap: 4px; text-decoration: none; color: var(--cs-color-text-muted); font-size: 10.5px; }
+  gap: 4px; text-decoration: none; color: var(--cs-color-text-muted); font-size: 11px; }
 .spark i { display: block; width: 100%; background: var(--cs-color-brand-ochre); border-radius: 4px 4px 0 0; min-height: 3px; }
 .spark a:hover i { background: var(--cs-color-text-accent); }
-.spark b { font-size: 11px; color: var(--cs-color-text-primary); font-weight: 600; }
+.spark b { font-size: 11.5px; color: var(--cs-color-text-primary); font-weight: 600; }
 
 /* now shipping */
 .now { background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-brand-ochre);
@@ -112,6 +116,7 @@ html, body { overflow-x: clip; }
   border: 1px solid var(--cs-color-border-default); border-radius: 14px;
   padding: var(--cs-space-3) var(--cs-space-4); margin-bottom: var(--cs-space-4); }
 @media (prefers-reduced-transparency: reduce) { .bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cs-color-surface-page); } }
+[data-cs-style="matte-paper"] .bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cs-color-surface-panel); box-shadow: var(--cs-shadow-xs); }
 .bar-top { display: flex; gap: var(--cs-space-3); align-items: center; flex-wrap: wrap; }
 .srch { flex: 1 1 340px; display: flex; align-items: center; gap: var(--cs-space-2);
   background: var(--cs-color-surface-panel); border: 1px solid var(--cs-component-textfield-border-default);
@@ -125,21 +130,21 @@ html, body { overflow-x: clip; }
 .ln { border: 0; background: transparent; border-radius: var(--cs-radius-full); padding: 7px 15px;
   font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--cs-color-text-accent); }
 .ln[aria-selected="true"] { background: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); color: var(--_cs-light, var(--cs-color-text-inverse)) var(--_cs-dark, var(--cs-status-on-ochre)); }
-.facet { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cs-color-text-muted); }
+.facet { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cs-color-text-muted); }
 .facet select { background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary);
-  border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-sm); padding: 6px 8px;
-  font-family: inherit; font-size: 13px; }
+  border: 1px solid var(--cs-component-textfield-border-default, var(--cs-color-border-default)); border-radius: var(--cs-radius-full); min-height: 36px; padding: 0 12px;
+  font-family: inherit; font-size: 13px; cursor: pointer; }
 .cnt { margin-left: auto; font-size: 12.5px; color: var(--cs-color-text-muted); }
 
 /* pills + chips */
-.pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--cs-radius-full);
+.pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--cs-radius-full);
   text-transform: uppercase; letter-spacing: .04em; }
 .pill.done { background: var(--cs-color-semantic-success); color: var(--cs-status-on-fill); }
 .pill.active { background: var(--cs-color-brand-ochre); color: var(--cs-status-on-ochre); }
 .pill.hold { background: var(--cs-color-semantic-danger); color: var(--cs-status-on-fill); }
 .pill.todo { background: var(--cs-color-border-default); color: var(--cs-color-text-accent); }
 .task-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--cs-space-2); }
-.chip { font-size: 11px; font-weight: 600; padding: 3px 7px;
+.chip { font-size: 11.5px; font-weight: 600; padding: 3px 7px;
   border-radius: 6px; cursor: pointer; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent);
   border: 1px solid var(--cs-color-border-default); }
 .chip:hover { border-color: var(--cs-color-brand-ochre); }
@@ -150,9 +155,9 @@ html, body { overflow-x: clip; }
 /* board */
 .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--cs-space-4); }
 .card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default);
-  border-radius: 14px; padding: var(--cs-space-4); cursor: pointer; text-align: left; font: inherit; color: inherit; }
+  border-radius: 14px; padding: var(--cs-space-4); cursor: pointer; text-align: left; font: inherit; color: inherit; box-shadow: var(--cs-shadow-xs); }
 .card:hover { border-color: var(--cs-color-brand-ochre); }
-.card.hot { border-color: var(--cs-color-brand-ochre); }
+.card.hot { border-inline-start: 3px solid var(--cs-color-brand-ochre); }
 .card-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cs-space-2); }
 .card-h h3 { margin: 0; font-size: 15px; line-height: var(--cs-font-lineHeight-heading); }
 .card-h .pct { font-size: 12.5px; color: var(--cs-color-text-muted); white-space: nowrap; }
@@ -166,7 +171,7 @@ html, body { overflow-x: clip; }
   background: var(--cs-color-surface-panel); }
 table.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
 .tbl th, .tbl td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--cs-color-border-default); vertical-align: top; }
-.tbl thead th { background: var(--cs-color-surface-raised); font-size: 11.5px; text-transform: uppercase;
+.tbl thead th { background: var(--cs-color-surface-raised); font-size: 12px; text-transform: uppercase;
   letter-spacing: .06em; color: var(--cs-color-text-muted); white-space: nowrap; }
 .tbl tbody tr { cursor: pointer; }
 .tbl tbody tr:hover { background: var(--cs-color-surface-raised); }
@@ -183,7 +188,7 @@ table.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
 .rel.now .tick { background: var(--cs-color-brand-ochre); color: var(--cs-status-on-ochre); }
 .rel-h { display: flex; align-items: baseline; gap: var(--cs-space-3); flex-wrap: wrap; }
 .rel-h b { font-size: 17px; font-family: var(--cs-font-family-mono); }
-.rel-sec h4 { margin: var(--cs-space-3) 0 var(--cs-space-1); font-size: 11.5px; text-transform: uppercase;
+.rel-sec h4 { margin: var(--cs-space-3) 0 var(--cs-space-1); font-size: 12px; text-transform: uppercase;
   letter-spacing: .07em; color: var(--cs-color-text-muted); }
 .rel-sec ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
 .rel-sec li { margin: 3px 0; }
@@ -206,7 +211,7 @@ table.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
 .dw-b { overflow: auto; padding: var(--cs-space-5); flex: 1; }
 .meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--cs-space-3);
   margin: 0 0 var(--cs-space-4); }
-.meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cs-color-text-muted); }
+.meta dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cs-color-text-muted); }
 .meta dd { margin: 2px 0 0; font-size: 13.5px; }
 .sect h3 { margin: var(--cs-space-5) 0 var(--cs-space-2); font-size: 12px; text-transform: uppercase;
   letter-spacing: .08em; color: var(--cs-color-text-muted); }
@@ -218,8 +223,12 @@ table.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
 .ft { margin: var(--cs-space-12) 0 var(--cs-space-16); text-align: center; font-size: 12px; color: var(--cs-color-text-muted); }
 
 /* Viewport fallback. */
-@media (max-width: 768px), (min-width: 1024px) { .pill, .chip, .tbl thead th, .rel-sec h4, .meta dt, .spark a, .spark b { font-size: 12px; } }
 @media (max-width: 900px) { .deck { grid-template-columns: 1fr; } .hd-meta { text-align: left; } }
+@media (max-width: 480px) {
+  .wrap, .hd-in { padding-inline: var(--cs-space-4); }
+  .hd-in { gap: var(--cs-space-3); }
+  .hd-side { gap: var(--cs-space-2); }
+}
 /* G1 / TASK-IMP-025 — deck + board card grid from `.wrap` container width. */
 @container cs (max-width: 768px) {
   .deck { grid-template-columns: 1fr; }

package/ui_kits/website/careers.html

@@ -12,30 +12,24 @@
 <style>
   /* hero: banner */
   html, body { margin: 0; }
-  @media screen and (min-width: 1024px) {
-    .car-hero + .sec { padding-top: 84px; }
-    .roles { gap: 28px; }
-    .role { padding: 36px 28px; }
-  }
-  .car-hero { background: var(--cs-color-brand-umber); color: #fff; padding: 88px 0 64px; position: relative; overflow: hidden; }
+  .car-hero { background: var(--cs-color-brand-umber); color: #fff; padding: 76px 0 56px; position: relative; overflow: hidden; }
   .car-hero::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-tho.webp"); background-size: cover; background-position: center; opacity: .32; }
   .car-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,17,8,.28), rgba(26,17,8,.78)); }
   .car-hero .container { position: relative; z-index: 1; }
   .car-hero h1 { font-size: clamp(36px, 5vw, 54px); font-weight: 800; letter-spacing: -.02em; color: var(--cs-color-brand-ochre); margin: 12px 0 6px; }
   .car-hero p { font-size: 18px; opacity: .92; max-width: 600px; margin: 0; }
-  .vals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
-  .val { border-top: 3px solid var(--cs-color-brand-ochre); padding-top: 12px; }
-  .sec .eyebrow { margin-bottom: 20px; }
+  .vals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px; }
+  .val { border-top: 3px solid var(--cs-color-brand-ochre); padding-top: 14px; }
+  .sec .eyebrow { margin-bottom: 8px; }
   .val h3 { margin: 0 0 6px; font-size: 18px; }
   .val p { margin: 0; color: var(--cs-color-text-muted); font-size: 14px; line-height: 1.5; }
-  .roles { display: grid; gap: 12px; }
-  .role { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); background: var(--cs-color-surface-panel); transition: border-color .12s; flex-wrap: wrap; }
-  .role:hover { border-color: var(--cs-color-brand-ochre); }
+  .roles { display: grid; gap: 14px; margin-top: 24px; }
+  .role { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); background: var(--cs-color-surface-panel); box-shadow: var(--cs-shadow-xs); transition: border-color var(--cs-duration-fast) var(--cs-ease-standard); flex-wrap: wrap; }
+  .role:hover { border-color: var(--cs-color-brand-ochre); box-shadow: var(--cs-shadow-sm); }
   .role h3 { margin: 0 0 4px; font-size: 19px; }
   .role .meta { color: var(--cs-color-text-muted); font-size: 14px; display: flex; gap: 14px; flex-wrap: wrap; }
   @media (max-width: 760px) { .vals { grid-template-columns: 1fr 1fr; } .nav { display: none; } }
-  /* Fixed44px theme button sits20px above the edge; reserve20px clearance. */
-  .ft { padding-bottom: 84px; }
+  @media (max-width: 480px) { .vals { grid-template-columns: 1fr; } }
 </style>
 </head>
 <body>
@@ -45,7 +39,7 @@
     <div class="container hdr-in">
       <a class="brand" href="index.html"><img src="../../assets/logo-mark.svg" alt="" />CyberSkill</a>
       <nav class="nav"><a href="index.html#services" data-vi="Dịch vụ">Services</a><a href="work.html" data-vi="Dự án">Work</a><a href="careers.html" data-vi="Tuyển dụng">Careers</a><a href="index.html#contact" data-vi="Liên hệ">Contact</a></nav>
-      <div class="hdr-side"><a class="mini" href="#" id="langToggle" aria-label="Switch to Tiếng Việt" data-vi-aria-label="Chuyển sang English">Tiếng Việt</a><a class="mini" style="background:var(--cs-color-brand-umber);color:#fff;border-color:transparent" href="index.html#top" data-vi="Trò chuyện với Lumi">Talk to Lumi</a></div>
+      <div class="hdr-side"><a class="mini" href="#" id="langToggle" aria-label="Switch to Tiếng Việt" data-vi-aria-label="Chuyển sang English">Tiếng Việt</a><button id="themeToggle" type="button" class="mini icon" aria-label="Toggle theme" data-vi-aria-label="Đổi giao diện"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path id="themeTogglePath" d="M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z"/></svg></button><a class="mini" style="background:var(--cs-color-brand-umber);color:#fff;border-color:transparent" href="index.html#top" data-vi="Trò chuyện với Lumi">Talk to Lumi</a></div>
     </div>
   </header>
 
@@ -102,12 +96,11 @@
     </div>
   </footer>
 </div>
-<button id="themeToggle" aria-label="Toggle theme" data-vi-aria-label="Đổi giao diện" style="position:fixed;right:20px;bottom:20px;z-index:60;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);width:44px;height:44px;border-radius:999px;cursor:pointer;box-shadow:var(--cs-shadow-md)">☾</button>
 <script>
   document.getElementById("themeToggle").addEventListener("click", function () {
     var el = document.documentElement, dark = el.getAttribute("data-theme") === "dark";
     el.setAttribute("data-theme", dark ? "light" : "dark");
-    this.textContent = dark ? "☾" : "☀";
+    document.getElementById("themeTogglePath").setAttribute("d", dark ? "M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z" : "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4");
   });
 </script>
 <script>

package/ui_kits/website/chat.html

@@ -13,6 +13,8 @@
   html, body { margin: 0; height: 100%; }
   .lumi-page { display: grid; grid-template-columns: 288px 1fr; height: 100vh; background: var(--cs-color-surface-page); font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
   .lumi-side { border-right: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); display: flex; flex-direction: column; padding: 16px 14px; gap: 4px; }
+  .lumi-side .cs-sidebar { inline-size: 100%; padding: 0; border-inline-end: 0; background: transparent; }
+  .lumi-theme { width: 44px; padding-inline: 0; justify-content: center; }
   .lumi-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--cs-color-text-primary); padding: 6px 10px 14px; }
   .lumi-brand img { width: 30px; height: 30px; }
   .lumi-new { margin: 0 4px 12px; }
@@ -33,9 +35,11 @@
   .lumi-page .cs-suggest button { color: var(--cs-color-text-primary); }
   .lumi-page .cs-suggest button, .lumi-page .cs-button--sm, .lumi-page .cs-nav-item { min-height: 44px; }
   @media (prefers-reduced-transparency: reduce) { .lumi-top { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--cs-color-surface-panel); } }
+  [data-cs-style="matte-paper"] .lumi-top { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--cs-color-surface-panel); }
   .lumi-answer-card p { margin: 0; font-size: 15px; line-height: 1.6; }
   .lumi-answer-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
   @media (max-width: 820px) { .lumi-page { grid-template-columns: 1fr; } .lumi-side { display: none; } .lumi-mobile-new { display: inline-flex; } }
+  @media (max-width: 480px) { .lumi-top { padding: 12px 16px; gap: 8px; } .lumi-thread { padding: 18px 16px; } .lumi-compose { padding: 14px 16px 18px; } }
 </style>
 <script src="../../_vendor/react/react.production.min.js"></script>
 <script src="../../_vendor/react/react-dom.production.min.js"></script>
@@ -47,7 +51,7 @@
 
 <div id="root"></div>
 <script type="text/babel">
-const CS = window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))] || {};
+const CS = window[Object.keys(window).find(k=>k.startsWith("CyberSkillDesignSystem_"))] || {};
 const { LumiAvatar, PromptInput, PromptSuggestions, ChatMessage, TypingIndicator, CitationList, AIDisclosureBadge, ConfidenceMeter, Button, Sidebar, NavItem, Badge } = CS;
 const { useState, useRef, useEffect } = React;
 
@@ -63,7 +67,7 @@ const CHAT_COPY = {
     details: "This fixed sample illustrates the interface. No model or human review is involved; confidence and references are illustrative.",
     services: "Services", process: "Process", citations: "Sample references", what: "What we build", arc: "The arc of a wish",
     handoff: "Demo only — no handoff", refine: "Keep refining", placeholder: "Make a wish…", send: "Send",
-    hint: "Scripted preview; does not send your wish to a model or the team."
+    hint: "Scripted preview; does not send your wish to a model or the team.", theme: "Toggle theme"
   },
   vi: {
     skip: "Bỏ qua đến nội dung", newWish: "Điều ước mới", recent: "Hội thoại minh họa",
@@ -76,12 +80,18 @@ const CHAT_COPY = {
     details: "Mẫu cố định này minh họa giao diện. Không có mô hình hay người kiểm duyệt tham gia; độ tin cậy và tài liệu chỉ để minh họa.",
     services: "Dịch vụ", process: "Quy trình", citations: "Tài liệu minh họa", what: "Những gì chúng tôi xây", arc: "Hành trình của điều ước",
     handoff: "Bản mẫu — chưa chuyển giao", refine: "Tiếp tục điều chỉnh", placeholder: "Kể một điều ước…", send: "Gửi",
-    hint: "Bản xem trước theo kịch bản; chưa gửi điều ước đến mô hình hay đội ngũ."
+    hint: "Bản xem trước theo kịch bản; chưa gửi điều ước đến mô hình hay đội ngũ.", theme: "Đổi giao diện"
   }
 };
 
 function LumiPage() {
   const [loc, setLoc] = useState("en"), t = CHAT_COPY[loc];
+  const [isDark, setIsDark] = useState(() => document.documentElement.getAttribute("data-theme") === "dark");
+  function toggleTheme() {
+    const next = document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark";
+    document.documentElement.setAttribute("data-theme", next);
+    setIsDark(next === "dark");
+  }
   const [draft, setDraft] = useState("");
   const pending = useRef(new Set());
   const composerRef = useRef(null);
@@ -142,6 +152,7 @@ function LumiPage() {
           <LumiAvatar src="../../assets/lumi-poster.webp" size="md" ring />
           <div><h1>Lumi</h1><div className="sub">{t.subtitle}</div></div>
           <button type="button" className="cs-button cs-button--secondary cs-button--sm lumi-language" style={{ marginLeft: "auto" }} onClick={() => setLoc(loc === "en" ? "vi" : "en")}>{loc === "en" ? "Tiếng Việt" : "English"}</button>
+          <button type="button" className="cs-button cs-button--secondary cs-button--sm lumi-theme" aria-label={t.theme} onClick={toggleTheme}><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={isDark ? "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4" : "M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z"} /></svg></button>
           <Badge variant="info">{t.badge}</Badge>
           <button type="button" className="cs-button cs-button--secondary cs-button--sm lumi-mobile-new" onClick={newWish}>✦ {t.newWish}</button>
         </header>