/*!
 * 天元烏兔擇日萬年曆 — 樣式
 * 所有選擇器都封裝在 .tianyuan-wannianli-container 之內，避免外洩到 WP 主題。
 * 視覺輸出與原版 index.html 一致。
 */

.tianyuan-wannianli-container {
	/* CSS variables (原版 :root) */
	--ink: #1a1a2e;
	--ink-light: #3d3d5c;
	--ink-faint: #8888a0;
	--paper: #f5f0e8;
	--paper-dark: #e8e0d0;
	--paper-light: #faf7f2;
	--vermillion: #c0392b;
	--vermillion-light: #e74c3c;
	--gold: #b8860b;
	--gold-light: #d4a017;
	--indigo: #1a3a5c;
	--indigo-light: #2c5f8a;
	--purple: #5b2c6f;
	--purple-light: #7d3c98;
	--jade: #1e6e50;
	--jade-light: #27ae60;
	--sun-bg: #fce3d7;
	--sat-bg: #f0f0ff;
	--term-bg: #e8f5e9;
	--radius: 6px;
	--shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

	/* container 自身（原版 body 部分樣式） */
	font-family: 'Noto Sans TC', sans-serif;
	background: linear-gradient(135deg, #e8e0d0 0%, #f5f0e8 50%, #e8e0d0 100%);
	color: var(--ink);
	padding: 20px 12px 40px;
}

/* 容器內 reset（原版 *），鎖在容器內以免影響 WP 主題 */
.tianyuan-wannianli-container,
.tianyuan-wannianli-container * {
	box-sizing: border-box;
}
.tianyuan-wannianli-container h1,
.tianyuan-wannianli-container div,
.tianyuan-wannianli-container button,
.tianyuan-wannianli-container input,
.tianyuan-wannianli-container select,
.tianyuan-wannianli-container span,
.tianyuan-wannianli-container table,
.tianyuan-wannianli-container thead,
.tianyuan-wannianli-container tbody,
.tianyuan-wannianli-container tr,
.tianyuan-wannianli-container th,
.tianyuan-wannianli-container td,
.tianyuan-wannianli-container a {
	margin: 0;
	padding: 0;
}

/* App header */
.tianyuan-wannianli-container .tw-app-header {
	text-align: center;
	padding: 24px 0 16px;
}
.tianyuan-wannianli-container .tw-app-header h1 {
	font-family: 'Noto Serif TC', serif;
	font-size: 2.2em;
	font-weight: 900;
	color: var(--indigo);
	letter-spacing: 12px;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
}
.tianyuan-wannianli-container .tw-app-header .tw-sub {
	font-size: 0.85em;
	color: var(--ink-faint);
	letter-spacing: 4px;
	margin-top: 4px;
}
.tianyuan-wannianli-container .tw-app-header .tw-sub a {
	color: var(--gold);
	text-decoration: none;
}

/* Main grid */
.tianyuan-wannianli-container .tw-main-grid {
	display: grid;
	grid-template-columns: 1fr 270px 240px;
	gap: 14px;
	max-width: 1440px;
	margin: 0 auto;
	align-items: start;
}
@media (max-width: 1200px) {
	.tianyuan-wannianli-container .tw-main-grid {
		grid-template-columns: 1fr;
		max-width: 640px;
	}
}

/* Side column wrappers (原 HTML 內聯 flex-column) */
.tianyuan-wannianli-container .tw-side-col,
.tianyuan-wannianli-container .tw-bazi-col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-self: start;
}
.tianyuan-wannianli-container .tw-side-col {
	gap: 16px;
}

/* Panels */
.tianyuan-wannianli-container .tw-panel {
	background: var(--paper-light);
	border-radius: 10px;
	box-shadow: var(--shadow);
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.06);
}
.tianyuan-wannianli-container .tw-panel-header {
	padding: 10px 16px;
	font-family: 'Noto Serif TC', serif;
	font-size: 1.1em;
	font-weight: 700;
	letter-spacing: 6px;
	text-align: center;
	color: #fff;
}
.tianyuan-wannianli-container .tw-panel-header--cal  { background: var(--indigo); }
.tianyuan-wannianli-container .tw-panel-header--hour { background: var(--purple); }
.tianyuan-wannianli-container .tw-panel-header--bazi { background: var(--vermillion); }

