/* fengshui.jic.io —— 宣纸为底，墨色为字，朱色为阳山与强调，青色为向星与水 */
:root {
	--paper: #efe9dc; --paper2: #e6dfcf; --card: #f9f5ec;
	--ink: #1d1b17; --ink2: #575045; --ink3: #8a8174;
	--line: rgba(29, 27, 23, 0.15);
	--zhu: #b03a24; --zhu-soft: rgba(176, 58, 36, 0.1);
	--qing: #23675a; --qing-soft: rgba(35, 103, 90, 0.12);
	--gold: #94702a; --gold-soft: rgba(148, 112, 42, 0.14);
	--bad: #b03a24; --good: #23675a; --mid: #94702a;
	--board: #2a2520; --face: #f3e6c4; --face-ink: #1d1b17; --face-red: #b03a24; --tian: rgba(176, 58, 36, 0.09);
	--serif: "Songti SC", "Songti TC", "Noto Serif CJK SC", "Noto Serif CJK TC", "Source Han Serif SC", "SimSun", serif;
	--kai: "Kaiti SC", "Kaiti TC", "STKaiti", "KaiTi", var(--serif);
	--mono: "SF Mono", Menlo, Consolas, monospace;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--paper: #0e1211; --paper2: #151b19; --card: #131917;
		--ink: #e9e2d0; --ink2: #b4ab9a; --ink3: #82796c;
		--line: rgba(233, 226, 208, 0.14);
		--zhu: #ff7d5e; --zhu-soft: rgba(255, 125, 94, 0.14);
		--qing: #5fd1b5; --qing-soft: rgba(95, 209, 181, 0.14);
		--gold: #e9c26a; --gold-soft: rgba(233, 194, 106, 0.14);
		--bad: #ff7d5e; --good: #5fd1b5; --mid: #e9c26a;
		--board: #050706; --face: #1d211e; --face-ink: #e9e2d0; --face-red: #ff7d5e; --tian: rgba(255, 125, 94, 0.08);
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--paper: #0e1211; --paper2: #151b19; --card: #131917;
	--ink: #e9e2d0; --ink2: #b4ab9a; --ink3: #82796c;
	--line: rgba(233, 226, 208, 0.14);
	--zhu: #ff7d5e; --zhu-soft: rgba(255, 125, 94, 0.14);
	--qing: #5fd1b5; --qing-soft: rgba(95, 209, 181, 0.14);
	--gold: #e9c26a; --gold-soft: rgba(233, 194, 106, 0.14);
	--bad: #ff7d5e; --good: #5fd1b5; --mid: #e9c26a;
	--board: #050706; --face: #1d211e; --face-ink: #e9e2d0; --face-red: #ff7d5e; --tian: rgba(255, 125, 94, 0.08);
	color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.85 var(--serif); }
