/* =============================
	 Member Portal AI - Public UI
	 ============================= */

:root {
	--mpai-bg: #0b1020;
	--mpai-surface: #121934;
	--mpai-text: #e7ecff;
	--mpai-muted: #a9b2d2;
	--mpai-primary: #4b7cff;
	--mpai-primary-600: #3a66e6;
	--mpai-accent: #ff6b6b;
	--mpai-ghost: rgba(231, 236, 255, 0.12);
	--mpai-border: rgba(231, 236, 255, 0.12);
	--mpai-radius: 14px;
	--mpai-radius-sm: 10px;
	--mpai-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Container */
.mpai-portal {
	color: var(--mpai-text);
}

/* Split layout */
.mpai-layout {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	min-height: 70vh;
}

.mpai-sidebar {
	width: 290px;
	background: var(--mpai-surface);
	border-right: 1px solid var(--mpai-border);
	padding: 1rem .9rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}
.mpai-sidebar__heading {
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	margin: 0 0 .75rem;
	color: var(--mpai-muted);
}
.mpai-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.mpai-nav-link {
	display: flex;
	align-items: center;
	gap: .55rem;
	text-decoration: none;
	padding: .55rem .65rem .55rem .7rem;
	border-radius: var(--mpai-radius-sm);
	font-size: .82rem;
	font-weight: 600;
	color: var(--mpai-text);
	background: var(--mpai-ghost);
	border: 1px solid var(--mpai-border);
	line-height: 1.3;
	transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.mpai-nav-link:hover { background: rgba(231,236,255,0.18); }
.mpai-nav-link:active { transform: scale(.98); }
.mpai-nav-text { flex: 1; }
.mpai-empty { font-size: .75rem; padding: .4rem .6rem; opacity: .7; }
.mpai-sidebar__cta { margin-top: auto; }
.mpai-btn--block { width: 100%; justify-content: center; }

.mpai-main {
	flex: 1;
	padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem;
	overflow-y: auto;
}

@media (max-width: 880px) {
	.mpai-layout { flex-direction: column; }
	.mpai-sidebar { width: 100%; flex-direction: column; padding: .75rem .75rem 1rem; }
	.mpai-main { padding: 1.25rem .9rem 2.5rem; }
}

/* Detail view */
.mpai-detail__title { margin: 0 0 .9rem; font-size: clamp(1.2rem, 3vw, 1.7rem); }
.mpai-detail__lead { margin: 0 0 1.2rem; color: var(--mpai-muted); line-height: 1.55; }
.mpai-detail__media { margin: 0 0 1.1rem; }
.mpai-detail__media img, .mpai-detail__media iframe, .mpai-detail__media video { width: 100%; border-radius: var(--mpai-radius-sm); box-shadow: var(--mpai-shadow); }
.mpai-embed { aspect-ratio: 16/9; }
.mpai-embed iframe { height: 100%; }

.mpai-welcome__title { font-size: clamp(1.3rem, 4vw, 2rem); line-height: 1.3; margin: 0 0 1rem; }
.mpai-welcome__lead { font-size: .95rem; line-height: 1.7; margin: 0 0 1.2rem; color: var(--mpai-muted); }
.mpai-welcome__points { list-style: disc; padding-left: 1.25rem; margin: 0 0 1.5rem; font-size: .85rem; color: var(--mpai-muted); display: grid; gap: .35rem; }
.mpai-welcome__points li { line-height: 1.5; }


/* Hero */
.mpai-hero {
	position: relative;
	isolation: isolate;
	padding: clamp(2.2rem, 6vw, 4.5rem) clamp(1.1rem, 4vw, 2.4rem);
	background: linear-gradient(135deg, #f5f8ff 0%, #e9f1ff 48%, #ffffff 100%);
	border-bottom: 1px solid rgba(17,20,45,0.08);
	color: #11142d;
}
.mpai-hero::before { content:""; position:absolute; inset:0; background:
	radial-gradient(800px 400px at 8% 10%, rgba(75,124,255,0.18), rgba(75,124,255,0) 60%),
	radial-gradient(900px 480px at 92% 15%, rgba(255,141,141,0.16), rgba(255,141,141,0) 62%); pointer-events:none; }

.mpai-hero__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.mpai-hero__title {
	font-size: clamp(1.9rem, 5vw, 2.85rem);
	line-height: 1.18;
	letter-spacing: .25px;
	margin: 0 0 .75rem;
	background: linear-gradient(90deg, #1f335a 0%, #2f4e92 55%, #4b7cff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mpai-hero__subtitle {
	color: #4a5b77;
	font-size: clamp(.95rem, 2.2vw, 1.05rem);
	margin: 0 0 1.5rem;
	line-height:1.55;
}

.mpai-cta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

/* Buttons */
.mpai-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .78rem 1.1rem;
	border-radius: var(--mpai-radius-sm);
	border: 1px solid transparent;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: .15px;
	transition: transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
	will-change: transform;
}

.mpai-btn:hover { transform: translateY(-1px); }
.mpai-btn:active { transform: translateY(0); }

.mpai-btn--primary {
	color: #fff;
	background: var(--mpai-primary);
	box-shadow: 0 6px 20px rgba(75,124,255,.35);
}
.mpai-btn--primary:hover { background: var(--mpai-primary-600); }

.mpai-btn--ghost {
	color: var(--mpai-text);
	background: var(--mpai-ghost);
	border-color: var(--mpai-border);
}
.mpai-btn--ghost:hover { background: rgba(231,236,255,0.16); }

.mpai-btn--accent {
	color: #0b1020;
	background: linear-gradient(180deg, #ffd2d2, #ff9f9f);
	box-shadow: 0 6px 18px rgba(255,107,107,.35);
}
.mpai-btn--accent:hover { filter: brightness(.98); }

/* Sections */
.mpai-section {
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1rem, 4vw, 2rem);
}
.mpai-section__header {
	margin-bottom: 1rem;
}
.mpai-section__header h2 {
	margin: 0 0 .3rem;
	font-size: clamp(1.3rem, 3.5vw, 1.6rem);
}
.mpai-section__desc {
	margin: 0;
	color: var(--mpai-muted);
}
.mpai-section__content {
	margin-top: 1rem;
}

/* Simple cards layout for lists if child markup provides items */
.mpai-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0,1fr));
	gap: 1rem;
}
@media (min-width: 640px) {
	.mpai-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 960px) {
	.mpai-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.mpai-card {
	background: var(--mpai-surface);
	border: 1px solid var(--mpai-border);
	border-radius: var(--mpai-radius);
	padding: 1rem;
	box-shadow: var(--mpai-shadow);
}
.mpai-card__thumb {
	width: 100%;
	aspect-ratio: 16/9;
	background: #0b0b0b;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: .75rem;
}
.mpai-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mpai-card__title { margin: 0 0 .4rem; font-size: 1.05rem; }
.mpai-card__meta { margin: 0; color: var(--mpai-muted); font-size: .9rem; }

/* AIツール横並びレイアウト */
.mpai-card--tool { display:flex; gap:1rem; flex-wrap:nowrap; align-items:flex-start; }
@media (max-width: 680px){ .mpai-card--tool { flex-wrap:wrap; } }
.mpai-card--tool .mpai-card__thumb--side { flex:0 0 200px; width:200px; aspect-ratio:4/3; margin:0; background:#111; border-radius:8px; overflow:hidden; }
.mpai-card--tool .mpai-card__thumb--side img { width:100%; height:100%; object-fit:contain; background:#000; }
.mpai-card--tool .mpai-card__body { flex:1 1 auto; min-width:220px; }
.mpai-card__desc { font-size:.9rem; line-height:1.5; margin:.25rem 0 .75rem; color: var(--mpai-text); }
.mpai-card--tool .mpai-card__actions { margin-top: .25rem; display:flex; gap:.5rem; flex-wrap:wrap; }

/* Sidebar member info & dedicated AI tool */
.mpai-sidebar__member { padding:1rem .85rem .75rem; border-bottom:1px solid var(--mpai-border); text-align:center; }
.mpai-member-name { font-weight:600; margin:0 0 .5rem; font-size:.95rem; }
.mpai-member-ai-tool { display:block; width:100%; aspect-ratio:16/9; background:#111; border-radius:10px; overflow:hidden; box-shadow:0 2px 4px rgba(0,0,0,.15); }
.mpai-member-ai-tool img.mpai-member-ai-img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .2s ease; }
.mpai-member-ai-tool:hover img.mpai-member-ai-img { transform:scale(1.03); }

/* Fallback styling for shortcode placeholders */
.mpai-ai-tools h3,
.mpai-videos h3 {
	margin: 0;
	padding: 1rem;
	background: var(--mpai-surface);
	border: 1px solid var(--mpai-border);
	border-radius: var(--mpai-radius);
}

/* Respect WP themes */
.entry-content .mpai-portal, .wp-block-post-content .mpai-portal {
	color: inherit;
}

/* Light mode fallback if theme enforces light backgrounds */
@media (prefers-color-scheme: light) {
	:root {
		--mpai-bg: #f7f9ff;
		--mpai-surface: #ffffff;
		--mpai-text: #11142d;
		--mpai-muted: #5b6480;
		--mpai-ghost: rgba(17,20,45,.04);
		--mpai-border: rgba(17,20,45,.08);
		--mpai-shadow: 0 10px 25px rgba(17, 20, 45, 0.08);
	}
}
/* ===== Access (Login/Register) layout improvements ===== */
.mpai-access-wrapper{max-width:1080px;margin:2.5rem auto 2.75rem;padding:0 1.2rem;}
.mpai-access-title{font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:700;letter-spacing:.03em;margin:0 0 1.5rem;text-align:center;line-height:1.25;}
.mpai-access-grid{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start;}
.mpai-access-box{background:#fff;border:1px solid #d9dde2;border-radius:14px;padding:1.4rem 1.35rem 1.6rem;box-shadow:0 4px 14px -4px rgba(0,20,60,.06),0 2px 4px -2px rgba(0,20,60,.08);position:relative;display:flex;flex-direction:column;}
.mpai-access-box h2{font-size:1.05rem;margin:0 0 .9rem;font-weight:600;letter-spacing:.02em;}
.mpai-access-box .mpai-form>form,.mpai-access-box form{margin:0;}
.mpai-access-box .mpai-messages{margin-top:0;margin-bottom:.75rem;}
.mpai-access-box input[type=text],
.mpai-access-box input[type=email],
.mpai-access-box input[type=password]{width:100%;border:1px solid #bcc1c7;background:#fdfdfd;padding:.6rem .65rem;border-radius:6px;font-size:.92rem;line-height:1.2;transition:border-color .15s,box-shadow .15s;}
.mpai-access-box input:focus{outline:2px solid #0064d9;outline-offset:1px;border-color:#0064d9;background:#fff;}
.mpai-access-box label{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;color:#334152;letter-spacing:.05em;margin:.75rem 0 .35rem;}
.mpai-access-box .mpai-btn--primary{background:#0051a8;border:none;padding:.65rem 1.05rem;font-size:.85rem;border-radius:8px;font-weight:600;letter-spacing:.03em;}
.mpai-access-box .mpai-btn--primary:hover{background:#003f85;}
.mpai-access-box .mpai-btn{text-decoration:none;}
.mpai-access-box .mpai-privacy{font-size:.8rem;}
.mpai-access-box .mpai-privacy legend{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#334152;}
.mpai-access-box .mpai-privacy p{margin:.3rem 0 .4rem;}
.mpai-access-box .mpai-help-link{margin-top:1rem;font-size:.7rem;text-align:right;}
@media (prefers-color-scheme: dark){
  .mpai-access-box{background:#1e2329;border-color:#2e343b;box-shadow:0 4px 14px -4px rgba(0,0,0,.4),0 2px 4px -2px rgba(0,0,0,.35);}
  .mpai-access-box input{background:#22272e;border-color:#3a4149;color:#e2e7ec;}
  .mpai-access-box input:focus{background:#232a32;color:#fff;}
  .mpai-access-title{color:#f5f7fa;}
  .mpai-access-box label{color:#b9c4cf;}
  .mpai-access-box .mpai-privacy legend{color:#b9c4cf;}
}
/* Standalone shortcode login/register (not inside .mpai-access-box) */
.mpai-form--login,
.mpai-form--register {
	max-width:560px;
	margin:2.5rem auto 2.75rem;
	background:#fff;
	border:1px solid #d9dde2;
	border-radius:14px;
	padding:1.4rem 1.35rem 1.4rem;
	box-shadow:0 4px 14px -4px rgba(0,20,60,.06),0 2px 4px -2px rgba(0,20,60,.08);
}
.mpai-form--login .mpai-help-link,
.mpai-form--register .mpai-help-link { margin-top:.9rem; }
.mpai-form--login label,
.mpai-form--register label { display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;color:#334152;letter-spacing:.05em;margin:.75rem 0 .35rem; }
.mpai-form--login input[type=text],
.mpai-form--login input[type=email],
.mpai-form--login input[type=password],
.mpai-form--register input[type=text],
.mpai-form--register input[type=email],
.mpai-form--register input[type=password] {
	width:100%;border:1px solid #bcc1c7;background:#fdfdfd;padding:.6rem .65rem;border-radius:6px;font-size:.92rem;line-height:1.2;transition:border-color .15s,box-shadow .15s;
}
.mpai-form--login input:focus,
.mpai-form--register input:focus { outline:2px solid #0064d9;outline-offset:1px;border-color:#0064d9;background:#fff; }
/* Reset when form already wrapped in .mpai-access-box */
.mpai-access-box .mpai-form--login,
.mpai-access-box .mpai-form--register { max-width:none;margin:0;background:transparent;border:none;border-radius:0;box-shadow:none;padding:0; }
.mpai-access-box .mpai-form--login label,
.mpai-access-box .mpai-form--register label { font-size:.72rem; }
@media (prefers-color-scheme: dark){
	.mpai-form--login,
	.mpai-form--register { background:#1e2329;border-color:#2e343b;box-shadow:0 4px 14px -4px rgba(0,0,0,.4),0 2px 4px -2px rgba(0,0,0,.35); }
	.mpai-form--login input,
	.mpai-form--register input { background:#22272e;border-color:#3a4149;color:#e2e7ec; }
	.mpai-form--login input:focus,
	.mpai-form--register input:focus { background:#232a32;color:#fff; }
	.mpai-form--login label,
	.mpai-form--register label { color:#b9c4cf; }
}
/* Access page headings when shortcode used alone */
.mpai-access-header{max-width:1080px;margin:1.4rem auto .6rem;padding:0 1.2rem;text-align:center;}
.mpai-access-subtitle{margin:.35rem 0 0;color:var(--mpai-muted);}
.mpai-access-box .mpai-access-header{display:none;}