From 63b889918043a5294bd8548bdb6d1ec499463baa Mon Sep 17 00:00:00 2001
From: BST <107313913+alvin000009238@users.noreply.github.com>
Date: Tue, 31 Mar 2026 21:32:12 +0800
Subject: [PATCH 01/13] Compact header spacing and mobile layout

---
 frontend/styles/header.css     | 31 +++++++++++++++++++------------
 frontend/styles/responsive.css | 21 ++++++++++++++++-----
 frontend/styles/utilities.css  |  4 ++--
 3 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/frontend/styles/header.css b/frontend/styles/header.css
index 309a289..0e17a42 100644
--- a/frontend/styles/header.css
+++ b/frontend/styles/header.css
@@ -8,7 +8,7 @@
 
     z-index: 100;
 
-    padding: 14px 0;
+    padding: 10px 0;
 
     margin: 0 -24px 40px;
 
@@ -36,9 +36,9 @@
 
     align-items: center;
 
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 
-    gap: 16px;
+    gap: 12px;
 
     max-width: 1200px;
 
@@ -68,9 +68,9 @@
 
     justify-content: center;
 
-    width: 36px;
+    width: 32px;
 
-    height: 36px;
+    height: 32px;
 
     background: var(--color-primary);
 
@@ -86,9 +86,9 @@
 
 .logo-icon svg {
 
-    width: 20px;
+    width: 18px;
 
-    height: 20px;
+    height: 18px;
 
 }
 
@@ -98,6 +98,8 @@
 
     font-size: 20px;
 
+    line-height: 1.2;
+
     font-weight: 600;
 
     color: var(--color-text-main);
@@ -112,6 +114,8 @@
 
     background-clip: unset;
 
+    margin: 0;
+
 }
 
 
@@ -122,7 +126,9 @@
 
     font-size: 12px;
 
-    margin-top: 1px;
+    line-height: 1.2;
+
+    margin: 1px 0 0;
 
     font-weight: 400;
 
@@ -138,7 +144,7 @@
 
     align-items: center;
 
-    gap: 12px;
+    gap: 10px;
 
     position: relative;
 
@@ -197,6 +203,8 @@
 
     font-size: 12px;
 
+    line-height: 1.2;
+
     font-weight: 500;
 
     color: var(--color-text-secondary);
@@ -241,9 +249,9 @@
 
     gap: 8px;
 
-    height: 40px;
+    min-height: 36px;
 
-    padding: 0 18px;
+    padding: 0 14px;
 
     background: var(--color-primary);
 
@@ -484,4 +492,3 @@ visibility: visible;
     color: var(--color-text-muted);
 
 }
-
diff --git a/frontend/styles/responsive.css b/frontend/styles/responsive.css
index b358f42..ec9b587 100644
--- a/frontend/styles/responsive.css
+++ b/frontend/styles/responsive.css
@@ -24,9 +24,13 @@
 
     .header-content {
 
-        flex-direction: column;
+        flex-direction: row;
+
+        align-items: center;
+
+        gap: 10px;
 
-        align-items: flex-start;
+        flex-wrap: nowrap;
 
     }
 
@@ -34,9 +38,11 @@
 
     .data-time-box {
 
-        align-self: stretch;
+        align-self: auto;
 
-        justify-content: space-between;
+        justify-content: flex-end;
+
+        gap: 8px;
 
     }
 
@@ -45,12 +51,18 @@
         justify-content: flex-end;
     }
 
+    .time-info {
+        display: none;
+    }
+
 
 
     .logo-text h1 {
 
         font-size: 18px;
 
+        line-height: 1.2;
+
     }
 
 
@@ -194,4 +206,3 @@
     }
 
 }
-
diff --git a/frontend/styles/utilities.css b/frontend/styles/utilities.css
index b6c177c..5d6bc33 100644
--- a/frontend/styles/utilities.css
+++ b/frontend/styles/utilities.css
@@ -75,8 +75,8 @@
 }
 
 .theme-toggle-btn {
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     padding: 0;
     justify-content: center;
     background: var(--color-surface-elevated);

From 6f885f8cc813244ae7d4926e8796e6dbc6f69abf Mon Sep 17 00:00:00 2001
From: BST <107313913+alvin000009238@users.noreply.github.com>
Date: Tue, 31 Mar 2026 21:44:29 +0800
Subject: [PATCH 02/13] Make header compact and resilient on narrow screens

---
 frontend/styles/header.css     | 24 ++++++++++++++++-
 frontend/styles/responsive.css | 47 +++++++++++++++++++++++-----------
 public/index.html              |  6 ++---
 3 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/frontend/styles/header.css b/frontend/styles/header.css
index 0e17a42..a622d52 100644
--- a/frontend/styles/header.css
+++ b/frontend/styles/header.css
@@ -56,6 +56,14 @@
 
     gap: 12px;
 
+    min-width: 0;
+
+    flex: 1 1 auto;
+
+}
+
+.header-title-group {
+    min-width: 0;
 }
 
 
@@ -116,6 +124,12 @@
 
     margin: 0;
 
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
 }
 
 
@@ -132,6 +146,12 @@
 
     font-weight: 400;
 
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
 }
 
 
@@ -158,11 +178,13 @@
 
     backdrop-filter: none;
 
+    min-width: 0;
+
 }
 
 .header-actions {
     justify-content: flex-end;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
 }
 
 
diff --git a/frontend/styles/responsive.css b/frontend/styles/responsive.css
index ec9b587..1ba01d8 100644
--- a/frontend/styles/responsive.css
+++ b/frontend/styles/responsive.css
@@ -24,13 +24,9 @@
 
     .header-content {
 
-        flex-direction: row;
+        flex-wrap: wrap;
 
-        align-items: center;
-
-        gap: 10px;
-
-        flex-wrap: nowrap;
+        gap: 8px;
 
     }
 
@@ -38,31 +34,27 @@
 
     .data-time-box {
 
-        align-self: auto;
+        align-self: stretch;
 
-        justify-content: flex-end;
+        justify-content: space-between;
 
         gap: 8px;
 
+        flex-wrap: wrap;
+
     }
 
     .header-actions {
-        width: auto;
+        width: 100%;
         justify-content: flex-end;
     }
 
-    .time-info {
-        display: none;
-    }
-
 
 
     .logo-text h1 {
 
         font-size: 18px;
 
-        line-height: 1.2;
-
     }
 
 