a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { color: var(--zhu); }
h1, h2, h3 { font-family: var(--kai); font-weight: 600; line-height: 1.3; }
h1 { font-size: clamp(30px, 6vw, 46px); margin: 0 0 8px; }
h2 { font-size: 25px; margin: 40px 0 10px; }
h3 { font-size: 18px; margin: 24px 0 6px; color: var(--zhu); }
h3 small, h2 small { color: var(--ink3); font-size: 13px; margin-left: 6px; font-family: var(--serif); font-weight: 400; }
code { font-family: var(--mono); font-size: 0.88em; }
button, input, select { font: inherit; color: inherit; }
.loading { padding: 80px 20px; text-align: center; color: var(--ink3); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.28em; color: var(--gold); margin: 0 0 6px; text-transform: uppercase; }
.note { color: var(--ink2); font-size: 15px; max-width: 72ch; }
.small { font-size: 13px; color: var(--ink3); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.red { color: var(--zhu); } .qing { color: var(--qing); } .gold { color: var(--gold); }

/* 顶栏 */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 8px 18px; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand-seal { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; background: var(--zhu); color: #fbf4e6; font: 600 19px var(--kai); }
.brand-name { font: 600 18px var(--kai); }
.brand-sub { font: 12px var(--mono); color: var(--ink3); }
.nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { padding: 6px 11px; border-radius: 8px; text-decoration: none; white-space: nowrap; font-size: 15px; color: var(--ink2); }
.nav a.on { background: var(--zhu-soft); color: var(--zhu); }
.top-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.icon-btn { border: 1px solid var(--line); background: var(--card); border-radius: 8px; height: 32px; min-width: 32px; padding: 0 8px; cursor: pointer; }
@media (max-width: 760px) {
	.top { flex-wrap: wrap; padding: 8px 16px; gap: 6px 10px; }
	.brand-sub { display: none; }
	.nav { order: 3; flex-basis: 100%; margin: 0 -6px; }
	.top-tools { margin-left: auto; }
}

main { max-width: 1120px; margin: 0 auto; padding: 22px 16px 60px; }
.foot { max-width: 1120px; margin: 0 auto; padding: 22px 16px 50px; border-top: 1px solid var(--line); color: var(--ink3); font-size: 13px; }
.foot a { color: var(--ink2); }

/* 卡片、表单 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ctrl { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.ctrl label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink3); }
.ctrl input, .ctrl select { border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 6px 9px; font-size: 15px; min-width: 0; }
.ctrl input[type=number] { width: 96px; }
.ctrl input[type=range] { width: min(320px, 70vw); padding: 0; accent-color: var(--zhu); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button { border: 0; background: var(--paper); padding: 6px 11px; cursor: pointer; font-size: 14px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--zhu); color: #fbf4e6; }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--zhu); background: var(--zhu); color: #fbf4e6; border-radius: 9px; padding: 7px 14px; cursor: pointer; text-decoration: none; font-size: 15px; }
.btn:hover { color: #fbf4e6; filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--zhu); }
.tag { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink2); margin: 0 4px 4px 0; }
.tag.good { border-color: var(--good); color: var(--good); }
.tag.bad { border-color: var(--bad); color: var(--bad); }
.tag.mid { border-color: var(--mid); color: var(--mid); }
table.t { border-collapse: collapse; width: 100%; font-size: 15px; }
table.t th, table.t td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
table.t th { font-weight: 600; color: var(--ink2); font-size: 13px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 15px; }
.kv dt { color: var(--ink3); }
.kv dd { margin: 0; }

/* 首页 */
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: center; margin: 6px 0 22px; }
.hero p { margin: 6px 0; }
.hero .lp-wrap { max-width: 440px; justify-self: center; width: 100%; }
.hero .lp-plate { animation: spin 240s linear infinite; transform-origin: 500px 500px; }
@keyframes spin { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .hero .lp-plate { animation: none; } }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } .hero .lp-wrap { max-width: 320px; } }
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 10px 0 8px; }
.tools a { display: block; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.tools a:hover { border-color: var(--zhu); color: inherit; }
.tools b { font: 600 19px var(--kai); display: block; }
.tools span { font-size: 14px; color: var(--ink2); }
.today { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
@media (max-width: 640px) { .today { grid-template-columns: 1fr; } }
blockquote { margin: 10px 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--zhu); font-family: var(--kai); font-size: 18px; color: var(--ink2); }
blockquote cite { display: block; font: 13px var(--serif); color: var(--ink3); font-style: normal; }

/* 罗盘 */
.luopan { width: 100%; height: auto; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.lp-board { fill: var(--board); }
.lp-face { fill: var(--face); }
.lp-pool { fill: var(--paper2); stroke: var(--face-ink); stroke-width: 1.5; }
.luopan text { fill: var(--face-ink); font-family: var(--serif); }
.luopan .lp-red { fill: var(--face-red); }
.lp-mt { font-weight: 700; font-family: var(--kai) !important; }
.lp-gua { font-family: var(--kai) !important; font-weight: 600; }
.lp-num { fill: var(--face-red) !important; font-family: var(--mono) !important; }
.lp-deg { font-family: var(--mono) !important; }
.lp-gname { opacity: 0.85; }
.lp-small { opacity: 0.75; }
.lp-line { stroke: var(--face-ink); stroke-width: 1.4; }
.lp-thin { stroke: var(--face-ink); stroke-width: 0.6; opacity: 0.55; }
.lp-tick { stroke: var(--face-ink); stroke-width: 0.7; }
.lp-tick5 { stroke: var(--face-ink); stroke-width: 1.3; }
.lp-tian { fill: var(--tian); }
.lp-yao { fill: var(--face-ink); }
.lp-needle-n { fill: var(--face-red); }
.lp-needle-s { fill: var(--face-ink); }
.lp-pin { fill: var(--gold); }
.lp-ziwu { stroke: var(--face-red); stroke-width: 1; stroke-dasharray: 3 4; }
.lp-cross { stroke: #e2412a; stroke-width: 2; opacity: 0.9; }
.lp-cross-h { opacity: 0.45; }
.lp-mark { fill: #e2412a; }
.lp-plate { transition: transform 0.12s linear; transform-origin: 500px 500px; }
.lp-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .lp-layout { grid-template-columns: 1fr; } }
.reading { font-size: 15px; }
.reading .big { font: 600 34px var(--kai); line-height: 1.2; }
.reading .deg { font: 600 26px var(--mono); color: var(--zhu); }

/* 九宫飞星盘 */
.pan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 2px solid var(--ink); max-width: 520px; aspect-ratio: 1; background: var(--card); }
.pan.mini { max-width: 210px; border-width: 1.5px; }
.cell { position: relative; border: 1px solid var(--line); display: grid; place-items: center; min-width: 0; }
.cell.c5 { background: var(--paper2); }
.cell.zuo { box-shadow: inset 0 0 0 3px var(--ink3); }
.cell.xiang { box-shadow: inset 0 0 0 3px var(--zhu); }
.cell .yun { font: 600 clamp(26px, 6vw, 42px) var(--kai); color: var(--ink2); }
.cell .s, .cell .w { position: absolute; top: 6%; font: 700 clamp(17px, 3.6vw, 26px) var(--mono); }
.cell .s { left: 10%; } .cell .w { right: 10%; }
.cell .ln { position: absolute; bottom: 6%; right: 9%; font: 13px var(--mono); color: var(--gold); }
.cell .gn { position: absolute; bottom: 5%; left: 8%; font-size: 12px; color: var(--ink3); }
.st-旺 { color: var(--good); } .st-生 { color: var(--good); opacity: 0.85; } .st-退 { color: var(--mid); } .st-衰 { color: var(--ink3); } .st-煞 { color: var(--bad); }
.pan.mini .cell .yun { font-size: 20px; }
.pan.mini .cell .gn { font-size: 10px; bottom: 2%; }
.pan.ziba .cell .yun { font-size: clamp(20px, 4vw, 30px); }
.pan.ziba .cell .nm { position: absolute; bottom: 6%; font-size: 12px; color: var(--ink3); }
.cell.hot { background: var(--zhu-soft); }
.pan-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink3); margin: 8px 0; }
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.months .m h4 { margin: 0 0 4px; font: 600 15px var(--kai); }
.months .m h4 small { color: var(--ink3); font: 12px var(--mono); margin-left: 4px; }

