.ss-portal { max-width: 480px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ss-portal * { box-sizing: border-box; }
.ss-portal h2 { font-size: 18px; margin-bottom: 12px; }
.ss-portal .ss-card { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.ss-portal input, .ss-portal select {
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; margin-bottom: 10px; font-size: 15px;
}
.ss-portal button {
    width: 100%; padding: 10px; border: none; border-radius: 6px; background: #f7931e; color: #fff;
    font-size: 15px; cursor: pointer; margin-bottom: 8px;
}
.ss-portal button.secondary { background: #eee; color: #333; }
.ss-portal .ss-tabs { display: flex; margin-bottom: 12px; gap: 8px; }
.ss-portal .ss-tab { flex: 1; text-align: center; padding: 8px; border-radius: 6px; background: #f2f2f2; cursor: pointer; }
.ss-portal .ss-tab.active { background: #f7931e; color: #fff; }
.ss-portal .ss-msg { padding: 8px 10px; border-radius: 6px; margin-bottom: 10px; font-size: 14px; }
.ss-portal .ss-msg.error { background: #fdecea; color: #c0392b; }
.ss-portal .ss-msg.success { background: #eafaf1; color: #1e8449; }
.ss-portal .ss-attendance-row, .ss-portal .ss-notice-row { border-bottom: 1px solid #f0f0f0; padding: 8px 0; font-size: 14px; }
.ss-portal .ss-notice-row.unread { font-weight: bold; }
/* v1.3.25：「請點閱觀看詳細事項」提示文字用跟標題不同的顏色（偏紅、
   代表「需要動作」），跟粗體的標題（<strong>）明顯區分開來，不會讓人
   分不清哪段是標題、哪段是操作提示。 */
.ss-portal .ss-notice-unread-hint { color: #c0392b; font-weight: 700; margin-left: 4px; }
.ss-portal .ss-student-name { font-size: 16px; font-weight: bold; margin: 12px 0 6px; }
.ss-portal .ss-pwa-hint { background: #fff8e1; border: 1px solid #f7931e; padding: 10px; border-radius: 6px; font-size: 13px; margin-bottom: 12px; }
/* v1.3.25：「今日出勤」「出勤歷程」「當日聯絡簿」「聯絡簿記錄」這類
   區塊標題，原本只是瀏覽器預設的 h4 樣式，跟底下清單內容的粗細/顏色
   太接近、不容易一眼看出「這是標題、下面才是內容」。改用品牌色
   （跟按鈕、頁籤 active 狀態同一個橘色）+ 底線，讓標題本身更明顯，
   同時也跟上面新增的「請點閱觀看詳細事項」提示色（偏紅）刻意用不同
   顏色，避免「區塊標題」跟「事項本身需要動作的提示」兩種不同性質的
   顏色標示混在一起、分不出哪個代表什麼。 */
.ss-portal h4 {
    font-size: 15px;
    font-weight: 700;
    color: #f7931e;
    margin: 18px 0 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid #f7931e;
}
.ss-portal h4:first-child { margin-top: 0; }
/* v1.3.27：密碼推播「查看密碼」連結進來後，秀出密碼的醒目區塊——用大
   一點的等寬字體讓密碼本身清楚好讀（尤其是容易混淆的英數字），跟一般
   .ss-msg 提示文字明顯不同層級。 */
.ss-portal .ss-password-reveal-value {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    background: #fff;
    border: 1px dashed #1e8449;
    border-radius: 6px;
    padding: 8px 10px;
    margin: 6px 0 10px;
    text-align: center;
    word-break: break-all;
}
.ss-portal .ss-password-reveal button { margin-top: 4px; }
/* v1.3.30：家長登入頁改成一開始就同時顯示手機號碼＋密碼欄位（平常
   登入用），另外多一顆「查詢密碼」按鈕給「剛收到通知/忘記密碼」的
   情境用——這句提示文字放在按鈕正上方，說明這顆按鈕是做什麼用的、
   什麼時候有效，用比 .ss-msg 更輕、不搶眼的樣式，避免看起來像錯誤
   或成功訊息。 */
.ss-portal .ss-query-hint { font-size: 12px; color: #777; margin: -4px 0 6px; }
/* v1.3.33：「出勤歷程」「聯絡簿記錄」改成預設不展開任何一天，選了
   日期才打開內容——這句提示文字取代原本一進頁面就攤開的完整紀錄，
   讓畫面焦點留在「今日出勤」「當日聯絡簿」上，跟 .ss-query-hint 用
   同一種低調、不搶眼的樣式。 */
.ss-portal .ss-history-hint { font-size: 12px; color: #777; margin: 6px 0; }
/* v1.3.50：家長/學生登入頁下方的「管理者登入」連結——刻意放在
   .ss-card 卡片外面、頁面最下方，跟卡片本身的家長/學生登入拉開視覺
   距離（這是給教職員用的入口，不是給家長/學生的功能，不應該看起來
   像卡片裡的另一個選項），用低調的小字連結而不是按鈕，避免家長/
   學生誤點。 */
.ss-portal .ss-admin-login-link { text-align: center; margin-top: 8px; }
.ss-portal .ss-admin-login-link a { font-size: 12px; color: #999; text-decoration: underline; }