@@ -173,6 +165,31 @@
 
 @media (max-width: 480px) {
 
+    .header {
+        margin-bottom: 20px;
+    }
+
+    .time-label {
+        display: none;
+    }
+
+    .time-info {
+        padding-right: 8px;
+    }
+
+    .time-value {
+        font-size: 11px;
+    }
+
+    .header-actions .import-dropdown-btn {
+        min-width: 36px;
+        padding: 0 10px;
+    }
+
+    .header-actions .import-dropdown-btn > span:last-child {
+        display: none;
+    }
+
     .student-details {
 
         flex-direction: column;
diff --git a/public/index.html b/public/index.html
index 26933f0..085589b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,7 @@
     </noscript>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
     <script src="/theme-init.js"></script>
-    <link rel="stylesheet" href="/dist/main-CoyldwFZ.css" id="vite-css">
+    <link rel="stylesheet" href="/dist/main-DUUA2ZEA.css" id="vite-css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 
@@ -68,7 +68,7 @@ <h2>中大壢中成績分析平台</h2>
                             <path d="M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z" />
                         </svg>
                     </div>
-                    <div class="logo-text">
+                    <div class="logo-text header-title-group">
                         <h1>成績分析平台</h1>
                         <p class="subtitle" id="examTitle">--</p>
                     </div>
@@ -523,7 +523,7 @@ <h3 class="section-title">
         </footer>
     </div>
 
-    <script type="module" src="/dist/main-1Jkr9rBG.js"></script>
+    <script type="module" src="/dist/main-AUays8nB.js"></script>
 </body>
 
 </html>

From 6d86ac753b035c914174fe27e2f53d925007b02c Mon Sep 17 00:00:00 2001
From: BST <107313913+alvin000009238@users.noreply.github.com>
Date: Tue, 31 Mar 2026 21:58:55 +0800
Subject: [PATCH 03/13] Stabilize header layout strategy across breakpoints

---
 frontend/styles/header.css     |  2 +-
 frontend/styles/responsive.css | 33 +++++++++++++++++----------------
 public/index.html              |  9 +++++----
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/frontend/styles/header.css b/frontend/styles/header.css
index a622d52..584b62a 100644
--- a/frontend/styles/header.css
+++ b/frontend/styles/header.css
@@ -184,7 +184,7 @@
 
 .header-actions {
     justify-content: flex-end;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 }
 
 
diff --git a/frontend/styles/responsive.css b/frontend/styles/responsive.css
index 1ba01d8..13dd1bc 100644
--- a/frontend/styles/responsive.css
+++ b/frontend/styles/responsive.css
@@ -22,30 +22,16 @@
 
 
 
-    .header-content {
-
-        flex-wrap: wrap;
-
-        gap: 8px;
-
-    }
-
-
-
     .data-time-box {
 
-        align-self: stretch;
-
-        justify-content: space-between;
+        justify-content: flex-end;
 
         gap: 8px;
 
-        flex-wrap: wrap;
-
     }
 
     .header-actions {
-        width: 100%;
+        width: auto;
         justify-content: flex-end;
     }
 
@@ -169,6 +155,17 @@
         margin-bottom: 20px;
     }
 
+    .header-content {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .data-time-box {
+        width: 100%;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
     .time-label {
         display: none;
     }
@@ -190,6 +187,10 @@
         display: none;
     }
 
+    .header-actions {
+        flex-wrap: wrap;
+    }
+
     .student-details {
 
         flex-direction: column;
diff --git a/public/index.html b/public/index.html
index 085589b..c273353 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,7 @@
     </noscript>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
     <script src="/theme-init.js"></script>
-    <link rel="stylesheet" href="/dist/main-DUUA2ZEA.css" id="vite-css">
+    <link rel="stylesheet" href="/dist/main-D1WLtR6h.css" id="vite-css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 
@@ -97,7 +97,8 @@ <h1>成績分析平台</h1>
                                 </svg>
                             </span>
                         </button>
-                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn">
+                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn"
+                            aria-label="分享">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -108,7 +109,7 @@ <h1>成績分析平台</h1>
                             </span>
                             <span>分享</span>
                         </button>
-                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn">
+                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn" aria-label="匯入成績">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -523,7 +524,7 @@ <h3 class="section-title">
         </footer>
     </div>
 
-    <script type="module" src="/dist/main-AUays8nB.js"></script>
+    <script type="module" src="/dist/main-TqLOYhxL.js"></script>
 </body>
 
 </html>

From 89fb74e5bbdb71f361f779753ddbd39bdc2b3927 Mon Sep 17 00:00:00 2001
From: BST <107313913+alvin000009238@users.noreply.github.com>
Date: Tue, 31 Mar 2026 22:11:00 +0800
Subject: [PATCH 04/13] Unify mobile header skeleton and downgrade readonly
 indicator

---
 frontend/share.js                 | 10 +----
 frontend/styles/compatibility.css |  3 --
 frontend/styles/header.css        | 72 +++++++++++++++++++++++++------
 frontend/styles/responsive.css    | 55 +++++++++++++++++------
 frontend/styles/utilities.css     |  5 +--
 public/index.html                 | 12 +++---
 6 files changed, 113 insertions(+), 44 deletions(-)

diff --git a/frontend/share.js b/frontend/share.js
index 51422e2..77347ef 100644
--- a/frontend/share.js
+++ b/frontend/share.js
@@ -164,14 +164,8 @@ export async function checkSharedLink() {
             if (data.success) {
                 initDashboard(data.data);
 
-                // Add header indicator
-                const header = document.querySelector('.header-content');
-                const indicator = document.createElement('div');
-                indicator.className = 'share-indicator';
-                indicator.innerHTML = '<span class="readonly-badge">僅供檢視 (唯讀)</span>';
-                // Insert before data-time-box
-                const timeBox = document.querySelector('.data-time-box');
-                header.insertBefore(indicator, timeBox);
+                const headerStatusBadge = document.getElementById('headerStatusBadge');
+                if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視';
 
                 if (updateTime) updateTime.textContent = '分享存檔';
             } else {
diff --git a/frontend/styles/compatibility.css b/frontend/styles/compatibility.css
index eb0cfb3..8143cea 100644
--- a/frontend/styles/compatibility.css
+++ b/frontend/styles/compatibility.css
@@ -80,8 +80,6 @@
 
 /* Read Only Mode */
 
-body.read-only-mode .time-info,
-
 body.read-only-mode .import-dropdown,
 
 body.read-only-mode #shareBtn,
@@ -103,4 +101,3 @@ body.read-only-mode .header {
 }
 
 
-
diff --git a/frontend/styles/header.css b/frontend/styles/header.css
index 309a289..3b96b45 100644
--- a/frontend/styles/header.css
+++ b/frontend/styles/header.css
@@ -8,7 +8,7 @@
 
     z-index: 100;
 
-    padding: 14px 0;
+    padding: 10px 0;
 
     margin: 0 -24px 40px;
 
@@ -36,9 +36,9 @@
 
     align-items: center;
 
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 
-    gap: 16px;
+    gap: 12px;
 
     max-width: 1200px;
 
@@ -56,6 +56,14 @@
 
     gap: 12px;
 
+    min-width: 0;
+
+    flex: 1 1 auto;
+
+}
+
+.header-title-group {
+    min-width: 0;
 }
 
 
@@ -68,9 +76,9 @@
 
     justify-content: center;
 
-    width: 36px;
+    width: 32px;
 
-    height: 36px;
+    height: 32px;
 
     background: var(--color-primary);
 
@@ -86,9 +94,9 @@
 
 .logo-icon svg {
 
-    width: 20px;
+    width: 18px;
 
-    height: 20px;
+    height: 18px;
 
 }
 
@@ -98,6 +106,8 @@
 
     font-size: 20px;
 
+    line-height: 1.2;
+
     font-weight: 600;
 
     color: var(--color-text-main);
@@ -112,6 +122,14 @@
 
     background-clip: unset;
 
+    margin: 0;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
 }
 
 
@@ -122,10 +140,18 @@
 
     font-size: 12px;
 
-    margin-top: 1px;
+    line-height: 1.2;
+
+    margin: 1px 0 0;
 
     font-weight: 400;
 
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
 }
 
 
@@ -138,7 +164,7 @@
 
     align-items: center;
 
-    gap: 12px;
+    gap: 10px;
 
     position: relative;
 
@@ -152,6 +178,27 @@
 
     backdrop-filter: none;
 
+    min-width: 0;
+
+}
+
+.header-status-badge {
+    display: none;
+    align-items: center;
+    min-height: 24px;
+    padding: 2px 8px;
+    border: 1px solid var(--color-warning-muted);
+    border-radius: var(--radius-pill);
+    color: var(--color-warning);
+    background: color-mix(in srgb, var(--color-warning-muted) 60%, transparent);
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+}
+
+body.read-only-mode .header-status-badge {
+    display: inline-flex;
 }
 
 .header-actions {
@@ -197,6 +244,8 @@
 
     font-size: 12px;
 
+    line-height: 1.2;
+
     font-weight: 500;
 
     color: var(--color-text-secondary);
@@ -241,9 +290,9 @@
 
     gap: 8px;
 
-    height: 40px;
+    min-height: 36px;
 
-    padding: 0 18px;
+    padding: 0 14px;
 
     background: var(--color-primary);
 
@@ -484,4 +533,3 @@ visibility: visible;
     color: var(--color-text-muted);
 
 }
-
diff --git a/frontend/styles/responsive.css b/frontend/styles/responsive.css
index b358f42..13dd1bc 100644
--- a/frontend/styles/responsive.css
+++ b/frontend/styles/responsive.css
@@ -22,21 +22,11 @@
 
 
 
-    .header-content {
-
-        flex-direction: column;
-
-        align-items: flex-start;
-
-    }
-
-
-
     .data-time-box {
 
-        align-self: stretch;
+        justify-content: flex-end;
 
-        justify-content: space-between;
+        gap: 8px;
 
     }
 
@@ -161,6 +151,46 @@
 
 @media (max-width: 480px) {
 
+    .header {
+        margin-bottom: 20px;
+    }
+
+    .header-content {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .data-time-box {
+        width: 100%;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .time-label {
+        display: none;
+    }
+
+    .time-info {
+        padding-right: 8px;
+    }
+
+    .time-value {
+        font-size: 11px;
+    }
+
+    .header-actions .import-dropdown-btn {
+        min-width: 36px;
+        padding: 0 10px;
+    }
+
+    .header-actions .import-dropdown-btn > span:last-child {
+        display: none;
+    }
+
+    .header-actions {
+        flex-wrap: wrap;
+    }
+
     .student-details {
 
         flex-direction: column;
@@ -194,4 +224,3 @@
     }
 
 }
-
diff --git a/frontend/styles/utilities.css b/frontend/styles/utilities.css
index b6c177c..65e48be 100644
--- a/frontend/styles/utilities.css
+++ b/frontend/styles/utilities.css
@@ -75,8 +75,8 @@
 }
 
 .theme-toggle-btn {
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     padding: 0;
     justify-content: center;
     background: var(--color-surface-elevated);
@@ -103,5 +103,4 @@
 .mb-12 { margin-bottom: 12px; }
 .share-input-readonly { text-align: center; font-size: 13px; color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-muted); }
 .w-full-center { width: 100%; justify-content: center; }
-.readonly-badge { color: var(--color-warning); font-weight: bold; padding: 4px 8px; border: 1px solid var(--color-warning); border-radius: 4px; font-size: 12px; }
 .mono { font-family: monospace; }
diff --git a/public/index.html b/public/index.html
index 26933f0..2acd0dd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,7 @@
     </noscript>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
     <script src="/theme-init.js"></script>
-    <link rel="stylesheet" href="/dist/main-CoyldwFZ.css" id="vite-css">
+    <link rel="stylesheet" href="/dist/main-CYN_M65J.css" id="vite-css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 
@@ -68,12 +68,13 @@ <h2>中大壢中成績分析平台</h2>
                             <path d="M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z" />
                         </svg>
                     </div>
-                    <div class="logo-text">
+                    <div class="logo-text header-title-group">
                         <h1>成績分析平台</h1>
                         <p class="subtitle" id="examTitle">--</p>
                     </div>
                 </div>
                 <div class="data-time-box">
+                    <span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>
                     <div class="time-info">
 
                         <span class="time-label">資料更新時間</span>
@@ -97,7 +98,8 @@ <h1>成績分析平台</h1>
                                 </svg>
                             </span>
                         </button>
-                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn">
+                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn"
+                            aria-label="分享">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -108,7 +110,7 @@ <h1>成績分析平台</h1>
                             </span>
                             <span>分享</span>
                         </button>
-                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn">
+                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn" aria-label="匯入成績">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -523,7 +525,7 @@ <h3 class="section-title">
         </footer>
     </div>
 
-    <script type="module" src="/dist/main-1Jkr9rBG.js"></script>
+    <script type="module" src="/dist/main-AkA2Ib98.js"></script>
 </body>
 
 </html>

From b9f72a5d22f88b5446445fdba74253c3f1bdd28b Mon Sep 17 00:00:00 2001
From: BST <107313913+alvin000009238@users.noreply.github.com>
Date: Tue, 31 Mar 2026 22:25:30 +0800
Subject: [PATCH 05/13] Refine readonly badge placement and header alignment

---
 frontend/share.js                 | 10 +---
 frontend/styles/compatibility.css |  3 -
 frontend/styles/header.css        | 92 ++++++++++++++++++++++++++-----
 frontend/styles/responsive.css    | 55 +++++++++++++-----
 frontend/styles/utilities.css     |  5 +-
 public/index.html                 | 16 ++++--
 6 files changed, 134 insertions(+), 47 deletions(-)

diff --git a/frontend/share.js b/frontend/share.js
index 51422e2..77347ef 100644
--- a/frontend/share.js
+++ b/frontend/share.js
@@ -164,14 +164,8 @@ export async function checkSharedLink() {
             if (data.success) {
                 initDashboard(data.data);
 
-                // Add header indicator
-                const header = document.querySelector('.header-content');
-                const indicator = document.createElement('div');
-                indicator.className = 'share-indicator';
-                indicator.innerHTML = '<span class="readonly-badge">僅供檢視 (唯讀)</span>';
-                // Insert before data-time-box
-                const timeBox = document.querySelector('.data-time-box');
-                header.insertBefore(indicator, timeBox);
+                const headerStatusBadge = document.getElementById('headerStatusBadge');
+                if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視';
 
                 if (updateTime) updateTime.textContent = '分享存檔';
             } else {
diff --git a/frontend/styles/compatibility.css b/frontend/styles/compatibility.css
index eb0cfb3..8143cea 100644
--- a/frontend/styles/compatibility.css
+++ b/frontend/styles/compatibility.css
@@ -80,8 +80,6 @@
 
 /* Read Only Mode */
 
-body.read-only-mode .time-info,
-
 body.read-only-mode .import-dropdown,
 
 body.read-only-mode #shareBtn,
@@ -103,4 +101,3 @@ body.read-only-mode .header {
 }
 
 
-
diff --git a/frontend/styles/header.css b/frontend/styles/header.css
index 309a289..143a4da 100644
--- a/frontend/styles/header.css
+++ b/frontend/styles/header.css
@@ -8,7 +8,7 @@
 
     z-index: 100;
 
-    padding: 14px 0;
+    padding: 10px 0;
 
     margin: 0 -24px 40px;
 
@@ -36,9 +36,9 @@
 
     align-items: center;
 
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 
-    gap: 16px;
+    gap: 12px;
 
     max-width: 1200px;
 
@@ -56,6 +56,14 @@
 
     gap: 12px;
 
+    min-width: 0;
+
+    flex: 1 1 auto;
+
+}
+
+.header-title-group {
+    min-width: 0;
 }
 
 
@@ -68,9 +76,9 @@
 
     justify-content: center;
 
-    width: 36px;
+    width: 32px;
 
-    height: 36px;
+    height: 32px;
 
     background: var(--color-primary);
 
@@ -86,9 +94,9 @@
 
 .logo-icon svg {
 
-    width: 20px;
+    width: 18px;
 
-    height: 20px;
+    height: 18px;
 
 }
 
@@ -98,6 +106,8 @@
 
     font-size: 20px;
 
+    line-height: 1.2;
+
     font-weight: 600;
 
     color: var(--color-text-main);
@@ -112,6 +122,14 @@
 
     background-clip: unset;
 
+    margin: 0;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
 }
 
 
@@ -122,10 +140,29 @@
 
     font-size: 12px;
 
-    margin-top: 1px;
+    line-height: 1.2;
+
+    margin: 1px 0 0;
 
     font-weight: 400;
 
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    flex: 1 1 auto;
+
+    min-width: 0;
+
+}
+
+.subtitle-row {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    min-width: 0;
 }
 
 
@@ -136,9 +173,9 @@
 
     display: flex;
 
-    align-items: center;
+    align-items: flex-end;
 
-    gap: 12px;
+    gap: 10px;
 
     position: relative;
 
@@ -152,6 +189,28 @@
 
     backdrop-filter: none;
 
+    min-width: 0;
+
+}
+
+.header-status-badge {
+    display: none;
+    align-items: center;
+    min-height: 18px;
+    padding: 1px 6px;
+    border: 1px solid var(--color-warning-muted);
+    border-radius: var(--radius-pill);
+    color: var(--color-warning);
+    background: color-mix(in srgb, var(--color-warning-muted) 40%, transparent);
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+body.read-only-mode .header-status-badge {
+    display: inline-flex;
 }
 
 .header-actions {
@@ -173,6 +232,8 @@
 
     border-right: 1px solid var(--color-border-subtle);
 
+    align-items: flex-end;
+
 }
 
 
@@ -197,9 +258,13 @@
 
     font-size: 12px;
 
+    line-height: 1.2;
+
     font-weight: 500;
 
-    color: var(--color-text-secondary);
+    color: var(--color-text-muted);
+
+    opacity: 0.78;
 
     font-variant-numeric: tabular-nums;
 
@@ -241,9 +306,9 @@
 
     gap: 8px;
 
-    height: 40px;
+    min-height: 36px;
 
-    padding: 0 18px;
+    padding: 0 14px;
 
     background: var(--color-primary);
 
@@ -484,4 +549,3 @@ visibility: visible;
     color: var(--color-text-muted);
 
 }