/* Calendar controls */
.tianyuan-wannianli-container .tw-cal-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 8px 8px;
	flex-wrap: wrap;
}
.tianyuan-wannianli-container .tw-cal-controls button {
	width: 34px;
	height: 34px;
	border: 1px solid #d0d0d0;
	border-radius: var(--radius);
	background: #fff;
	font-size: 16px;
	cursor: pointer;
	color: var(--ink);
	transition: all 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tianyuan-wannianli-container .tw-cal-controls button:hover {
	background: var(--paper-dark);
}
.tianyuan-wannianli-container .tw-cal-controls input,
.tianyuan-wannianli-container .tw-cal-controls select {
	font-family: 'Noto Serif TC', serif;
	font-size: 1.1em;
	font-weight: 700;
	text-align: center;
	border: 2px solid var(--indigo);
	border-radius: var(--radius);
	padding: 4px 8px;
	color: var(--indigo);
	background: #fff;
}
.tianyuan-wannianli-container .tw-cal-controls input {
	width: 82px;
}
.tianyuan-wannianli-container .tw-cal-controls select {
	min-width: 90px;
}
.tianyuan-wannianli-container .tw-cal-controls .tw-label {
	font-weight: 600;
	font-size: 0.95em;
}
.tianyuan-wannianli-container .tw-today-btn {
	font-size: 0.8em;
	color: var(--gold);
	cursor: pointer;
	background: var(--paper-light);
	border: 1px solid #d0c8b8;
	border-radius: var(--radius);
	letter-spacing: 1px;
	font-family: 'Noto Sans TC', sans-serif;
	padding: 6px 18px;
	white-space: nowrap;
	min-width: 70px;
	/* 蓋掉上面 .tw-cal-controls button 的固定寬高 */
	width: auto;
	height: auto;
}

/* Calendar grid */
.tianyuan-wannianli-container .tw-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	padding: 4px 8px 8px;
}
.tianyuan-wannianli-container .tw-cal-weekday {
	text-align: center;
	font-size: 0.8em;
	font-weight: 700;
	padding: 6px 0 4px;
	letter-spacing: 2px;
	border-bottom: 2px solid var(--indigo);
}
.tianyuan-wannianli-container .tw-cal-weekday.tw-sun { color: var(--vermillion); }
.tianyuan-wannianli-container .tw-cal-weekday.tw-sat { color: var(--indigo-light); }

