/* 鐵板神數前端樣式（動態版）— 全部 scoped 於 .tbss- 前綴，避免污染主題 */

.tbss-box {
	--tbss-ink: #2b2b2b;
	--tbss-accent: #7c2d12;
	--tbss-accent2: #9a3412;
	--tbss-gold: #b08d3e;
	--tbss-paper: #faf7f0;
	--tbss-border: #e3dccb;
	--tbss-hit: #fef3c7;
	max-width: 940px;
	margin: 0 auto;
	color: var(--tbss-ink);
	line-height: 1.7;
	background: var(--tbss-paper);
	border: 1px solid var(--tbss-border);
	border-radius: 14px;
	padding: 24px 26px;
	box-sizing: border-box;
}

/* ---------- 表單 ---------- */
.tbss-form .tbss-row { display: flex; flex-wrap: wrap; gap: 1em; margin-bottom: 1em; }
.tbss-form label { display: flex; flex-direction: column; font-size: .92em; gap: .35em; flex: 1 1 auto; }
.tbss-form select, .tbss-form input[type=date], .tbss-form input[type=time],
.tbss-form input[type=text], .tbss-form input[type=number] {
	padding: .55em .6em; border: 1px solid var(--tbss-border); border-radius: 8px;
	background: #fff; font: inherit; color: inherit; min-height: 44px; box-sizing: border-box;
}
.tbss-btn {
	background: var(--tbss-accent); color: #fff; border: 0; padding: .7em 1.8em;
	border-radius: 8px; cursor: pointer; font-size: 1.02em; min-height: 44px;
	transition: background .15s, transform .08s;
}
.tbss-btn:hover { background: var(--tbss-accent2); }
.tbss-btn:active { transform: translateY(1px); }
.tbss-btn:disabled { opacity: .5; cursor: wait; }
.tbss-btn-ghost { background: transparent; color: var(--tbss-accent); border: 1px solid var(--tbss-accent); }
.tbss-btn-ghost:hover { background: var(--tbss-accent); color: #fff; }
.tbss-actions { display: flex; gap: .6em; flex-wrap: wrap; }

/* 訪客鎖定完整解讀提示 */
.tbss-locked { text-align: center; background: rgba(255,255,255,.8); }
.tbss-locked-icon { font-size: 1.8em; margin-bottom: .2em; }
.tbss-locked p { max-width: 520px; margin: 0 auto; color: #555; }
.tbss-locked-nav { display: flex; gap: .6em; justify-content: center; flex-wrap: wrap; margin-top: .8em; }
a.tbss-btn { text-decoration: none; display: inline-block; }

.tbss-cal { border: 1px solid var(--tbss-border); border-radius: 8px; padding: .5em .8em; display: flex; align-items: center; gap: 1em; flex-wrap: wrap; margin: 0; }
.tbss-cal-legend { font-size: .85em; color: var(--tbss-gold); }
.tbss-inline { flex-direction: row !important; align-items: center; gap: .3em !important; white-space: nowrap; }
.tbss-inline input { min-height: 0; width: auto; }
.tbss-leap { color: #8a8378; }

.tbss-kaoke { margin: 0 0 1em; }
.tbss-kaoke summary { cursor: pointer; color: var(--tbss-accent); font-size: .92em; }
.tbss-kaoke .tbss-row { margin-top: .8em; }

/* ---------- 載入動畫（起數推演） ---------- */
.tbss-loading { text-align: center; padding: 28px 0; }
.tbss-abacus {
	display: inline-flex; gap: 8px; margin-bottom: 12px;
}
.tbss-abacus span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 54px; font-size: 1.6em; font-weight: 700;
	color: var(--tbss-accent); background: #fff;
	border: 1px solid var(--tbss-border); border-radius: 8px;
	box-shadow: inset 0 -2px 0 rgba(0,0,0,.05);
}
.tbss-ring {
	width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%;
	background: conic-gradient(var(--tbss-gold), var(--tbss-accent), var(--tbss-gold));
	-webkit-mask: radial-gradient(farthest-side, transparent 60%, #000 62%);
	mask: radial-gradient(farthest-side, transparent 60%, #000 62%);
	animation: tbss-spin .9s linear infinite;
}
@keyframes tbss-spin { to { transform: rotate(360deg); } }
.tbss-loading p { color: var(--tbss-gold); letter-spacing: .1em; margin: 0; }

/* ---------- 結果分段淡入 ---------- */
.tbss-reveal { opacity: 0; animation: tbss-rise .5s ease forwards; }
@keyframes tbss-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.tbss-result h3 { margin: .2em 0 .6em; color: var(--tbss-accent); }
.tbss-result h4 { margin: 1.2em 0 .5em; color: var(--tbss-accent); border-left: 3px solid var(--tbss-gold); padding-left: .5em; }
.tbss-part {
	margin: 1.6em 0 .8em; padding: .35em .7em; font-size: 1.15em;
	color: #fff; background: linear-gradient(90deg, var(--tbss-accent), var(--tbss-accent2));
	border-radius: 8px; letter-spacing: .05em;
}
.tbss-result h3.tbss-part:first-child { margin-top: 0; }

/* 卡片格：本命四要、六親三宮、流年階段 */
.tbss-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: .6em 0; }
.tbss-card { border: 1px solid var(--tbss-border); border-radius: 10px; padding: .8em .9em; background: rgba(255,255,255,.5); }
.tbss-card-h { font-weight: 700; color: var(--tbss-accent); margin-bottom: .35em; padding-bottom: .3em; border-bottom: 1px dashed var(--tbss-border); }
.tbss-card p { margin: .3em 0; }
.tbss-note { font-size: .8em; color: #8a8378; margin: .5em 0 0; }
.tbss-verify { font-size: .85em; margin: .5em 0 0; padding: .4em .6em; border-radius: 6px; background: rgba(21,128,61,.12); color: #15803d; border-left: 3px solid #15803d; }
.tbss-verify-no { background: rgba(138,131,120,.12); color: #6b6459; border-left-color: #b9b2a6; }

.tbss-stages { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tbss-events { margin: .2em 0 0; padding-left: 1.2em; }
.tbss-events li { margin: .35em 0; line-height: 1.6; }
.tbss-badge { display: inline-block; font-size: .78em; padding: .05em .5em; border-radius: 10px; color: #fff; vertical-align: middle; }
.tbss-ji { background: #15803d; }
.tbss-xiong { background: #b91c1c; }
.tbss-zhuan { background: var(--tbss-gold); }
.tbss-ke-list { margin: .4em 0 1em; padding-left: 1.4em; }
.tbss-ke-list li { margin: .35em 0; line-height: 1.65; }
.tbss-ke-list li.tbss-hit { background: var(--tbss-hit); border-radius: 6px; padding: .25em .5em; }
.tbss-kaoke-q { align-items: flex-end; }
.tbss-kaoke-scores { margin: .6em 0; }
.tbss-lock { align-items: flex-end; gap: .8em; }
.tbss-lock select { min-height: 44px; }
.tbss-tuiming { margin-top: 1em; }
.tbss-liunian-full { margin-top: 1em; }
.tbss-liunian-full > summary { cursor: pointer; color: var(--tbss-accent); font-weight: 600; padding: .3em 0; }

/* ---------- 表格 ---------- */
.tbss-table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.tbss-table th, .tbss-table td { border: 1px solid var(--tbss-border); padding: .5em .7em; text-align: left; }
.tbss-table th { background: #f3ede0; white-space: nowrap; width: 7em; font-weight: 600; }
.tbss-bazi { font-size: 1.18em; letter-spacing: .18em; font-weight: 700; color: var(--tbss-accent); }
.tbss-verses li { margin: .45em 0; line-height: 1.75; }
.tbss-hit { background: var(--tbss-hit); border-radius: 6px; padding: .3em .5em; }
.tbss-warn { color: #b91c1c; }
.tbss-disclaimer { margin-top: 2em; font-size: .8em; color: #8a8378; }
.tbss-scroll {
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	scrollbar-width: thin; scrollbar-color: var(--tbss-accent) var(--tbss-border);
	border: 1px solid var(--tbss-border); border-radius: 8px;
}
.tbss-scroll::-webkit-scrollbar { height: 12px; }
.tbss-scroll::-webkit-scrollbar-track { background: var(--tbss-border); border-radius: 8px; }
.tbss-scroll::-webkit-scrollbar-thumb { background: var(--tbss-accent); border-radius: 8px; }
.tbss-scroll .tbss-table { margin: 0; }
.tbss-scroll-hint { margin: .4em 0 .3em; font-size: .82em; color: var(--tbss-gold); text-align: center; }
.tbss-liunian-table { font-size: .85em; white-space: nowrap; }
.tbss-liunian-table td:nth-child(5), .tbss-liunian-table td:nth-child(7),
.tbss-liunian-table td:nth-child(9) { white-space: normal; min-width: 10em; }

/* ---------- 手機版優化 ---------- */
@media (max-width: 600px) {
	.tbss-box { padding: 16px 14px; border-radius: 10px; }
	.tbss-form .tbss-row { flex-direction: column; gap: .7em; }
	.tbss-form label { font-size: .95em; }
	.tbss-btn { width: 100%; }
	/* 鍵值表在窄螢幕改為上下堆疊，避免 7em 標題擠壓 */
	.tbss-kv .tbss-table, .tbss-kv .tbss-table tbody,
	.tbss-kv .tbss-table tr, .tbss-kv .tbss-table th, .tbss-kv .tbss-table td { display: block; width: auto; }
	.tbss-kv .tbss-table tr { margin-bottom: .6em; border: 1px solid var(--tbss-border); border-radius: 8px; overflow: hidden; }
	.tbss-kv .tbss-table th { background: #f3ede0; border: 0; }
	.tbss-kv .tbss-table td { border: 0; border-top: 1px dashed var(--tbss-border); }
	.tbss-bazi { font-size: 1.05em; letter-spacing: .1em; }
	.tbss-abacus span { width: 34px; height: 46px; font-size: 1.3em; }
}

/* ---------- 深色模式 ---------- */
@media (prefers-color-scheme: dark) {
	.tbss-box { --tbss-ink: #e7e2d6; --tbss-paper: #23201b; --tbss-border: #44403c; --tbss-hit: #451a03; --tbss-accent: #e08a5a; --tbss-accent2: #f0a172; }
	.tbss-form select, .tbss-form input { background: #2b2823; }
	.tbss-table th { background: #2b2823; }
	.tbss-abacus span { background: #2b2823; }
	.tbss-kv .tbss-table th { background: #2b2823; }
	.tbss-card { background: rgba(255,255,255,.05); }
}

/* ---------- 列印 ---------- */
@media print {
	body * { visibility: hidden; }
	.tbss-result, .tbss-result * { visibility: visible; }
	.tbss-result { position: absolute; left: 0; top: 0; width: 100%; }
	.tbss-result .tbss-noprint { display: none; }
	.tbss-reveal { opacity: 1 !important; animation: none !important; }
	.tbss-scroll { overflow: visible; }
	.tbss-liunian-table { font-size: 8pt; }
	.tbss-liunian-full[open] > summary, .tbss-liunian-full > summary { list-style: none; }
	.tbss-liunian-full > *:not(summary) { display: block !important; }
	.tbss-cards { display: block; }
	.tbss-card { break-inside: avoid; margin-bottom: .5em; }
}