.personality-panel{
	margin-top:22px;
	padding:20px;
	border-radius:22px;
	background:rgba(255,255,255,0.09);
	border:1px solid rgba(255,255,255,0.16);
	backdrop-filter:blur(16px);
	position:relative;
	z-index:10;
}

.section-head h2{
	margin:0 0 6px;
}

.section-head p{
	margin:0;
	opacity:0.75;
	font-size:14px;
}

.personality-status{
	margin-top:16px;
	padding:12px 14px;
	border-radius:14px;
	background:rgba(255,255,255,0.08);
	font-size:14px;
	opacity:0.9;
}

.ts-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:14px;
	margin-top:18px;
}

.ts-card{
	padding:16px;
	border-radius:18px;
	background:rgba(255,255,255,0.10);
	border:1px solid rgba(255,255,255,0.14);
	min-height:150px;
}

.ts-label{
	display:inline-block;
	padding:4px 10px;
	border-radius:999px;
	font-size:12px;
	font-weight:bold;
	background:rgba(0,198,255,0.18);
	color:#9be7ff;
	margin-bottom:8px;
}

.ts-card h3{
	margin:4px 0 10px;
	font-size:18px;
}

.ts-summary{
	font-size:14px;
	line-height:1.7;
	opacity:0.95;
}

.metric-list{
	margin-top:22px;
	display:flex;
	flex-direction:column;
	gap:14px;
}

.metric-row{
	display:grid;
	grid-template-columns:90px 1fr 120px;
	gap:12px;
	align-items:center;
	padding:12px;
	border-radius:14px;
	background:rgba(255,255,255,0.07);
}

.metric-name{
	font-weight:bold;
	font-size:14px;
}

.bar-wrap{
	position:relative;
	height:28px;
	border-radius:999px;
	background:rgba(255,255,255,0.10);
	overflow:hidden;
}

.bar{
	position:absolute;
	left:0;
	height:10px;
	border-radius:999px;
	transition:0.4s ease;
}

.bar.trait{
	top:4px;
	background:linear-gradient(90deg, #38bdf8, #2563eb);
}

.bar.state{
	bottom:4px;
	background:linear-gradient(90deg, #facc15, #f97316);
}

.metric-text{
	font-size:13px;
	opacity:0.9;
	text-align:right;
}

@media (max-width:720px){

	.ts-grid{
		grid-template-columns:1fr;
	}

	.metric-row{
		grid-template-columns:1fr;
		gap:8px;
	}

	.metric-text{
		text-align:left;
	}

}

/* =========================
   6 Type Personality
========================= */

.type-section{
	margin-top:28px;
	padding-top:22px;
	border-top:1px solid rgba(255,255,255,0.14);
}

.type-head{
	margin-bottom:14px;
}

.type-grid{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:14px;
	margin-top:16px;
}

.type-card{
	padding:18px;
	border-radius:18px;
	background:rgba(255,255,255,0.10);
	border:1px solid rgba(255,255,255,0.14);
	min-height:150px;
}

.type-label{
	display:inline-block;
	padding:4px 10px;
	border-radius:999px;
	font-size:12px;
	font-weight:bold;
	background:rgba(124,58,237,0.25);
	color:#ddd6fe;
	margin-bottom:10px;
}

.type-main{
	font-size:24px;
	font-weight:bold;
	margin-bottom:12px;
	line-height:1.35;
	word-break:keep-all;
	overflow-wrap:break-word;
}

.type-feature{
	font-size:14px;
	line-height:1.7;
	opacity:0.9;
}

.type-report{
	margin-top:18px;
	padding:18px;
	border-radius:18px;
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.12);
	line-height:1.8;
}

.type-report h3{
	margin-top:0;
	margin-bottom:8px;
}

.job-box{
	margin-top:18px;
	padding-top:14px;
	border-top:1px solid rgba(255,255,255,0.12);
}

@media (max-width:720px){

	.type-grid{
		grid-template-columns:1fr;
	}

	.type-main{
		font-size:24px;
	}

}

/* =========================
   12 Color Personality
========================= */

.color-section{
	margin-top:28px;
	padding-top:22px;
	border-top:1px solid rgba(255,255,255,0.14);
}

.color-head{
	margin-bottom:14px;
}

.color-grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:14px;
	margin-top:16px;
}

