vueapp/pages/profile/profile.vue

<template>
	<view class="profile-page">
		<view class="profile-shell">
			<view class="top-app-bar">
				<button class="top-button" aria-label="首页" @click="emit('go-home')">
					<view class="menu-icon"></view>
				</button>
				<text class="page-title">个人中心</text>
				<button class="top-button" aria-label="设置" @click="emit('open-settings')">
					<view class="settings-icon"></view>
				</button>
			</view>

			<scroll-view class="profile-scroll" scroll-y>
				<view class="profile-content">
					<view class="user-card">
						<view class="avatar-wrap">
							<image class="avatar-image" src="/static/config-doctor.png" mode="aspectFill"></image>
							<text class="pro-badge">PRO</text>
						</view>

						<view class="user-copy">
							<text class="doctor-name">陈伟 医生</text>
							<view class="tag-row">
								<text class="tag primary-tag">第二阶段规培</text>
								<text class="tag secondary-tag">心内科</text>
							</view>
							<view class="meta-grid">
								<view
									v-for="item in profileMeta"
									:key="item.label"
									class="meta-item"
								>
									<view class="meta-icon" :class="item.icon"></view>
									<text>{{ item.label }}</text>
								</view>
							</view>
						</view>
					</view>

					<view class="section-block">
						<view class="section-title-row">
							<text class="section-title">专注状态与荣誉墙</text>
						</view>

						<view class="mood-card">
							<view>
								<text class="sub-label">今日学习状态</text>
								<text class="mood-title">{{ activeMoodLabel }}</text>
							</view>
							<view class="mood-actions">
								<button
									v-for="mood in moods"
									:key="mood.id"
									class="mood-button"
									:class="{ active: activeMood === mood.id }"
									:aria-label="mood.label"
									@click="activeMood = mood.id"
								>
									<view class="mood-icon" :class="mood.icon"></view>
								</button>
							</view>
						</view>

						<view class="medal-card">
							<view class="medal-head">
								<text class="sub-label">勋章墙</text>
								<button class="text-link" @click="showToast('勋章墙详情即将开放')">查看全部 (12)</button>
							</view>
							<view class="medal-list">
								<view
									v-for="medal in medals"
									:key="medal.label"
									class="medal-item"
								>
									<view class="medal-circle" :class="medal.tone">
										<view class="medal-icon" :class="medal.icon"></view>
									</view>
									<text>{{ medal.label }}</text>
								</view>
							</view>
						</view>
					</view>

					<view class="action-stack">
						<button
							v-for="entry in actionEntries"
							:key="entry.title"
							class="entry-card"
							:class="entry.tone"
							@click="handleAction(entry)"
						>
							<view class="entry-main">
								<view class="entry-icon-wrap">
									<view class="entry-icon" :class="entry.icon"></view>
								</view>
								<view class="entry-copy">
									<text class="entry-title">{{ entry.title }}</text>
									<text class="entry-desc">{{ entry.desc }}</text>
								</view>
							</view>
							<view class="chevron-icon"></view>
						</button>
					</view>

					<view class="section-block">
						<text class="section-title">临床核心能力指标</text>
						<view class="metric-grid">
							<view
								v-for="metric in metrics"
								:key="metric.label"
								class="metric-card"
							>
								<text class="sub-label">{{ metric.label }}</text>
								<view class="metric-value-row">
									<text class="metric-value">{{ metric.value }}</text>
									<text v-if="metric.badge" class="metric-badge">{{ metric.badge }}</text>
									<text v-if="metric.unit" class="metric-unit">{{ metric.unit }}</text>
									<view v-if="metric.progress" class="mini-progress">
										<view class="mini-progress-fill" :style="{ width: metric.progress }"></view>
									</view>
									<view v-if="metric.trending" class="trend-icon"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="toast" :class="{ visible: toastVisible }">{{ toastMessage }}</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed, onUnmounted, ref } from 'vue'

const emit = defineEmits<{
	(event: 'open-settings'): void
	(event: 'go-home'): void
}>()

const activeMood = ref('focused')
const toastMessage = ref('')
const toastVisible = ref(false)

let toastTimer: ReturnType<typeof setTimeout> | null = null

