*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
	--line-green  : #06C755;
	--nav-height  : 68px;
	--nav-bg      : #ffffff;
	--active-color: #06C755;
	--text-muted  : #999;
	--card-radius : 14px;
	--shadow-sm   : 0 2px 8px rgba(0,0,0,.08);
	--transition  : .25s cubic-bezier(.4,0,.2,1);
}

html, body {
	height: 100%;
	font-family: 'Noto Sans TC', sans-serif;
	background: #f4f6f9;
	overflow: hidden;
}

/* ── 頂部標題列 ── */
.app-header {
	position: fixed; top: 0; left: 0; right: 0;
	height: 56px;
	background: linear-gradient(135deg, #06C755 0%, #00A846 100%);
	display: flex; align-items: center; justify-content: center;
	z-index: 100;
	box-shadow: 0 2px 10px rgba(6,199,85,.35);
}
.app-header h1 { color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: .05em; }
.app-header .user-avatar {
	position: absolute; right: 16px;
	width: 34px; height: 34px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.7);
	background: rgba(255,255,255,.3);
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: .8rem; overflow: hidden;
}

/* ── 主內容區 ── */
.content-area {
	position: fixed; top: 56px; left: 0; right: 0;
	bottom: var(--nav-height);
	overflow-y: auto; -webkit-overflow-scrolling: touch;
	background: #f4f6f9;
}