.color-card{
	padding:18px;
	border-radius:18px;
	background:rgba(255,255,255,0.10);
	border:1px solid rgba(255,255,255,0.14);
	min-height:190px;
	text-align:center;
}

.color-label{
	display:inline-block;
	padding:4px 10px;
	border-radius:999px;
	font-size:12px;
	font-weight:bold;
	background:rgba(14,165,233,0.22);
	color:#bae6fd;
	margin-bottom:14px;
}

.color-orb{
	width:72px;
	height:72px;
	border-radius:50%;
	margin:0 auto 14px;
	background:#999;
	box-shadow:
		0 0 24px rgba(255,255,255,0.25),
		inset 0 0 18px rgba(255,255,255,0.25);
}

.color-name{
	font-size:22px;
	font-weight:bold;
	margin-bottom:10px;
	word-break:keep-all;
	overflow-wrap:break-word;
}

.color-text{
	font-size:14px;
	line-height:1.7;
	opacity:0.9;
	text-align:left;
}

.color-report{
	margin-top:18px;
	padding:18px;
	border-radius:18px;
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.12);
	line-height:1.8;
}

.color-report h3{
	margin-top:0;
	margin-bottom:8px;
}

.color-animal{
	display:inline-block;
	margin-top:6px;
	font-size:16px;
	opacity:0.85;
}

@media (max-width:720px){

	.color-grid{
		grid-template-columns:1fr;
	}

	.color-name{
		font-size:20px;
	}

}

/* =========================
   Animal Personality
========================= */

.animal-section{
	margin-top:28px;
	padding-top:22px;
	border-top:1px solid rgba(255,255,255,0.14);
}

.animal-head{
	margin-bottom:14px;
}

.animal-grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:14px;
	margin-top:16px;
}

.animal-card{
	padding:18px;
	border-radius:18px;
	background:rgba(255,255,255,0.10);
	border:1px solid rgba(255,255,255,0.14);
	min-height:190px;
	text-align:center;
}

.animal-label{
	display:inline-block;
	padding:4px 10px;
	border-radius:999px;
	font-size:12px;
	font-weight:bold;
	background:rgba(245,158,11,0.22);
	color:#fde68a;
	margin-bottom:14px;
}

.animal-icon{
	font-size:52px;
	line-height:1.1;
	margin-bottom:12px;
	filter:drop-shadow(0 0 18px rgba(255,255,255,0.22));
}

.animal-name{
	font-size:22px;
	font-weight:bold;
	margin-bottom:10px;
	word-break:keep-all;
	overflow-wrap:break-word;
}

.animal-text{
	font-size:14px;
	line-height:1.7;
	opacity:0.9;
	text-align:left;
}

.animal-report{
	margin-top:18px;
	padding:18px;
	border-radius:18px;
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.12);
	line-height:1.8;
}

.animal-report h3{
	margin-top:0;
	margin-bottom:8px;
}

@media (max-width:720px){

	.animal-grid{
		grid-template-columns:1fr;
	}

	.animal-name{
		font-size:20px;
	}

}


/* =========================
   Color Score Top 3
========================= */

.color-score-card{
	margin-top:18px;
	padding:18px;
	border-radius:18px;
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.12);
}

.color-score-head h3{
	margin:0 0 6px;
}

.color-score-head p{
	margin:0 0 14px;
	font-size:14px;
	opacity:0.72;
}

.color-score-list{
	display:flex;
	flex-direction:column;
	gap:10px;
}

.color-score-row{
	display:grid;
	grid-template-columns:42px 1fr 52px;
	gap:12px;
	align-items:center;
	padding:10px 12px;
	border-radius:14px;
	background:rgba(255,255,255,0.08);
}

.color-score-rank{
	width:30px;
	height:30px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:bold;
	background:rgba(255,255,255,0.12);
}

.color-score-main{
	min-width:0;
}

.color-score-name{
	font-weight:bold;
	margin-bottom:6px;
}

.color-score-bar-wrap{
	height:8px;
	border-radius:999px;
	background:rgba(255,255,255,0.12);
	overflow:hidden;
}