const profileMeta = [
	{ label: '北京', icon: 'location-icon' },
	{ label: '北大医学部', icon: 'school-icon' },
	{ label: '2022级硕士', icon: 'calendar-icon' },
	{ label: '3年从业经验', icon: 'timer-icon' }
]

const moods = [
	{ id: 'steady', label: '平稳专注', icon: 'satisfied-icon' },
	{ id: 'focused', label: '专注度极高', icon: 'bolt-icon' },
	{ id: 'mindful', label: '沉浸复盘', icon: 'self-icon' }
]

const medals = [
	{ label: '首席诊断师', icon: 'premium-icon', tone: 'tertiary' },
	{ label: '极速响应者', icon: 'medical-icon', tone: 'secondary' },
	{ label: '病例专家', icon: 'history-icon', tone: 'primary' }
]

type ActionEntry = {
	title: string
	desc: string
	icon: string
	tone: string
	route?: string
	toast?: string
}

const actionEntries: ActionEntry[] = [
	{
		title: '我的训练记录',
		desc: '临床实战数据详细分析',
		icon: 'analytics-icon',
		tone: 'record',
		route: '/pages/profile/profile-records'
	},
	{
		title: '智能分析',
		desc: '基于AI的临床能力深度洞察',
		icon: 'insights-icon',
		tone: 'analysis',
		route: '/pages/profile/profile-analysis'
	}
]

const metrics = [
	{ label: '已完成病例', value: '12', badge: '本周 +2' },
	{ label: '累计训练时长', value: '128', unit: '小时' },
	{ label: '平均分', value: '85.5', progress: '85%' },
	{ label: '诊断准确率', value: '92%', trending: true }
]

const activeMoodLabel = computed(() => {
	return moods.find(item => item.id === activeMood.value)?.label || '专注度极高'
})

function showToast(message: string) {
	if (toastTimer) clearTimeout(toastTimer)
	toastMessage.value = message
	toastVisible.value = true
	uni.showToast({
		title: message,
		icon: 'none'
	})
	toastTimer = setTimeout(() => {
		toastVisible.value = false
	}, 2200)
}

function handleAction(entry: ActionEntry) {
	if (entry.route) {
		uni.navigateTo({
			url: entry.route
		})
		return
	}

	showToast(entry.toast || '功能即将开放')
}

onUnmounted(() => {
	if (toastTimer) clearTimeout(toastTimer)
})
</script>

<style scoped>
page {
	min-height: 100%;
	background: #f9f9ff;
}

.profile-page {
	min-height: 100vh;
	background: #f9f9ff;
	color: #191c21;
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
	-webkit-tap-highlight-color: transparent;
}