-
diff --git a/frontend/styles/responsive.css b/frontend/styles/responsive.css
index b358f42..13dd1bc 100644
--- a/frontend/styles/responsive.css
+++ b/frontend/styles/responsive.css
@@ -22,21 +22,11 @@
 
 
 
-    .header-content {
-
-        flex-direction: column;
-
-        align-items: flex-start;
-
-    }
-
-
-
     .data-time-box {
 
-        align-self: stretch;
+        justify-content: flex-end;
 
-        justify-content: space-between;
+        gap: 8px;
 
     }
 
@@ -161,6 +151,46 @@
 
 @media (max-width: 480px) {
 
+    .header {
+        margin-bottom: 20px;
+    }
+
+    .header-content {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .data-time-box {
+        width: 100%;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .time-label {
+        display: none;
+    }
+
+    .time-info {
+        padding-right: 8px;
+    }
+
+    .time-value {
+        font-size: 11px;
+    }
+
+    .header-actions .import-dropdown-btn {
+        min-width: 36px;
+        padding: 0 10px;
+    }
+
+    .header-actions .import-dropdown-btn > span:last-child {
+        display: none;
+    }
+
+    .header-actions {
+        flex-wrap: wrap;
+    }
+
     .student-details {
 
         flex-direction: column;
@@ -194,4 +224,3 @@
     }
 
 }
-
diff --git a/frontend/styles/utilities.css b/frontend/styles/utilities.css
index b6c177c..65e48be 100644
--- a/frontend/styles/utilities.css
+++ b/frontend/styles/utilities.css
@@ -75,8 +75,8 @@
 }
 
 .theme-toggle-btn {
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     padding: 0;
     justify-content: center;
     background: var(--color-surface-elevated);
@@ -103,5 +103,4 @@
 .mb-12 { margin-bottom: 12px; }
 .share-input-readonly { text-align: center; font-size: 13px; color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-muted); }
 .w-full-center { width: 100%; justify-content: center; }
-.readonly-badge { color: var(--color-warning); font-weight: bold; padding: 4px 8px; border: 1px solid var(--color-warning); border-radius: 4px; font-size: 12px; }
 .mono { font-family: monospace; }
diff --git a/public/index.html b/public/index.html
index 26933f0..879e6e0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,7 @@
     </noscript>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
     <script src="/theme-init.js"></script>
-    <link rel="stylesheet" href="/dist/main-CoyldwFZ.css" id="vite-css">
+    <link rel="stylesheet" href="/dist/main-D-IViaAQ.css" id="vite-css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 
@@ -68,9 +68,12 @@ <h2>中大壢中成績分析平台</h2>
                             <path d="M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z" />
                         </svg>
                     </div>
-                    <div class="logo-text">
+                    <div class="logo-text header-title-group">
                         <h1>成績分析平台</h1>
-                        <p class="subtitle" id="examTitle">--</p>
+                        <div class="subtitle-row">
+                            <p class="subtitle" id="examTitle">--</p>
+                            <span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>
+                        </div>
                     </div>
                 </div>
                 <div class="data-time-box">
@@ -97,7 +100,8 @@ <h1>成績分析平台</h1>
                                 </svg>
                             </span>
                         </button>
-                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn">
+                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn"
+                            aria-label="分享">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -108,7 +112,7 @@ <h1>成績分析平台</h1>
                             </span>
                             <span>分享</span>
                         </button>
-                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn">
+                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn" aria-label="匯入成績">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -523,7 +527,7 @@ <h3 class="section-title">
         </footer>
     </div>
 
-    <script type="module" src="/dist/main-1Jkr9rBG.js"></script>
+    <script type="module" src="/dist/main-eCe3WGCp.js"></script>
 </body>
 
 </html>

From 8252d9e8d5a0bdd2bce97bd0f69d64cbb0a76c1c Mon Sep 17 00:00:00 2001
From: BST <107313913+alvin000009238@users.noreply.github.com>
Date: Tue, 31 Mar 2026 22:33:44 +0800
Subject: [PATCH 06/13] Refactor header styles for improved user experience

Reduced header height and adjusted badge styles for better UX.
---
 frontend/styles/header.css | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/frontend/styles/header.css b/frontend/styles/header.css
index a9c90d0..143a4da 100644
--- a/frontend/styles/header.css
+++ b/frontend/styles/header.css
@@ -152,7 +152,6 @@
 
     white-space: nowrap;
 
-<<<<<<< codex/reduce-header-height-for-better-ux-d99l1w
     flex: 1 1 auto;
 
     min-width: 0;
@@ -164,8 +163,6 @@
     align-items: baseline;
     gap: 6px;
     min-width: 0;
-=======
->>>>>>> dev
 }
 
 
@@ -199,7 +196,6 @@
 .header-status-badge {
     display: none;
     align-items: center;
-<<<<<<< codex/reduce-header-height-for-better-ux-d99l1w
     min-height: 18px;
     padding: 1px 6px;
     border: 1px solid var(--color-warning-muted);
@@ -211,18 +207,6 @@
     line-height: 1.2;
     white-space: nowrap;
     flex-shrink: 0;
-=======
-    min-height: 24px;
-    padding: 2px 8px;
-    border: 1px solid var(--color-warning-muted);
-    border-radius: var(--radius-pill);
-    color: var(--color-warning);
-    background: color-mix(in srgb, var(--color-warning-muted) 60%, transparent);
-    font-size: 11px;
-    font-weight: 500;
-    line-height: 1.2;
-    white-space: nowrap;
->>>>>>> dev
 }
 
 body.read-only-mode .header-status-badge {

From 126db00f4646728fd74276086e52b5b49384d3c3 Mon Sep 17 00:00:00 2001
From: BST <107313913+alvin000009238@users.noreply.github.com>
Date: Tue, 31 Mar 2026 22:48:35 +0800
Subject: [PATCH 07/13] Keep read-only timestamp anchored at left in header

---
 frontend/share.js                 | 10 +---
 frontend/styles/compatibility.css |  7 ++-
 frontend/styles/header.css        | 96 ++++++++++++++++++++++++++-----
 frontend/styles/responsive.css    | 55 +++++++++++++-----
 frontend/styles/utilities.css     |  5 +-
 public/index.html                 | 16 ++++--
 6 files changed, 142 insertions(+), 47 deletions(-)

diff --git a/frontend/share.js b/frontend/share.js
index 51422e2..77347ef 100644
--- a/frontend/share.js
+++ b/frontend/share.js
@@ -164,14 +164,8 @@ export async function checkSharedLink() {
             if (data.success) {
                 initDashboard(data.data);
 
-                // Add header indicator
-                const header = document.querySelector('.header-content');
-                const indicator = document.createElement('div');
-                indicator.className = 'share-indicator';
-                indicator.innerHTML = '<span class="readonly-badge">僅供檢視 (唯讀)</span>';
-                // Insert before data-time-box
-                const timeBox = document.querySelector('.data-time-box');
-                header.insertBefore(indicator, timeBox);
+                const headerStatusBadge = document.getElementById('headerStatusBadge');
+                if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視';
 
                 if (updateTime) updateTime.textContent = '分享存檔';
             } else {
diff --git a/frontend/styles/compatibility.css b/frontend/styles/compatibility.css
index eb0cfb3..3a0f8b3 100644
--- a/frontend/styles/compatibility.css
+++ b/frontend/styles/compatibility.css
@@ -80,8 +80,6 @@
 
 /* Read Only Mode */
 
-body.read-only-mode .time-info,
-
 body.read-only-mode .import-dropdown,
 
 body.read-only-mode #shareBtn,
@@ -102,5 +100,8 @@ body.read-only-mode .header {
 
 }
 
-
+body.read-only-mode .data-time-box {
+    width: 100%;
+    justify-content: space-between;
+}
 
diff --git a/frontend/styles/header.css b/frontend/styles/header.css
index 309a289..3fddff7 100644
--- a/frontend/styles/header.css
+++ b/frontend/styles/header.css
@@ -8,7 +8,7 @@
 
     z-index: 100;
 
-    padding: 14px 0;
+    padding: 10px 0;
 
     margin: 0 -24px 40px;
 
@@ -36,9 +36,9 @@
 
     align-items: center;
 
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 
-    gap: 16px;
+    gap: 12px;
 
     max-width: 1200px;
 
@@ -56,6 +56,14 @@
 
     gap: 12px;
 
+    min-width: 0;
+
+    flex: 1 1 auto;
+
+}
+
+.header-title-group {
+    min-width: 0;
 }
 
 
@@ -68,9 +76,9 @@
 
     justify-content: center;
 
-    width: 36px;
+    width: 32px;
 
-    height: 36px;
+    height: 32px;
 
     background: var(--color-primary);
 
@@ -86,9 +94,9 @@
 
 .logo-icon svg {
 
-    width: 20px;
+    width: 18px;
 
-    height: 20px;
+    height: 18px;
 
 }
 
@@ -98,6 +106,8 @@
 
     font-size: 20px;
 
+    line-height: 1.2;
+
     font-weight: 600;
 
     color: var(--color-text-main);
@@ -112,6 +122,14 @@
 
     background-clip: unset;
 
+    margin: 0;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
 }
 
 
@@ -122,10 +140,29 @@
 
     font-size: 12px;
 
-    margin-top: 1px;
+    line-height: 1.2;
+
+    margin: 1px 0 0;
 
     font-weight: 400;
 
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    flex: 1 1 auto;
+
+    min-width: 0;
+
+}
+
+.subtitle-row {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    min-width: 0;
 }
 
 
@@ -138,7 +175,7 @@
 
     align-items: center;
 
-    gap: 12px;
+    gap: 10px;
 
     position: relative;
 
@@ -152,6 +189,32 @@
 
     backdrop-filter: none;
 
+    min-width: 0;
+
+}
+
+.header-status-badge {
+    display: none;
+    align-items: center;
+    min-height: 18px;
+    padding: 1px 6px;
+    border: 1px solid var(--color-warning-muted);
+    border-radius: var(--radius-pill);
+    color: var(--color-warning);
+    background: color-mix(in srgb, var(--color-warning-muted) 40%, transparent);
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+body.read-only-mode .header-status-badge {
+    display: inline-flex;
+}
+
+body.read-only-mode .header-status-badge:empty {
+    display: none;
 }
 
 .header-actions {
@@ -173,6 +236,8 @@
 
     border-right: 1px solid var(--color-border-subtle);
 
+    align-items: center;
+
 }
 
 
@@ -197,9 +262,13 @@
 
     font-size: 12px;
 
+    line-height: 1.2;
+
     font-weight: 500;
 
-    color: var(--color-text-secondary);
+    color: var(--color-text-muted);
+
+    opacity: 0.78;
 
     font-variant-numeric: tabular-nums;
 
@@ -241,15 +310,15 @@
 
     gap: 8px;
 
-    height: 40px;
+    min-height: 36px;
 
-    padding: 0 18px;
+    padding: 0 14px;
 
     background: var(--color-primary);
 
     border: none;
 
-    border-radius: var(--radius-pill);
+    border-radius: var(--radius-sm);
 
     color: var(--md-sys-color-on-primary);
 
@@ -484,4 +553,3 @@ visibility: visible;
     color: var(--color-text-muted);
 
 }
