:root{
	--tr-accent:#f97316;
	--tr-text:#111827;
	--tr-muted:#6b7280;
	--tr-line:#e5e7eb;
	--tr-bg:#f9fafb;
}

*{box-sizing:border-box}

html,body{margin:0;background:var(--tr-bg);color:var(--tr-text)}

.trainings-body{
	font-family:"Noto Sans TC","Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html[lang^="en"] .trainings-body{
	font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
}

.tr-page{
	position:relative;
	max-width:100%;
	min-height:100vh;
	margin:0 auto;
	background:#fff;
	padding-bottom:82px;
}

.tr-statusbar{
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	height:44px;
	padding:0 28px;
	font-size:13px;
	font-weight:700;
}

.tr-statusbar__notch{
	width:118px;
	height:30px;
	border-radius:999px;
	background:#171717;
}

.tr-statusbar__signal{
	justify-self:end;
	width:16px;
	height:12px;
	display:block;
}

.tr-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:12px 16px 13px;
	position:sticky;
	top:0;
	z-index:5;
	border-bottom:1px solid var(--tr-line);
}

.tr-brand{
	display:flex;
	align-items:center;
	gap:8px;
	min-width:0;
}

.tr-brand__logo{height:30px;width:auto;display:block;flex:0 0 auto}

.tr-avatar{
	width:32px;
	height:32px;
	border-radius:999px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--tr-accent);
	color:#fff;
	font-size:13px;
	font-weight:700;
	overflow:hidden;
}

.tr-avatar.has-image{background:#fff}

.tr-avatar img{width:100%;height:100%;display:block;object-fit:cover}

.tr-avatar.is-blue{background:#1d4ed8}

.tr-avatar.is-green{background:#047857}

.tr-avatar.is-purple{background:#7c3aed}

.tr-main{padding:14px 16px 16px}

.tr-intro h1{
	margin:0;
	font-size:24px;
	line-height:1.2;
	font-weight:900;
	color:#111827;
}

.tr-intro p{
	margin:6px 0 0;
	font-size:15px;
	line-height:1.4;
	font-weight:400;
	color:var(--tr-muted);
}

.tr-toggle-row{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:0;
	max-width:100%;
	margin:20px auto 0;
	padding:5px;
	border-radius:14px;
	background:#f1f5f9;
}

.tr-toggle{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:40px;
	border:0;
	border-radius:10px;
	background:transparent;
	color:#64748b;
	font-size:14px;
	font-weight:700;
	transition: all 0.2s ease;
}

.tr-toggle__icon{
	font-size: 18px;
	line-height: 1;
}

.tr-toggle.is-active{
	background:#fff;
	box-shadow:0 2px 8px rgba(0,0,0,.08);
	color:var(--tr-accent);
}

.tr-stats-row{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:12px;
	margin-top:20px;
}

.tr-stat{
	padding:16px 8px;
	border:1px solid #f1f5f9;
	border-radius:16px;
	text-align:center;
	background:#fff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.tr-stat strong{
	display:block;
	font-size:22px;
	font-weight:900;
	color:var(--tr-accent);
}

.tr-stat span{
	display:block;
	margin-top:4px;
	font-size:12px;
	font-weight:500;
	color:var(--tr-muted);
}

.tr-section{margin-top:24px}

.tr-section h2{
	margin:0 0 14px;
	font-size:17px;
	font-weight:900;
	color:#111827;
}

.tr-session-list{display:grid;gap:14px}

.tr-session-card{
	display:flex;
	gap:14px;
	align-items:center;
	padding:16px;
	border:1px solid #f1f5f9;
	border-radius:16px;
	background:#fff;
	box-shadow: 0 4px 15px rgba(0,0,0,0.04);
	transition: transform 0.2s ease;
}

.tr-session-card:active{
	transform: scale(0.98);
}

.tr-session-card__icon-wrap{
	width:52px;
	height:52px;
	border-radius:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fffaf0;
	flex:0 0 52px;
	border: 1px solid #fff4e5;
}

.tr-session-card__icon{width:26px;height:26px;display:block}

.tr-session-card__content{min-width:0;flex:1 1 auto}

.tr-session-card__content h3{
	margin:0;
	font-size:15px;
	font-weight:800;
	line-height:1.4;
	color:#111827;
}

.tr-session-card__org{
	margin:2px 0 0;
	font-size:13px;
	line-height:1.4;
	color:var(--tr-muted);
}

.tr-session-card__meta{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	margin-top:8px;
	font-size:12px;
	font-weight:500;
	color:#94a3b8;
}

.tr-session-card__meta span{
	display:inline-flex;
	align-items:center;
	gap:6px;
}

.tr-session-card__meta img{width:15px;height:15px;display:block;opacity: 0.6}

.tr-primary-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width:100%;
	margin-top:24px;
	border:0;
	height:50px;
	border-radius:14px;
	padding:0 20px;
	background:var(--tr-accent);
	color:#fff;
	font-size:16px;
	font-weight:800;
	box-shadow: 0 6px 20px rgba(249,115,22,0.25);
	text-decoration: none;
}

.tr-bottom-nav{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	max-width:100%;
	height:70px;
	margin:0 auto;
	display:grid;
	grid-template-columns:repeat(5,minmax(0,1fr));
	align-items:center;
	padding:0;
	background:#fff;
	border-top:1px solid var(--tr-line);
}

.tr-bottom-nav a{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:3px;
	color:#9ca3af;
	text-decoration:none;
	font-size:10px;
	line-height:1.2;
}

.tr-bottom-nav a img{width:20px;height:20px;display:block}

.tr-bottom-nav a.is-active{color:var(--tr-accent);font-weight:700}

.tr-bottom-nav__plus span{
	display:flex;
	align-items:center;
	justify-content:center;
	width:46px;
	height:46px;
	border-radius:999px;
	background:var(--tr-accent);
	box-shadow:0 8px 18px rgba(249,115,22,.3);
}

.tr-bottom-nav__plus img{width:22px;height:22px}

/* ---- attendance section embedded in trainings ---- */
.tr-attendance-section {
	margin-top: 24px;
}

.tr-attendance-divider {
	height: 8px;
	background: var(--tr-bg);
	margin: 0 -16px 2px;
}

.tr-attendance-section h2 {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 900;
	color: #111827;
}

/* Adjust ma-banner & ma-list to sit inside .tr-main padding */
.tr-attendance-section .ma-banner {
	margin-bottom: 16px;
}

.tr-attendance-section .ma-list {
	margin-top: 0;
	gap: 14px;
	display: flex;
	flex-direction: column;
}

/* Rating row inside attendance cards */
.ma-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed var(--tr-line);
}

.ma-card__stars {
	color: #F5A623;
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 1;
}

.ma-card__score {
	font-weight: 700;
	font-size: 14px;
	color: var(--tr-text);
}

.ma-card__count {
	color: var(--tr-muted);
	font-size: 12px;
}

@media (min-width: 768px) {
	body.trainings-body {
		background: var(--tr-bg);
	}

	.tr-page {
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.tr-bottom-nav {
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
		transform: none;
	}
}