/**
 * T1 CGM - 主頁面樣式
 * Main Page Styles
 */

/* iOS 相容性基礎設定 */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* CSS 變數：視口高度（由 JS 設定，解決 iOS 100vh 問題） */
:root {
    --vh: 1vh;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
    color: #333;
    /* iOS 平滑滾動 */
    -webkit-overflow-scrolling: touch;
    /* iOS 文字渲染優化 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.container { max-width: 1000px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
h1 { color: #2c3e50; margin-top: 0; padding-bottom: 10px; border-bottom: 2px solid #3498db; }
h2 { color: #3498db; font-size: 1.3em; margin-top: 25px; }

/* 導航 */
.nav { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.nav a { padding: 10px 20px; background: #ecf0f1; color: #2c3e50; text-decoration: none; border-radius: 5px; transition: all 0.3s; }
.nav a:hover, .nav a.active { background: #3498db; color: white; }

.header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.logout a { color: #7f8c8d; text-decoration: none; }
.logout a:hover { text-decoration: underline; }

/* 表單 */
input[type="password"], input[type="text"], select { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ccc; border-radius: 4px; }
button, .btn { background-color: #3498db; color: white; padding: 10px 20px; margin: 5px 0; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { background-color: #2980b9; }
.btn-success { background-color: #27ae60; }
.btn-success:hover { background-color: #219a52; }
.btn-danger { background-color: #e74c3c; }
.btn-danger:hover { background-color: #c0392b; }
.btn-warning { background-color: #f39c12; }
.btn-warning:hover { background-color: #d68910; }

/* 訊息 */
.error { background-color: #e74c3c; color: white; padding: 12px; border-radius: 5px; margin-bottom: 15px; }
.success { background-color: #27ae60; color: white; padding: 12px; border-radius: 5px; margin-bottom: 15px; }
.info-box { background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px; padding: 15px; margin: 15px 0; }

/* 表格 */
table { width: 100%; border-collapse: collapse; margin: 15px 0; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
th { background-color: #3498db; color: white; }
tr:hover { background-color: #f5f5f5; }
.status-up { color: #27ae60; font-weight: bold; }
.status-down { color: #e74c3c; font-weight: bold; }
.idle-active { color: #27ae60; font-weight: bold; }
.idle-notice { color: #f39c12; font-weight: bold; }
.idle-warning { color: #e67e22; font-weight: bold; }
.idle-danger { color: #e74c3c; font-weight: bold; }
.idle-none { color: #95a5a6; font-style: italic; }

/* Toggle Switch */
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 24px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .3s; border-radius: 24px; }
.toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
.toggle-switch input:checked + .toggle-slider { background-color: #27ae60; }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }
.ai-cell { text-align: center; }

/* 系統監控卡片 */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0; }
.stat-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 10px; text-align: center; }
.stat-card.green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.stat-card.orange { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.stat-card.blue { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.stat-card h3 { margin: 0 0 10px 0; font-size: 14px; opacity: 0.9; }
.stat-card .value { font-size: 24px; font-weight: bold; }

/* 其他 */
pre { background-color: #2c3e50; color: #ecf0f1; padding: 15px; border-radius: 5px; overflow-x: auto; white-space: pre-wrap; font-size: 12px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 5px; }
.form-inline { display: flex; gap: 10px; align-items: center; }
.form-inline input { flex: 1; }
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; }
.modal-content { background: white; max-width: 500px; margin: 100px auto; padding: 20px; border-radius: 8px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 15px; }
.close { font-size: 24px; cursor: pointer; color: #999; }
.close:hover { color: #333; }
.search-box { margin-bottom: 15px; }
.search-box input { max-width: 300px; }
.account-info pre { background: transparent; color: #333; padding: 0; margin: 0; }
.copy-btn { margin-top: 10px; }
.spinner { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 10px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.processing { text-align: center; padding: 20px; }

/* ===== 用戶介面樣式 ===== */

/* 用戶頁面頭部 */
.user-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #a8d8ea 0%, #aa96da 100%);
    border-radius: 12px;
    margin-bottom: 20px;
    color: #2d3436;
}
.user-welcome {
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-avatar {
    width: 45px;
    height: 45px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 22px;
}
.user-info {
    display: flex;
    flex-direction: column;
}
.user-label {
    font-size: 12px;
    opacity: 0.8;
}
.user-phone {
    font-size: 17px;
    font-weight: 600;
    color: #2d3436;
}
.logout-btn {
    background: rgba(255,255,255,0.4);
    color: #2d3436;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.3s;
}
.logout-btn:hover {
    background: rgba(255,255,255,0.6);
}

/* 狀態卡片 */
.status-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}
.status-card {
    background: linear-gradient(135deg, #dfe6e9 0%, #b2bec3 100%);
    color: #2d3436;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}
.status-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.card-icon {
    font-size: 32px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.6);
    border-radius: 12px;
}
.card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.card-label {
    font-size: 12px;
    color: #636e72;
    margin-bottom: 4px;
}
.card-value {
    font-size: 20px;
    font-weight: bold;
    color: #2d3436;
}
.card-link {
    color: #6c5ce7;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    word-break: break-all;
}
.card-link:hover {
    text-decoration: underline;
    color: #a29bfe;
}

/* 狀態卡片顏色 - 溫柔色調 */
.status-card.running { background: linear-gradient(135deg, #a8e6cf 0%, #88d8b0 100%); color: #2d3436; }
.status-card.stopped { background: linear-gradient(135deg, #ffb3ba 0%, #ff9aa2 100%); color: #2d3436; }
.status-card.link-card { background: linear-gradient(135deg, #c7ceea 0%, #b5b9ff 100%); color: #2d3436; }

/* 血糖 5 級分區樣式 (2025 ADA 標準) */
.status-card.glucose-severe-low {
    background: linear-gradient(135deg, #ff4757 0%, #c0392b 100%);
    color: white;
    animation: pulse-urgent 1s ease-in-out infinite;
}
.status-card.glucose-low {
    background: linear-gradient(135deg, #ffb3ba 0%, #ff9aa2 100%);
    color: #2d3436;
}
.status-card.glucose-normal {
    background: linear-gradient(135deg, #a8e6cf 0%, #88d8b0 100%);
    color: #2d3436;
}
.status-card.glucose-high {
    background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
    color: #2d3436;
}
.status-card.glucose-severe-high {
    background: linear-gradient(135deg, #ff7675 0%, #d63031 100%);
    color: white;
    animation: pulse-urgent 1.5s ease-in-out infinite;
}
.status-card.glucose-none {
    background: linear-gradient(135deg, #dfe6e9 0%, #b2bec3 100%);
    color: #636e72;
}

/* 緊急脈動動畫 */
@keyframes pulse-urgent {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3); }
    50% { transform: scale(1.02); box-shadow: 0 6px 20px rgba(255, 71, 87, 0.5); }
}

/* 運動安全建議區 */
.exercise-section {
    margin-top: 15px;
    border-radius: 16px;
    overflow: hidden;
}
.exercise-section .section-header {
    background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
    color: white;
}
.exercise-section .section-header h3 {
    color: white;
}
.exercise-content {
    padding: 15px 20px;
}
.exercise-status {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}
.exercise-status.safe { color: #27ae60; }
.exercise-status.caution { color: #f39c12; }
.exercise-status.unsafe { color: #e74c3c; }
.exercise-advice {
    font-size: 14px;
    color: #636e72;
    line-height: 1.5;
}

/* 閉環系統區塊 (IOB/COB) */
.loop-section {
    margin-top: 15px;
    border-radius: 16px;
    overflow: hidden;
}
.loop-section .section-header {
    background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
    color: white;
}
.loop-section .section-header h3 {
    color: white;
}
.loop-content {
    padding: 15px 20px;
}
.loop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.loop-item {
    text-align: center;
    padding: 12px;
    background: rgba(108, 92, 231, 0.08);
    border-radius: 12px;
}
.loop-label {
    display: block;
    font-size: 12px;
    color: #636e72;
    margin-bottom: 5px;
}
.loop-value {
    font-size: 28px;
    font-weight: 700;
    color: #6c5ce7;
}
.loop-unit {
    font-size: 14px;
    color: #a29bfe;
    margin-left: 3px;
}
.loop-extra {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(108, 92, 231, 0.15);
}
.loop-detail {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 13px;
    color: #636e72;
}

/* 設備提醒區塊 (CAGE/SAGE) */
.device-section {
    margin-top: 15px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
}
.device-alerts {
    padding: 15px 20px;
}
.device-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    font-size: 14px;
}
.device-alert:last-child {
    margin-bottom: 0;
}
.device-alert.warning {
    background: rgba(243, 156, 18, 0.15);
    color: #d68910;
}
.device-alert.urgent {
    background: rgba(231, 76, 60, 0.15);
    color: #c0392b;
}
.device-alert .alert-icon {
    font-size: 18px;
}
.device-alert .alert-text {
    flex: 1;
}

/* 個人化目標範圍列 */
.target-range-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 16px;
    background: rgba(116, 185, 255, 0.1);
    border-radius: 20px;
    font-size: 13px;
}
.target-label {
    color: #636e72;
}
.target-value {
    font-weight: 600;
    color: #0984e3;
}
.target-badge {
    background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

/* 操作區 */
.user-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}
.action-card {
    background: linear-gradient(135deg, #e8f4f8 0%, #d4e5ed 100%);
    color: #2d3436;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.action-card.restart-card {
    background: linear-gradient(135deg, #e0f4e8 0%, #c8e6d4 100%);
}
.action-card.password-card {
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
}
.action-icon {
    font-size: 36px;
    margin-bottom: 15px;
}
.action-card h3 {
    margin: 0 0 8px 0;
    color: #2d3436;
    font-size: 18px;
}
.action-card p {
    color: #636e72;
    font-size: 14px;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* 溫柔按鈕樣式 */
.btn-soft-blue {
    background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
    color: white;
    border: none;
}
.btn-soft-blue:hover {
    background: linear-gradient(135deg, #0984e3 0%, #0652DD 100%);
}
.btn-soft-pink {
    background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
    color: white;
    border: none;
}
.btn-soft-pink:hover {
    background: linear-gradient(135deg, #e84393 0%, #c44569 100%);
}
.btn-block {
    width: 100%;
    padding: 12px;
    font-size: 15px;
}

/* AI 功能按鈕樣式 */
.ai-feature-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
}
.ai-feature-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}
.ai-feature-btn.wide {
    flex-direction: row;
    width: 100%;
    gap: 10px;
    justify-content: flex-start;
}
.ai-feature-btn .ai-icon {
    font-size: 24px;
}
.ai-feature-btn .ai-label {
    font-size: 13px;
    font-weight: 500;
}
.ai-card .spinner {
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: white;
}
.password-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}
.password-input {
    flex: 1;
    padding: 12px !important;
    margin: 0 !important;
    border-radius: 8px !important;
}
.btn-gen {
    padding: 12px 16px;
    white-space: nowrap;
    border-radius: 8px;
}
.action-result {
    margin-top: 12px;
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    min-height: 20px;
}

/* 更多按鈕樣式 */
.btn-soft-purple {
    background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
    color: white;
    border: none;
}
.btn-soft-purple:hover {
    background: linear-gradient(135deg, #6c5ce7 0%, #5541d9 100%);
}
.btn-soft-green {
    background: linear-gradient(135deg, #55efc4 0%, #00b894 100%);
    color: white;
    border: none;
}
.btn-soft-green:hover {
    background: linear-gradient(135deg, #00b894 0%, #009874 100%);
}
.btn-soft-lime {
    background: linear-gradient(135deg, #00c853 0%, #009624 100%);
    color: white;
    border: none;
}
.btn-soft-lime:hover {
    background: linear-gradient(135deg, #009624 0%, #007a1a 100%);
}

/* LINE 通知卡片樣式 */
.line-card {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}
.line-token-display {
    background: #f5f5f5;
    border: 2px dashed #4caf50;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    text-align: center;
}
.line-token-code {
    font-family: 'Courier New', monospace;
    font-size: 24px;
    font-weight: bold;
    color: #2e7d32;
    letter-spacing: 3px;
}
.line-token-status {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
}
.line-token-status.linked {
    color: #2e7d32;
}
.line-actions {
    display: flex;
    gap: 10px;
}
.line-actions button {
    flex: 1;
}
.btn-small {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}

/* 分享與設定卡片 */
.action-card.share-card {
    background: linear-gradient(135deg, #e8daef 0%, #d2b4de 100%);
}

/* 插件選擇樣式 */
.plugin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 8px;
    margin-bottom: 12px;
}
.plugin-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #2d3436;
}
.plugin-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #6c5ce7;
}
.plugin-item label {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plugin-section-title {
    font-size: 13px;
    font-weight: bold;
    color: #636e72;
    margin: 10px 0 6px 0;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.1);
}
.settings-row.compact {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.settings-row.compact label {
    font-size: 12px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.settings-row select {
    padding: 4px 6px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    font-size: 12px;
}
.settings-row input[type="text"] {
    padding: 4px 8px;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    font-size: 13px;
}
.action-card.settings-card {
    background: linear-gradient(135deg, #d5f5e3 0%, #abebc6 100%);
}
.settings-row {
    margin-bottom: 12px;
}
.settings-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #2d3436;
}
.settings-row input[type="number"] {
    width: 70px;
    padding: 8px;
    border: 1px solid #bdc3c7;
    border-radius: 6px;
    font-size: 14px;
}

/* 區塊卡片通用樣式 */
.section-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.section-header h3 {
    margin: 0;
    font-size: 18px;
    color: #2d3436;
}

/* 圖表區 */
.chart-section {
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
}
.chart-controls, .stats-controls {
    display: flex;
    gap: 8px;
}
.chart-btn, .stats-btn {
    padding: 6px 12px;
    border: none;
    background: rgba(0,0,0,0.1);
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: #2d3436;
}
.chart-btn.active, .stats-btn.active {
    background: #f39c12;
    color: white;
}
.chart-btn:hover, .stats-btn:hover {
    background: rgba(0,0,0,0.2);
}
.chart-btn.active:hover, .stats-btn.active:hover {
    background: #e67e22;
}
.chart-container {
    position: relative;
    height: 250px;
    width: 100%;
}
.chart-loading {
    text-align: center;
    color: #7f8c8d;
    font-size: 14px;
    padding: 10px;
}

/* 統計區 */
.stats-section {
    background: linear-gradient(135deg, #e8f8f5 0%, #d1f2eb 100%);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}
.stat-item {
    text-align: center;
    padding: 15px 10px;
    background: rgba(255,255,255,0.6);
    border-radius: 12px;
}
.stat-item .stat-value {
    display: block;
    font-size: 28px;
    font-weight: bold;
    color: #2d3436;
}
.stat-item .stat-label {
    display: block;
    font-size: 11px;
    color: #636e72;
    margin-top: 5px;
}
.stat-item .stat-unit {
    font-size: 16px;
    color: #636e72;
}
.tir-stat .stat-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00b894 0%, #55efc4 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    color: white;
}
.tir-stat .stat-value {
    font-size: 24px;
    color: white;
}

/* TIR 長條圖 */
.tir-bar-container {
    margin-top: 15px;
}
.tir-bar {
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    background: #ecf0f1;
}
.tir-segment {
    height: 100%;
    transition: width 0.5s ease;
}
.tir-segment.low { background: linear-gradient(90deg, #e74c3c, #ff6b6b); }
.tir-segment.normal { background: linear-gradient(90deg, #27ae60, #2ecc71); }
.tir-segment.high { background: linear-gradient(90deg, #f39c12, #f1c40f); }
.tir-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
    font-size: 12px;
    color: #636e72;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.legend-item .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.dot.low { background: #e74c3c; }
.dot.normal { background: #27ae60; }
.dot.high { background: #f39c12; }

/* Token 區 */
.token-section {
    background: linear-gradient(135deg, #fdebd0 0%, #f9e79f 100%);
}
.token-content {
    margin-top: 15px;
}
.token-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.6);
    border-radius: 8px;
    margin-bottom: 10px;
}
.token-item label {
    min-width: 120px;
    font-size: 13px;
    color: #636e72;
}
.token-value {
    flex: 1;
    font-family: monospace;
    font-size: 13px;
    color: #2d3436;
    word-break: break-all;
}
.token-info {
    padding: 10px;
    background: rgba(255,255,255,0.4);
    border-radius: 8px;
    font-size: 13px;
    color: #636e72;
}
.token-info p { margin: 0; }

/* FAQ 區 */
.faq-section {
    background: linear-gradient(135deg, #ebdef0 0%, #d7bde2 100%);
}
.faq-list {
    margin-top: 10px;
}
.faq-item {
    background: rgba(255,255,255,0.6);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    font-weight: 500;
    color: #2d3436;
    transition: background 0.2s;
}
.faq-question:hover {
    background: rgba(255,255,255,0.5);
}
.faq-arrow {
    font-size: 12px;
    transition: transform 0.3s;
    color: #7f8c8d;
}
.faq-item.active .faq-arrow {
    transform: rotate(180deg);
}
.faq-answer {
    display: none;
    padding: 0 15px 15px;
    font-size: 14px;
    color: #636e72;
    line-height: 1.6;
}
.faq-item.active .faq-answer {
    display: block;
}
.faq-answer ol, .faq-answer ul {
    margin: 10px 0;
    padding-left: 20px;
}
.faq-answer li {
    margin-bottom: 8px;
}
.faq-answer code {
    background: rgba(0,0,0,0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.faq-answer p {
    margin: 10px 0;
}

/* 響應式設計 - 平板 */
@media (max-width: 768px) {
    body { padding: 10px; }
    .container { padding: 15px; border-radius: 0; }
    h1 { font-size: 1.3em; }

    .status-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .status-card {
        padding: 15px;
    }
    .card-icon {
        font-size: 28px;
        width: 45px;
        height: 45px;
    }
    .card-value {
        font-size: 18px;
    }

    .user-actions {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .action-card {
        padding: 20px;
    }
    .action-icon {
        font-size: 30px;
    }

    .user-header {
        padding: 12px 15px;
    }
    .user-avatar {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    .user-phone {
        font-size: 16px;
    }

    .nav { flex-direction: column; }
    .nav a { text-align: center; padding: 12px; }

    table { font-size: 13px; }
    th, td { padding: 8px 5px; }

    /* 新功能響應式 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .stat-item .stat-value {
        font-size: 22px;
    }
    .tir-stat .stat-circle {
        width: 65px;
        height: 65px;
    }
    .tir-stat .stat-value {
        font-size: 20px;
    }
    .tir-legend {
        flex-wrap: wrap;
        gap: 10px;
    }
    .chart-controls, .stats-controls {
        flex-wrap: wrap;
    }
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .token-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .token-item label {
        min-width: auto;
    }
}

/* 響應式設計 - 手機 */
@media (max-width: 480px) {
    .user-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .user-welcome {
        flex-direction: column;
    }
    .logout-btn {
        width: 100%;
        text-align: center;
    }

    .password-input-group {
        flex-direction: column;
    }
    .btn-gen {
        width: 100%;
    }
}

/* ===== 登入頁面樣式 ===== */
.login-container {
    max-width: 400px;
    margin: 0 auto;
}
.login-header {
    text-align: center;
    margin-bottom: 30px;
}
.login-logo {
    font-size: 56px;
    margin-bottom: 15px;
}
.login-header h2 {
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 24px;
}
.login-header p {
    color: #7f8c8d;
    margin: 0;
    font-size: 14px;
}
.login-box {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.login-box.admin {
    background: linear-gradient(135deg, #7f2e2e 0%, #a04545 100%);
}
.login-box .form-group {
    margin-bottom: 18px;
}
.login-box .form-group label {
    display: block;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    margin-bottom: 6px;
    font-weight: 500;
}
.login-box input {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    background: rgba(255,255,255,0.95);
    color: #2c3e50;
    box-sizing: border-box;
    transition: box-shadow 0.3s;
}
.login-box input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
}
.login-box input::placeholder {
    color: #95a5a6;
}
.login-box .btn-block {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    margin-top: 10px;
}
.login-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.login-footer a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}
.login-footer a:hover {
    color: white;
}
.login-container .error {
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
}

@media (max-width: 480px) {
    .login-container {
        max-width: 100%;
        padding: 0 15px;
    }
    .login-box {
        padding: 25px 20px;
    }
}

/* LINE 內建瀏覽器提示 */
.line-browser-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.line-browser-modal {
    background: white;
    border-radius: 16px;
    padding: 30px 25px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.line-browser-modal .modal-icon {
    font-size: 50px;
    margin-bottom: 15px;
}
.line-browser-modal h2 {
    margin: 0 0 12px 0;
    font-size: 20px;
    color: #333;
}
.line-browser-modal p {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}
.line-browser-modal .steps {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: left;
}
.line-browser-modal .steps ol {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #555;
    line-height: 1.8;
}
.line-browser-modal .steps li {
    margin-bottom: 5px;
}
.line-browser-modal .btn-open-external {
    display: block;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #06c755 0%, #00b900 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
}
.line-browser-modal .btn-open-external:active {
    transform: scale(0.98);
}
.line-browser-modal .btn-continue {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    color: #888;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
}
.line-browser-modal .note {
    margin-top: 15px;
    font-size: 12px;
    color: #999;
}

/* ===== AI 回應樣式 ===== */
.ai-response-content {
    line-height: 1.8;
    font-size: 14px;
    color: #444;
}
.ai-response-content p {
    margin: 0 0 14px 0;
}
.ai-response-content h3 {
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    margin: 18px 0 12px 0;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    display: block;
}
.ai-response-content h3:first-child {
    margin-top: 0;
}
.ai-response-content h4 {
    color: #667eea;
    margin: 14px 0 8px 0;
    font-size: 14px;
    font-weight: 600;
}
.ai-response-content ul, .ai-response-content ol {
    margin: 10px 0 14px 0;
    padding-left: 0;
    list-style: none;
}
.ai-response-content ol {
    counter-reset: item;
}
.ai-response-content li {
    margin: 8px 0;
    padding: 10px 12px 10px 40px;
    background: #f8f9ff;
    border-radius: 8px;
    position: relative;
}
.ai-response-content ul li::before {
    content: '•';
    position: absolute;
    left: 16px;
    color: #667eea;
    font-weight: bold;
}
.ai-response-content ol li {
    counter-increment: item;
}
.ai-response-content ol li::before {
    content: counter(item);
    position: absolute;
    left: 12px;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
}
.ai-response-content strong {
    color: #5a67d8;
    font-weight: 600;
}
.ai-response-content .glucose-value {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3px 12px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 13px;
}
.ai-response-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}
.ai-response-content th {
    background: #f8f9ff;
    color: #667eea;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #e0e0e0;
}
.ai-response-content td {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
}
.ai-response-content tr:hover td {
    background: #fafafa;
}

/* ===== Treatments 記錄區樣式 ===== */
.treatments-section {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

/* 快速操作按鈕 */
.treatment-quick-btns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.treatment-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 10px;
    background: rgba(255,255,255,0.7);
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.treatment-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.treatment-btn.active {
    border-color: #2196f3;
    background: rgba(33, 150, 243, 0.1);
}
.treatment-btn .btn-icon {
    font-size: 28px;
    margin-bottom: 6px;
}
.treatment-btn .btn-label {
    font-size: 13px;
    font-weight: 500;
    color: #2d3436;
}

/* 按鈕類型顏色 */
.treatment-btn.carbs { border-color: rgba(255, 152, 0, 0.3); }
.treatment-btn.carbs:hover, .treatment-btn.carbs.active {
    background: rgba(255, 152, 0, 0.15);
    border-color: #ff9800;
}
.treatment-btn.exercise { border-color: rgba(76, 175, 80, 0.3); }
.treatment-btn.exercise:hover, .treatment-btn.exercise.active {
    background: rgba(76, 175, 80, 0.15);
    border-color: #4caf50;
}
.treatment-btn.insulin { border-color: rgba(33, 150, 243, 0.3); }
.treatment-btn.insulin:hover, .treatment-btn.insulin.active {
    background: rgba(33, 150, 243, 0.15);
    border-color: #2196f3;
}
.treatment-btn.note { border-color: rgba(156, 39, 176, 0.3); }
.treatment-btn.note:hover, .treatment-btn.note.active {
    background: rgba(156, 39, 176, 0.15);
    border-color: #9c27b0;
}

/* 表單區 */
.treatment-form-container {
    display: none;
    background: rgba(255,255,255,0.9);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    animation: slideDown 0.2s ease;
}
.treatment-form-container.show {
    display: block;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.treatment-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.treatment-form-header h4 {
    margin: 0;
    font-size: 16px;
    color: #2d3436;
    display: flex;
    align-items: center;
    gap: 8px;
}
.treatment-form-close {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #636e72;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.treatment-form-close:hover {
    background: rgba(0,0,0,0.2);
}
.treatment-form-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.treatment-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.treatment-input-row label {
    min-width: 60px;
    font-size: 14px;
    color: #636e72;
}
.treatment-input-row input,
.treatment-input-row select,
.treatment-input-row textarea {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}
.treatment-input-row input:focus,
.treatment-input-row select:focus,
.treatment-input-row textarea:focus {
    outline: none;
    border-color: #2196f3;
}
.treatment-input-row textarea {
    resize: vertical;
    min-height: 60px;
}
.treatment-input-unit {
    font-size: 13px;
    color: #636e72;
    min-width: 30px;
}
.treatment-submit-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 5px;
}
.treatment-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}
.treatment-submit-btn:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 歷史記錄區 */
.treatments-history {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.1);
}
.treatments-history h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #636e72;
}
.treatments-list {
    max-height: 300px;
    overflow-y: auto;
}
.treatment-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.7);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.2s;
}
.treatment-item:hover {
    background: rgba(255,255,255,0.9);
}
.treatment-item:last-child {
    margin-bottom: 0;
}
.t-delete {
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.2s;
    font-size: 14px;
    flex-shrink: 0;
}
.t-delete:hover {
    opacity: 1;
}
.treatment-item:hover .t-delete {
    opacity: 0.6;
}

/* 刪除按鈕樣式 */
.t-delete-btn {
    background: none;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    font-size: 14px;
    flex-shrink: 0;
    border-radius: 6px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}
.t-delete-btn:hover {
    opacity: 1 !important;
    background: rgba(231, 76, 60, 0.2);
}
.treatment-item:hover .t-delete-btn {
    opacity: 0.6;
}
.treatment-item {
    transition: all 0.3s ease;
    position: relative;
    padding-right: 45px;
}

/* 記錄過濾開關 */
.treatment-filter {
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 10px;
}
.filter-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    color: #666;
}
.filter-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    cursor: pointer;
}
.filter-label {
    user-select: none;
}

/* 時間選擇器樣式 */
.time-row {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.time-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}
.time-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background: #f9f9f9;
}
.time-input:focus {
    outline: none;
    border-color: #4a90d9;
    background: white;
}
.btn-now {
    padding: 10px 14px;
    background: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.btn-now:hover {
    background: #bbdefb;
}
.btn-now:active {
    transform: scale(0.95);
}

.treatment-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.treatment-icon.carbs { background: rgba(255, 152, 0, 0.2); }
.treatment-icon.exercise { background: rgba(76, 175, 80, 0.2); }
.treatment-icon.insulin { background: rgba(33, 150, 243, 0.2); }
.treatment-icon.note { background: rgba(156, 39, 176, 0.2); }
.treatment-icon.bg { background: rgba(231, 76, 60, 0.2); }
.treatment-info {
    flex: 1;
    min-width: 0;
}
.treatment-main {
    font-size: 14px;
    font-weight: 600;
    color: #2d3436;
    margin-bottom: 3px;
}
.treatment-sub {
    font-size: 12px;
    color: #636e72;
}
.treatment-time {
    font-size: 12px;
    color: #95a5a6;
    text-align: right;
    white-space: nowrap;
}
.treatments-empty {
    text-align: center;
    padding: 30px;
    color: #95a5a6;
    font-size: 14px;
}
.treatments-loading {
    text-align: center;
    padding: 20px;
    color: #95a5a6;
}

/* Toast 提示 */
.toast-message {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 14px;
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
    max-width: 90%;
    text-align: center;
}
.toast-message.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Treatments 響應式 */
@media (max-width: 768px) {
    .treatment-quick-btns {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .treatment-btn {
        padding: 14px 8px;
    }
    .treatment-btn .btn-icon {
        font-size: 24px;
    }
    .treatment-btn .btn-label {
        font-size: 12px;
    }
    .treatment-input-row {
        flex-wrap: wrap;
    }
    .treatment-input-row label {
        min-width: 100%;
        margin-bottom: 4px;
    }
}

@media (max-width: 480px) {
    .treatment-form-container {
        padding: 15px;
    }
    .treatment-item {
        padding: 10px;
        gap: 10px;
    }
    .treatment-icon {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
}

/* ===== 分頁導航系統 ===== */

/* 分頁內容 */
.tab-content {
    display: none;
    /* 為底部導航留空間，包含 iOS safe-area */
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}
.tab-content.active {
    display: block;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 底部導航列 */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    border-top: 1px solid #e0e0e0;
}
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: #95a5a6;
    transition: all 0.2s;
    border-radius: 12px;
    min-width: 70px;
}
.nav-item:hover {
    background: rgba(52, 152, 219, 0.1);
}
.nav-item.active {
    color: #3498db;
}
.nav-item.active .nav-icon {
    transform: scale(1.1);
}
.nav-icon {
    font-size: 24px;
    margin-bottom: 4px;
    transition: transform 0.2s;
}
.nav-label {
    font-size: 11px;
    font-weight: 500;
}

/* 底部導航響應式 */
@media (min-width: 769px) {
    /* 桌面版：可選擇改成頂部 Tab 或保持底部 */
    .bottom-nav {
        max-width: 500px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 20px 20px 0 0;
    }
    .tab-content {
        padding-bottom: 100px;
    }
}

@media (max-width: 480px) {
    .nav-item {
        padding: 6px 12px;
        min-width: 50px;
    }
    .nav-icon {
        font-size: 20px;
    }
    .nav-label {
        font-size: 9px;
    }
}

/* ===== AI 分頁樣式 ===== */

/* AI 功能未啟用提示 */
.ai-disabled-notice {
    text-align: center;
    padding: 60px 30px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
    border-radius: 20px;
    margin: 20px;
}
.ai-disabled-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.6;
}
.ai-disabled-notice h3 {
    font-size: 24px;
    color: #2d3436;
    margin: 0 0 10px 0;
}
.ai-disabled-notice > p {
    color: #636e72;
    font-size: 14px;
    margin: 0 0 30px 0;
}
.ai-features-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-width: 320px;
    margin: 0 auto 30px;
}
.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 12px 15px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.feature-icon {
    font-size: 24px;
}
.feature-text {
    font-size: 13px;
    color: #2d3436;
    font-weight: 500;
}
.ai-contact-hint {
    color: #95a5a6;
    font-size: 13px;
    margin: 0;
}

/* AI 智慧助手區塊 */
.section-card.ai-assistant-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    padding: 20px;
}
.ai-assistant-section .section-header {
    margin-bottom: 20px;
}
.ai-assistant-section .section-header h3 {
    color: white;
    margin: 0;
}

/* AI 功能按鈕網格 */
.ai-assistant-section .ai-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.ai-assistant-section .ai-feature-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
    min-height: 80px;
}
.ai-assistant-section .ai-feature-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}
.ai-assistant-section .ai-feature-btn .ai-icon {
    font-size: 28px;
    margin-bottom: 8px;
    display: block;
}
.ai-assistant-section .ai-feature-btn .ai-label {
    font-size: 13px;
    font-weight: 500;
    color: white;
    white-space: nowrap;
}

/* AI 食物分析區 */
.ai-assistant-section .ai-food-analysis {
    background: rgba(255,255,255,0.15);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 20px;
}
.ai-assistant-section .ai-section-title {
    color: white;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 12px;
}
.ai-assistant-section .ai-hint {
    font-size: 12px;
    opacity: 0.8;
    color: rgba(255,255,255,0.8);
}
.ai-assistant-section .ai-food-btns {
    display: flex;
    gap: 12px;
}
.ai-assistant-section .ai-food-btns .ai-feature-btn {
    flex: 1;
    padding: 14px 10px;
}
.food-preview-info {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 10px;
}
.food-preview-info a {
    color: #ffd700;
    text-decoration: none;
}
.btn-analyze {
    width: 100%;
    padding: 12px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-analyze:hover {
    background: #43A047;
}

/* AI 對話區 */
.ai-assistant-section .ai-chat-section {
    background: rgba(255,255,255,0.15);
    border-radius: 14px;
    padding: 18px;
}
.ai-assistant-section .ai-chat-input-row {
    display: flex;
    gap: 10px;
}
.ai-assistant-section .ai-chat-input-row input {
    flex: 1;
    padding: 12px 15px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    background: white;
    color: #333;
}
.ai-assistant-section .ai-send-btn {
    padding: 12px 20px;
    background: white;
    color: #667eea;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.ai-assistant-section .ai-send-btn:hover {
    background: #f0f0f0;
}

/* AI 回應區 */
.ai-response-box {
    background: rgba(255,255,255,0.98);
    border-radius: 14px;
    padding: 18px;
    color: #333;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.ai-response-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    color: #667eea;
    font-size: 15px;
}
.ai-response-close {
    width: 40px;
    height: 40px;
    background: #f0f0f0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.ai-response-close:hover {
    background: #e0e0e0;
}

/* AI 載入中 */
.ai-loading {
    text-align: center;
    padding: 25px;
    color: white;
}
.ai-loading .spinner {
    border-top-color: white;
    margin: 0 auto 12px;
}

/* AI 分頁響應式 */
@media (max-width: 480px) {
    .ai-disabled-notice {
        padding: 40px 20px;
        margin: 15px;
    }
    .ai-disabled-icon {
        font-size: 48px;
    }
    .ai-disabled-notice h3 {
        font-size: 20px;
    }
    .ai-features-preview {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .feature-item {
        padding: 10px 12px;
    }
    .feature-icon {
        font-size: 20px;
    }
    .feature-text {
        font-size: 12px;
    }
    .ai-feature-grid {
        gap: 10px;
    }
    .ai-feature-btn {
        padding: 14px 10px;
    }
    .ai-feature-btn .ai-icon {
        font-size: 24px;
    }
    .ai-feature-btn .ai-label {
        font-size: 12px;
    }
}

/* ========================================
   新功能樣式 - 血糖預測 & 餐前提醒
   ======================================== */

/* 血糖預測區塊 */
.prediction-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.prediction-section .section-header h3 {
    color: white;
}

.prediction-section .refresh-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
}

.prediction-section .refresh-btn:hover {
    background: rgba(255,255,255,0.3);
}

.prediction-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.prediction-item {
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 15px 10px;
    text-align: center;
}

.pred-time {
    display: block;
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 5px;
}

.pred-value {
    display: block;
    font-size: 28px;
    font-weight: bold;
}

.pred-trend {
    display: block;
    font-size: 18px;
    margin-top: 3px;
}

.prediction-alerts {
    margin-top: 10px;
}

.pred-alert {
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}

.pred-alert.alert-warning {
    background: rgba(243, 156, 18, 0.3);
}

.pred-alert.alert-info {
    background: rgba(52, 152, 219, 0.3);
}

.prediction-trend {
    text-align: center;
    font-size: 14px;
    margin: 10px 0;
    padding: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
}

.prediction-confidence {
    font-size: 12px;
    opacity: 0.7;
    text-align: center;
    margin-top: 10px;
}

.prediction-loading,
.prediction-empty,
.prediction-error {
    text-align: center;
    padding: 30px;
    opacity: 0.8;
}

/* 餐前提醒區塊 */
.meal-reminder-section {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.meal-reminder-section .section-header h3 {
    color: white;
}

.next-meal-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.meal-icon {
    font-size: 40px;
}

.meal-info {
    flex: 1;
}

.meal-name {
    font-size: 18px;
    font-weight: bold;
}

.meal-time {
    font-size: 14px;
    opacity: 0.9;
}

.meal-minutes {
    font-size: 12px;
    opacity: 0.7;
}

.pre-meal-advice {
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 15px;
}

.current-glucose-info {
    font-size: 16px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.current-glucose-info strong {
    font-size: 24px;
}

.advice-timing {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    margin-bottom: 8px;
}

.advice-icon {
    font-size: 24px;
}

.advice-reason {
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 15px;
    padding-left: 34px;
}

.advice-suggestions {
    margin-top: 10px;
}

.suggestion-item {
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    background: rgba(255,255,255,0.1);
}

.suggestion-item.warning {
    background: rgba(243, 156, 18, 0.3);
}

.suggestion-item.good {
    background: rgba(39, 174, 96, 0.3);
}

.advice-icr {
    margin-top: 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.reminder-loading,
.reminder-empty,
.reminder-error {
    text-align: center;
    padding: 30px;
    opacity: 0.8;
}

/* 響應式調整 */
@media (max-width: 600px) {
    .prediction-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pred-value {
        font-size: 22px;
    }

    .next-meal-card {
        flex-direction: column;
        text-align: center;
    }

    .advice-reason {
        padding-left: 0;
    }
}

/* ===== CGM 資料過舊警告樣式 ===== */
.prediction-stale {
    text-align: center;
    padding: 25px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border-radius: 12px;
    border: 2px dashed #bbb;
}

.prediction-stale .stale-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.prediction-stale .stale-message {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.prediction-stale .stale-age {
    font-size: 12px;
    color: #999;
}

.pre-meal-advice.stale-data {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.stale-data-warning {
    color: #856404;
    font-size: 13px;
    text-align: center;
}

/* ===== 社群功能樣式 ===== */

/* 社群未登入提示 */
.community-login-notice {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}
.community-login-notice .community-icon {
    font-size: 64px;
    margin-bottom: 20px;
}
.community-login-notice h3 {
    margin: 0 0 10px 0;
    color: #333;
}
.community-login-notice p {
    margin-bottom: 20px;
}

/* 社群整體背景 */
#tab-community {
    background: linear-gradient(180deg, #f0e6ff 0%, #e8f4f8 50%, #fff5f5 100%);
    /* 使用 dvh 解決 iOS Safari 100vh 問題，並提供 fallback */
    min-height: 100vh;
    min-height: 100dvh;
    min-height: calc(var(--vh, 1vh) * 100);
    padding: 15px;
    margin: -15px;
    border-radius: 0;
}

/* 社群子導航 */
.community-subnav {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(135deg, #fff 0%, #faf8ff 100%);
    border-radius: 16px;
    padding: 10px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
    border: 1px solid rgba(102, 126, 234, 0.1);
}
.subnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    color: #6b5b95;
    transition: all 0.3s ease;
    position: relative;
    font-weight: 500;
}
.subnav-item:hover {
    background: linear-gradient(135deg, #f8f5ff 0%, #f0ebfa 100%);
    transform: translateY(-2px);
}
.subnav-item.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.subnav-item span:first-child {
    font-size: 18px;
    margin-bottom: 4px;
}
.notification-dot {
    position: absolute;
    top: 8px;
    right: 25%;
    width: 8px;
    height: 8px;
    background: #e74c3c;
    border-radius: 50%;
}

/* 社群子分頁 - 預設隱藏，只有 active 的才顯示 */
#tab-community .community-subtab {
    display: none !important;
}
#tab-community .community-subtab.active {
    display: block !important;
}

/* 發文區 */
.post-composer {
    background: linear-gradient(135deg, #fff 0%, #faf8ff 100%);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.12);
    border: 1px solid rgba(102, 126, 234, 0.1);
}
.composer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.composer-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
    overflow: hidden;
}
.composer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.composer-input {
    flex: 1;
    padding: 12px 18px;
    border: 2px solid #e8e0f0;
    border-radius: 24px;
    background: linear-gradient(135deg, #f8f5ff 0%, #f0ebfa 100%);
    cursor: pointer;
    color: #6b5b95;
    font-size: 14px;
    transition: all 0.2s ease;
}
.composer-input:hover {
    background: linear-gradient(135deg, #efe8ff 0%, #e5ddf5 100%);
    border-color: #c9b8e0;
    transform: translateY(-1px);
}
.composer-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.composer-type-btn {
    padding: 10px 16px;
    border: 2px solid #e8e0f0 !important;
    background: linear-gradient(135deg, #f8f5ff 0%, #f0ebfa 100%) !important;
    border-radius: 20px;
    font-size: 13px;
    color: #6b5b95 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
}
.composer-type-btn:hover {
    background: linear-gradient(135deg, #efe8ff 0%, #e5ddf5 100%) !important;
    border-color: #c9b8e0 !important;
    color: #5a4a82 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* 貼文篩選 */
.feed-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    overflow-x: auto;
    padding-bottom: 5px;
}
.filter-btn {
    padding: 8px 16px;
    border: 2px solid #e8e0f0 !important;
    background: linear-gradient(135deg, #f8f5ff 0%, #f0ebfa 100%) !important;
    border-radius: 18px;
    font-size: 13px;
    color: #6b5b95 !important;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    font-weight: 600;
}
.filter-btn:hover {
    background: linear-gradient(135deg, #efe8ff 0%, #e5ddf5 100%) !important;
    border-color: #c9b8e0 !important;
    transform: translateY(-1px);
}
.filter-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
}

/* 貼文卡片 */
.post-card {
    background: linear-gradient(135deg, #fff 0%, #fdfbff 100%);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.08);
    transition: all 0.3s ease;
}
.post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.15);
}
.post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.post-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.25);
    overflow: hidden;
}
.post-author-info {
    flex: 1;
}
.post-author-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.post-author-name {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.post-author-name:hover {
    color: #667eea;
}

/* 貼文寵物徽章 */
.post-pet-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 12px;
    padding: 2px 8px 2px 4px;
    font-size: 11px;
    color: #2e7d32;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.post-pet-sprite {
    width: 24px;
    height: 24px;
    background-size: 800% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    animation: post-pet-idle 1s steps(8) infinite;
}
@keyframes post-pet-idle {
    from { background-position: 0 0; }
    to { background-position: -192px 0; }
}
.post-pet-level {
    font-weight: bold;
}
.post-meta {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 8px;
}
.post-type-badge {
    padding: 2px 8px;
    background: #f0f0f0;
    border-radius: 10px;
    font-size: 11px;
}
.post-type-badge.journal { background: #e3f2fd; color: #1976d2; }
.post-type-badge.tip { background: #fff3e0; color: #f57c00; }
.post-type-badge.question { background: #fce4ec; color: #c2185b; }
.post-type-badge.achievement { background: #e8f5e9; color: #388e3c; }

.post-content {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}
.post-attached-data {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
    font-size: 13px;
}
.post-actions {
    display: flex;
    gap: 20px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}
.post-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
}
.post-action-btn:hover {
    background: #f0f0f0;
}
.post-action-btn.liked {
    color: #e74c3c;
}
.post-action-btn.liked .like-icon {
    animation: likeAnim 0.3s ease;
}
@keyframes likeAnim {
    50% { transform: scale(1.3); }
}

/* 排名頁面 */
.ranking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.ranking-header h3 {
    margin: 0;
    font-size: 18px;
    color: #5a4a82;
    font-weight: 700;
}
.ranking-period {
    display: flex;
    gap: 5px;
}
.period-btn {
    padding: 6px 14px;
    border: 2px solid #e8e0f0 !important;
    background: linear-gradient(135deg, #f8f5ff 0%, #f0ebfa 100%) !important;
    border-radius: 18px;
    font-size: 12px;
    cursor: pointer;
    color: #6b5b95 !important;
    font-weight: 600;
    transition: all 0.2s ease;
}
.period-btn:hover {
    background: linear-gradient(135deg, #efe8ff 0%, #e5ddf5 100%) !important;
    border-color: #c9b8e0 !important;
    transform: translateY(-1px);
}
.period-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
}
.ranking-list {
    background: linear-gradient(135deg, #fff 0%, #fdfbff 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.08);
}
.ranking-item {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.08);
    transition: all 0.2s ease;
}
.ranking-item:hover {
    background: linear-gradient(135deg, #f8f5ff 0%, #f0ebfa 100%);
}
.ranking-item:last-child {
    border-bottom: none;
}
.ranking-position {
    width: 40px;
    font-weight: bold;
    font-size: 16px;
    color: #6b5b95;
}
.ranking-position.top-1 { color: #ffd700; text-shadow: 0 0 8px rgba(255, 215, 0, 0.5); }
.ranking-position.top-2 { color: #c0c0c0; text-shadow: 0 0 8px rgba(192, 192, 192, 0.5); }
.ranking-position.top-3 { color: #cd7f32; text-shadow: 0 0 8px rgba(205, 127, 50, 0.5); }
.ranking-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 12px;
}
.ranking-info {
    flex: 1;
}
.ranking-name {
    font-weight: 600;
    font-size: 14px;
}
.ranking-improvement {
    font-size: 12px;
    color: #27ae60;
}
.ranking-tir {
    font-weight: bold;
    font-size: 18px;
    color: #667eea;
}
.ranking-tir small {
    font-size: 12px;
    color: #999;
    font-weight: normal;
}

/* 個人資料頁面 */
.profile-card {
    background: linear-gradient(135deg, #fff 0%, #faf8ff 100%);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 15px;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.12);
    border: 1px solid rgba(102, 126, 234, 0.1);
}
.profile-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.profile-avatar {
    width: 70px;
    height: 70px;
    min-width: 70px;
    min-height: 70px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.35);
    overflow: hidden;
}
.profile-info {
    flex: 1;
}
.profile-info h3 {
    margin: 0 0 5px 0;
    font-size: 20px;
    color: #5a4a82;
    font-weight: 700;
}
.profile-bio {
    margin: 0;
    font-size: 13px;
    color: #6b5b95;
}
.profile-stats {
    display: flex;
    justify-content: space-around;
    padding: 18px 0;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    background: linear-gradient(135deg, #f8f5ff 0%, #f0ebfa 100%);
    border-radius: 12px;
    margin: 0 -10px;
}
.stat-item {
    text-align: center;
}
.stat-value {
    display: block;
    font-size: 22px;
    font-weight: bold;
    color: #5a4a82;
}
.stat-label {
    font-size: 12px;
    color: #6b5b95;
    font-weight: 500;
}
.profile-tir {
    padding-top: 18px;
    text-align: center;
}
.tir-display {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 12px 24px;
    border-radius: 25px;
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.tir-label {
    font-size: 13px;
    opacity: 0.9;
}
.tir-value {
    font-size: 26px;
    font-weight: bold;
}
.tir-refresh-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tir-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(180deg);
}
.tir-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.tir-refresh-btn.updating {
    animation: none;
}
.tir-refresh-btn .spinning {
    display: inline-block;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 隱私設定 */
.privacy-section {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.privacy-section h4 {
    margin: 0 0 15px 0;
    font-size: 15px;
}
.privacy-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.privacy-option:last-child {
    border-bottom: none;
}
.privacy-option select {
    padding: 5px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    font-size: 13px;
}
.privacy-option label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

/* 我的貼文 */
.my-posts-section {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.my-posts-section h4 {
    margin: 0 0 15px 0;
    font-size: 15px;
}
.my-posts-list .post-card {
    margin-bottom: 10px;
    box-shadow: none;
    border: 1px solid #f0f0f0;
}

/* 通知頁面 */
.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.notifications-header h3 {
    margin: 0;
    font-size: 18px;
}
.notifications-list {
    background: linear-gradient(135deg, #fff 0%, #fdfbff 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.08);
}
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.08);
    cursor: pointer;
    transition: all 0.2s ease;
}
.notification-item:hover {
    background: linear-gradient(135deg, #f8f5ff 0%, #f0ebfa 100%);
}
.notification-item:last-child {
    border-bottom: none;
}
.notification-item.unread {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
    border-left: 3px solid #667eea;
}
.notification-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.notification-content {
    flex: 1;
}
.notification-text {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 4px;
}
.notification-text strong {
    font-weight: 600;
}
.notification-time {
    font-size: 11px;
    color: #999;
}

/* 社群 Modal */
.community-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}
.community-modal.show {
    display: block;
}
.community-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}
.community-modal .modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
}
.community-modal .modal-content.modal-large {
    max-height: 95vh;
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.community-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.community-modal .modal-header h3 {
    margin: 0;
    font-size: 17px;
}
.community-modal .modal-close {
    width: 40px;
    height: 40px;
    border: none;
    background: #f0f0f0;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}
.community-modal .modal-body {
    padding: 20px;
}
.community-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid #f0f0f0;
}

/* 發文 Modal 特定樣式 */
.post-type-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}
.type-btn {
    padding: 10px 16px;
    border: 2px solid #e8e0f0 !important;
    background: linear-gradient(135deg, #f8f5ff 0%, #f0ebfa 100%) !important;
    border-radius: 22px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6b5b95 !important;
    font-weight: 600;
}
.type-btn:hover {
    background: linear-gradient(135deg, #efe8ff 0%, #e5ddf5 100%) !important;
    border-color: #c9b8e0 !important;
    transform: translateY(-1px);
}
.type-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
#postContent {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    font-size: 14px;
    resize: vertical;
    font-family: inherit;
}
#postContent:focus {
    outline: none;
    border-color: #667eea;
}
.post-char-count {
    text-align: right;
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}
.attach-data-option {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}
.attach-data-option label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

/* 載入中 */
.loading-posts {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}
.loading-posts .spinner {
    margin: 0 auto 15px;
}

/* 空狀態 */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6b5b95;
    background: linear-gradient(135deg, #fff 0%, #faf8ff 100%);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.08);
}
.empty-state .empty-icon {
    font-size: 64px;
    margin-bottom: 15px;
    opacity: 0.9;
}
.empty-state p {
    margin: 0;
    font-size: 15px;
    color: #6b5b95;
    font-weight: 500;
}

/* 載入更多按鈕 */
.load-more {
    text-align: center;
    padding: 15px;
}

/* 留言區 */
.comments-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}
.comments-header {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}
.comment-item {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.comment-avatar {
    width: 40px;
    height: 40px;
    background: #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.comment-content {
    flex: 1;
    background: #f8f9fa;
    padding: 10px 12px;
    border-radius: 12px;
}
.comment-author {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 3px;
}
.comment-text {
    font-size: 13px;
    line-height: 1.4;
}
.comment-time {
    font-size: 11px;
    color: #999;
    margin-top: 5px;
}
.comment-input-wrapper {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.comment-input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 13px;
}
.comment-submit-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
}

/* 檢舉按鈕 */
.report-btn {
    padding: 5px;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    font-size: 16px;
}
.report-btn:hover {
    color: #e74c3c;
}

/* 刪除按鈕 */
.delete-btn {
    padding: 5px;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    font-size: 14px;
}
.delete-btn:hover {
    color: #e74c3c;
}

/* 響應式調整 */
@media (max-width: 480px) {
    .community-subnav {
        padding: 6px;
    }
    .subnav-item {
        padding: 8px 6px;
        font-size: 11px;
    }
    .subnav-item span:first-child {
        font-size: 16px;
    }
    .composer-actions {
        justify-content: center;
    }
    .feed-filters {
        gap: 6px;
    }
    .filter-btn {
        padding: 5px 10px;
        font-size: 11px;
    }
    .post-actions {
        gap: 10px;
    }
    .post-action-btn {
        padding: 5px 8px;
        font-size: 12px;
    }
}

/* ========== 社群功能 UI 增強 ========== */

/* 頭像上傳 */
.avatar-upload-group {
    margin-bottom: 20px;
}
.avatar-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}
.avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.35);
}
.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-upload-actions {
    flex: 1;
}
.avatar-upload-actions .help-text {
    font-size: 11px;
    color: #999;
    margin-top: 8px;
}
.avatar-upload-actions .btn {
    margin-right: 8px;
}

/* 頭像圖片顯示 */
.profile-avatar img,
.post-avatar img,
.ranking-avatar img,
.comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* 追蹤者列表 */
.follow-list-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.follow-list-item:last-child {
    border-bottom: none;
}
.follow-list-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 12px;
    overflow: hidden;
}
.follow-list-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.follow-list-info {
    flex: 1;
}
.follow-list-name {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}
.follow-list-bio {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.follow-list-action {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    border: none;
}
.follow-list-action.following {
    background: #f0f0f0;
    color: #666;
}
.follow-list-action.follow {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* 空狀態 */
.empty-follow-list {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}
.empty-follow-list .empty-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

/* 我的貼文編輯按鈕 */
.my-post-actions {
    display: flex;
    gap: 8px;
}
.edit-btn, .delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}
.edit-btn:hover {
    background: #e3f2fd;
}
.delete-btn:hover {
    background: #ffebee;
}

/* 貼文編輯 Modal */
#editPostContent {
    width: 100%;
    min-height: 150px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
}

/* 用戶資料卡片 */
.user-profile-card {
    text-align: center;
}
.user-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}
.user-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.35);
}
.user-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-profile-info {
    text-align: center;
}
.user-profile-name {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 700;
    color: #5a4a82;
}
.user-profile-bio {
    margin: 0;
    font-size: 13px;
    color: #6b5b95;
    max-width: 250px;
}
.user-profile-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 15px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 15px;
}
.user-stat {
    text-align: center;
}
.user-stat-value {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: #5a4a82;
}
.user-stat-label {
    font-size: 11px;
    color: #999;
}
.user-profile-tir {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}
.user-profile-tir.privacy-hidden {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    font-size: 13px;
    font-weight: normal;
}

/* 用戶資料 - TIR 區塊 */
.user-profile-tir-section {
    margin: 15px 0;
    padding: 15px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
}
.user-profile-tir-section.privacy-hidden {
    background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
}
.tir-hidden-msg {
    color: #888;
    font-size: 14px;
    text-align: center;
    padding: 10px;
}
.tir-header {
    font-size: 13px;
    font-weight: 600;
    color: #5a4a82;
    margin-bottom: 12px;
    text-align: left;
}
.tir-cards {
    display: flex;
    gap: 12px;
}
.tir-card {
    flex: 1;
    background: white;
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    text-align: center;
}
.tir-card-label {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}
.tir-card-value {
    font-size: 22px;
    font-weight: 700;
    color: #5a4a82;
}
.tir-progress-bar {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}
.tir-progress {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}
.tir-improvement {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 10px;
}
.tir-improvement.positive {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}
.tir-improvement.negative {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

/* 用戶資料 - 最近貼文 */
.user-profile-recent-posts {
    margin: 15px 0;
    text-align: left;
}
.recent-posts-header {
    font-size: 13px;
    font-weight: 600;
    color: #5a4a82;
    margin-bottom: 10px;
}
.recent-post-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.recent-post-item:hover {
    background: #e9ecef;
}
.recent-post-icon {
    font-size: 16px;
    margin-right: 10px;
    flex-shrink: 0;
}
.recent-post-text {
    flex: 1;
    font-size: 13px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.recent-post-stats {
    font-size: 11px;
    color: #999;
    margin-left: 10px;
    flex-shrink: 0;
}

.user-profile-actions {
    margin-top: 10px;
}
.user-profile-actions .btn {
    min-width: 120px;
}

/* 血糖報告按鈕 */
.report-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    justify-content: center;
}
.report-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.report-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.report-btn:active {
    transform: translateY(0);
}
.report-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.report-btn .report-icon {
    font-size: 16px;
}
.report-btn.loading .report-icon {
    animation: spin 1s linear infinite;
}

/* 匯出按鈕組 */
.report-btn-group {
    position: relative;
    display: inline-flex;
}
.report-export-btn {
    padding: 10px 8px;
    background: linear-gradient(135deg, #5a6fd6 0%, #6b5eb8 100%);
    color: white;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.2);
    border-radius: 0 12px 12px 0;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.3s;
}
.report-export-btn:hover {
    background: linear-gradient(135deg, #4a5fc6 0%, #5b4ea8 100%);
}
.report-btn-group .report-btn {
    border-radius: 12px 0 0 12px;
}
.export-menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    display: none;
    z-index: 100;
    min-width: 140px;
    margin-bottom: 5px;
    overflow: hidden;
}
.export-menu.show {
    display: block;
}
.export-menu button {
    display: block;
    width: 100%;
    padding: 12px 15px;
    border: none;
    background: white;
    color: #2d3436;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}
.export-menu button:hover {
    background: #f5f5f5;
}
.export-menu button:first-child {
    border-bottom: 1px solid #eee;
}

/* 推播警報歷史 */
.alert-history-section {
    background: white;
    border-radius: 12px;
    margin-top: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
}
.alert-history-section .section-subheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.alert-history-section .section-subheader:hover {
    background: linear-gradient(135deg, #ffe0b2 0%, #ffcc80 100%);
}
.alert-history-section .section-subheader h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #e65100;
}
.alert-history-section .toggle-icon {
    font-size: 12px;
    color: #e65100;
    transition: transform 0.3s;
}
.alert-history-section .toggle-icon.open {
    transform: rotate(180deg);
}
.alert-history-content {
    padding: 15px;
    background: #fafafa;
}
.alert-history-period {
    margin-bottom: 15px;
}
.alert-history-period select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    background: white;
    cursor: pointer;
}
.alert-history-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 15px;
}
.alert-stat-card {
    background: white;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.alert-stat-card.low {
    border-left: 4px solid #f44336;
}
.alert-stat-card.high {
    border-left: 4px solid #ff9800;
}
.alert-stat-card .stat-icon {
    font-size: 24px;
    margin-bottom: 5px;
}
.alert-stat-card .stat-count {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 3px;
}
.alert-stat-card.low .stat-count {
    color: #f44336;
}
.alert-stat-card.high .stat-count {
    color: #ff9800;
}
.alert-stat-card .stat-label {
    font-size: 12px;
    color: #666;
}
.alert-history-chart {
    background: white;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.alert-history-chart h5 {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #555;
}
.hourly-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 80px;
    gap: 2px;
}
.hourly-bar {
    flex: 1;
    background: linear-gradient(to top, #ffcc80, #ff9800);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    position: relative;
    transition: all 0.3s;
}
.hourly-bar:hover {
    opacity: 0.8;
}
.hourly-bar[data-count="0"] {
    background: #e0e0e0;
}
.hourly-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 10px;
    color: #999;
}
.alert-history-list {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.alert-history-list h5 {
    margin: 0;
    padding: 12px 15px;
    font-size: 13px;
    color: #555;
    background: #f5f5f5;
    border-bottom: 1px solid #eee;
}
.alert-list-items {
    max-height: 300px;
    overflow-y: auto;
}
.alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
}
.alert-item:last-child {
    border-bottom: none;
}
.alert-item .alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.alert-item.low .alert-icon {
    background: #ffebee;
}
.alert-item.high .alert-icon {
    background: #fff3e0;
}
.alert-item.urgent_low .alert-icon {
    background: #ffcdd2;
}
.alert-item.urgent_high .alert-icon {
    background: #ffe0b2;
}
.alert-item .alert-info {
    flex: 1;
    min-width: 0;
}
.alert-item .alert-type {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 2px;
}
.alert-item .alert-value {
    font-size: 12px;
    color: #666;
}
.alert-item .alert-time {
    font-size: 11px;
    color: #999;
    text-align: right;
    flex-shrink: 0;
}
.no-alerts {
    padding: 30px 15px;
    text-align: center;
    color: #999;
    font-size: 13px;
}
.alert-loading {
    padding: 30px 15px;
    text-align: center;
    color: #666;
}

/* 家庭分頁樣式 */
.family-intro {
    text-align: center;
    padding: 20px 15px;
    background: linear-gradient(135deg, #e8f5e9 0%, #f3e5f5 100%);
    border-radius: 16px;
    margin-bottom: 20px;
}
.family-intro .intro-icon {
    font-size: 48px;
    margin-bottom: 10px;
}
.family-intro h2 {
    margin: 0 0 8px 0;
    font-size: 22px;
    color: #333;
    border: none;
}
.family-intro p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* 家屬協作樣式 */
.family-card, .care-notes-card {
    background: linear-gradient(135deg, #fff5f5 0%, #fff0f5 100%);
}
.emergency-contacts-section {
    margin-bottom: 15px;
}
.contacts-list {
    margin-bottom: 12px;
}
.contact-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: white;
    border-radius: 8px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.contact-info {
    flex: 1;
}
.contact-name {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}
.contact-detail {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}
.contact-badges {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.contact-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    background: #e3f2fd;
    color: #1976d2;
}
.contact-badge.low {
    background: #fff3e0;
    color: #e65100;
}
.contact-badge.high {
    background: #ffebee;
    color: #c62828;
}
.contact-actions {
    display: flex;
    gap: 6px;
}
.contact-delete-btn {
    background: #f44336;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}
.contact-delete-btn:hover {
    background: #d32f2f;
}
.add-contact-form {
    background: white;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.no-contacts {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 13px;
}

/* 照護筆記樣式 */
.care-notes-list {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 12px;
}
.care-note-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 12px;
    background: white;
    border-radius: 8px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.note-icon {
    font-size: 18px;
    margin-right: 10px;
    flex-shrink: 0;
}
.note-content {
    flex: 1;
}
.note-text {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
}
.note-meta {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}
.note-actions {
    display: flex;
    gap: 4px;
}
.note-pin-btn, .note-delete-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.6;
}
.note-pin-btn:hover, .note-delete-btn:hover {
    opacity: 1;
}
.note-pin-btn.pinned {
    opacity: 1;
    color: #f39c12;
}
.no-notes {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 13px;
}
.loading-placeholder {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 13px;
}
.btn-soft-green {
    background: linear-gradient(135deg, #43a047 0%, #66bb6a 100%);
    color: white;
}

/* 個人化學習樣式 */
.learning-card {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
}
.learning-progress-section {
    background: white;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
}
.learning-level {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.level-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.level-badge.beginner {
    background: #e0e0e0;
    color: #616161;
}
.level-badge.intermediate {
    background: #bbdefb;
    color: #1565c0;
}
.level-badge.advanced {
    background: #c8e6c9;
    color: #2e7d32;
}
.level-badge.expert {
    background: #fff9c4;
    color: #f9a825;
}
.learning-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.stat-item {
    text-align: center;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
}
.stat-value {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}
.stat-label {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}
.icr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.icr-item {
    background: white;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.icr-meal {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}
.icr-value {
    font-size: 18px;
    font-weight: 600;
    color: #1976d2;
}
.icr-confidence {
    font-size: 10px;
    margin-top: 4px;
}
.icr-confidence.high {
    color: #2e7d32;
}
.icr-confidence.medium {
    color: #f57c00;
}
.icr-confidence.low {
    color: #d32f2f;
}
.learning-tip {
    background: #fff8e1;
    border-left: 3px solid #ffc107;
    padding: 10px 12px;
    border-radius: 0 6px 6px 0;
    font-size: 12px;
    color: #795548;
    margin-top: 12px;
}

/* ===== 近期餐食分析 ===== */
.recent-meals-section {
    margin-top: 15px;
}
.recent-meals-section h4 {
    font-size: 14px;
    margin: 0 0 10px 0;
    color: #333;
}
.recent-meals-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.recent-meal-item {
    background: white;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.recent-meal-item .meal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.recent-meal-item .meal-date {
    font-size: 12px;
    color: #666;
}
.recent-meal-item .meal-type {
    font-size: 11px;
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 8px;
    border-radius: 10px;
}
.recent-meal-item .meal-details {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #333;
    margin-bottom: 4px;
}
.recent-meal-item .meal-glucose {
    font-size: 11px;
    color: #666;
}
.recent-meal-item .missing {
    color: #dc3545;
    font-style: italic;
}
.data-missing-tip {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 12px;
}
.data-missing-tip p {
    margin: 4px 0;
    color: #856404;
}
.data-missing-tip strong {
    color: #664d03;
}

/* ICR 排除說明 */
.icr-exclude-note {
    background: #e7f3ff;
    border: 1px solid #b6d4fe;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
    color: #0a58ca;
}

/* 情境標籤 */
.meal-tags {
    display: flex;
    align-items: center;
    gap: 6px;
}

.meal-context {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.meal-context.context-hypo {
    background: #fff3cd;
    color: #856404;
}

.meal-context.context-spike {
    background: #f8d7da;
    color: #842029;
}

.meal-context.context-correction {
    background: #cfe2ff;
    color: #084298;
}

/* ICR 被排除的樣式 */
.icr-excluded {
    color: #999;
    text-decoration: line-through;
    cursor: help;
}

/* 特殊情境的餐食卡片樣式 */
.recent-meal-item.context-hypo_treatment {
    border-left: 3px solid #ffc107;
}

.recent-meal-item.context-glucose_spike {
    border-left: 3px solid #dc3545;
}

.recent-meal-item.context-correction {
    border-left: 3px solid #0d6efd;
}

/* ===== 暫停通知頂部橫幅 ===== */
.alert-mute-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #ff9a56 0%, #ff6b6b 100%);
    color: white;
    padding: 12px 16px;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    transform: translateY(-100%);
    transition: transform 0.3s ease-out;
}
.alert-mute-banner.show {
    transform: translateY(0);
}
.alert-mute-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
}
.alert-mute-banner-icon {
    font-size: 28px;
    flex-shrink: 0;
}
.alert-mute-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#alertMuteBannerTitle {
    font-weight: 600;
    font-size: 14px;
}
#alertMuteBannerStatus {
    font-size: 12px;
    opacity: 0.9;
}
.alert-mute-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.alert-mute-btn {
    background: rgba(255,255,255,0.25);
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.alert-mute-btn:hover {
    background: rgba(255,255,255,0.4);
}
.alert-mute-btn.active {
    background: rgba(255,255,255,0.9);
    color: #ff6b6b;
}
.alert-mute-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
.alert-mute-close:hover {
    color: white;
}
.alert-mute-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    max-width: 600px;
    margin: 8px auto 0;
    padding-left: 52px;
    opacity: 0.9;
}
.alert-mute-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
}
/* 橫幅顯示時調整頁面內容位置 */
body.alert-banner-visible {
    padding-top: 100px;
}
body.alert-banner-visible .user-header {
    margin-top: 0;
}
/* 已暫停狀態的橫幅樣式 */
.alert-mute-banner.muted {
    background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
}
.alert-mute-banner.muted .alert-mute-btn {
    background: rgba(255,255,255,0.9);
    color: #2e7d32;
}

/* ===== 血糖事件統計區塊 ===== */
.glucose-events-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
}
.events-header h4 {
    font-size: 14px;
    color: #555;
    margin: 0 0 12px;
    font-weight: 500;
}
.events-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.event-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: #f8f9fa;
}
.event-card.low-event {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 1px solid #ffcc80;
}
.event-card.high-event {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    border: 1px solid #ef9a9a;
}
.event-icon {
    font-size: 24px;
}
.event-info {
    flex: 1;
}
.event-count {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
}
.event-card.low-event .event-count {
    color: #e65100;
}
.event-card.high-event .event-count {
    color: #c62828;
}
.event-label {
    font-size: 12px;
    color: #666;
}
.event-sub {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}
/* 時段分布 */
.events-time-distribution {
    background: #fafafa;
    border-radius: 10px;
    padding: 12px;
    margin-top: 12px;
}
.time-dist-title {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    text-align: center;
}
.time-dist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.time-period {
    text-align: center;
}
.period-label {
    font-size: 11px;
    color: #555;
    margin-bottom: 6px;
    line-height: 1.3;
}
.period-label small {
    color: #888;
    font-size: 10px;
}
.period-bars {
    display: flex;
    gap: 3px;
    justify-content: center;
    height: 40px;
    align-items: flex-end;
}
.bar-low, .bar-high {
    width: 16px;
    min-height: 4px;
    border-radius: 3px 3px 0 0;
    transition: height 0.3s ease;
}
.bar-low {
    background: linear-gradient(to top, #ff9800, #ffb74d);
}
.bar-high {
    background: linear-gradient(to top, #f44336, #e57373);
}
.period-counts {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
    font-size: 10px;
}
.count-low {
    color: #e65100;
    font-weight: 600;
}
.count-high {
    color: #c62828;
    font-weight: 600;
}
.time-dist-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
    font-size: 11px;
    color: #666;
}
.legend-low, .legend-high {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* 響應式 */
@media (max-width: 480px) {
    .events-grid {
        grid-template-columns: 1fr;
    }
    .time-dist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* ===== A1c 目標追蹤 ===== */
.eA1c-stat {
    position: relative;
}
.a1c-target-progress {
    margin-top: 10px;
    width: 100%;
}
.a1c-progress-bar {
    position: relative;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: visible;
}
.a1c-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease, background 0.3s ease;
}
.a1c-progress-fill.on-target {
    background: linear-gradient(90deg, #4caf50, #66bb6a);
}
.a1c-progress-fill.above-target {
    background: linear-gradient(90deg, #ff9800, #ffb74d);
}
.a1c-progress-fill.far-above {
    background: linear-gradient(90deg, #f44336, #e57373);
}
.a1c-target-marker {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    background: #333;
    border-radius: 1px;
    transform: translateX(-50%);
}
.a1c-target-marker::after {
    content: '目標';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: #666;
    white-space: nowrap;
}
.a1c-target-label {
    font-size: 11px;
    color: #666;
    text-align: center;
    margin-top: 8px;
}
.a1c-target-label .diff-up {
    color: #f44336;
}
.a1c-target-label .diff-down {
    color: #4caf50;
}
.a1c-target-label .on-target {
    color: #4caf50;
    font-weight: 600;
}

/* ===== 個人化學習區 ===== */
.learning-section {
    margin-top: 15px;
}

.learning-content {
    padding: 0 15px 15px;
}

/* 如何啟用說明區塊 */
.learning-how-to {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 15px;
    border: 1px solid #c8e6c9;
}

.how-to-title {
    font-weight: 600;
    font-size: 15px;
    color: #2e7d32;
    margin-bottom: 15px;
}

.how-to-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.step-item {
    display: flex;
    gap: 12px;
    background: white;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #e0e0e0;
}

.step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #4caf50, #66bb6a);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-content strong {
    display: block;
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
}

.step-content p {
    font-size: 12px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* 可收合的詳細說明 */
.learning-details {
    background: #fafafa;
    border-radius: 10px;
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
}

.learning-details summary {
    padding: 12px 15px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.learning-details summary::-webkit-details-marker {
    display: none;
}

.learning-details summary::after {
    content: '▼';
    font-size: 10px;
    color: #999;
    margin-left: auto;
    transition: transform 0.2s;
}

.learning-details[open] summary::after {
    transform: rotate(180deg);
}

.learning-details .details-content {
    padding: 0 15px 15px;
}

.learning-details .formula-box {
    background: white;
    border-radius: 8px;
    padding: 12px;
    border-left: 4px solid #7c4dff;
    margin-bottom: 12px;
}

.learning-details .formula {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 14px;
    font-weight: 600;
    color: #4a148c;
    margin-bottom: 4px;
}

.learning-details .formula-example {
    font-size: 12px;
    color: #666;
}

.learning-details .exclude-info {
    font-size: 12px;
    color: #555;
}

.learning-details .exclude-info p {
    margin: 0 0 8px;
    font-size: 12px;
}

.learning-details .exclude-info ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.learning-details .exclude-info li {
    padding: 3px 0;
    font-size: 12px;
}

/* ICR 建議區 header */
.icr-section-header {
    margin-bottom: 15px;
}

.icr-section-header h4 {
    font-size: 15px;
    margin: 0 0 5px;
    color: #333;
}

.icr-section-desc {
    font-size: 12px;
    color: #666;
    margin: 0;
}

.icr-note {
    margin-top: 12px;
    padding: 10px;
    background: #fff3e0;
    border-radius: 8px;
    border-left: 3px solid #ff9800;
}

.icr-note small {
    font-size: 11px;
    color: #e65100;
    line-height: 1.4;
    display: block;
}

/* 學習進度區塊 */
.learning-progress-section {
    margin-bottom: 15px;
}

.learning-stats {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 15px 0;
}

.learning-stats .stat-item {
    text-align: center;
    padding: 10px 20px;
    background: #f5f5f5;
    border-radius: 10px;
}

.learning-stats .stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
}

.learning-stats .stat-label {
    font-size: 12px;
    color: #666;
}

/* 學習等級 badge */
.learning-level {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 10px;
}

.level-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.level-badge.beginner {
    background: #e3f2fd;
    color: #1565c0;
}

.level-badge.intermediate {
    background: #e8f5e9;
    color: #2e7d32;
}

.level-badge.advanced {
    background: #fff3e0;
    color: #e65100;
}

.level-badge.expert {
    background: #fce4ec;
    color: #c2185b;
}

.learning-tip {
    background: #e8f5e9;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #2e7d32;
    text-align: center;
}

.learning-tip.success {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border: 1px solid #81c784;
}

/* 里程碑進度條 */
.milestone-progress {
    margin-top: 12px;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 8px;
}

.milestone-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.milestone-icon {
    font-size: 16px;
}

.milestone-text {
    font-size: 13px;
    color: #555;
}

.milestone-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.milestone-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c4dff, #536dfe);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.milestone-count {
    text-align: right;
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

/* ICR 建議卡片優化 */
.icr-recommendations-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

/* ===== 時段控糖分析樣式（儀表板可收合版） ===== */
.time-slot-analysis-section {
    margin-top: 15px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.time-slot-analysis-section .section-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    transition: background 0.2s;
}

.time-slot-analysis-section .section-subheader:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}

.time-slot-analysis-section .section-subheader h4 {
    margin: 0;
    font-size: 15px;
    color: #2d3436;
}

.time-slot-analysis-section .toggle-icon {
    font-size: 12px;
    color: #666;
    transition: transform 0.3s;
}

.time-slot-analysis-section .toggle-icon.open {
    transform: rotate(180deg);
}

.time-slot-analysis-content {
    padding: 15px;
}

.time-slot-desc {
    margin: 0 0 15px 0;
    font-size: 13px;
    color: #666;
}

.loading-text, .no-data-text, .error-text {
    text-align: center;
    padding: 20px;
    color: #888;
    font-size: 14px;
}

/* 洞察建議 */
.time-slot-insights {
    margin-bottom: 15px;
}

.time-slot-insight {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 14px;
}

.time-slot-insight .insight-icon {
    font-size: 16px;
}

.time-slot-insight.insight-positive {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
}

.time-slot-insight.insight-attention {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
}

.time-slot-insight.insight-tip {
    background: linear-gradient(135deg, #e7f3ff 0%, #d0e8ff 100%);
    color: #004085;
}

.time-slot-insight.insight-info {
    background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
    color: #555;
}

/* 時段網格 */
.time-slot-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 640px) {
    .time-slot-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 時段卡片 */
.time-slot-card {
    background: white;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    border-left: 4px solid #ddd;
}

.time-slot-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.time-slot-card.tir-good {
    border-left-color: #00b894;
}

.time-slot-card.tir-medium {
    border-left-color: #fdcb6e;
}

.time-slot-card.tir-low {
    border-left-color: #e17055;
}

.slot-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.slot-icon {
    font-size: 16px;
}

.slot-label {
    font-size: 13px;
    font-weight: 600;
    color: #2d3436;
    flex: 1;
}

.slot-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.slot-badge.best {
    background: #d4edda;
    color: #155724;
}

.slot-badge.worst {
    background: #f8d7da;
    color: #721c24;
}

.slot-time {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
}

.slot-tir {
    text-align: center;
    padding: 8px 0;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
}

.slot-tir .tir-value {
    font-size: 22px;
    font-weight: 700;
    color: #2d3436;
    display: block;
}

.slot-tir .tir-label {
    font-size: 11px;
    color: #888;
}

.tir-good .slot-tir .tir-value {
    color: #00b894;
}

.tir-medium .slot-tir .tir-value {
    color: #fdcb6e;
}

.tir-low .slot-tir .tir-value {
    color: #e17055;
}

.slot-details {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.slot-detail {
    text-align: center;
    flex: 1;
}

.slot-detail .detail-label {
    display: block;
    font-size: 10px;
    color: #888;
}

.slot-detail .detail-value {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #2d3436;
}

.slot-detail .detail-value.warn-low {
    color: #e17055;
}

.slot-detail .detail-value.warn-high {
    color: #fdcb6e;
}

/* 響應式調整 - 學習區 */
@media (max-width: 640px) {
    .how-to-steps {
        grid-template-columns: 1fr;
    }

    .step-item {
        padding: 10px;
    }

    .learning-stats {
        flex-direction: row;
        gap: 10px;
    }

    .learning-stats .stat-item {
        flex: 1;
        padding: 8px 10px;
    }

    .learning-stats .stat-value {
        font-size: 22px;
    }
}

/* ===== AGP Report Styles ===== */

/* AGP Button */
.report-btn.agp-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* AGP Report Section */
.agp-report-section {
    background: linear-gradient(135deg, #f8f9ff 0%, #e8ecff 100%);
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.15);
}

.agp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.agp-header h3 {
    margin: 0;
    color: #2d3436;
    font-size: 18px;
}

.agp-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 8px;
    transition: background 0.2s;
}

.agp-close-btn:hover {
    background: rgba(0,0,0,0.1);
}

/* Time Selector */
.agp-time-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.agp-range-btn {
    flex: 1;
    padding: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 10px;
    background: white;
    color: #2d3436;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.agp-range-btn:hover {
    border-color: #667eea;
}

.agp-range-btn.active {
    border-color: #667eea;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* Data Coverage */
.agp-coverage {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    background: white;
    border-radius: 10px;
    margin-bottom: 15px;
    font-size: 14px;
}

.agp-coverage .coverage-label {
    color: #666;
}

.agp-coverage .coverage-value {
    font-weight: 600;
    color: #27ae60;
}

.agp-coverage.low .coverage-value { color: #e74c3c; }
.agp-coverage.ok .coverage-value { color: #f39c12; }
.agp-coverage.good .coverage-value { color: #27ae60; }

/* Loading */
.agp-loading {
    text-align: center;
    padding: 40px 20px;
}

.agp-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: agpSpin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes agpSpin {
    to { transform: rotate(360deg); }
}

.agp-loading-text {
    color: #666;
    font-size: 14px;
}

/* Section Card */
.agp-section-card {
    background: white;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.agp-section-card h4 {
    margin: 0 0 15px 0;
    font-size: 15px;
    color: #2d3436;
}

/* TIR Bar */
.agp-tir-bar {
    height: 40px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    background: #ecf0f1;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.agp-tir-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    transition: width 0.5s ease;
}

.agp-tir-segment.very-low { background: linear-gradient(135deg, #c0392b, #e74c3c); }
.agp-tir-segment.low { background: linear-gradient(135deg, #e74c3c, #ff6b6b); }
.agp-tir-segment.in-range { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.agp-tir-segment.high { background: linear-gradient(135deg, #f39c12, #f1c40f); }
.agp-tir-segment.very-high { background: linear-gradient(135deg, #d35400, #e67e22); }

/* TIR Legend */
.agp-tir-legend {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.agp-tir-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #666;
}

.agp-tir-legend .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.agp-tir-legend .dot.very-low { background: #c0392b; }
.agp-tir-legend .dot.low { background: #e74c3c; }
.agp-tir-legend .dot.in-range { background: #27ae60; }
.agp-tir-legend .dot.high { background: #f39c12; }
.agp-tir-legend .dot.very-high { background: #d35400; }

/* TIR Times */
.agp-tir-times {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 15px;
}

.agp-tir-time-item {
    text-align: center;
    padding: 8px 5px;
    background: #f8f9fa;
    border-radius: 8px;
}

.agp-tir-time-value {
    font-size: 16px;
    font-weight: 700;
}

.agp-tir-time-label {
    font-size: 10px;
    color: #666;
    margin-top: 2px;
}

.agp-tir-time-item.very-low .agp-tir-time-value { color: #c0392b; }
.agp-tir-time-item.low .agp-tir-time-value { color: #e74c3c; }
.agp-tir-time-item.in-range .agp-tir-time-value { color: #27ae60; }
.agp-tir-time-item.high .agp-tir-time-value { color: #f39c12; }
.agp-tir-time-item.very-high .agp-tir-time-value { color: #d35400; }

/* Metrics Grid */
.agp-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.agp-metric {
    text-align: center;
    padding: 15px 8px;
    background: linear-gradient(135deg, #f8f9ff 0%, #e8ecff 100%);
    border-radius: 12px;
}

.agp-metric .metric-value {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: #667eea;
}

.agp-metric .metric-label {
    display: block;
    font-size: 11px;
    color: #666;
    margin-top: 5px;
    line-height: 1.3;
}

.agp-metric .metric-label small {
    color: #999;
}

.agp-metric.success .metric-value { color: #27ae60; }
.agp-metric.warning .metric-value { color: #f39c12; }
.agp-metric.danger .metric-value { color: #e74c3c; }

/* AGP Chart */
.agp-chart-info {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
    text-align: center;
}

.agp-chart-container {
    position: relative;
    height: 280px;
    margin: 10px 0;
}

.agp-chart-legend {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    flex-wrap: wrap;
}

.agp-chart-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #666;
}

.agp-chart-legend .band {
    width: 20px;
    height: 12px;
    border-radius: 3px;
}

.agp-chart-legend .band.p95 {
    background: rgba(102, 126, 234, 0.2);
}

.agp-chart-legend .band.p75 {
    background: rgba(102, 126, 234, 0.4);
}

.agp-chart-legend .line {
    width: 20px;
    height: 3px;
    border-radius: 2px;
}

.agp-chart-legend .line.p50 {
    background: #667eea;
}

.agp-chart-legend .line.target {
    background: #27ae60;
    height: 2px;
    border: 1px dashed #27ae60;
    background: transparent;
}

/* Daily Charts */
.agp-daily-container {
    display: grid;
    gap: 10px;
}

.agp-daily-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.agp-daily-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 6px;
    text-align: center;
}

.agp-daily-date {
    font-size: 10px;
    color: #666;
    margin-bottom: 4px;
}

.agp-daily-weekday {
    font-size: 9px;
    color: #999;
}

.agp-daily-chart {
    height: 50px;
    width: 100%;
}

/* Error */
.agp-error {
    text-align: center;
    padding: 40px 20px;
    background: white;
    border-radius: 12px;
}

.agp-error-icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.agp-error-text {
    color: #e74c3c;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .agp-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .agp-tir-times {
        grid-template-columns: repeat(3, 1fr);
    }

    .agp-daily-week {
        grid-template-columns: repeat(4, 1fr);
    }

    .agp-metric .metric-value {
        font-size: 22px;
    }

    .agp-chart-container {
        height: 240px;
    }
}

@media (max-width: 480px) {
    .agp-time-selector {
        flex-wrap: wrap;
    }

    .agp-range-btn {
        flex: 1 1 30%;
    }

    .agp-daily-week {
        grid-template-columns: repeat(3, 1fr);
    }

    .agp-tir-times {
        grid-template-columns: repeat(3, 1fr);
    }

    .agp-tir-times .agp-tir-time-item:nth-child(4),
    .agp-tir-times .agp-tir-time-item:nth-child(5) {
        grid-column: span 1;
    }

    .agp-chart-legend {
        gap: 10px;
    }

    .agp-chart-legend .legend-item {
        font-size: 10px;
    }
}

/* ===== PWA 重新整理按鈕 ===== */
.pwa-refresh-btn {
    position: fixed;
    bottom: 85px;
    right: 15px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    cursor: pointer;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.pwa-refresh-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.pwa-refresh-btn:active {
    transform: scale(0.95);
}

.pwa-refresh-btn svg {
    width: 40px;
    height: 40px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.pwa-refresh-btn.refreshing svg {
    animation: pwaRefreshSpin 0.8s linear infinite;
}

@keyframes pwaRefreshSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 適應 iOS 安全區域 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .pwa-refresh-btn {
        bottom: calc(85px + env(safe-area-inset-bottom));
    }
}

/* ========== AI 對話聊天室樣式 ========== */

/* 對話區頭部 */
.ai-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ai-clear-btn {
    background: none;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-clear-btn:hover {
    background: #f5f5f5;
    border-color: rgba(0,0,0,0.25);
}

/* 對話訊息區 */
.ai-chat-messages {
    max-height: 400px;
    min-height: 200px;
    overflow-y: auto;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 歡迎訊息 */
.ai-welcome-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    text-align: center;
    color: #888;
}

.ai-welcome-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.ai-welcome-text {
    font-size: 14px;
    line-height: 1.5;
    max-width: 250px;
}

/* 對話泡泡 */
.ai-chat-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    position: relative;
}

/* 用戶訊息（右側藍色） */
.user-bubble {
    align-self: flex-end;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

.user-bubble .bubble-content {
    color: white;
}

.user-bubble .bubble-time {
    text-align: right;
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    margin-top: 4px;
}

/* AI 回覆（左側灰色） */
.assistant-bubble {
    align-self: flex-start;
    background: white;
    color: #333;
    border: 1px solid rgba(0,0,0,0.08);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.assistant-bubble .bubble-content {
    color: #333;
}

.assistant-bubble .bubble-content p {
    margin: 0 0 8px 0;
}

.assistant-bubble .bubble-content p:last-child {
    margin-bottom: 0;
}

.assistant-bubble .bubble-content h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 12px 0 6px 0;
    color: #333;
}

.assistant-bubble .bubble-content h3:first-child {
    margin-top: 0;
}

.assistant-bubble .bubble-content ul,
.assistant-bubble .bubble-content ol {
    margin: 8px 0;
    padding-left: 20px;
}

.assistant-bubble .bubble-content li {
    margin: 4px 0;
}

.assistant-bubble .bubble-content .glucose-value {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.assistant-bubble .bubble-time {
    text-align: left;
    font-size: 10px;
    color: #999;
    margin-top: 4px;
}

/* 輸入區 */
.ai-chat-input-row {
    display: flex;
    gap: 8px;
}

.ai-chat-input-row input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 24px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.ai-chat-input-row input:focus {
    border-color: #667eea;
}

.ai-send-btn {
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.ai-send-btn:hover {
    opacity: 0.9;
}

.ai-send-btn:active {
    transform: scale(0.95);
}

/* 載入動畫 */
.ai-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #666;
    font-size: 14px;
}

.ai-loading .spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(102, 126, 234, 0.2);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 捲軸樣式 */
.ai-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.ai-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}

.ai-chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.25);
}

/* AI 打字動畫 */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: #888;
    border-radius: 50%;
    animation: typing-bounce 1.4s ease-in-out infinite;
}

.typing-indicator span:nth-child(1) {
    animation-delay: 0s;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* 固定免責聲明 */
.ai-disclaimer-fixed {
    padding: 10px 16px;
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
    border: 2px solid #ffc107;
    border-radius: 10px;
    margin: 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: #664d03;
    text-align: center;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.ai-disclaimer-fixed .disclaimer-icon {
    margin-right: 6px;
    font-size: 15px;
}

/* ========================================
   管理員後台擴展樣式
   ======================================== */

/* 管理員導航 */
.admin-nav {
    flex-wrap: wrap;
}

.admin-nav a {
    padding: 8px 12px;
    font-size: 13px;
}

/* 管理員區塊 */
.admin-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

.admin-section h3 {
    margin-top: 0;
    color: #495057;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

/* 管理員 Tabs */
.admin-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 0;
}

.admin-tab {
    padding: 10px 20px;
    background: #e9ecef;
    border: none;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    font-size: 14px;
    color: #495057;
    transition: all 0.2s;
}

.admin-tab:hover {
    background: #dee2e6;
}

.admin-tab.active {
    background: #3498db;
    color: white;
}

.admin-tab-content {
    padding: 20px 0;
}

/* 統計卡片小號按鈕 */
.btn-small {
    padding: 5px 10px;
    font-size: 12px;
}

/* 用戶詳情 Modal */
.user-detail-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.user-detail-content {
    background: white;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.user-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #3498db;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.user-detail-header h3 {
    margin: 0;
    color: #2c3e50;
}

.user-detail-section {
    margin-bottom: 20px;
}

.user-detail-section h4 {
    color: #3498db;
    margin-bottom: 10px;
    font-size: 14px;
}

.user-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.user-detail-item {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 6px;
}

.user-detail-item label {
    font-size: 11px;
    color: #6c757d;
    display: block;
}

.user-detail-item .value {
    font-size: 16px;
    font-weight: bold;
    color: #2c3e50;
}

/* 批量操作工具列 */
.batch-toolbar {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    display: none;
}

.batch-toolbar.show {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.batch-selected-count {
    font-weight: bold;
    color: #1976d2;
}

/* 帳號備註 */
.note-badge {
    background: #fff3cd;
    color: #856404;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.note-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin-top: 10px;
}

/* 表格優化 */
#accountTable th, #accountTable td {
    padding: 10px 8px;
    font-size: 13px;
}

#accountTable th:first-child {
    width: 30px;
}

/* 響應式調整 */
@media (max-width: 768px) {
    .admin-nav {
        gap: 5px;
    }

    .admin-nav a {
        padding: 6px 10px;
        font-size: 12px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .user-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-tabs {
        flex-wrap: wrap;
    }

    .admin-tab {
        flex: 1;
        text-align: center;
        min-width: 80px;
    }
}

/* 推播測試按鈕 */
.push-test-btn {
    background: #17a2b8;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.push-test-btn:hover {
    background: #138496;
}

/* 日誌表格 */
#operationLogs table, #securityLogs table {
    font-size: 12px;
}

#operationLogs table td, #securityLogs table td {
    padding: 8px;
}

/* 用戶分群標籤 */
.user-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    margin-left: 5px;
}

.user-tag.active {
    background: #d4edda;
    color: #155724;
}

.user-tag.inactive {
    background: #f8d7da;
    color: #721c24;
}

.user-tag.new {
    background: #cce5ff;
    color: #004085;
}

/* ========== 管理員模擬用戶提示條 ========== */
.impersonation-banner {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    margin: -20px -20px 15px -20px;
    border-radius: 0;
}

.impersonation-banner .banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.impersonation-banner .banner-icon {
    font-size: 1.3em;
}

.impersonation-banner .banner-text {
    font-size: 0.95em;
}

.impersonation-banner .banner-text strong {
    font-weight: 700;
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 4px;
}

.impersonation-banner .banner-btn {
    background: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid rgba(255,255,255,0.4);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.2s;
}

.impersonation-banner .banner-btn:hover {
    background: rgba(255,255,255,0.35);
    transform: translateY(-1px);
}

/* 模擬按鈕樣式 */
.btn-view {
    background: #9b59b6 !important;
    color: white !important;
    border: none;
}

.btn-view:hover {
    background: #8e44ad !important;
}

/* 手機版適配 */
@media (max-width: 768px) {
    .impersonation-banner {
        padding: 10px 15px;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .impersonation-banner .banner-content {
        flex-direction: column;
        gap: 5px;
    }

    .impersonation-banner .banner-btn {
        width: 100%;
        text-align: center;
    }
}

/* ========== 管理員標籤和入口按鈕 ========== */
.admin-badge {
    display: inline-block;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
    font-weight: 500;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-entry-btn {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.admin-entry-btn:hover {
    background: linear-gradient(135deg, #8e44ad, #7d3c98);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.4);
}

/* 管理員開關樣式（紫色主題） */
.toggle-admin .toggle-slider {
    background: #ccc;
}

.toggle-admin input:checked + .toggle-slider {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

/* 手機版適配 */
@media (max-width: 768px) {
    .header-actions {
        flex-direction: column;
        gap: 5px;
    }

    .admin-entry-btn {
        padding: 6px 12px;
        font-size: 0.85em;
    }

    .admin-badge {
        font-size: 0.65em;
        padding: 1px 6px;
    }
}

/* ==========================================
   成就系統樣式
   ========================================== */

/* 成就 Modal */
.achievements-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

.achievements-panel {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.achievements-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f39c12, #e74c3c);
    color: white;
}

.achievements-header h3 {
    margin: 0;
    font-size: 1.3em;
}

.achievements-header .close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2em;
    transition: background 0.2s;
}

.achievements-header .close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 公告欄 Modal */
.announcement-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.announcement-modal.active {
    display: flex;
}

.announcement-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.announcement-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.announcement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #ffb74d, #ff8f00);
    color: #3a2a00;
}

.announcement-header h3 {
    margin: 0;
    font-size: 1.2em;
}

.announcement-header .close-btn {
    background: rgba(255, 255, 255, 0.35);
    border: none;
    color: #3a2a00;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2em;
}

.announcement-body {
    padding: 16px 20px 22px;
    color: #e0e0e0;
}

.announcement-title {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 4px;
}

.announcement-date {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
}

.announcement-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    font-size: 0.95em;
}

/* 成就統計 */
.achievements-stats {
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-overview {
    display: flex;
    align-items: center;
    gap: 20px;
}

.stats-progress {
    text-align: center;
}

.progress-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: conic-gradient(
        #f39c12 0%,
        #f39c12 var(--progress, 0%),
        rgba(255, 255, 255, 0.1) var(--progress, 0%),
        rgba(255, 255, 255, 0.1) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.progress-circle::before {
    content: '';
    position: absolute;
    width: 54px;
    height: 54px;
    background: #1a1a2e;
    border-radius: 50%;
}

.progress-circle .progress-value {
    position: relative;
    z-index: 1;
    color: #f39c12;
    font-weight: bold;
    font-size: 1.1em;
}

.progress-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8em;
    margin-top: 4px;
}

.stats-numbers {
    display: flex;
    gap: 24px;
    flex: 1;
}

.stats-numbers .stat-item {
    text-align: center;
}

.stats-numbers .stat-item .stat-value {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    color: white;
}

.stats-numbers .stat-item .stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8em;
}

.stats-numbers .stat-item.has-unclaimed .stat-value {
    color: #f39c12;
}

/* 成就類別 */
.achievements-categories {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.category-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.9em;
    transition: all 0.2s;
}

.category-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.category-btn.active {
    background: linear-gradient(135deg, #f39c12, #e74c3c);
    color: white;
}

.category-badge {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8em;
}

/* 成就列表 */
.achievements-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.achievements-section {
    margin-bottom: 20px;
}

.achievements-section .section-title {
    color: white;
    font-weight: bold;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.achievements-section.collapsed .section-title {
    cursor: pointer;
    opacity: 0.7;
}

.achievements-section .toggle-icon {
    float: right;
    opacity: 0.5;
}

.achievements-grid {
    display: grid;
    gap: 12px;
}

/* 成就卡片 */
.achievement-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    border-left: 4px solid var(--rarity-color, #9e9e9e);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.achievement-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.achievement-card.completed {
    background: rgba(76, 175, 80, 0.18);
}

.achievement-card.claimed {
    opacity: 0.6;
}

.achievement-icon {
    font-size: 2em;
    min-width: 50px;
    text-align: center;
}

.achievement-info {
    flex: 1;
    min-width: 0;
}

.achievement-name {
    color: white;
    font-weight: bold;
    margin-bottom: 4px;
}

.achievement-desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85em;
    margin-bottom: 8px;
}

.achievement-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.achievement-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f39c12, #e74c3c);
    border-radius: 3px;
    transition: width 0.3s;
}

.achievement-progress-text {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.75em;
    margin-top: 4px;
}

.claim-btn {
    background: linear-gradient(135deg, #f39c12, #e74c3c);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9em;
    animation: pulse 1.5s infinite;
}

.claim-btn:hover {
    transform: scale(1.05);
}

.claimed-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background: #4caf50;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
}

/* 成就獎勵 Modal */
.achievement-reward-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    animation: fadeIn 0.3s;
}

.achievement-reward-modal.fade-out {
    animation: fadeOut 0.3s forwards;
}

.reward-content {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    max-width: 320px;
    animation: bounceIn 0.5s;
}

.reward-icon {
    font-size: 4em;
    margin-bottom: 10px;
}

.reward-title {
    color: #f39c12;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 8px;
}

.reward-name {
    color: white;
    font-size: 1.2em;
    margin-bottom: 20px;
}

.reward-list {
    margin-bottom: 20px;
}

.reward-item {
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.reward-close-btn {
    background: linear-gradient(135deg, #f39c12, #e74c3c);
    border: none;
    color: white;
    padding: 12px 30px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1em;
}

.reward-close-btn:hover {
    transform: scale(1.05);
}

/* 成就解鎖 Toast */
.achievement-unlocked-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: linear-gradient(135deg, #f39c12, #e74c3c);
    padding: 12px 24px;
    border-radius: 30px;
    z-index: 1200;
    transition: transform 0.3s ease-out;
    box-shadow: 0 5px 20px rgba(243, 156, 18, 0.4);
}

.achievement-unlocked-toast.show {
    transform: translateX(-50%) translateY(0);
}

.achievement-toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-icon {
    font-size: 2em;
}

.toast-text {
    color: white;
}

.toast-title {
    font-weight: bold;
}

.toast-name {
    opacity: 0.9;
    font-size: 0.9em;
}

/* 動畫 */
@keyframes bounceIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    70% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* 手機版適配 */
@media (max-width: 480px) {
    .achievements-panel {
        max-height: 90vh;
        border-radius: 12px;
    }

    .stats-overview {
        flex-direction: column;
        gap: 12px;
    }

    .stats-numbers {
        justify-content: center;
    }

    .achievements-categories {
        padding: 10px 16px;
    }

    .category-btn {
        padding: 6px 10px;
        font-size: 0.85em;
    }

    .achievement-card {
        padding: 12px;
    }

    .achievement-icon {
        font-size: 1.5em;
        min-width: 40px;
    }

    .reward-content {
        padding: 20px;
        max-width: 280px;
    }

    .reward-icon {
        font-size: 3em;
    }
}

/* ============================================
   成就按鈕樣式
   ============================================ */

.achievement-shortcut {
    margin: 15px 0;
    display: flex;
    justify-content: center;
}

.achievement-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(145deg, #ffd700, #ffb700);
    border: none;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(255, 183, 0, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.achievement-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 183, 0, 0.5);
}

.achievement-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(255, 183, 0, 0.3);
}

.achievement-btn-icon {
    font-size: 1.5em;
}

.achievement-btn-label {
    font-size: 1em;
    font-weight: 600;
    color: #5a4000;
}

.achievement-btn-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4757;
    color: white;
    font-size: 0.7em;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}