-
diff --git a/frontend/styles/responsive.css b/frontend/styles/responsive.css
index b358f42..13dd1bc 100644
--- a/frontend/styles/responsive.css
+++ b/frontend/styles/responsive.css
@@ -22,21 +22,11 @@
 
 
 
-    .header-content {
-
-        flex-direction: column;
-
-        align-items: flex-start;
-
-    }
-
-
-
     .data-time-box {
 
-        align-self: stretch;
+        justify-content: flex-end;
 
-        justify-content: space-between;
+        gap: 8px;
 
     }
 
@@ -161,6 +151,46 @@
 
 @media (max-width: 480px) {
 
+    .header {
+        margin-bottom: 20px;
+    }
+
+    .header-content {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .data-time-box {
+        width: 100%;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .time-label {
+        display: none;
+    }
+
+    .time-info {
+        padding-right: 8px;
+    }
+
+    .time-value {
+        font-size: 11px;
+    }
+
+    .header-actions .import-dropdown-btn {
+        min-width: 36px;
+        padding: 0 10px;
+    }
+
+    .header-actions .import-dropdown-btn > span:last-child {
+        display: none;
+    }
+
+    .header-actions {
+        flex-wrap: wrap;
+    }
+
     .student-details {
 
         flex-direction: column;
@@ -194,4 +224,3 @@
     }
 
 }
-
diff --git a/frontend/styles/utilities.css b/frontend/styles/utilities.css
index b6c177c..65e48be 100644
--- a/frontend/styles/utilities.css
+++ b/frontend/styles/utilities.css
@@ -75,8 +75,8 @@
 }
 
 .theme-toggle-btn {
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     padding: 0;
     justify-content: center;
     background: var(--color-surface-elevated);
@@ -103,5 +103,4 @@
 .mb-12 { margin-bottom: 12px; }
 .share-input-readonly { text-align: center; font-size: 13px; color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-muted); }
 .w-full-center { width: 100%; justify-content: center; }
-.readonly-badge { color: var(--color-warning); font-weight: bold; padding: 4px 8px; border: 1px solid var(--color-warning); border-radius: 4px; font-size: 12px; }
 .mono { font-family: monospace; }
diff --git a/public/index.html b/public/index.html
index 26933f0..c7f08e3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,7 @@
     </noscript>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
     <script src="/theme-init.js"></script>
-    <link rel="stylesheet" href="/dist/main-CoyldwFZ.css" id="vite-css">
+    <link rel="stylesheet" href="/dist/main-bt8E1vXG.css" id="vite-css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 
@@ -68,9 +68,12 @@ <h2>中大壢中成績分析平台</h2>
                             <path d="M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z" />
                         </svg>
                     </div>
-                    <div class="logo-text">
+                    <div class="logo-text header-title-group">
                         <h1>成績分析平台</h1>
-                        <p class="subtitle" id="examTitle">--</p>
+                        <div class="subtitle-row">
+                            <p class="subtitle" id="examTitle">--</p>
+                            <span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>
+                        </div>
                     </div>
                 </div>
                 <div class="data-time-box">
@@ -97,7 +100,8 @@ <h1>成績分析平台</h1>
                                 </svg>
                             </span>
                         </button>
-                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn">
+                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn"
+                            aria-label="分享">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -108,7 +112,7 @@ <h1>成績分析平台</h1>
                             </span>
                             <span>分享</span>
                         </button>
-                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn">
+                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn" aria-label="匯入成績">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -523,7 +527,7 @@ <h3 class="section-title">
         </footer>
     </div>
 
-    <script type="module" src="/dist/main-1Jkr9rBG.js"></script>
+    <script type="module" src="/dist/main-D-w4GNFQ.js"></script>
 </body>
 
 </html>

From b116b37e9785c58155b36fe6d72599250bf6b2da Mon Sep 17 00:00:00 2001
From: BST <107313913+alvin000009238@users.noreply.github.com>
Date: Tue, 31 Mar 2026 22:58:57 +0800
Subject: [PATCH 08/13] Align read-only time baseline with header action
 buttons

---
 frontend/share.js                 | 10 +---
 frontend/styles/compatibility.css | 15 ++++-
 frontend/styles/header.css        | 96 ++++++++++++++++++++++++++-----
 frontend/styles/responsive.css    | 55 +++++++++++++-----
 frontend/styles/utilities.css     |  5 +-
 public/index.html                 | 16 ++++--
 6 files changed, 151 insertions(+), 46 deletions(-)

diff --git a/frontend/share.js b/frontend/share.js
index 51422e2..77347ef 100644
--- a/frontend/share.js
+++ b/frontend/share.js
@@ -164,14 +164,8 @@ export async function checkSharedLink() {
             if (data.success) {
                 initDashboard(data.data);
 
-                // Add header indicator
-                const header = document.querySelector('.header-content');
-                const indicator = document.createElement('div');
-                indicator.className = 'share-indicator';
-                indicator.innerHTML = '<span class="readonly-badge">僅供檢視 (唯讀)</span>';
-                // Insert before data-time-box
-                const timeBox = document.querySelector('.data-time-box');
-                header.insertBefore(indicator, timeBox);
+                const headerStatusBadge = document.getElementById('headerStatusBadge');
+                if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視';
 
                 if (updateTime) updateTime.textContent = '分享存檔';
             } else {
diff --git a/frontend/styles/compatibility.css b/frontend/styles/compatibility.css
index eb0cfb3..51efe7f 100644
--- a/frontend/styles/compatibility.css
+++ b/frontend/styles/compatibility.css
@@ -80,8 +80,6 @@
 
 /* Read Only Mode */
 
-body.read-only-mode .time-info,
-
 body.read-only-mode .import-dropdown,
 
 body.read-only-mode #shareBtn,
@@ -102,5 +100,18 @@ body.read-only-mode .header {
 
 }
 
+body.read-only-mode .data-time-box {
+    width: 100%;
+    justify-content: space-between;
+}
 
+body.read-only-mode .time-label {
+    display: none;
+}
 
+body.read-only-mode .time-info {
+    min-height: 36px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/frontend/styles/header.css b/frontend/styles/header.css
index 309a289..3fddff7 100644
--- a/frontend/styles/header.css
+++ b/frontend/styles/header.css
@@ -8,7 +8,7 @@
 
     z-index: 100;
 
-    padding: 14px 0;
+    padding: 10px 0;
 
     margin: 0 -24px 40px;
 
@@ -36,9 +36,9 @@
 
     align-items: center;
 
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 
-    gap: 16px;
+    gap: 12px;
 
     max-width: 1200px;
 
@@ -56,6 +56,14 @@
 
     gap: 12px;
 
+    min-width: 0;
+
+    flex: 1 1 auto;
+
+}
+
+.header-title-group {
+    min-width: 0;
 }
 
 
@@ -68,9 +76,9 @@
 
     justify-content: center;
 
-    width: 36px;
+    width: 32px;
 
-    height: 36px;
+    height: 32px;
 
     background: var(--color-primary);
 
@@ -86,9 +94,9 @@
 
 .logo-icon svg {
 
-    width: 20px;
+    width: 18px;
 
-    height: 20px;
+    height: 18px;
 
 }
 
@@ -98,6 +106,8 @@
 
     font-size: 20px;
 
+    line-height: 1.2;
+
     font-weight: 600;
 
     color: var(--color-text-main);
@@ -112,6 +122,14 @@
 
     background-clip: unset;
 
+    margin: 0;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
 }
 
 
@@ -122,10 +140,29 @@
 
     font-size: 12px;
 
-    margin-top: 1px;
+    line-height: 1.2;
+
+    margin: 1px 0 0;
 
     font-weight: 400;
 
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    flex: 1 1 auto;
+
+    min-width: 0;
+
+}
+
+.subtitle-row {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    min-width: 0;
 }
 
 
@@ -138,7 +175,7 @@
 
     align-items: center;
 
-    gap: 12px;
+    gap: 10px;
 
     position: relative;
 
@@ -152,6 +189,32 @@
 
     backdrop-filter: none;
 
+    min-width: 0;
+
+}
+
+.header-status-badge {
+    display: none;
+    align-items: center;
+    min-height: 18px;
+    padding: 1px 6px;
+    border: 1px solid var(--color-warning-muted);
+    border-radius: var(--radius-pill);
+    color: var(--color-warning);
+    background: color-mix(in srgb, var(--color-warning-muted) 40%, transparent);
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+body.read-only-mode .header-status-badge {
+    display: inline-flex;
+}
+
+body.read-only-mode .header-status-badge:empty {
+    display: none;
 }
 
 .header-actions {
@@ -173,6 +236,8 @@
 
     border-right: 1px solid var(--color-border-subtle);
 
+    align-items: center;
+
 }
 
 
@@ -197,9 +262,13 @@
 
     font-size: 12px;
 
+    line-height: 1.2;
+
     font-weight: 500;
 
-    color: var(--color-text-secondary);
+    color: var(--color-text-muted);
+
+    opacity: 0.78;
 
     font-variant-numeric: tabular-nums;
 
@@ -241,15 +310,15 @@
 
     gap: 8px;
 
-    height: 40px;
+    min-height: 36px;
 
-    padding: 0 18px;
+    padding: 0 14px;
 
     background: var(--color-primary);
 
     border: none;
 
-    border-radius: var(--radius-pill);
+    border-radius: var(--radius-sm);
 
     color: var(--md-sys-color-on-primary);
 
@@ -484,4 +553,3 @@ visibility: visible;
     color: var(--color-text-muted);
 
 }
-
diff --git a/frontend/styles/responsive.css b/frontend/styles/responsive.css
index b358f42..13dd1bc 100644
--- a/frontend/styles/responsive.css
+++ b/frontend/styles/responsive.css
@@ -22,21 +22,11 @@
 
 
 
-    .header-content {
-
-        flex-direction: column;
-
-        align-items: flex-start;
-
-    }
-
-
-
     .data-time-box {
 
-        align-self: stretch;
+        justify-content: flex-end;
 
-        justify-content: space-between;
+        gap: 8px;
 
     }
 