/* Calendar cell */
.tianyuan-wannianli-container .tw-cal-cell {
	padding: 5px 2px 4px;
	text-align: center;
	min-height: 62px;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.12s;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	position: relative;
}
.tianyuan-wannianli-container .tw-cal-cell:hover {
	background: rgba(44, 95, 138, 0.06);
	transform: scale(1.02);
}
.tianyuan-wannianli-container .tw-cal-cell.tw-other {
	opacity: 0.2;
	pointer-events: none;
}
.tianyuan-wannianli-container .tw-cal-cell.tw-sun-bg { background: var(--sun-bg); }
.tianyuan-wannianli-container .tw-cal-cell.tw-sat-bg { background: var(--sat-bg); }
.tianyuan-wannianli-container .tw-cal-cell.tw-selected {
	background: linear-gradient(135deg, #ffeaa7, #fdcb6e) !important;
	box-shadow: 0 2px 8px rgba(253, 203, 110, 0.5);
}
.tianyuan-wannianli-container .tw-cal-cell.tw-term-day { background: var(--term-bg); }

.tianyuan-wannianli-container .tw-cal-cell .tw-day-num {
	font-family: 'Noto Serif TC', serif;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.2;
}
.tianyuan-wannianli-container .tw-cal-cell.tw-sun-bg .tw-day-num { color: var(--vermillion); }
.tianyuan-wannianli-container .tw-cal-cell.tw-sat-bg .tw-day-num { color: var(--indigo-light); }
.tianyuan-wannianli-container .tw-cal-cell .tw-lunar {
	font-size: 0.68em;
	color: var(--gold);
	line-height: 1.2;
}
.tianyuan-wannianli-container .tw-cal-cell .tw-lunar.tw-month-first {
	font-weight: 700;
	color: var(--vermillion-light);
}
.tianyuan-wannianli-container .tw-cal-cell .tw-lunar.tw-term {
	font-weight: 700;
	color: var(--jade);
}
.tianyuan-wannianli-container .tw-cal-cell .tw-gz {
	font-size: 0.6em;
	color: var(--ink-faint);
	line-height: 1.2;
}
.tianyuan-wannianli-container .tw-cal-cell .tw-star {
	font-size: 0.62em;
	font-weight: 600;
	color: var(--purple);
	line-height: 1.2;
}

/* Footer */
.tianyuan-wannianli-container .tw-cal-footer {
	text-align: center;
	padding: 6px 8px 10px;
	font-size: 0.72em;
	color: var(--ink-faint);
}
.tianyuan-wannianli-container .tw-cal-footer .tw-jade   { color: var(--jade); }
.tianyuan-wannianli-container .tw-cal-footer .tw-purple { color: var(--purple); }

/* Hour panel */
.tianyuan-wannianli-container .tw-hour-info {
	padding: 8px 12px;
	text-align: center;
	font-size: 0.85em;
	background: #f8f4ff;
}
.tianyuan-wannianli-container .tw-hour-info .tw-date-line {
	font-weight: 700;
	color: var(--ink);
}
.tianyuan-wannianli-container .tw-hour-info .tw-hour-lunar-line {
	color: var(--ink);
}
.tianyuan-wannianli-container .tw-hour-info .tw-star-line {
	font-weight: 700;
	color: var(--purple);
}
.tianyuan-wannianli-container .tw-hour-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82em;
}
.tianyuan-wannianli-container .tw-hour-table th {
	background: var(--purple);
	color: #fff;
	padding: 5px 4px;
	font-weight: 600;
	user-select: none;
}
.tianyuan-wannianli-container .tw-hour-table td {
	padding: 4px;
	text-align: center;
	border-bottom: 1px solid #e8e0f0;
}
.tianyuan-wannianli-container .tw-hour-table tr:nth-child(even) td {
	background: #f3e8ff;
}
.tianyuan-wannianli-container .tw-hour-table .tw-star-col {
	font-weight: 700;
	color: var(--purple);
}
.tianyuan-wannianli-container .tw-hour-table tbody tr {
	cursor: pointer;
	transition: all 0.12s;
}
.tianyuan-wannianli-container .tw-hour-table tbody tr:hover td {
	background: rgba(91, 44, 111, 0.08);
}
.tianyuan-wannianli-container .tw-hour-table tbody tr.tw-selected td {
	background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
	font-weight: 700;
}
.tianyuan-wannianli-container .tw-hour-table tbody tr.tw-selected .tw-star-col {
	color: var(--indigo);
}
.tianyuan-wannianli-container .tw-hour-hint {
	text-align: center;
	font-size: 0.7em;
	color: var(--ink-faint);
	padding: 4px 0 6px;
}

/* Bazi panel */
.tianyuan-wannianli-container .tw-bazi-pillars {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	padding: 8px;
}
.tianyuan-wannianli-container .tw-bazi-pillar {
	text-align: center;
}
.tianyuan-wannianli-container .tw-bazi-pillar .tw-plabel {
	font-size: 0.72em;
	font-weight: 700;
	color: #fff;
	background: var(--vermillion);
	padding: 3px 0;
	border-radius: 4px 4px 0 0;
}
.tianyuan-wannianli-container .tw-bazi-pillar .tw-stem {
	font-family: 'Noto Serif TC', serif;
	font-size: 1.6em;
	font-weight: 900;
	color: var(--vermillion);
	background: #ffeedd;
	padding: 4px 0;
	border: 2px solid #d4a574;
	border-bottom: 1px solid #d4a574;
}
.tianyuan-wannianli-container .tw-bazi-pillar .tw-branch {
	font-family: 'Noto Serif TC', serif;
	font-size: 1.6em;
	font-weight: 900;
	color: var(--indigo);
	background: #ffe0cc;
	padding: 4px 0;
	border: 2px solid #d4a574;
	border-top: 1px solid #d4a574;
	border-radius: 0 0 4px 4px;
}
.tianyuan-wannianli-container .tw-bazi-hour-star {
	text-align: center;
	padding: 4px;
	font-size: 0.85em;
	font-weight: 700;
	color: var(--purple);
	background: #fff8f0;
}