.color-score-bar{
	height:100%;
	border-radius:999px;
	width:0%;
	transition:0.4s ease;
}

.color-score-value{
	text-align:right;
	font-weight:bold;
	font-size:14px;
	opacity:0.9;
}

@media (max-width:720px){

	.color-score-row{
		grid-template-columns:34px 1fr 46px;
		gap:8px;
	}

}

/* =========================
   Personality Tabs
========================= */

.personality-tabs{
	display:flex;
	gap:10px;
	margin:18px 0 6px;
	flex-wrap:wrap;
	position:relative;
	z-index:20;
}

.personality-tab{
	border:none;
	border-radius:999px;
	padding:9px 16px;
	background:rgba(255,255,255,0.10);
	color:white;
	cursor:pointer;
	font-weight:bold;
	transition:0.25s;
}

.personality-tab:hover{
	background:rgba(255,255,255,0.18);
}

.personality-tab.active{
	background:linear-gradient(135deg, #7c3aed, #0ea5e9);
	box-shadow:0 0 16px rgba(14,165,233,0.35);
}

.personality-tab-panel{
	display:none;
}

.personality-tab-panel.active{
	display:block;
}

/* =========================
   Psychological Report
========================= */

.report-summary-grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:14px;
	margin-top:18px;
}

.report-summary-card{
	padding:18px;
	border-radius:18px;
	background:rgba(255,255,255,0.10);
	border:1px solid rgba(255,255,255,0.14);
	min-height:140px;
}

.report-label{
	display:inline-block;
	padding:4px 10px;
	border-radius:999px;
	font-size:12px;
	font-weight:bold;
	background:rgba(14,165,233,0.22);
	color:#bae6fd;
	margin-bottom:12px;
}

.report-grade{
	font-size:30px;
	font-weight:bold;
	margin-bottom:8px;
}

.report-text{
	font-size:14px;
	line-height:1.7;
	opacity:0.9;
}

.report-table-card,
.report-comment-card{
	margin-top:18px;
	padding:18px;
	border-radius:18px;
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.12);
}

.report-table-card h3,
.report-comment-card h3{
	margin-top:0;
	margin-bottom:12px;
}

.report-table{
	display:flex;
	flex-direction:column;
	gap:8px;
}

.report-row{
	display:grid;
	grid-template-columns:1.1fr 0.8fr 0.8fr 0.8fr 0.8fr;
	gap:8px;
	align-items:center;
	padding:10px 12px;
	border-radius:12px;
	background:rgba(255,255,255,0.07);
	font-size:14px;
}

.report-head-row{
	font-weight:bold;
	background:rgba(255,255,255,0.13);
	color:#bae6fd;
}

.report-comment-card{
	line-height:1.9;
}

.personality-note{
	margin-top:18px;
	padding:12px 14px;
	border-radius:14px;
	background:rgba(255,255,255,0.07);
	border:1px solid rgba(255,255,255,0.10);
	font-size:13px;
	opacity:0.85;
}

@media (max-width:720px){

	.report-summary-grid{
		grid-template-columns:1fr;
	}

	.report-row{
		grid-template-columns:1fr;
		gap:4px;
	}

	.report-head-row{
		display:none;
	}

}

/* =========================
   Psychological Report Bars
========================= */

.report-bar-card{
	margin-top:18px;
	padding:18px;
	border-radius:18px;
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.12);
}

.report-bar-card h3{
	margin-top:0;
	margin-bottom:14px;
}

.report-bar-list{
	display:flex;
	flex-direction:column;
	gap:12px;
}

.report-bar-row{
	display:grid;
	grid-template-columns:90px 1fr 48px;
	gap:12px;
	align-items:center;
	padding:10px 12px;
	border-radius:14px;
	background:rgba(255,255,255,0.07);
}

.report-bar-name{
	font-weight:bold;
	font-size:14px;
}

.report-bar-wrap{
	height:12px;
	border-radius:999px;
	background:rgba(255,255,255,0.12);
	overflow:hidden;
}

.report-bar{
	height:100%;
	width:0%;
	border-radius:999px;
	transition:0.45s ease;
}