@@ -161,6 +151,46 @@
 
 @media (max-width: 480px) {
 
+    .header {
+        margin-bottom: 20px;
+    }
+
+    .header-content {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .data-time-box {
+        width: 100%;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .time-label {
+        display: none;
+    }
+
+    .time-info {
+        padding-right: 8px;
+    }
+
+    .time-value {
+        font-size: 11px;
+    }
+
+    .header-actions .import-dropdown-btn {
+        min-width: 36px;
+        padding: 0 10px;
+    }
+
+    .header-actions .import-dropdown-btn > span:last-child {
+        display: none;
+    }
+
+    .header-actions {
+        flex-wrap: wrap;
+    }
+
     .student-details {
 
         flex-direction: column;
@@ -194,4 +224,3 @@
     }
 
 }
-
diff --git a/frontend/styles/utilities.css b/frontend/styles/utilities.css
index b6c177c..65e48be 100644
--- a/frontend/styles/utilities.css
+++ b/frontend/styles/utilities.css
@@ -75,8 +75,8 @@
 }
 
 .theme-toggle-btn {
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     padding: 0;
     justify-content: center;
     background: var(--color-surface-elevated);
@@ -103,5 +103,4 @@
 .mb-12 { margin-bottom: 12px; }
 .share-input-readonly { text-align: center; font-size: 13px; color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-muted); }
 .w-full-center { width: 100%; justify-content: center; }
-.readonly-badge { color: var(--color-warning); font-weight: bold; padding: 4px 8px; border: 1px solid var(--color-warning); border-radius: 4px; font-size: 12px; }
 .mono { font-family: monospace; }
diff --git a/public/index.html b/public/index.html
index 26933f0..c7f08e3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,7 @@
     </noscript>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
     <script src="/theme-init.js"></script>
-    <link rel="stylesheet" href="/dist/main-CoyldwFZ.css" id="vite-css">
+    <link rel="stylesheet" href="/dist/main-bt8E1vXG.css" id="vite-css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 
@@ -68,9 +68,12 @@ <h2>中大壢中成績分析平台</h2>
                             <path d="M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z" />
                         </svg>
                     </div>
-                    <div class="logo-text">
+                    <div class="logo-text header-title-group">
                         <h1>成績分析平台</h1>
-                        <p class="subtitle" id="examTitle">--</p>
+                        <div class="subtitle-row">
+                            <p class="subtitle" id="examTitle">--</p>
+                            <span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>
+                        </div>
                     </div>
                 </div>
                 <div class="data-time-box">
@@ -97,7 +100,8 @@ <h1>成績分析平台</h1>
                                 </svg>
                             </span>
                         </button>
-                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn">
+                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn"
+                            aria-label="分享">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -108,7 +112,7 @@ <h1>成績分析平台</h1>
                             </span>
                             <span>分享</span>
                         </button>
-                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn">
+                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn" aria-label="匯入成績">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -523,7 +527,7 @@ <h3 class="section-title">
         </footer>
     </div>
 
-    <script type="module" src="/dist/main-1Jkr9rBG.js"></script>
+    <script type="module" src="/dist/main-D-w4GNFQ.js"></script>
 </body>
 
 </html>

From 9f1cd5b44e24e0d30ccb788d3dd777b21a401754 Mon Sep 17 00:00:00 2001
From: BST <107313913+alvin000009238@users.noreply.github.com>
Date: Tue, 31 Mar 2026 23:07:10 +0800
Subject: [PATCH 09/13] Apply centered time row alignment in normal and
 read-only headers

---
 frontend/share.js                 |  10 +--
 frontend/styles/compatibility.css |   8 +--
 frontend/styles/header.css        | 113 +++++++++++++++++++++++-------
 frontend/styles/responsive.css    |  55 +++++++++++----
 frontend/styles/utilities.css     |   5 +-
 public/index.html                 |  16 +++--
 6 files changed, 148 insertions(+), 59 deletions(-)

diff --git a/frontend/share.js b/frontend/share.js
index 51422e2..77347ef 100644
--- a/frontend/share.js
+++ b/frontend/share.js
@@ -164,14 +164,8 @@ export async function checkSharedLink() {
             if (data.success) {
                 initDashboard(data.data);
 
-                // Add header indicator
-                const header = document.querySelector('.header-content');
-                const indicator = document.createElement('div');
-                indicator.className = 'share-indicator';
-                indicator.innerHTML = '<span class="readonly-badge">僅供檢視 (唯讀)</span>';
-                // Insert before data-time-box
-                const timeBox = document.querySelector('.data-time-box');
-                header.insertBefore(indicator, timeBox);
+                const headerStatusBadge = document.getElementById('headerStatusBadge');
+                if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視';
 
                 if (updateTime) updateTime.textContent = '分享存檔';
             } else {
diff --git a/frontend/styles/compatibility.css b/frontend/styles/compatibility.css
index eb0cfb3..e6d07e9 100644
--- a/frontend/styles/compatibility.css
+++ b/frontend/styles/compatibility.css
@@ -80,8 +80,6 @@
 
 /* Read Only Mode */
 
-body.read-only-mode .time-info,
-
 body.read-only-mode .import-dropdown,
 
 body.read-only-mode #shareBtn,
@@ -102,5 +100,7 @@ body.read-only-mode .header {
 
 }
 
-
-
+body.read-only-mode .data-time-box {
+    width: 100%;
+    justify-content: space-between;
+}
diff --git a/frontend/styles/header.css b/frontend/styles/header.css
index 309a289..c33b896 100644
--- a/frontend/styles/header.css
+++ b/frontend/styles/header.css
@@ -8,7 +8,7 @@
 
     z-index: 100;
 
-    padding: 14px 0;
+    padding: 10px 0;
 
     margin: 0 -24px 40px;
 
@@ -36,9 +36,9 @@
 
     align-items: center;
 
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 
-    gap: 16px;
+    gap: 12px;
 
     max-width: 1200px;
 
@@ -56,6 +56,14 @@
 
     gap: 12px;
 
+    min-width: 0;
+
+    flex: 1 1 auto;
+
+}
+
+.header-title-group {
+    min-width: 0;
 }
 
 
@@ -68,9 +76,9 @@
 
     justify-content: center;
 
-    width: 36px;
+    width: 32px;
 
-    height: 36px;
+    height: 32px;
 
     background: var(--color-primary);
 
@@ -86,9 +94,9 @@
 
 .logo-icon svg {
 
-    width: 20px;
+    width: 18px;
 
-    height: 20px;
+    height: 18px;
 
 }
 
@@ -98,6 +106,8 @@
 
     font-size: 20px;
 
+    line-height: 1.2;
+
     font-weight: 600;
 
     color: var(--color-text-main);
@@ -112,6 +122,14 @@
 
     background-clip: unset;
 
+    margin: 0;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
 }
 
 
@@ -122,10 +140,29 @@
 
     font-size: 12px;
 
-    margin-top: 1px;
+    line-height: 1.2;
+
+    margin: 1px 0 0;
 
     font-weight: 400;
 
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    flex: 1 1 auto;
+
+    min-width: 0;
+
+}
+
+.subtitle-row {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    min-width: 0;
 }
 
 
@@ -138,7 +175,7 @@
 
     align-items: center;
 
-    gap: 12px;
+    gap: 10px;
 
     position: relative;
 
@@ -152,6 +189,32 @@
 
     backdrop-filter: none;
 
+    min-width: 0;
+
+}
+
+.header-status-badge {
+    display: none;
+    align-items: center;
+    min-height: 18px;
+    padding: 1px 6px;
+    border: 1px solid var(--color-warning-muted);
+    border-radius: var(--radius-pill);
+    color: var(--color-warning);
+    background: color-mix(in srgb, var(--color-warning-muted) 40%, transparent);
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+body.read-only-mode .header-status-badge {
+    display: inline-flex;
+}
+
+body.read-only-mode .header-status-badge:empty {
+    display: none;
 }
 
 .header-actions {
@@ -165,29 +228,26 @@
 
     display: flex;
 
-    flex-direction: column;
+    flex-direction: row;
 
     gap: 0;
 
+    min-height: 36px;
+
     padding-right: 12px;
 
     border-right: 1px solid var(--color-border-subtle);
 
-}
-
-
-
-.time-label {
+    align-items: center;
 
-    font-size: 10px;
+    justify-content: center;
 
-    color: var(--color-text-muted);
+}
 
-    font-weight: 500;
 
-    letter-spacing: 0.05em;
 
-    text-transform: uppercase;
+.time-label {
+    display: none;
 
 }
 
@@ -197,9 +257,13 @@
 
     font-size: 12px;
 
+    line-height: 1.2;
+
     font-weight: 500;
 
-    color: var(--color-text-secondary);
+    color: var(--color-text-muted);
+
+    opacity: 0.78;
 
     font-variant-numeric: tabular-nums;
 
@@ -241,15 +305,15 @@
 
     gap: 8px;
 
-    height: 40px;
+    min-height: 36px;
 
-    padding: 0 18px;
+    padding: 0 14px;
 
     background: var(--color-primary);
 
     border: none;
 
-    border-radius: var(--radius-pill);
+    border-radius: var(--radius-sm);
 
     color: var(--md-sys-color-on-primary);
 
@@ -484,4 +548,3 @@ visibility: visible;
     color: var(--color-text-muted);
 
 }
-
diff --git a/frontend/styles/responsive.css b/frontend/styles/responsive.css
index b358f42..13dd1bc 100644
--- a/frontend/styles/responsive.css
+++ b/frontend/styles/responsive.css
@@ -22,21 +22,11 @@
 
 
 
-    .header-content {
-
-        flex-direction: column;
-
-        align-items: flex-start;
-
-    }
-
-
-
     .data-time-box {
 
-        align-self: stretch;
+        justify-content: flex-end;
 
-        justify-content: space-between;
+        gap: 8px;
 
     }
 