.profile-shell {
	position: relative;
	width: 380px;
	max-width: 100vw;
	min-height: 922px;
	margin: 0 auto;
	background: #f9f9ff;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.profile-page view,
.profile-page text,
.profile-page button,
.profile-page scroll-view {
	box-sizing: border-box;
}

.profile-page ::-webkit-scrollbar {
	width: 0;
	height: 0;
	background: transparent;
}

.top-app-bar {
	position: sticky;
	top: 0;
	z-index: 50;
	height: 56px;
	padding: 0 20px;
	border-bottom: 1px solid #c2c6d4;
	background: #f9f9ff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
}

.page-title {
	color: #00478d;
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: 0;
}

.top-button,
.mood-button,
.text-link,
.entry-card {
	padding: 0;
	border: 0;
	background: transparent;
}

.top-button::after,
.mood-button::after,
.text-link::after,
.entry-card::after {
	border: 0;
}

.top-button {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
}

.top-button:active {
	background: #ecedf6;
	transform: scale(0.96);
}

.profile-scroll {
	flex: 1 1 auto;
	min-height: 0;
}

.profile-content {
	padding: 24px 20px 96px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.user-card,
.mood-card,
.medal-card,
.entry-card,
.metric-card {
	border: 1px solid #c2c6d4;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(25, 28, 33, 0.04);
}

.user-card {
	padding: 16px;
	background: #ffffff;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.avatar-wrap {
	position: relative;
	width: 80px;
	height: 80px;
	flex: 0 0 auto;
}

.avatar-image {
	width: 80px;
	height: 80px;
	border: 2px solid #005eb8;
	border-radius: 50%;
}

.pro-badge {
	position: absolute;
	right: -4px;
	bottom: -4px;
	padding: 2px 6px;
	border-radius: 12px;
	background: #00478d;
	color: #ffffff;
	font-size: 10px;
	line-height: 14px;
	font-weight: 700;
}

.user-copy {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.doctor-name {
	color: #191c21;
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
}

.tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.tag {
	padding: 2px 8px;
	border-radius: 2px;
	font-size: 10px;
	line-height: 14px;
	font-weight: 700;
	letter-spacing: 0;
}

.primary-tag {
	background: #d6e3ff;
	color: #001b3d;
}

.secondary-tag {
	background: #7df4ff;
	color: #002022;
}

.meta-grid {
	margin-top: 8px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 16px;
	color: #424752;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
}

.section-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.section-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.section-title {
	color: #191c21;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 0;
}

.mood-card {
	padding: 16px;
	background: #f2f3fb;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sub-label {
	color: #424752;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
}

.mood-title {
	display: block;
	margin-top: 4px;
	color: #00478d;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
}

.mood-actions {
	display: flex;
	gap: 8px;
}

.mood-button {
	width: 40px;
	height: 40px;
	border: 1px solid #c2c6d4;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(25, 28, 33, 0.05);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mood-button.active {
	border-color: #00478d;
	background: #005eb8;
	box-shadow: 0 2px 8px rgba(0, 71, 141, 0.2);
}

.mood-button:active,
.entry-card:active {
	transform: scale(0.96);
}

.medal-card {
	padding: 16px;
	background: #ffffff;
	overflow: hidden;
}

.medal-head {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.text-link {
	color: #00478d;
	font-size: 10px;
	line-height: 14px;
	font-weight: 700;
}

.medal-list {
	padding: 0 8px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.medal-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: #191c21;
	font-size: 10px;
	line-height: 14px;
	font-weight: 700;
}

.medal-circle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 1px 4px rgba(25, 28, 33, 0.12);
}

.medal-circle.tertiary {
	border: 2px solid #793100;
	background: #ffdbcb;
}

.medal-circle.secondary {
	border: 2px solid #006970;
	background: #7af1fc;
}

.medal-circle.primary {
	border: 2px solid #00478d;
	background: #d6e3ff;
}

.action-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.entry-card {
	width: 100%;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: left;
}

.entry-card.record {
	border-color: #727783;
	background: #e1e2ea;
}

.entry-card.analysis {
	border-color: #c2c6d4;
	background: #ffffff;
}

.entry-main {
	display: flex;
	align-items: center;
	gap: 16px;
}

.entry-icon-wrap {
	width: 40px;
	height: 40px;
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.record .entry-icon-wrap {
	background: #00478d;
}

.analysis .entry-icon-wrap {
	background: #7af1fc;
}

.entry-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.entry-title {
	color: #191c21;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

.entry-desc {
	color: #424752;
	font-size: 11px;
	line-height: 16px;
}

.metric-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.metric-card {
	min-height: 104px;
	padding: 16px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.metric-value-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-height: 34px;
}

.metric-value {
	color: #00478d;
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
}

.metric-badge {
	padding: 1px 4px;
	border-radius: 2px;
	background: #7af1fc;
	color: #006e75;
	font-size: 10px;
	line-height: 14px;
}

.metric-unit {
	color: #424752;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
}

.mini-progress {
	width: 32px;
	height: 4px;
	border-radius: 999px;
	background: #d8dae2;
	overflow: hidden;
}

.mini-progress-fill {
	height: 100%;
	border-radius: inherit;
	background: #00478d;
}

.menu-icon,
.settings-icon,
.meta-icon,
.mood-icon,
.medal-icon,
.entry-icon,
.chevron-icon,
.trend-icon {
	background: #00478d;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

.menu-icon,
.settings-icon {
	width: 24px;
	height: 24px;
}

.menu-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M3%206h18v2H3V6zm0%205h18v2H3v-2zm0%205h18v2H3v-2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M3%206h18v2H3V6zm0%205h18v2H3v-2zm0%205h18v2H3v-2z'/%3E%3C/svg%3E");
}

.settings-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19.43%2012.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.37-.31-.6-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98L14.5%202.42C14.47%202.18%2014.25%202%2014%202h-4c-.25%200-.46.18-.5.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.08-.48%200-.6.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.08.65-.08.98s.03.66.08.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.37.31.6.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.04.24.25.42.5.42h4c.25%200%20.46-.18.5-.42l.38-2.65c.61-.25%201.17-.58%201.69-.98l2.49%201c.23.08.48%200%20.6-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5A3.5%203.5%200%201%201%2012%208a3.5%203.5%200%200%201%200%207.5z'/%3E%3C/svg%3E");
}

.meta-icon {
	width: 14px;
	height: 14px;
	background: #424752;
	flex: 0 0 auto;
}

.location-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a7%207%200%200%200-7%207c0%205.25%207%2013%207%2013s7-7.75%207-13a7%207%200%200%200-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206a2.5%202.5%200%200%201%200%205.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a7%207%200%200%200-7%207c0%205.25%207%2013%207%2013s7-7.75%207-13a7%207%200%200%200-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206a2.5%202.5%200%200%201%200%205.5z'/%3E%3C/svg%3E");
}

.school-icon,
.premium-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%203L1%209l11%206%209-4.91V17h2V9L12%203zm0%2014L5%2013.18V17l7%204%207-4v-3.82L12%2017z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%203L1%209l11%206%209-4.91V17h2V9L12%203zm0%2014L5%2013.18V17l7%204%207-4v-3.82L12%2017z'/%3E%3C/svg%3E");
}

.calendar-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M7%202h2v2h6V2h2v2h3a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h3V2zm13%208H4v10h16V10z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M7%202h2v2h6V2h2v2h3a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h3V2zm13%208H4v10h16V10z'/%3E%3C/svg%3E");
}

.timer-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M15%201h-6v2h6V1zm-2%2012V7h-2v7h5v-2h-3zm-1-9a9%209%200%201%200%200%2018%209%209%200%200%200%200-18z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M15%201h-6v2h6V1zm-2%2012V7h-2v7h5v-2h-3zm-1-9a9%209%200%201%200%200%2018%209%209%200%200%200%200-18z'/%3E%3C/svg%3E");
}

