/* Moon Tonight: works with any theme; colors come from CSS variables with navy/gold fallbacks. */
.mt-bar, .mt-box {
	--mt-bg: var(--mn-bg, #0a0f1f);
	--mt-card: var(--mn-card, #131a33);
	--mt-text: var(--mn-text, #eef0f6);
	--mt-muted: var(--mn-muted, #9aa3bd);
	--mt-gold: var(--mn-gold, #e8d49a);
	--mt-line: var(--mn-line, rgba(255,255,255,.1));
	color: var(--mt-text);
	font-family: var(--mn-sans, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.mt-bar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
	font-size: 12px; line-height: 1.4; color: var(--mt-muted);
}
.mt-bar__label { color: var(--mt-gold); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mt-bar__item strong { color: var(--mt-text); font-weight: 600; }
.mt-bar__place { margin-left: auto; }
.mt-bar__place a { color: var(--mt-muted); text-decoration: none; border-bottom: 1px dotted var(--mt-muted); }
.mt-bar__place a:hover { color: var(--mt-gold); }

.mt-box {
	display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 32px; align-items: center;
	background: var(--mt-card); border: 1px solid var(--mt-line); border-radius: 14px; padding: 28px;
}
.mt-box__canvas { width: 100%; height: auto; display: block; max-width: 280px; margin: 0 auto; }
.mt-box__kicker { margin: 0 0 6px; color: var(--mt-gold); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mt-box__phase { margin: 0 0 4px; font-family: var(--mn-serif, Georgia, "Times New Roman", serif); font-size: 34px; line-height: 1.1; color: var(--mt-text); }
.mt-box__lit { margin: 0 0 18px; color: var(--mt-muted); font-size: 15px; }
.mt-box__lit span { color: var(--mt-text); font-weight: 600; }
.mt-box__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin: 0 0 20px; }
.mt-box__facts div { border-top: 1px solid var(--mt-line); padding-top: 8px; }
.mt-box__facts dt { color: var(--mt-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.mt-box__facts dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; }
.mt-box__where { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--mt-muted); }
.mt-box__where select {
	background: var(--mt-bg); color: var(--mt-text); border: 1px solid var(--mt-line);
	border-radius: 8px; padding: 8px 10px; font-size: 14px;
}
.mt-box__geo {
	background: transparent; color: var(--mt-gold); border: 1px solid var(--mt-gold);
	border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer;
}
.mt-box__geo:hover { background: var(--mt-gold); color: #10142a; }
.mt-box__note { margin: 12px 0 0; font-size: 12px; color: var(--mt-muted); min-height: 1em; }

@media (max-width: 640px) {
	.mt-box { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
	.mt-box__phase { font-size: 28px; }
	.mt-bar__place { margin-left: 0; }
}

@keyframes mt-flash { 0% { background-color: rgba(232,212,154,.22); } 100% { background-color: transparent; } }
.mt-flash { animation: mt-flash .9s ease-out; }