@@ -161,6 +151,46 @@
 
 @media (max-width: 480px) {
 
+    .header {
+        margin-bottom: 20px;
+    }
+
+    .header-content {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .data-time-box {
+        width: 100%;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .time-label {
+        display: none;
+    }
+
+    .time-info {
+        padding-right: 8px;
+    }
+
+    .time-value {
+        font-size: 11px;
+    }
+
+    .header-actions .import-dropdown-btn {
+        min-width: 36px;
+        padding: 0 10px;
+    }
+
+    .header-actions .import-dropdown-btn > span:last-child {
+        display: none;
+    }
+
+    .header-actions {
+        flex-wrap: wrap;
+    }
+
     .student-details {
 
         flex-direction: column;
@@ -194,4 +224,3 @@
     }
 
 }
-
diff --git a/frontend/styles/utilities.css b/frontend/styles/utilities.css
index b6c177c..65e48be 100644
--- a/frontend/styles/utilities.css
+++ b/frontend/styles/utilities.css
@@ -75,8 +75,8 @@
 }
 
 .theme-toggle-btn {
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     padding: 0;
     justify-content: center;
     background: var(--color-surface-elevated);
@@ -103,5 +103,4 @@
 .mb-12 { margin-bottom: 12px; }
 .share-input-readonly { text-align: center; font-size: 13px; color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-muted); }
 .w-full-center { width: 100%; justify-content: center; }
-.readonly-badge { color: var(--color-warning); font-weight: bold; padding: 4px 8px; border: 1px solid var(--color-warning); border-radius: 4px; font-size: 12px; }
 .mono { font-family: monospace; }
diff --git a/public/index.html b/public/index.html
index 26933f0..c7f08e3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,7 @@
     </noscript>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
     <script src="/theme-init.js"></script>
-    <link rel="stylesheet" href="/dist/main-CoyldwFZ.css" id="vite-css">
+    <link rel="stylesheet" href="/dist/main-bt8E1vXG.css" id="vite-css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 
@@ -68,9 +68,12 @@ <h2>中大壢中成績分析平台</h2>
                             <path d="M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z" />
                         </svg>
                     </div>
-                    <div class="logo-text">
+                    <div class="logo-text header-title-group">
                         <h1>成績分析平台</h1>
-                        <p class="subtitle" id="examTitle">--</p>
+                        <div class="subtitle-row">
+                            <p class="subtitle" id="examTitle">--</p>
+                            <span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>
+                        </div>
                     </div>
                 </div>
                 <div class="data-time-box">
@@ -97,7 +100,8 @@ <h1>成績分析平台</h1>
                                 </svg>
                             </span>
                         </button>
-                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn">
+                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn"
+                            aria-label="分享">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -108,7 +112,7 @@ <h1>成績分析平台</h1>
                             </span>
                             <span>分享</span>
                         </button>
-                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn">
+                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn" aria-label="匯入成績">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -523,7 +527,7 @@ <h3 class="section-title">
         </footer>
     </div>
 
-    <script type="module" src="/dist/main-1Jkr9rBG.js"></script>
+    <script type="module" src="/dist/main-D-w4GNFQ.js"></script>
 </body>
 
 </html>

From 87f6685f1732f1273790c0db865990f371f0d7dd Mon Sep 17 00:00:00 2001
From: BST <107313913+alvin000009238@users.noreply.github.com>
Date: Tue, 31 Mar 2026 23:13:08 +0800
Subject: [PATCH 10/13] =?UTF-8?q?Rename=20rightmost=20header=20action=20to?=
 =?UTF-8?q?=20=E8=BC=89=E5=85=A5=E6=88=90=E7=B8=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/share.js                 |  10 +--
 frontend/styles/compatibility.css |   8 +--
 frontend/styles/header.css        | 113 +++++++++++++++++++++++-------
 frontend/styles/responsive.css    |  55 +++++++++++----
 frontend/styles/utilities.css     |   5 +-
 public/index.html                 |  18 +++--
 6 files changed, 149 insertions(+), 60 deletions(-)

diff --git a/frontend/share.js b/frontend/share.js
index 51422e2..77347ef 100644
--- a/frontend/share.js
+++ b/frontend/share.js
@@ -164,14 +164,8 @@ export async function checkSharedLink() {
             if (data.success) {
                 initDashboard(data.data);
 
-                // Add header indicator
-                const header = document.querySelector('.header-content');
-                const indicator = document.createElement('div');
-                indicator.className = 'share-indicator';
-                indicator.innerHTML = '<span class="readonly-badge">僅供檢視 (唯讀)</span>';
-                // Insert before data-time-box
-                const timeBox = document.querySelector('.data-time-box');
-                header.insertBefore(indicator, timeBox);
+                const headerStatusBadge = document.getElementById('headerStatusBadge');
+                if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視';
 
                 if (updateTime) updateTime.textContent = '分享存檔';
             } else {
diff --git a/frontend/styles/compatibility.css b/frontend/styles/compatibility.css
index eb0cfb3..e6d07e9 100644
--- a/frontend/styles/compatibility.css
+++ b/frontend/styles/compatibility.css
@@ -80,8 +80,6 @@
 
 /* Read Only Mode */
 
-body.read-only-mode .time-info,
-
 body.read-only-mode .import-dropdown,
 
 body.read-only-mode #shareBtn,
@@ -102,5 +100,7 @@ body.read-only-mode .header {
 
 }
 
-
-
+body.read-only-mode .data-time-box {
+    width: 100%;
+    justify-content: space-between;
+}
diff --git a/frontend/styles/header.css b/frontend/styles/header.css
index 309a289..c33b896 100644
--- a/frontend/styles/header.css
+++ b/frontend/styles/header.css
@@ -8,7 +8,7 @@
 
     z-index: 100;
 
-    padding: 14px 0;
+    padding: 10px 0;
 
     margin: 0 -24px 40px;
 
@@ -36,9 +36,9 @@
 
     align-items: center;
 
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 
-    gap: 16px;
+    gap: 12px;
 
     max-width: 1200px;
 
@@ -56,6 +56,14 @@
 
     gap: 12px;
 
+    min-width: 0;
+
+    flex: 1 1 auto;
+
+}
+
+.header-title-group {
+    min-width: 0;
 }
 
 
@@ -68,9 +76,9 @@
 
     justify-content: center;
 
-    width: 36px;
+    width: 32px;
 
-    height: 36px;
+    height: 32px;
 
     background: var(--color-primary);
 
@@ -86,9 +94,9 @@
 
 .logo-icon svg {
 
-    width: 20px;
+    width: 18px;
 
-    height: 20px;
+    height: 18px;
 
 }
 
@@ -98,6 +106,8 @@
 
     font-size: 20px;
 
+    line-height: 1.2;
+
     font-weight: 600;
 
     color: var(--color-text-main);
@@ -112,6 +122,14 @@
 
     background-clip: unset;
 
+    margin: 0;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
 }
 
 
@@ -122,10 +140,29 @@
 
     font-size: 12px;
 
-    margin-top: 1px;
+    line-height: 1.2;
+
+    margin: 1px 0 0;
 
     font-weight: 400;
 
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    flex: 1 1 auto;
+
+    min-width: 0;
+
+}
+
+.subtitle-row {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    min-width: 0;
 }
 
 
@@ -138,7 +175,7 @@
 
     align-items: center;
 
-    gap: 12px;
+    gap: 10px;
 
     position: relative;
 
@@ -152,6 +189,32 @@
 
     backdrop-filter: none;
 
+    min-width: 0;
+
+}
+
+.header-status-badge {
+    display: none;
+    align-items: center;
+    min-height: 18px;
+    padding: 1px 6px;
+    border: 1px solid var(--color-warning-muted);
+    border-radius: var(--radius-pill);
+    color: var(--color-warning);
+    background: color-mix(in srgb, var(--color-warning-muted) 40%, transparent);
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+body.read-only-mode .header-status-badge {
+    display: inline-flex;
+}
+
+body.read-only-mode .header-status-badge:empty {
+    display: none;
 }
 
 .header-actions {
@@ -165,29 +228,26 @@
 
     display: flex;
 
-    flex-direction: column;
+    flex-direction: row;
 
     gap: 0;
 
+    min-height: 36px;
+
     padding-right: 12px;
 
     border-right: 1px solid var(--color-border-subtle);
 
-}
-
-
-
-.time-label {
+    align-items: center;
 
-    font-size: 10px;
+    justify-content: center;
 
-    color: var(--color-text-muted);
+}
 
-    font-weight: 500;
 
-    letter-spacing: 0.05em;
 
-    text-transform: uppercase;
+.time-label {
+    display: none;
 
 }
 
@@ -197,9 +257,13 @@
 
     font-size: 12px;
 
+    line-height: 1.2;
+
     font-weight: 500;
 
-    color: var(--color-text-secondary);
+    color: var(--color-text-muted);
+
+    opacity: 0.78;
 
     font-variant-numeric: tabular-nums;
 
@@ -241,15 +305,15 @@
 
     gap: 8px;
 
-    height: 40px;
+    min-height: 36px;
 
-    padding: 0 18px;
+    padding: 0 14px;
 
     background: var(--color-primary);
 
     border: none;
 
-    border-radius: var(--radius-pill);
+    border-radius: var(--radius-sm);
 
     color: var(--md-sys-color-on-primary);
 
@@ -484,4 +548,3 @@ visibility: visible;
     color: var(--color-text-muted);
 
 }
-
diff --git a/frontend/styles/responsive.css b/frontend/styles/responsive.css
index b358f42..13dd1bc 100644
--- a/frontend/styles/responsive.css
+++ b/frontend/styles/responsive.css
@@ -22,21 +22,11 @@
 
 
 
-    .header-content {
-
-        flex-direction: column;
-
-        align-items: flex-start;
-
-    }
-
-
-
     .data-time-box {
 
-        align-self: stretch;
+        justify-content: flex-end;
 
-        justify-content: space-between;
+        gap: 8px;
 
     }
 
@@ -161,6 +151,46 @@
 
 @media (max-width: 480px) {
 
+    .header {
+        margin-bottom: 20px;
+    }
+
+    .header-content {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .data-time-box {
+        width: 100%;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .time-label {
+        display: none;
+    }
+
+    .time-info {
+        padding-right: 8px;
+    }
+
+    .time-value {
+        font-size: 11px;
+    }
+
+    .header-actions .import-dropdown-btn {
+        min-width: 36px;
+        padding: 0 10px;
+    }
+
+    .header-actions .import-dropdown-btn > span:last-child {
+        display: none;
+    }
+
+    .header-actions {
+        flex-wrap: wrap;
+    }
+
     .student-details {
 
         flex-direction: column;
@@ -194,4 +224,3 @@
     }
 
 }
-
diff --git a/frontend/styles/utilities.css b/frontend/styles/utilities.css
index b6c177c..65e48be 100644
--- a/frontend/styles/utilities.css
+++ b/frontend/styles/utilities.css
@@ -75,8 +75,8 @@
 }
 
 .theme-toggle-btn {
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     padding: 0;
     justify-content: center;
     background: var(--color-surface-elevated);
@@ -103,5 +103,4 @@
 .mb-12 { margin-bottom: 12px; }
 .share-input-readonly { text-align: center; font-size: 13px; color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-muted); }
 .w-full-center { width: 100%; justify-content: center; }
-.readonly-badge { color: var(--color-warning); font-weight: bold; padding: 4px 8px; border: 1px solid var(--color-warning); border-radius: 4px; font-size: 12px; }
 .mono { font-family: monospace; }
diff --git a/public/index.html b/public/index.html
index 26933f0..a3a058c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,7 @@
     </noscript>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
     <script src="/theme-init.js"></script>
-    <link rel="stylesheet" href="/dist/main-CoyldwFZ.css" id="vite-css">
+    <link rel="stylesheet" href="/dist/main-bt8E1vXG.css" id="vite-css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 
@@ -68,9 +68,12 @@ <h2>中大壢中成績分析平台</h2>
                             <path d="M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z" />
                         </svg>
                     </div>
-                    <div class="logo-text">
+                    <div class="logo-text header-title-group">
                         <h1>成績分析平台</h1>
-                        <p class="subtitle" id="examTitle">--</p>
+                        <div class="subtitle-row">
+                            <p class="subtitle" id="examTitle">--</p>
+                            <span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>
+                        </div>
                     </div>
                 </div>
                 <div class="data-time-box">
@@ -97,7 +100,8 @@ <h1>成績分析平台</h1>
                                 </svg>
                             </span>
                         </button>
-                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn">
+                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn"
+                            aria-label="分享">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -108,7 +112,7 @@ <h1>成績分析平台</h1>
                             </span>
                             <span>分享</span>
                         </button>
-                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn">
+                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn" aria-label="載入成績">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -117,7 +121,7 @@ <h1>成績分析平台</h1>
                                         d="M160-160v-80h109q-51-44-80-106t-29-134q0-112 68-197.5T400-790v84q-70 25-115 86.5T240-480q0 54 21.5 99.5T320-302v-98h80v240H160Zm440 0q-50 0-85-35t-35-85q0-48 33-82.5t81-36.5q17-36 50.5-58.5T720-480q53 0 91.5 34.5T858-360q42 0 72 29t30 70q0 42-29 71.5T860-160H600Zm116-360q-7-41-27-76t-49-62v98h-80v-240h240v80H691q43 38 70.5 89T797-520h-81ZM600-240h260q8 0 14-6t6-14q0-8-6-14t-14-6h-70v-50q0-29-20.5-49.5T720-400q-29 0-49.5 20.5T650-330v10h-50q-17 0-28.5 11.5T560-280q0 17 11.5 28.5T600-240Zm120-80Z" />
                                 </svg>
                             </span>
-                            <span>匯入成績</span>
+                            <span>載入成績</span>
                         </button>
                     </div>
                 </div>
@@ -523,7 +527,7 @@ <h3 class="section-title">
         </footer>
     </div>
 
-    <script type="module" src="/dist/main-1Jkr9rBG.js"></script>
+    <script type="module" src="/dist/main-D-w4GNFQ.js"></script>
 </body>
 
 </html>

From c2a5337c3f8c25c5dd8aa55cdabea36f2c21213e Mon Sep 17 00:00:00 2001
From: BST <107313913+alvin000009238@users.noreply.github.com>
Date: Tue, 31 Mar 2026 23:16:28 +0800
Subject: [PATCH 11/13] Keep rightmost sync button text visible on small
 screens

---
 frontend/styles/responsive.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/styles/responsive.css b/frontend/styles/responsive.css
index 13dd1bc..a9c8152 100644
--- a/frontend/styles/responsive.css
+++ b/frontend/styles/responsive.css
@@ -187,6 +187,10 @@
         display: none;
     }
 