.report-bar.stress{
	background:linear-gradient(90deg, #64748b, #f97316);
}

.report-bar.energy{
	background:linear-gradient(90deg, #22c55e, #facc15);
}

.report-bar.emotion{
	background:linear-gradient(90deg, #ec4899, #a855f7);
}

.report-bar.focus{
	background:linear-gradient(90deg, #38bdf8, #2563eb);
}

.report-bar.social{
	background:linear-gradient(90deg, #14b8a6, #10b981);
}

.report-bar-value{
	text-align:right;
	font-weight:bold;
	font-size:14px;
}

@media (max-width:720px){

	.report-bar-row{
		grid-template-columns:1fr;
		gap:6px;
	}

	.report-bar-value{
		text-align:left;
	}

}

/* =========================
   Report Responsive Fix
========================= */

/* 通信簿の表は、スマホでも5列を維持 */
@media (max-width:720px){

	.report-table-card{
		padding:14px;
	}

	.report-row{
		grid-template-columns:
			1.1fr
			0.7fr
			0.7fr
			0.7fr
			0.6fr;
		gap:6px;
		font-size:13px;
		padding:10px 8px;
	}

	.report-head-row{
		display:grid;
	}

	.report-row > div{
		min-width:0;
		word-break:keep-all;
	}

}

/* スマホ時の心理バランスグラフ調整 */
@media (max-width:720px){

	.report-bar-card{
		padding:14px;
	}

	.report-bar-row{
		grid-template-columns:72px 1fr 38px;
		gap:8px;
		padding:10px;
	}

	.report-bar-name{
		font-size:13px;
	}

	.report-bar-value{
		text-align:right;
		font-size:13px;
	}

	.report-bar-wrap{
		height:10px;
	}

}

/* =========================
   Radar Chart
========================= */

.report-radar-card{
	margin-top:18px;
	padding:18px;
	border-radius:18px;
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.12);
}

.report-radar-card h3{
	margin-top:0;
	margin-bottom:6px;
}

.report-radar-sub{
	margin:0 0 14px;
	font-size:14px;
	opacity:0.75;
}

.report-radar-wrap{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:8px 0 4px;
}

#reportRadarCanvas{
	width:100%;
	max-width:360px;
	height:auto;
	display:block;
}

/* スマホ */
@media (max-width:720px){

	.report-radar-card{
		padding:14px;
	}

	#reportRadarCanvas{
		max-width:300px;
	}
}

/* =========================
   Psychological Radar Chart
========================= */

.report-radar-card{
	margin-top:18px;
	padding:18px;
	border-radius:18px;
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.12);
}

.report-radar-card h3{
	margin-top:0;
	margin-bottom:6px;
}

.report-radar-sub{
	margin:0 0 14px;
	font-size:14px;
	line-height:1.7;
	opacity:0.75;
}

.report-radar-wrap{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:8px 0 4px;
}

#reportRadarCanvas{
	width:100%;
	max-width:360px;
	height:auto;
	display:block;
}

/* スマホ */
@media (max-width:720px){

	.report-radar-card{
		padding:14px;
	}

	#reportRadarCanvas{
		max-width:300px;
	}
}

/* =========================
   AI Action Support
========================= */

.action-summary-card{
	margin-top:18px;
	padding:22px;
	border-radius:22px;
	background:
		linear-gradient(
			135deg,
			rgba(124,58,237,0.18),
			rgba(14,165,233,0.12)
		);
	border:1px solid rgba(255,255,255,0.16);
}

.action-label,
.action-card-label{
	display:inline-block;
	padding:5px 12px;
	border-radius:999px;
	font-size:12px;
	font-weight:bold;
	background:rgba(14,165,233,0.22);
	color:#bae6fd;
	margin-bottom:10px;
}

.action-summary-card h3{
	margin:0 0 12px;
	font-size:24px;
	line-height:1.35;
}

.action-main-text{
	line-height:1.9;
	font-size:15px;
}

.action-grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:14px;
	margin-top:18px;
}

.action-card{
	padding:18px;
	border-radius:18px;
	background:rgba(255,255,255,0.10);
	border:1px solid rgba(255,255,255,0.14);
	min-height:180px;
	line-height:1.8;
}

.action-card h3{
	margin:0 0 10px;
}

