/* ==========================================
	   DSE Result 全域樣式與配色基底
	   ========================================== */
		
		/* 網頁主包裝 */
		.dse-page-wrapper {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Space Grotesk", "Microsoft JhengHei", sans-serif;
			background-color: #f6f5f3;
			color: #2b2623;
			line-height: 1.6;
			margin: 0;
			padding: 30px 20px;
			display: flex;
			align-items: center;
          /*
          
          */
          
			width: 100%;
			max-width: 1080px;
			display: flex;
			flex-direction: column;
			gap: 25px;
		}

		/* 通用方塊卡片基礎 */
		.content-block {
			background-color: #ffffff;
			border: 1px solid #e2deda;
			border-radius: 8px;
			padding: 35px 40px;
			box-sizing: border-box;
			position: relative;
		}

		/* ==========================================
		   方塊一：頂部標題與前言
		   ========================================== */
		.school-title {
			color: #003366;
			font-size: 20px;
			margin: 0 0 5px 0;
			font-weight: bold;
		}
		.page-title {
			color: #003366;
			font-size: 32px;
			font-weight: 800;
			margin: 0 0 20px 0;
			position: relative;
			padding-bottom: 15px;
		}
		.page-title::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 70px;
			height: 4px;
			background-color: #cc9933;
			border-radius: 2px;
		}
		.intro-box {
			background-color: #fdfbf7;
			border-left: 4px solid #cc9933;
			padding: 18px 20px;
			border-radius: 0 6px 6px 0;
			font-size: 15px;
			color: #433e3a;
		}

		/* ==========================================
		   方塊二：核心數據 4 大卡片 (2x2)
		   ========================================== */
		.block-stats-grid {
			padding: 0;
			background: transparent;
			border: none;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 16px;
		}
		.stat-card {
			border-radius: 16px;
			padding: 22px 24px 24px 24px;
			color: #ffffff;
			box-sizing: border-box;
			min-height: 145px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.card-purple { background-color: #b983d6; }
		.card-orange { background-color: #fca441; }
		.card-pink { background-color: #f3828c; }
		.card-blue { background-color: #5da8d1; }

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}
		.card-title {
			font-size: 14px;
			font-weight: bold;
			margin: 0;
			opacity: 0.95;
		}
		.card-icon {
			width: 20px;
			height: 20px;
			opacity: 0.85;
		}
		.main-number {
			font-size: 38px;
			font-weight: 800;
			letter-spacing: -0.5px;
			display: inline-block;
		}
		.comparison-text {
			font-size: 16px;
			font-weight: bold;
			margin-left: 6px;
			opacity: 0.9;
			display: inline-block;
			vertical-align: baseline;
		}
		.card-description {
			font-size: 11px;
			line-height: 1.5;
			margin-top: 8px;
			opacity: 0.85;
		}

		/* ==========================================
		   方塊三：升學路向與醫學院焦點
		   ========================================== */
		.section-label-en {
			color: #d86d38;
			font-size: 13px;
			font-weight: bold;
			letter-spacing: 1.5px;
			margin-bottom: 8px;
			text-transform: uppercase;
			display: block;
		}
		.section-main-title {
			font-size: 26px;
			font-weight: bold;
			color: #2b2623;
			margin: 0 0 20px 0;
		}
		.pathway-text {
			font-size: 14.5px;
			color: #433e3a;
			line-height: 1.7;
			margin-bottom: 25px;
			text-align: justify;
		}
		.medical-focus-container {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
		}
		.uni-badge-card {
			background-color: #f4f7f9;
			border-left: 4px solid #3b7c96;
			border-radius: 6px;
			padding: 20px 24px;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			align-items: center;
			gap: 20px;
		}
		.uni-logo-img {
			width: 58px;
			height: 58px;
			object-fit: contain;
			flex-shrink: 0;
		}
		.uni-badge-card > p{
			grid-column: span 2;
			margin: 0;
			color: #3b7c96;
			font-size: 13px;
			font-weight: 700;
		}
		.uni-details h4 {
			margin: 0 0 4px 0;
			color: #2b2623;
			font-size: 17px;
			font-weight: bold;
		}
		.uni-details p {
			margin: 0;
			color: #3b7c96;
			font-size: 13px;
			font-weight: 700;
		}

		/* ==========================================
		   方塊四：8大院校聯招圓環圖
		   ========================================== */
		.chart-border-box {
			border: 1px solid #c9c0b5;
			border-radius: 4px;
			padding: 25px 20px;
			background-color: #ffffff;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.chart-subtitle-box {
			width: 100%;
			text-align: left;
			padding-left: 15px;
			margin-bottom: 30px;
			color: #2b2623;
			line-height: 1.4;
		}
		.sub-en { font-size: 14px; font-weight: 500; display: block; }
		.sub-zh { font-size: 15px; font-weight: bold; display: block; margin-top: 2px; }

		.chart-main-layout {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 40px;
			width: 100%;
			flex-wrap: wrap;
		}
		.donut-wrapper {
			position: relative;
			width: 220px;
			height: 220px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
		}
		.donut-graphic {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: conic-gradient(
				#cc9933 0% 20%,       /* HKU: 20% */
				#cc3355 20% 52%,      /* CUHK: 32% */
				#9966cc 52% 56%,      /* HKUST: 4% */
				#3388bb 56% 68%,      /* PolyU: 12% */
				#772277 68% 82%,      /* CityUHK: 14% */
				#449944 82% 91%,      /* HKBU: 9% */
				#112233 91% 100%      /* LingnanU: 9% */
			);
		}
		.donut-center-hole {
			position: absolute;
			width: 50%;
			height: 50%;
			background-color: #ffffff;
			border-radius: 50%;
			z-index: 2;
		}
		.legend-panel {
			display: flex;
			flex-direction: column;
			gap: 6px;
			flex: 1;
			min-width: 220px;
		}
		.legend-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 6px 12px;
			border-radius: 4px;
			background-color: #faf9f6;
			border: 1px solid #eae7e2;
		}
		.legend-left-group { display: flex; align-items: center; gap: 10px; }
		.color-indicator { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
		.text-uni { font-size: 13px; font-weight: 700; color: #433e3a; }
		.text-percent { font-size: 14px; font-weight: 800; }
		
		.color-indicator.hku { background-color: #cc9933; color: #cc9933; }
		.color-indicator.cuhk { background-color: #cc3355; color: #cc3355; }
		.color-indicator.hkust { background-color: #9966cc; color: #9966cc; }
		.color-indicator.polyu { background-color: #3388bb; color: #3388bb; }
		.color-indicator.cityu { background-color: #772277; color: #772277; }
		.color-indicator.hkbu { background-color: #449944; color: #449944; }
		.color-indicator.lingnan { background-color: #112233; color: #112233; }
		.color-indicator.kyd { background-color: #e27d42; color: #e27d42; }
		.color-indicator.day-school { background-color: #3b7c96; color: #3b7c96; }		


		.hku { color: #cc9933; }
		.cuhk { color: #cc3355; }
		.hkust { color: #9966cc; }
		.polyu { color: #3388bb; }
		.cityu { color: #772277; }
		.hkbu { color: #449944; }
		.lingnan { color: #112233; }

		.chart-main-layout .donut-wrapper, 
		.chart-main-layout .legend-panel {
			display: none;
		}
		.chart-main-layout .donut-img{
			display: block;
		}

		/* ==========================================
		   方塊五：各科考獲 Level 4 或以上圖表
		   ========================================== */
		.chart-border-box-bars {
			border: 1px solid #c9c0b5;
			border-radius: 4px;
			padding: 30px 30px 20px 20px;
			position: relative;
			background-color: #ffffff;
			margin-top: 15px;
		}
		.chart-main-bars {
			display: flex;
			flex-direction: column;
			gap: 9px;
			position: relative;
			z-index: 2;
		}
		.chart-row-bars {
			display: flex;
			align-items: center;
			height: 32px;
		}
		.subject-label {
			width: 210px;
			color: #433e3a;
			font-size: 13px;
			font-weight: 700;
			padding-right: 15px;
			box-sizing: border-box;
			/*white-space: nowrap;*/
			overflow-wrap: break-word;
		}
		.bars-container {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 3px;
			height: 100%;
			position: relative;
			left: -8px;
		}
		.bar {
			height: 8px;
			border-radius: 0 1px 1px 0;
		}
		.bar.kyd { background-color: #e27d42; }
		.bar.day-school { background-color: #3b7c96; }

		.grid-overlay {
			position: absolute;
			top: 0; left: 210px; right: 40px; bottom: 20px; margin-left:10px;
			pointer-events: none;
		}
		.grid-labels {
			position: absolute;
			top: -22px; left: 0; right: 0; height: 20px;
		}
		.grid-label-num {
			position: absolute;
			transform: translateX(-50%);
			font-size: 11px;
			font-weight: bold;
			color: #8c857f;
		}
		.grid-lines {
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
		}
		.grid-line {
			position: absolute;
			top: 0; bottom: 0;
			border-left: 1px dashed #d1cac2;
		}
		.legend-container-bars {
			display: flex;
			justify-content: flex-end;
			gap: 20px;
			margin-top: 25px;
			font-size: 12px;
			font-weight: bold;
		}
		.legend-item-bars { display: flex; align-items: center; gap: 8px; }
		.legend-color-bars { width: 12px; height: 12px; border-radius: 1px; }
		.legend-color-bars.kyd { background-color: #e27d42; }
		.legend-color-bars.day-school { background-color: #3b7c96; }
		
		.p5-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}
		.pill-kyd_day_school {
			border: 1px solid #d86d38;
			border-radius: 20px;
			padding: 4px 14px;
			font-size: 12px;
			font-weight: bold;
			color: #d86d38;
			white-space: nowrap;
		}

		/* ==========================================
		   方塊三：左右雙欄合併區塊 (p2_Left & p2_Right 核心文案)
		   ========================================== */
		.p2-split-container {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 40px;
		}

		/* 標籤小標與標題 */
		.section-label-en {
			color: #d86d38;
			font-size: 13px;
			font-weight: bold;
			letter-spacing: 1.5px;
			margin-bottom: 8px;
			text-transform: uppercase;
			display: block;
		}
		.section-main-title {
			font-size: 24px;
			font-weight: bold;
			color: #2b2623;
			margin: 0 0 20px 0;
		}

		/* 左側：成績亮麗金句樣式 */
		.student-perf-text {
			font-size: 14px;
			color: #433e3a;
			line-height: 1.7;
			margin-bottom: 20px;
			text-align: justify;
		}
		.quote-box {
			background-color: #fdf4ee;
			border-left: 4px solid #d86d38;
			padding: 16px 20px;
			border-radius: 0 6px 6px 0;
			display: flex;
			gap: 12px;
		}
		.quote-icon {
			color: #d86d38;
			font-size: 24px;
			font-family: Georgia, serif;
			font-weight: bold;
			line-height: 1;
		}
		.quote-content {
			font-size: 15px;
			font-weight: bold;
			color: #433e3a;
			line-height: 1.6;
		}

		/* 右側：優秀科目（p2_Right）樣式 */
		.p2-right-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
		}
		.pill-level5 {
			border: 1px solid #d86d38;
			border-radius: 20px;
			padding: 4px 14px;
			font-size: 12px;
			font-weight: bold;
			color: #d86d38;
			white-space: nowrap;
		}
		.subject-highlight-list {
			display: flex;
			flex-direction: column;
			margin-top: 10px;
		}
		.subject-highlight-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 14px 0;
			border-bottom: 1px dashed #d1cac2; /* 點狀分隔線還原 */
		}
		.subject-highlight-row:last-child {
			border-bottom: none;
		}
		.highlight-sub-name {
			font-size: 15px;
			font-weight: bold;
			color: #433e3a;
		}
		.highlight-sub-scores {
            display: flex;
			justify-content: space-between;
			font-size: 13px;
			font-weight: bold;
		}
		.score-kyd {
			color: #d86d38; /* 學校橘色 */
		}
		.score-divider {
			color: #8c857f;
			margin: 0 4px;
		}
		.score-ds {
			color: #8c857f; /* 日校灰色 */
		}


		/* ==========================================
		   方塊六：頁尾聯絡資訊
		   ========================================== */
		.footer-block {
			background-color: #003366;
			color: #ffffff;
			border: none;
			padding: 25px 40px;
		}
		.footer-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 15px;
			font-size: 14px;
		}
		.footer-item strong {
			color: #fca441;
		}

		/* ==========================================
		   RWD 手機版自動化折行優化
		   ========================================== */
		@media (max-width: 768px) {
			.block-stats-grid, .medical-focus-container, .footer-grid, .chart-main-layout {
				grid-template-columns: 1fr;
			}
			.content-block { padding: 20px; }
			.subject-label { width: 115px; font-size: 11px; }
			.grid-overlay { left: 130px; }
		}

		@media (max-width: 1110px){
			.medical-focus-container {
				grid-template-columns: 1fr;
			}
          	.chart-main-layout .donut-wrapper, 
			.chart-main-layout .legend-panel {
				display: flex;
			}
			
			.chart-main-layout .donut-img{
				display: none;
			}
			.university-Recognition .block-stats-grid{
				grid-template-columns: 1fr;
			}
          
			.bars-container {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 3px;
				height: 100%;
				position: relative;
				left: -4px;
			}
		}

		@media (max-width: 1400px){
			.medical-focus-container_en {
				grid-template-columns: 1fr;
			}
			.medical-focus-container_en .uni-badge-card .uni-details {
				grid-column: span 2;
			}
		}