+    .header-actions #syncBtn > span:last-child {
+        display: inline;
+    }
+
     .header-actions {
         flex-wrap: wrap;
     }

From 9f1e1d1b2253d5d511d098ba58c9157ccccca909 Mon Sep 17 00:00:00 2001
From: BST <107313913+alvin000009238@users.noreply.github.com>
Date: Tue, 31 Mar 2026 23:34:36 +0800
Subject: [PATCH 12/13] Use class-based status badge updates to avoid
 duplicate-id issues

---
 frontend/share.js                 |  12 ++--
 frontend/styles/compatibility.css |   8 +--
 frontend/styles/header.css        | 113 +++++++++++++++++++++++-------
 frontend/styles/responsive.css    |  59 ++++++++++++----
 frontend/styles/utilities.css     |   5 +-
 public/index.html                 |  18 +++--
 6 files changed, 155 insertions(+), 60 deletions(-)

diff --git a/frontend/share.js b/frontend/share.js
index 51422e2..c167288 100644
--- a/frontend/share.js
+++ b/frontend/share.js
@@ -164,14 +164,10 @@ export async function checkSharedLink() {
             if (data.success) {
                 initDashboard(data.data);
 
-                // Add header indicator
-                const header = document.querySelector('.header-content');
-                const indicator = document.createElement('div');
-                indicator.className = 'share-indicator';
-                indicator.innerHTML = '<span class="readonly-badge">僅供檢視 (唯讀)</span>';
-                // Insert before data-time-box
-                const timeBox = document.querySelector('.data-time-box');
-                header.insertBefore(indicator, timeBox);
+                document.querySelectorAll('.header-status-badge')
+                    .forEach((headerStatusBadge) => {
+                        headerStatusBadge.textContent = '僅供檢視';
+                    });
 
                 if (updateTime) updateTime.textContent = '分享存檔';
             } else {
diff --git a/frontend/styles/compatibility.css b/frontend/styles/compatibility.css
index eb0cfb3..e6d07e9 100644
--- a/frontend/styles/compatibility.css
+++ b/frontend/styles/compatibility.css
@@ -80,8 +80,6 @@
 
 /* Read Only Mode */
 
-body.read-only-mode .time-info,
-
 body.read-only-mode .import-dropdown,
 
 body.read-only-mode #shareBtn,
@@ -102,5 +100,7 @@ body.read-only-mode .header {
 
 }
 
-
-
+body.read-only-mode .data-time-box {
+    width: 100%;
+    justify-content: space-between;
+}
diff --git a/frontend/styles/header.css b/frontend/styles/header.css
index 309a289..c33b896 100644
--- a/frontend/styles/header.css
+++ b/frontend/styles/header.css
@@ -8,7 +8,7 @@
 
     z-index: 100;
 
-    padding: 14px 0;
+    padding: 10px 0;
 
     margin: 0 -24px 40px;
 
@@ -36,9 +36,9 @@
 
     align-items: center;
 
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 
-    gap: 16px;
+    gap: 12px;
 
     max-width: 1200px;
 
@@ -56,6 +56,14 @@
 
     gap: 12px;
 
+    min-width: 0;
+
+    flex: 1 1 auto;
+
+}
+
+.header-title-group {
+    min-width: 0;
 }
 
 
@@ -68,9 +76,9 @@
 
     justify-content: center;
 
-    width: 36px;
+    width: 32px;
 
-    height: 36px;
+    height: 32px;
 
     background: var(--color-primary);
 
@@ -86,9 +94,9 @@
 
 .logo-icon svg {
 
-    width: 20px;
+    width: 18px;
 
-    height: 20px;
+    height: 18px;
 
 }
 
@@ -98,6 +106,8 @@
 
     font-size: 20px;
 
+    line-height: 1.2;
+
     font-weight: 600;
 
     color: var(--color-text-main);
@@ -112,6 +122,14 @@
 
     background-clip: unset;
 
+    margin: 0;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
 }
 
 
@@ -122,10 +140,29 @@
 
     font-size: 12px;
 
-    margin-top: 1px;
+    line-height: 1.2;
+
+    margin: 1px 0 0;
 
     font-weight: 400;
 
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    flex: 1 1 auto;
+
+    min-width: 0;
+
+}
+
+.subtitle-row {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    min-width: 0;
 }
 
 
@@ -138,7 +175,7 @@
 
     align-items: center;
 
-    gap: 12px;
+    gap: 10px;
 
     position: relative;
 
@@ -152,6 +189,32 @@
 
     backdrop-filter: none;
 
+    min-width: 0;
+
+}
+
+.header-status-badge {
+    display: none;
+    align-items: center;
+    min-height: 18px;
+    padding: 1px 6px;
+    border: 1px solid var(--color-warning-muted);
+    border-radius: var(--radius-pill);
+    color: var(--color-warning);
+    background: color-mix(in srgb, var(--color-warning-muted) 40%, transparent);
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+body.read-only-mode .header-status-badge {
+    display: inline-flex;
+}
+
+body.read-only-mode .header-status-badge:empty {
+    display: none;
 }
 
 .header-actions {
@@ -165,29 +228,26 @@
 
     display: flex;
 
-    flex-direction: column;
+    flex-direction: row;
 
     gap: 0;
 
+    min-height: 36px;
+
     padding-right: 12px;
 
     border-right: 1px solid var(--color-border-subtle);
 
-}
-
-
-
-.time-label {
+    align-items: center;
 
-    font-size: 10px;
+    justify-content: center;
 
-    color: var(--color-text-muted);
+}
 
-    font-weight: 500;
 
-    letter-spacing: 0.05em;
 
-    text-transform: uppercase;
+.time-label {
+    display: none;
 
 }
 
@@ -197,9 +257,13 @@
 
     font-size: 12px;
 
+    line-height: 1.2;
+
     font-weight: 500;
 
-    color: var(--color-text-secondary);
+    color: var(--color-text-muted);
+
+    opacity: 0.78;
 
     font-variant-numeric: tabular-nums;
 
@@ -241,15 +305,15 @@
 
     gap: 8px;
 
-    height: 40px;
+    min-height: 36px;
 
-    padding: 0 18px;
+    padding: 0 14px;
 
     background: var(--color-primary);
 
     border: none;
 
-    border-radius: var(--radius-pill);
+    border-radius: var(--radius-sm);
 
     color: var(--md-sys-color-on-primary);
 
@@ -484,4 +548,3 @@ visibility: visible;
     color: var(--color-text-muted);
 
 }
-
diff --git a/frontend/styles/responsive.css b/frontend/styles/responsive.css
index b358f42..a9c8152 100644
--- a/frontend/styles/responsive.css
+++ b/frontend/styles/responsive.css
@@ -22,21 +22,11 @@
 
 
 
-    .header-content {
-
-        flex-direction: column;
-
-        align-items: flex-start;
-
-    }
-
-
-
     .data-time-box {
 
-        align-self: stretch;
+        justify-content: flex-end;
 
-        justify-content: space-between;
+        gap: 8px;
 
     }
 
@@ -161,6 +151,50 @@
 
 @media (max-width: 480px) {
 
+    .header {
+        margin-bottom: 20px;
+    }
+
+    .header-content {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .data-time-box {
+        width: 100%;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .time-label {
+        display: none;
+    }
+
+    .time-info {
+        padding-right: 8px;
+    }
+
+    .time-value {
+        font-size: 11px;
+    }
+
+    .header-actions .import-dropdown-btn {
+        min-width: 36px;
+        padding: 0 10px;
+    }
+
+    .header-actions .import-dropdown-btn > span:last-child {
+        display: none;
+    }
+
+    .header-actions #syncBtn > span:last-child {
+        display: inline;
+    }
+
+    .header-actions {
+        flex-wrap: wrap;
+    }
+
     .student-details {
 
         flex-direction: column;
@@ -194,4 +228,3 @@
     }
 
 }
-
diff --git a/frontend/styles/utilities.css b/frontend/styles/utilities.css
index b6c177c..65e48be 100644
--- a/frontend/styles/utilities.css
+++ b/frontend/styles/utilities.css
@@ -75,8 +75,8 @@
 }
 
 .theme-toggle-btn {
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     padding: 0;
     justify-content: center;
     background: var(--color-surface-elevated);
@@ -103,5 +103,4 @@
 .mb-12 { margin-bottom: 12px; }
 .share-input-readonly { text-align: center; font-size: 13px; color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-muted); }
 .w-full-center { width: 100%; justify-content: center; }
-.readonly-badge { color: var(--color-warning); font-weight: bold; padding: 4px 8px; border: 1px solid var(--color-warning); border-radius: 4px; font-size: 12px; }
 .mono { font-family: monospace; }
diff --git a/public/index.html b/public/index.html
index 26933f0..ebac8d2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,7 @@
     </noscript>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
     <script src="/theme-init.js"></script>
-    <link rel="stylesheet" href="/dist/main-CoyldwFZ.css" id="vite-css">
+    <link rel="stylesheet" href="/dist/main-bt8E1vXG.css" id="vite-css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 
@@ -68,9 +68,12 @@ <h2>中大壢中成績分析平台</h2>
                             <path d="M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z" />
                         </svg>
                     </div>
-                    <div class="logo-text">
+                    <div class="logo-text header-title-group">
                         <h1>成績分析平台</h1>
-                        <p class="subtitle" id="examTitle">--</p>
+                        <div class="subtitle-row">
+                            <p class="subtitle" id="examTitle">--</p>
+                            <span class="header-status-badge" aria-live="polite"></span>
+                        </div>
                     </div>
                 </div>
                 <div class="data-time-box">
@@ -97,7 +100,8 @@ <h1>成績分析平台</h1>
                                 </svg>
                             </span>
                         </button>
-                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn">
+                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn"
+                            aria-label="分享">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -108,7 +112,7 @@ <h1>成績分析平台</h1>
                             </span>
                             <span>分享</span>
                         </button>
-                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn">
+                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn" aria-label="載入成績">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -117,7 +121,7 @@ <h1>成績分析平台</h1>
                                         d="M160-160v-80h109q-51-44-80-106t-29-134q0-112 68-197.5T400-790v84q-70 25-115 86.5T240-480q0 54 21.5 99.5T320-302v-98h80v240H160Zm440 0q-50 0-85-35t-35-85q0-48 33-82.5t81-36.5q17-36 50.5-58.5T720-480q53 0 91.5 34.5T858-360q42 0 72 29t30 70q0 42-29 71.5T860-160H600Zm116-360q-7-41-27-76t-49-62v98h-80v-240h240v80H691q43 38 70.5 89T797-520h-81ZM600-240h260q8 0 14-6t6-14q0-8-6-14t-14-6h-70v-50q0-29-20.5-49.5T720-400q-29 0-49.5 20.5T650-330v10h-50q-17 0-28.5 11.5T560-280q0 17 11.5 28.5T600-240Zm120-80Z" />
                                 </svg>
                             </span>
-                            <span>匯入成績</span>
+                            <span>載入成績</span>
                         </button>
                     </div>
                 </div>
@@ -523,7 +527,7 @@ <h3 class="section-title">
         </footer>
     </div>
 
-    <script type="module" src="/dist/main-1Jkr9rBG.js"></script>
+    <script type="module" src="/dist/main-D-w4GNFQ.js"></script>
 </body>
 
 </html>

From a9289c0dd263c472345bb716c6f14ecfb693bb7d Mon Sep 17 00:00:00 2001
From: BST <107313913+alvin000009238@users.noreply.github.com>
Date: Wed, 1 Apr 2026 11:00:49 +0800
Subject: [PATCH 13/13] Consolidate single status badge owner and restore time
 semantics