.mood-icon {
	width: 22px;
	height: 22px;
	background: #424752;
}

.mood-button.active .mood-icon {
	background: #ffffff;
}

.satisfied-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zM8%209.5A1.5%201.5%200%201%201%208%206.5a1.5%201.5%200%200%201%200%203zm8%200a1.5%201.5%200%201%201%200-3%201.5%201.5%200%200%201%200%203zM12%2017.5A5.5%205.5%200%200%201%206.8%2014h10.4a5.5%205.5%200%200%201-5.2%203.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zM8%209.5A1.5%201.5%200%201%201%208%206.5a1.5%201.5%200%200%201%200%203zm8%200a1.5%201.5%200%201%201%200-3%201.5%201.5%200%200%201%200%203zM12%2017.5A5.5%205.5%200%200%201%206.8%2014h10.4a5.5%205.5%200%200%201-5.2%203.5z'/%3E%3C/svg%3E");
}

.bolt-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M7%202v11h3v9l7-12h-4l4-8H7z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M7%202v11h3v9l7-12h-4l4-8H7z'/%3E%3C/svg%3E");
}

.self-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a3%203%200%201%201%200%206%203%203%200%200%201%200-6zm-7%2018c1-3.5%203.2-6%207-6s6%202.5%207%206h-2.2c-.8-2.1-2.3-4-4.8-4s-4%201.9-4.8%204H5zm-2-7l4-3%201.2%201.6L5%2014h4v2H3v-3zm18%200v3h-6v-2h4l-3.2-2.4L17%2010l4%203z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M12%202a3%203%200%201%201%200%206%203%203%200%200%201%200-6zm-7%2018c1-3.5%203.2-6%207-6s6%202.5%207%206h-2.2c-.8-2.1-2.3-4-4.8-4s-4%201.9-4.8%204H5zm-2-7l4-3%201.2%201.6L5%2014h4v2H3v-3zm18%200v3h-6v-2h4l-3.2-2.4L17%2010l4%203z'/%3E%3C/svg%3E");
}