/* ── 歡迎首頁 ── */
.welcome-panel {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	height: 100%; padding: 40px 24px; text-align: center;
}
.logo-circle {
	width: 96px; height: 96px; border-radius: 50%;
	background: linear-gradient(135deg, #06C755, #00A846);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 24px; box-shadow: 0 8px 28px rgba(6,199,85,.4);
}
.logo-circle i { font-size: 2.6rem; color: #fff; }
.welcome-panel h2 { font-size: 1.4rem; color: #222; margin-bottom: 12px; font-weight: 700; }
.welcome-panel p  { color: #666; font-size: .92rem; line-height: 1.8; max-width: 280px; }
.hint-arrow {
	margin-top: 36px; display: flex; flex-direction: column;
	align-items: center; gap: 6px; color: #aaa; font-size: .8rem;
	animation: bounceDown 1.6s ease-in-out infinite;
}
.hint-arrow i { font-size: 1.4rem; color: var(--line-green); }
@keyframes bounceDown {
	0%,100% { transform: translateY(0);   opacity: .7; }
	50%      { transform: translateY(8px); opacity: 1;  }
}

/* ── 通用內嵌面板 ── */
.embed-panel { display: none; flex-direction: column; height: 100%; }
.embed-panel.visible { display: flex; }

/* ── 面板頂部工具列 ── */
.panel-toolbar {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 16px;
	background: #fff; border-bottom: 1px solid #eee;
	box-shadow: var(--shadow-sm); flex-shrink: 0;
}
.panel-toolbar h2 {
	flex: 1; font-size: 1rem; font-weight: 700; color: #222;
	display: flex; align-items: center; gap: 8px;
}
.btn-back {
	background: none; border: none; cursor: pointer;
	color: var(--line-green); font-size: 1.1rem; padding: 4px 8px;
	border-radius: 8px; transition: background .2s;
}
.btn-back:active { background: #e6f9ee; }

/* ── iframe 容器 ── */
.iframe-wrap { flex: 1; position: relative; overflow: hidden; }
.iframe-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.iframe-loading {
	position: absolute; inset: 0;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 12px;
	background: #f4f6f9; color: #999; font-size: .9rem;
}
.iframe-loading .ld-spinner {
	width: 32px; height: 32px;
	border: 3px solid #ddd; border-top-color: var(--line-green);
	border-radius: 50%; animation: spin .8s linear infinite;
}

/* ── 宣導文件面板 ── */
.health-panel { display: none; flex-direction: column; height: 100%; }
.health-panel.visible { display: flex; }

/* ── Tab 列（三個 Tab）── */
.tab-bar { display: flex; background: #fff; border-bottom: 1px solid #eee; flex-shrink: 0; }
.tab-btn {
	flex: 1; padding: 10px 4px; border: none; background: none;
	font-size: .85rem; font-weight: 600; color: var(--text-muted);
	cursor: pointer; border-bottom: 3px solid transparent;
	transition: color .2s, border-color .2s;
}
.tab-btn.active { color: var(--line-green); border-bottom-color: var(--line-green); }

/* ── 圖片 / 影片共用檢視區 ── */
.img-viewer {
	flex: 1; overflow-y: auto; padding: 16px;
	display: flex; flex-direction: column; gap: 12px;
}
/* 宣導圖片 */
.img-viewer .health-real-img,
.img-viewer .health-placeholder-img {
	width: 100%; border-radius: var(--card-radius);
	box-shadow: var(--shadow-sm); display: block;
}
/* 佔位 / 錯誤訊息 */
.img-placeholder {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	min-height: 200px; color: #bbb; gap: 8px; font-size: .85rem;
	text-align: center; padding: 20px;
}
.img-placeholder i { font-size: 2.5rem; }

/* ── YouTube 影片容器（16:9 響應式）── */
.video-ratio-box {
	position: relative; width: 100%;
	padding-bottom: 56.25%; height: 0;
	border-radius: var(--card-radius);
	overflow: hidden; box-shadow: var(--shadow-sm);
}
.video-ratio-box iframe {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%; border: none;
}

/* ── 重試按鈕 ── */
.btn-retry {
	margin-top: 12px; padding: 8px 20px;
	background: var(--line-green); color: #fff;
	border: none; border-radius: 20px;
	font-size: .85rem; cursor: pointer;
}

/* ── 宣導圖片佔位區塊 ── */
.health-placeholder-box {
    width: 100%;
    /* ★ padding-bottom 56.25% = 16:9 比例，撐開版面不塌陷 */
    /* ★ 若你的圖片是 8:5 比例（800x500），改為 62.5%      */
    padding-bottom: 62.5%;
    position: relative;
    border-radius: var(--card-radius);
    background: #e6f9ee;
    box-shadow: var(--shadow-sm);
}
.health-placeholder-box .ld-spinner {
    /* 複用既有的 spinner 樣式，加上絕對定位置中 */
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -60%);
    width: 32px; height: 32px;
    border: 3px solid #c8f0d8;
    border-top-color: var(--line-green);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
.health-placeholder-box span {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, 20px);
    color: var(--line-green);
    font-size: .85rem; font-weight: 600;
    white-space: nowrap;
}

/* ── 問卷面板 ── */
.survey-panel { display: none; flex-direction: column; padding: 24px 20px; gap: 16px; min-height: 100%; }
.survey-panel.visible { display: flex; }
.survey-panel h2 { font-size: 1.2rem; font-weight: 700; color: #222; display: flex; align-items: center; gap: 8px; }

.user-info-card {
	background: #fff; border-radius: var(--card-radius);
	padding: 14px 16px; box-shadow: var(--shadow-sm);
	display: flex; align-items: center; gap: 12px;
}
.user-info-card img,
.user-info-card .avatar-placeholder {
	width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
	background: var(--line-green);
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
}
.user-info-card .info { flex: 1; }
.user-info-card .info .name { font-weight: 700; color: #222; font-size: .95rem; }
.user-info-card .info .uid  { font-size: .72rem; color: #999; word-break: break-all; }
.user-info-card .badge {
	background: #e6f9ee; color: var(--line-green);
	font-size: .7rem; font-weight: 700; padding: 3px 8px;
	border-radius: 20px; white-space: nowrap;
}

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: .85rem; font-weight: 600; color: #444; }
.form-group input,
.form-group select,
.form-group textarea {
	border: 1.5px solid #e0e0e0; border-radius: 10px;
	padding: 11px 14px; font-size: .9rem; font-family: inherit;
	background: #fff; outline: none; transition: border-color .2s; color: #222;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--line-green); }
.form-group textarea { resize: vertical; min-height: 90px; }

.btn-submit {
	background: linear-gradient(135deg, #06C755, #00A846);
	color: #fff; border: none; border-radius: 12px;
	padding: 14px; font-size: 1rem; font-weight: 700;
	cursor: pointer; width: 100%; margin-top: 4px;
	box-shadow: 0 4px 14px rgba(6,199,85,.4);
	transition: opacity .2s, transform .1s;
}
.btn-submit:active   { opacity: .85; transform: scale(.98); }
.btn-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ── 相簿面板 ── */
.album-panel { display: none; flex-direction: column; height: 100%; }
.album-panel.visible { display: flex; }

.album-grid {
	flex: 1; overflow-y: auto; padding: 12px;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.album-grid .thumb {
	aspect-ratio: 1; border-radius: 8px; overflow: hidden;
	cursor: pointer; background: #e0e0e0;
	transition: transform .15s, box-shadow .15s;
}
.album-grid .thumb:active { transform: scale(.95); }
.album-grid .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-grid .thumb img.loading {
    /* 圖片尚未載入時，顯示綠色底色 + 旋轉動畫 */
    background: #e6f9ee;
    /* 用 CSS 漸層模擬旋轉光暈效果 */
    animation: thumbPulse 1.2s ease-in-out infinite;
}
@keyframes thumbPulse {
    0%,100% { opacity: .5; }
    50%      { opacity: 1;  }
}

/* ── 燈箱 ── */
.lightbox {
	display: none; position: fixed; inset: 0;
	background: rgba(0,0,0,.92); z-index: 500;
	flex-direction: column; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 94vw; max-height: 80vh; border-radius: 10px; object-fit: contain; }
.lightbox-close {
	position: absolute; top: 16px; right: 20px;
	color: #fff; font-size: 1.8rem; background: none; border: none;
	cursor: pointer; line-height: 1;
}
.lightbox-nav { display: flex; gap: 32px; margin-top: 20px; }
.lightbox-nav button {
	background: rgba(255,255,255,.15); border: none; color: #fff;
	font-size: 1.4rem; padding: 10px 18px; border-radius: 50px;
	cursor: pointer; transition: background .2s;
}
.lightbox-nav button:active { background: rgba(255,255,255,.3); }
.lightbox-counter { color: rgba(255,255,255,.6); font-size: .85rem; margin-top: 10px; }

/* ── 底部導覽列 ── */
.bottom-nav {
	position: fixed; bottom: 0; left: 0; right: 0;
	height: var(--nav-height); background: var(--nav-bg);
	display: flex; align-items: stretch;
	border-top: 1px solid #e8e8e8;
	box-shadow: 0 -4px 16px rgba(0,0,0,.07); z-index: 200;
}
.nav-btn {
	flex: 1; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 4px;
	background: transparent; border: none; cursor: pointer;
	padding: 8px 4px; position: relative;
	-webkit-tap-highlight-color: transparent;
	transition: background var(--transition);
}
.nav-btn::before {
	content: ''; position: absolute; inset: 6px 8px;
	border-radius: 12px; background: transparent;
	transition: background var(--transition);
}
.nav-btn:active::before { background: rgba(6,199,85,.12); }
.nav-btn .nav-icon {
	font-size: 1.3rem; color: var(--text-muted);
	transition: color var(--transition), transform var(--transition);
	position: relative; z-index: 1;
}
.nav-btn .nav-label {
	font-size: .68rem; color: var(--text-muted); font-weight: 500;
	transition: color var(--transition); position: relative; z-index: 1;
	letter-spacing: .02em;
}
.nav-btn.active .nav-icon  { color: var(--active-color); transform: translateY(-2px); }
.nav-btn.active .nav-label { color: var(--active-color); font-weight: 700; }
.nav-btn.active::after {
	content: ''; position: absolute; top: 0; left: 20%; right: 20%;
	height: 3px; background: var(--active-color);
	border-radius: 0 0 4px 4px;
}

/* ── Toast ── */
.toast {
	position: fixed; bottom: calc(var(--nav-height) + 16px); left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: rgba(0,0,0,.75); color: #fff;
	padding: 10px 20px; border-radius: 24px; font-size: .85rem;
	white-space: nowrap; opacity: 0;
	transition: opacity .3s, transform .3s; z-index: 999; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 載入畫面 ── */
#loading-screen {
	position: fixed; inset: 0;
	background: linear-gradient(135deg, #06C755 0%, #00A846 100%);
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 16px;
	z-index: 9999; transition: opacity .5s;
}
#loading-screen.hide { opacity: 0; pointer-events: none; }
#loading-screen .ld-icon {
	width: 72px; height: 72px; background: rgba(255,255,255,.2);
	border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
#loading-screen .ld-icon i { font-size: 2rem; color: #fff; }
#loading-screen p { color: rgba(255,255,255,.9); font-size: .95rem; }
#loading-screen .ld-spinner {
	width: 36px; height: 36px;
	border: 3px solid rgba(255,255,255,.3); border-top-color: #fff;
	border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 480px) {
	.app-header, .content-area, .bottom-nav {
		max-width: 480px; left: 50%;
		transform: translateX(-50%); right: auto; width: 100%;
	}
}