---
 frontend/share.js                 |  10 +--
 frontend/styles/compatibility.css |  20 +----
 frontend/styles/header.css        | 121 ++++++++++++++++++++++++------
 frontend/styles/responsive.css    |  59 +++++++++++----
 frontend/styles/utilities.css     |   5 +-
 public/index.html                 |  22 +++---
 6 files changed, 163 insertions(+), 74 deletions(-)

diff --git a/frontend/share.js b/frontend/share.js
index 51422e2..77347ef 100644
--- a/frontend/share.js
+++ b/frontend/share.js
@@ -164,14 +164,8 @@ export async function checkSharedLink() {
             if (data.success) {
                 initDashboard(data.data);
 
-                // Add header indicator
-                const header = document.querySelector('.header-content');
-                const indicator = document.createElement('div');
-                indicator.className = 'share-indicator';
-                indicator.innerHTML = '<span class="readonly-badge">僅供檢視 (唯讀)</span>';
-                // Insert before data-time-box
-                const timeBox = document.querySelector('.data-time-box');
-                header.insertBefore(indicator, timeBox);
+                const headerStatusBadge = document.getElementById('headerStatusBadge');
+                if (headerStatusBadge) headerStatusBadge.textContent = '僅供檢視';
 
                 if (updateTime) updateTime.textContent = '分享存檔';
             } else {
diff --git a/frontend/styles/compatibility.css b/frontend/styles/compatibility.css
index eb0cfb3..6daaaad 100644
--- a/frontend/styles/compatibility.css
+++ b/frontend/styles/compatibility.css
@@ -66,22 +66,8 @@
 
 
 
-.share-indicator {
-
-    display: flex;
-
-    align-items: center;
-
-    margin-right: 12px;
-
-}
-
-
-
 /* Read Only Mode */
 
-body.read-only-mode .time-info,
-
 body.read-only-mode .import-dropdown,
 
 body.read-only-mode #shareBtn,
@@ -102,5 +88,7 @@ body.read-only-mode .header {
 
 }
 
-
-
+body.read-only-mode .data-time-box {
+    width: 100%;
+    justify-content: space-between;
+}
diff --git a/frontend/styles/header.css b/frontend/styles/header.css
index 309a289..39fcd35 100644
--- a/frontend/styles/header.css
+++ b/frontend/styles/header.css
@@ -8,7 +8,7 @@
 
     z-index: 100;
 
-    padding: 14px 0;
+    padding: 10px 0;
 
     margin: 0 -24px 40px;
 
@@ -36,9 +36,9 @@
 
     align-items: center;
 
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 
-    gap: 16px;
+    gap: 12px;
 
     max-width: 1200px;
 
@@ -56,6 +56,14 @@
 
     gap: 12px;
 
+    min-width: 0;
+
+    flex: 1 1 auto;
+
+}
+
+.header-title-group {
+    min-width: 0;
 }
 
 
@@ -68,9 +76,9 @@
 
     justify-content: center;
 
-    width: 36px;
+    width: 32px;
 
-    height: 36px;
+    height: 32px;
 
     background: var(--color-primary);
 
@@ -86,9 +94,9 @@
 
 .logo-icon svg {
 
-    width: 20px;
+    width: 18px;
 
-    height: 20px;
+    height: 18px;
 
 }
 
@@ -98,6 +106,8 @@
 
     font-size: 20px;
 
+    line-height: 1.2;
+
     font-weight: 600;
 
     color: var(--color-text-main);
@@ -112,6 +122,14 @@
 
     background-clip: unset;
 
+    margin: 0;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
 }
 
 
@@ -122,10 +140,29 @@
 
     font-size: 12px;
 
-    margin-top: 1px;
+    line-height: 1.2;
+
+    margin: 1px 0 0;
 
     font-weight: 400;
 
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    flex: 1 1 auto;
+
+    min-width: 0;
+
+}
+
+.subtitle-row {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    min-width: 0;
 }
 
 
@@ -138,7 +175,7 @@
 
     align-items: center;
 
-    gap: 12px;
+    gap: 10px;
 
     position: relative;
 
@@ -152,6 +189,32 @@
 
     backdrop-filter: none;
 
+    min-width: 0;
+
+}
+
+.header-status-badge {
+    display: none;
+    align-items: center;
+    min-height: 18px;
+    padding: 1px 6px;
+    border: 1px solid var(--color-warning-muted);
+    border-radius: var(--radius-pill);
+    color: var(--color-warning);
+    background: color-mix(in srgb, var(--color-warning-muted) 40%, transparent);
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+body.read-only-mode .header-status-badge {
+    display: inline-flex;
+}
+
+body.read-only-mode .header-status-badge:empty {
+    display: none;
 }
 
 .header-actions {
@@ -165,29 +228,34 @@
 
     display: flex;
 
-    flex-direction: column;
+    flex-direction: row;
 
     gap: 0;
 
+    min-height: 36px;
+
     padding-right: 12px;
 
     border-right: 1px solid var(--color-border-subtle);
 
-}
-
-
-
-.time-label {
+    align-items: center;
 
-    font-size: 10px;
+    justify-content: center;
 
-    color: var(--color-text-muted);
+}
 
-    font-weight: 500;
 
-    letter-spacing: 0.05em;
 
-    text-transform: uppercase;
+.time-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
 
 }
 
@@ -197,9 +265,13 @@
 
     font-size: 12px;
 
+    line-height: 1.2;
+
     font-weight: 500;
 
-    color: var(--color-text-secondary);
+    color: var(--color-text-muted);
+
+    opacity: 0.78;
 
     font-variant-numeric: tabular-nums;
 
@@ -241,15 +313,15 @@
 
     gap: 8px;
 
-    height: 40px;
+    min-height: 36px;
 
-    padding: 0 18px;
+    padding: 0 14px;
 
     background: var(--color-primary);
 
     border: none;
 
-    border-radius: var(--radius-pill);
+    border-radius: var(--radius-sm);
 
     color: var(--md-sys-color-on-primary);
 
@@ -484,4 +556,3 @@ visibility: visible;
     color: var(--color-text-muted);
 
 }
-
diff --git a/frontend/styles/responsive.css b/frontend/styles/responsive.css
index b358f42..a9c8152 100644
--- a/frontend/styles/responsive.css
+++ b/frontend/styles/responsive.css
@@ -22,21 +22,11 @@
 
 
 
-    .header-content {
-
-        flex-direction: column;
-
-        align-items: flex-start;
-
-    }
-
-
-
     .data-time-box {
 
-        align-self: stretch;
+        justify-content: flex-end;
 
-        justify-content: space-between;
+        gap: 8px;
 
     }
 
@@ -161,6 +151,50 @@
 
 @media (max-width: 480px) {
 
+    .header {
+        margin-bottom: 20px;
+    }
+
+    .header-content {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .data-time-box {
+        width: 100%;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .time-label {
+        display: none;
+    }
+
+    .time-info {
+        padding-right: 8px;
+    }
+
+    .time-value {
+        font-size: 11px;
+    }
+
+    .header-actions .import-dropdown-btn {
+        min-width: 36px;
+        padding: 0 10px;
+    }
+
+    .header-actions .import-dropdown-btn > span:last-child {
+        display: none;
+    }
+
+    .header-actions #syncBtn > span:last-child {
+        display: inline;
+    }
+
+    .header-actions {
+        flex-wrap: wrap;
+    }
+
     .student-details {
 
         flex-direction: column;
@@ -194,4 +228,3 @@
     }
 
 }
-
diff --git a/frontend/styles/utilities.css b/frontend/styles/utilities.css
index b6c177c..65e48be 100644
--- a/frontend/styles/utilities.css
+++ b/frontend/styles/utilities.css
@@ -75,8 +75,8 @@
 }
 
 .theme-toggle-btn {
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     padding: 0;
     justify-content: center;
     background: var(--color-surface-elevated);
@@ -103,5 +103,4 @@
 .mb-12 { margin-bottom: 12px; }
 .share-input-readonly { text-align: center; font-size: 13px; color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-muted); }
 .w-full-center { width: 100%; justify-content: center; }
-.readonly-badge { color: var(--color-warning); font-weight: bold; padding: 4px 8px; border: 1px solid var(--color-warning); border-radius: 4px; font-size: 12px; }
 .mono { font-family: monospace; }
diff --git a/public/index.html b/public/index.html
index 26933f0..24a34fa 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,7 @@
     </noscript>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
     <script src="/theme-init.js"></script>
-    <link rel="stylesheet" href="/dist/main-CoyldwFZ.css" id="vite-css">
+    <link rel="stylesheet" href="/dist/main-bt8E1vXG.css" id="vite-css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 
@@ -68,16 +68,19 @@ <h2>中大壢中成績分析平台</h2>
                             <path d="M640-160v-280h160v280H640Zm-240 0v-640h160v640H400Zm-240 0v-440h160v440H160Z" />
                         </svg>
                     </div>
-                    <div class="logo-text">
+                    <div class="logo-text header-title-group">
                         <h1>成績分析平台</h1>
-                        <p class="subtitle" id="examTitle">--</p>
+                        <div class="subtitle-row">
+                            <p class="subtitle" id="examTitle">--</p>
+                            <span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>
+                        </div>
                     </div>
                 </div>
                 <div class="data-time-box">
                     <div class="time-info">
 
-                        <span class="time-label">資料更新時間</span>
-                        <span class="time-value" id="updateTime">--</span>
+                        <span class="time-label" id="updateTimeLabel">資料更新時間</span>
+                        <span class="time-value" id="updateTime" aria-labelledby="updateTimeLabel">--</span>
                     </div>
                     <div class="flex-center-gap-8 header-actions">
                         <button class="icon-btn theme-toggle-btn" id="themeToggleBtn" type="button" aria-label="切換至淺色模式"
@@ -97,7 +100,8 @@ <h1>成績分析平台</h1>
                                 </svg>
                             </span>
                         </button>
-                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn">
+                        <button class="import-dropdown-btn share-btn-style" id="shareBtn" data-tour="share-btn"
+                            aria-label="分享">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -108,7 +112,7 @@ <h1>成績分析平台</h1>
                             </span>
                             <span>分享</span>
                         </button>
-                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn">
+                        <button class="import-dropdown-btn" id="syncBtn" data-tour="import-btn" aria-label="載入成績">
                             <span class="dropdown-icon">
                                 <svg class="inline-svg-icon icon-18" fill="currentColor"
                                     xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960"
@@ -117,7 +121,7 @@ <h1>成績分析平台</h1>
                                         d="M160-160v-80h109q-51-44-80-106t-29-134q0-112 68-197.5T400-790v84q-70 25-115 86.5T240-480q0 54 21.5 99.5T320-302v-98h80v240H160Zm440 0q-50 0-85-35t-35-85q0-48 33-82.5t81-36.5q17-36 50.5-58.5T720-480q53 0 91.5 34.5T858-360q42 0 72 29t30 70q0 42-29 71.5T860-160H600Zm116-360q-7-41-27-76t-49-62v98h-80v-240h240v80H691q43 38 70.5 89T797-520h-81ZM600-240h260q8 0 14-6t6-14q0-8-6-14t-14-6h-70v-50q0-29-20.5-49.5T720-400q-29 0-49.5 20.5T650-330v10h-50q-17 0-28.5 11.5T560-280q0 17 11.5 28.5T600-240Zm120-80Z" />
                                 </svg>
                             </span>
-                            <span>匯入成績</span>
+                            <span>載入成績</span>
                         </button>
                     </div>
                 </div>
@@ -523,7 +527,7 @@ <h3 class="section-title">
         </footer>
     </div>
 
-    <script type="module" src="/dist/main-1Jkr9rBG.js"></script>
+    <script type="module" src="/dist/main-D-w4GNFQ.js"></script>
 </body>
 
 </html>