.action-report-card{
	margin-top:18px;
	padding:18px;
	border-radius:18px;
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.12);
	line-height:1.9;
}

.action-report-card h3{
	margin-top:0;
	margin-bottom:10px;
}

@media (max-width:720px){

	.action-grid{
		grid-template-columns:1fr;
	}

	.action-summary-card{
		padding:18px;
	}

	.action-summary-card h3{
		font-size:21px;
	}
}

/* =========================
   Today Action Plan
========================= */

.action-plan-card{
	margin-top:18px;
	padding:20px;
	border-radius:20px;
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.13);
}

.action-plan-card h3{
	margin:0 0 14px;
	font-size:22px;
}

.action-plan-list{
	display:flex;
	flex-direction:column;
	gap:12px;
}

.action-plan-item{
	display:grid;
	grid-template-columns:42px 1fr;
	gap:12px;
	align-items:flex-start;
	padding:14px;
	border-radius:16px;
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.10);
}

.action-plan-check{
	width:34px;
	height:34px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:bold;
	background:linear-gradient(135deg, #7c3aed, #0ea5e9);
	box-shadow:0 0 14px rgba(14,165,233,0.30);
}

.action-plan-title{
	font-weight:bold;
	margin-bottom:6px;
	color:#e0f2fe;
}

.action-plan-text{
	line-height:1.8;
	font-size:14px;
	opacity:0.95;
}

@media (max-width:720px){

	.action-plan-card{
		padding:16px;
	}

	.action-plan-item{
		grid-template-columns:36px 1fr;
		padding:12px;
	}

	.action-plan-check{
		width:30px;
		height:30px;
	}
}

/* =========================
   Japanese Text Wrap Fix
========================= */

.action-card,
.action-report-card,
.action-summary-card,
.action-plan-card{
	line-break:strict;
	word-break:normal;
	overflow-wrap:break-word;
}

.action-card div,
.action-report-card div,
.action-main-text,
.action-plan-text{
	line-break:strict;
	word-break:normal;
}

.personality-plus-sample-btn{
    padding:10px 16px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.16);
    background:rgba(255,255,255,0.09);
    color:white;
    font-weight:bold;
    cursor:pointer;
}

.personality-plus-sample-btn:hover{
		background:rgba(255,255,255,0.14);
}

@media (max-width: 520px){

    .personality-plus-card{
        margin-top:22px;
    }

    .personality-plus-card h2{
        font-size:28px;
        line-height:1.35;
    }

    #personalityPlusText{
        font-size:18px;
        line-height:1.9;
        padding:20px;
    }

    #personalityPlusBtn,
    .personality-plus-sample-btn{
        width:100%;
        min-height:54px;
        border-radius:999px;
        font-size:16px;
    }
}

@media (max-width:520px){

    .ai-daily-plus-card h3,
    .personality-plus-card h2{
        font-size:32px;
        line-height:1.25;
    }

    .ai-daily-plus-lead{
        font-size:18px;
        line-height:1.8;
    }

    .ai-daily-plus-text,
    #personalityPlusText{
        font-size:18px;
        line-height:1.85;
    }
}

/* =========================
   Personality+ Mobile Adjust
========================= */
@media (max-width:520px){

    .ai-daily-plus-card h3,
    .personality-plus-card h2{
        font-size:32px;
        line-height:1.25;
        letter-spacing:-0.02em;
    }
}

/* =========================
   Personality+ - Final Mobile Fix
   タイトル小さめ・ボタン統一
========================= */
@media (max-width:520px){

    .personality-plus-card h2{
        font-size:26px;
        line-height:1.28;
        letter-spacing:-0.02em;
    }

    #personalityPlusText{
        font-size:16px;
        line-height:1.85;
        padding:18px;
    }

    #personalityPlusBtn,
    .personality-plus-sample-btn{
        width:100%;
        min-height:54px;
        border-radius:999px;
        font-size:16px;
    }
}

.ai-plus-meta{
	margin-bottom:14px;
	padding:10px 14px;
	border-radius:14px;
	background:rgba(255,255,255,0.08);
	border:1px solid rgba(255,255,255,0.12);
	color:rgba(255,255,255,0.86);
	font-size:13px;
	line-height:1.6;
}