.medal-icon {
	width: 28px;
	height: 28px;
}

.tertiary .medal-icon {
	background: #793100;
}

.secondary .medal-icon {
	background: #006970;
}

.primary .medal-icon {
	background: #00478d;
}

.medical-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19%203h-3.18C15.4%201.84%2014.3%201%2013%201h-2C9.7%201%208.6%201.84%208.18%203H5a2%202%200%200%200-2%202v15a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V5a2%202%200%200%200-2-2zm-8%200h2v2h-2V3zm4%2010h-2v2h-2v-2H9v-2h2V9h2v2h2v2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M19%203h-3.18C15.4%201.84%2014.3%201%2013%201h-2C9.7%201%208.6%201.84%208.18%203H5a2%202%200%200%200-2%202v15a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V5a2%202%200%200%200-2-2zm-8%200h2v2h-2V3zm4%2010h-2v2h-2v-2H9v-2h2V9h2v2h2v2z'/%3E%3C/svg%3E");
}

.history-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8l-6-6zm0%207V3.5L18.5%209H14zm-2%209l-4-4%201.41-1.41L12%2015.17l4.59-4.59L18%2012l-6%206z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8l-6-6zm0%207V3.5L18.5%209H14zm-2%209l-4-4%201.41-1.41L12%2015.17l4.59-4.59L18%2012l-6%206z'/%3E%3C/svg%3E");
}

.entry-icon {
	width: 24px;
	height: 24px;
}

.record .entry-icon {
	background: #ffffff;
}

.analysis .entry-icon {
	background: #006e75;
}

.analytics-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M3%203h2v18H3V3zm16%207h2v11h-2V10zM8%2013h2v8H8v-8zm5-6h2v14h-2V7z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M3%203h2v18H3V3zm16%207h2v11h-2V10zM8%2013h2v8H8v-8zm5-6h2v14h-2V7z'/%3E%3C/svg%3E");
}

.insights-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%2022h6v-2H9v2zm3-20a7%207%200%200%200-4%2012.74V17a1%201%200%200%200%201%201h6a1%201%200%200%200%201-1v-2.26A7%207%200%200%200%2012%202zm2.85%2011.1l-.85.57V16h-4v-2.33l-.85-.57A5%205%200%201%201%2014.85%2013.1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M9%2022h6v-2H9v2zm3-20a7%207%200%200%200-4%2012.74V17a1%201%200%200%200%201%201h6a1%201%200%200%200%201-1v-2.26A7%207%200%200%200%2012%202zm2.85%2011.1l-.85.57V16h-4v-2.33l-.85-.57A5%205%200%201%201%2014.85%2013.1z'/%3E%3C/svg%3E");
}

.chevron-icon {
	width: 24px;
	height: 24px;
	background: #424752;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%206L8.59%207.41%2013.17%2012l-4.58%204.59L10%2018l6-6-6-6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M10%206L8.59%207.41%2013.17%2012l-4.58%204.59L10%2018l6-6-6-6z'/%3E%3C/svg%3E");
	transition: transform 0.2s ease;
}

.entry-card:active .chevron-icon {
	transform: translateX(4px);
}

.trend-icon {
	width: 16px;
	height: 16px;
	background: #006e75;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M16%206l2.29%202.29-4.88%204.88-4-4L2%2016.59%203.41%2018l6-6%204%204%206.3-6.29L22%2012V6h-6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M16%206l2.29%202.29-4.88%204.88-4-4L2%2016.59%203.41%2018l6-6%204%204%206.3-6.29L22%2012V6h-6z'/%3E%3C/svg%3E");
}

.toast {
	position: fixed;
	left: 50%;
	bottom: 96px;
	z-index: 100;
	max-width: 300px;
	padding: 10px 18px;
	border-radius: 12px;
	background: #2e3037;
	color: #eff0f8;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, 16px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (min-width: 768px) {
	.profile-page {
		display: flex;
		justify-content: center;
		background: #d8dae2;
	}

	.profile-shell {
		box-shadow: 0 24px 64px rgba(25, 28, 33, 0.18);
		border-left: 1px solid #c2c6d4;
		border-right: 1px solid #c2c6d4;
	}
}
</style>