/* 八宅 */
.yn-good { color: var(--good); font-weight: 600; } .yn-bad { color: var(--bad); font-weight: 600; }
.pan.bz .cell { padding: 6px; text-align: center; line-height: 1.3; }
.pan.bz .cell b { font: 600 clamp(16px, 3.5vw, 22px) var(--kai); display: block; }
.pan.bz .cell small { font-size: 12px; color: var(--ink3); display: block; }

/* 古籍 */
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.books a { display: block; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; }
.books a:hover { border-color: var(--zhu); color: inherit; }
.books b { font: 600 18px var(--kai); }
.books .au { font-size: 13px; color: var(--ink3); margin-left: 6px; }
.books p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink2); line-height: 1.6; }
.reader { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 26px; }
@media (max-width: 820px) { .reader { grid-template-columns: 1fr; } .toc { max-height: 220px; } }
.toc { position: sticky; top: 64px; max-height: calc(100vh - 90px); overflow: auto; font-size: 14px; border-right: 1px solid var(--line); padding-right: 10px; }
@media (max-width: 820px) { .toc { position: static; border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 8px; } }
.toc a { display: block; padding: 3px 6px; border-radius: 6px; text-decoration: none; color: var(--ink2); }
.toc a.on { background: var(--zhu-soft); color: var(--zhu); }
.text { font-size: 18px; line-height: 2; max-width: 40em; }
.text p { margin: 0 0 0.9em; text-align: justify; }
.text h4 { font: 600 20px var(--kai); color: var(--zhu); margin: 1.2em 0 0.5em; }
.pager { display: flex; justify-content: space-between; gap: 10px; margin: 26px 0 0; font-size: 15px; }

/* 开源 */
.oss td:first-child { white-space: nowrap; }
.oss .use { color: var(--good); font-weight: 600; }
.stars { font-family: var(--mono); font-size: 13px; color: var(--ink3); }

/* 地图 */
#map { height: 360px; border-radius: 12px; border: 1px solid var(--line); margin-top: 10px; }
.leaflet-container { font: 13px var(--serif); }