/* 默認底色（宣紙）。0.4：設置裡的底色小卡片（.tcard）也從這裡開始，不繼承當前的底色 */
:root, .tcard {
  --paper: #eee2c4; --ink: #2a2019; --zhu: #b3312a; --ui: #f5edd9; --ui-line: rgba(60, 40, 20, .16);
  --inkshadow: rgba(42, 32, 25, .45); --tex: .55; --vig: rgba(105, 70, 30, .18);
  --link: #8a6a45; --tab: #9b4a32;
  --hl-y: rgba(247, 205, 70, .5); --hl-r: rgba(232, 98, 112, .32); --hl-g: rgba(112, 196, 120, .36); --hl-b: rgba(96, 164, 236, .32);
}
:root {
  --font: "KS UKai", "LXGW WenKai TC", "KaiTi", "STKaiti", serif;
  --uifont: "KS UKai", "LXGW WenKai TC", serif;
}
/* 跟著墨色、朱色走的顏色必須寫在設定底色的那一層算（body、底色小卡片）：寫在 :root 上會按白天的墨色定死，
   夜讀時深色的版框、界行就畫在深色紙上看不見了（0.2.0 的錯，0.2.1 改正）。
   0.4：紙紋也由每種底色給出（--tex-img）；默認是四邊微暗 + 細紋 + 長纖維 */
body, .tcard {
  --frame: var(--ink); --rule: var(--ink); --note: var(--zhu); --zl: var(--zhu); --ontab: var(--paper);
  --ai: #2f5d7c;    /* 0.3：AI 批注的黛藍墨色（夜讀見 data-dark） */
  --rule-op: .45;   /* 界行濃淡 */
  --foot: .72;      /* 地腳字濃淡 */
  --tex-img:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 60%, var(--vig) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .30 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .20 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.01 .08' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .31 0 0 0 0 .17 0 0 0 .55 -.2'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
/* 底色（主題）。0.4 起寫成 [data-theme=…]，設置裡的小卡片也用得上；夜間主題另有 data-dark。
   新加的十種照 design/v0.4/themes.css 的小樣，都過了 test/harness.js 的對比度檢查 */
/* ---- 中式 ---- */
[data-theme=zhu] { --paper: #e4cf9d; --ink: #2b2014; --ui: #efe1bd; --vig: rgba(110, 72, 24, .22); }
[data-theme=tianqing] {
  --paper: #e8eee8; --ink: #20323a; --zhu: #c23b2e; --ui: #eef3ee; --ui-line: rgba(30, 60, 70, .16);
  --inkshadow: rgba(30, 50, 60, .35); --tex: .45; --vig: rgba(40, 80, 90, .14);
  --frame: #2f6f86; --rule: #2f6f86; --tab: #2f6f86; --link: #4b7b8c; --rule-op: .55;
}
[data-theme=qinglv] {
  --paper: #ece3c9; --ink: #22302a; --zhu: #b8402e; --ui: #f2ead4; --ui-line: rgba(40, 60, 50, .16);
  --inkshadow: rgba(30, 45, 38, .35); --tex: .5; --vig: rgba(80, 90, 50, .18);
  --frame: #2c5d84; --rule: #3c8a6e; --tab: #3c8a6e; --link: #4f7f6c; --rule-op: .6;
}
/* 藏經紙：北宋金粟山藏經紙，黃蠟箋；斑駁、纖維、簾紋 */
[data-theme=cangjing] {
  --paper: #dfc48a; --ink: #2c1d10; --zhu: #9c2b1d; --ui: #e9d6a8; --ui-line: rgba(80, 50, 15, .2);
  --inkshadow: rgba(44, 29, 16, .5); --tex: .9; --vig: rgba(110, 70, 20, .3);
  --frame: #4a2f17; --rule: #6b4a28; --rule-op: .5; --tab: #7b4b25; --link: #6e4f2c; --foot: .8;
  --hl-y: rgba(255, 240, 170, .55);
  --tex-img:
    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 50%, var(--vig) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='384' height='384'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.007' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .38 0 0 0 0 .24 0 0 0 0 .08 0 0 0 1.1 -.45'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.012 .1' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .30 0 0 0 0 .12 0 0 0 .75 -.26'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .30 0 0 0 0 .20 0 0 0 0 .08 0 0 0 .26 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    repeating-linear-gradient(0deg, rgba(95, 60, 18, .09) 0 1px, transparent 1px 3.6px),
    repeating-linear-gradient(90deg, rgba(95, 60, 18, .06) 0 2px, transparent 2px 64px);
}
/* 薛濤箋：唐代薛濤在成都自製的紅色小箋，取它的顏色做成極淡的桃粉 */
[data-theme=xuetao] {
  --paper: #f2e1d8; --ink: #2a1c1c; --zhu: #9b2335; --ui: #f7ebe5; --ui-line: rgba(90, 40, 40, .14);
  --inkshadow: rgba(42, 28, 28, .35); --tex: .4; --vig: rgba(150, 70, 70, .14);
  --frame: #5c3b3d; --rule: #8f6266; --rule-op: .55; --tab: #9a5560; --link: #8a5a5f;
}
/* 灑金箋：象牙白紙上灑細碎金箔。金箔由 tools/make_textures_v04.py 用固定的隨機種子生成，寫在兩個標記之間 */
[data-theme=sajin] {
  --paper: #f3ead6; --ink: #1e1913; --zhu: #b02f27; --ui: #f8f1e2; --ui-line: rgba(70, 50, 20, .14);
  --inkshadow: rgba(30, 25, 19, .35); --tex: 1; --vig: rgba(120, 90, 40, .12);
  --rule-op: .4; --tab: #8a6a22; --link: #7d6438;
  --tex-img:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 60%, var(--vig) 100%),
    /*FLECKS*/url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'331'%20height%3D'331'%3E%3Cpolygon%20points%3D'78.4%2C243.0%2078.0%2C241.9%2077.8%2C241.3%2079.5%2C241.7%2080.1%2C242.9%2079.7%2C243.9'%20fill%3D'%23a9802f'%20fill-opacity%3D'0.68'%2F%3E%3Cpolygon%20points%3D'118.7%2C248.6%20118.7%2C249.7%20117.2%2C249.5%20117.2%2C248.1%20118.3%2C248.1'%20fill%3D'%23d8b664'%20fill-opacity%3D'0.81'%2F%3E%3Cpolygon%20points%3D'295.0%2C177.2%20293.3%2C176.9%20293.4%2C176.2%20294.3%2C176.3'%20fill%3D'%23d8b664'%20fill-opacity%3D'0.88'%2F%3E%3Cpolygon%20points%3D'101.8%2C188.2%20100.0%2C188.5%20100.1%2C188.2%20100.2%2C187.5%20100.9%2C187.1%20102.1%2C188.0'%20fill%3D'%23b78f3c'%20fill-opacity%3D'0.75'%2F%3E%3Cpolygon%20points%3D'306.9%2C18.8%20309.4%2C18.2%20309.9%2C20.5%20308.9%2C21.7'%20fill%3D'%23b78f3c'%20fill-opacity%3D'0.86'%2F%3E%3Cpolygon%20points%3D'264.6%2C61.9%20262.4%2C60.1%20267.2%2C57.5%20270.0%2C58.2%20269.0%2C62.7'%20fill%3D'%23d8b664'%20fill-opacity%3D'0.67'%2F%3E%3Cpolygon%20points%3D'64.4%2C86.9%2067.0%2C86.7%2066.4%2C87.6%2064.8%2C88.5'%20fill%3D'%23b78f3c'%20fill-opacity%3D'0.88'%2F%3E%3Cpolygon%20points%3D'122.9%2C254.9%20123.1%2C255.8%20122.1%2C255.7%20122.2%2C255.1'%20fill%3D'%23e6cd86'%20fill-opacity%3D'0.65'%2F%3E%3Cpolygon%20points%3D'322.8%2C245.7%20319.4%2C242.7%20318.9%2C239.5%20324.5%2C242.6'%20fill%3D'%23b78f3c'%20fill-opacity%3D'0.52'%2F%3E%3Cpolygon%20points%3D'214.2%2C136.3%20214.7%2C136.6%20213.9%2C137.3%20213.0%2C137.7%20213.1%2C137.4%20213.3%2C136.2%20213.9%2C136.2'%20fill%3D'%23d8b664'%20fill-opacity%3D'0.87'%2F%3E%3Cpolygon%20points%3D'243.3%2C301.6%20242.1%2C299.7%20243.5%2C299.8%20244.1%2C300.5'%20fill%3D'%23e6cd86'%20fill-opacity%3D'0.76'%2F%3E%3Cpolygon%20points%3D'235.5%2C56.9%20234.5%2C56.6%20233.8%2C55.8%20235.6%2C55.3%20235.9%2C55.7'%20fill%3D'%23b78f3c'%20fill-opacity%3D'0.83'%2F%3E%3Cpolygon%20points%3D'294.8%2C178.2%20295.3%2C177.2%20296.0%2C178.0%20296.7%2C179.0%20295.0%2C179.2'%20fill%3D'%23c9a14e'%20fill-opacity%3D'0.69'%2F%3E%3Cpolygon%20points%3D'237.2%2C159.5%20236.0%2C159.6%20235.6%2C159.7%20235.3%2C159.2%20235.4%2C158.5%20235.8%2C157.9%20236.9%2C158.8'%20fill%3D'%23a9802f'%20fill-opacity%3D'0.83'%2F%3E%3Cpolygon%20points%3D'84.3%2C26.8%2085.2%2C26.1%2085.4%2C26.1%2086.5%2C27.0%2085.7%2C27.5%2084.6%2C28.1%2084.6%2C27.3'%20fill%3D'%23e6cd86'%20fill-opacity%3D'0.68'%2F%3E%3Cpolygon%20points%3D'141.6%2C257.0%20139.6%2C256.8%20138.4%2C256.5%20139.0%2C254.0%20141.0%2C255.2'%20fill%3D'%23a9802f'%20fill-opacity%3D'0.77'%2F%3E%3Cpolygon%20points%3D'33.8%2C189.4%2027.5%2C191.2%2022.0%2C190.7%2025.2%2C184.4%2027.3%2C178.5%2033.3%2C183.8'%20fill%3D'%23a9802f'%20fill-opacity%3D'0.53'%2F%3E%3Cpolygon%20points%3D'311.8%2C311.3%20311.3%2C312.5%20310.4%2C312.5%20309.6%2C311.3%20310.6%2C311.1'%20fill%3D'%23b78f3c'%20fill-opacity%3D'0.87'%2F%3E%3Cpolygon%20points%3D'289.3%2C185.8%20288.8%2C185.3%20289.5%2C184.9%20290.2%2C185.3'%20fill%3D'%23b78f3c'%20fill-opacity%3D'0.86'%2F%3E%3Cpolygon%20points%3D'219.0%2C111.5%20218.7%2C112.2%20218.4%2C112.8%20218.1%2C112.2%20217.9%2C111.8%20217.9%2C111.2'%20fill%3D'%23b78f3c'%20fill-opacity%3D'0.87'%2F%3E%3Cpolygon%20points%3D'54.6%2C208.8%2055.0%2C208.3%2056.5%2C207.7%2056.5%2C208.7%2055.4%2C209.9%2054.0%2C210.0'%20fill%3D'%23a9802f'%20fill-opacity%3D'0.91'%2F%3E%3Cpolygon%20points%3D'90.8%2C288.9%2090.3%2C289.2%2088.7%2C289.3%2089.0%2C288.7%2090.1%2C288.5'%20fill%3D'%23e6cd86'%20fill-opacity%3D'0.80'%2F%3E%3Cpolygon%20points%3D'314.5%2C1.5%20313.4%2C1.7%20312.8%2C0.4%20313.4%2C0.1%20314.7%2C0.4'%20fill%3D'%23b78f3c'%20fill-opacity%3D'0.65'%2F%3E%3Cpolygon%20points%3D'75.3%2C164.8%2075.8%2C164.7%2076.5%2C164.5%2076.5%2C165.1%2076.2%2C165.5%2075.5%2C165.5'%20fill%3D'%23c9a14e'%20fill-opacity%3D'0.98'%2F%3E%3Cpolygon%20points%3D'89.9%2C199.4%2089.9%2C199.8%2089.8%2C200.4%2088.7%2C200.2%2088.1%2C199.8%2088.5%2C199.1%2089.3%2C199.3'%20fill%3D'%23a9802f'%20fill-opacity%3D'0.75'%2F%3E%3Cpolygon%20points%3D'325.3%2C280.3%20324.5%2C280.1%20324.2%2C279.7%20324.8%2C279.3%20325.7%2C279.3%20325.7%2C279.8'%20fill%3D'%23a9802f'%20fill-opacity%3D'0.96'%2F%3E%3Cpolygon%20points%3D'24.1%2C274.6%2023.8%2C274.9%2022.6%2C275.5%2021.8%2C275.0%2021.7%2C273.7%2022.3%2C273.5%2023.5%2C273.2'%20fill%3D'%23d8b664'%20fill-opacity%3D'0.77'%2F%3E%3Cpolygon%20points%3D'226.9%2C205.2%20222.4%2C209.5%20216.8%2C204.9%20216.5%2C199.5%20221.1%2C199.4%20223.7%2C200.2'%20fill%3D'%23c9a14e'%20fill-opacity%3D'0.65'%2F%3E%3Cpolygon%20points%3D'80.3%2C122.8%2079.3%2C125.0%2078.2%2C125.1%2075.1%2C125.4%2073.6%2C123.9%2075.3%2C121.7'%20fill%3D'%23b78f3c'%20fill-opacity%3D'0.52'%2F%3E%3Cpolygon%20points%3D'200.5%2C7.9%20197.3%2C7.2%20194.4%2C4.5%20198.1%2C0.1'%20fill%3D'%23d8b664'%20fill-opacity%3D'0.79'%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'487'%20height%3D'487'%3E%3Cpolygon%20points%3D'118.0%2C400.1%20117.4%2C399.6%20117.8%2C399.1%20118.3%2C398.6%20118.8%2C399.6%20118.5%2C400.3'%20fill%3D'%23d8b664'%20fill-opacity%3D'0.90'%2F%3E%3Cpolygon%20points%3D'53.8%2C387.1%2053.3%2C387.2%2053.0%2C386.8%2053.2%2C386.6%2053.4%2C386.6%2053.6%2C386.6%2053.8%2C386.9'%20fill%3D'%23d8b664'%20fill-opacity%3D'0.69'%2F%3E%3Cpolygon%20points%3D'169.5%2C72.5%20170.1%2C72.3%20170.6%2C72.6%20170.3%2C72.8%20169.8%2C72.9'%20fill%3D'%23c9a14e'%20fill-opacity%3D'0.77'%2F%3E%3Cpolygon%20points%3D'46.2%2C482.2%2045.6%2C481.0%2047.2%2C480.0%2048.4%2C480.5%2048.8%2C480.8%2046.9%2C482.5'%20fill%3D'%23c9a14e'%20fill-opacity%3D'0.84'%2F%3E%3Cpolygon%20points%3D'322.4%2C304.3%20320.4%2C304.4%20317.4%2C304.0%20317.9%2C301.6%20321.8%2C301.5'%20fill%3D'%23b78f3c'%20fill-opacity%3D'0.67'%2F%3E%3Cpolygon%20points%3D'40.5%2C256.1%2041.7%2C258.3%2040.2%2C258.3%2039.4%2C257.4'%20fill%3D'%23c9a14e'%20fill-opacity%3D'0.90'%2F%3E%3Cpolygon%20points%3D'365.1%2C354.9%20365.4%2C355.1%20365.4%2C355.7%20365.1%2C356.0%20364.0%2C355.6%20364.5%2C355.4'%20fill%3D'%23e6cd86'%20fill-opacity%3D'0.88'%2F%3E%3Cpolygon%20points%3D'239.3%2C165.9%20236.2%2C168.4%20233.8%2C172.4%20230.1%2C171.3%20231.2%2C166.9%20232.8%2C165.0%20237.5%2C163.9'%20fill%3D'%23a9802f'%20fill-opacity%3D'0.51'%2F%3E%3Cpolygon%20points%3D'30.6%2C265.3%2029.6%2C265.5%2029.3%2C264.7%2029.9%2C264.7'%20fill%3D'%23c9a14e'%20fill-opacity%3D'0.92'%2F%3E%3Cpolygon%20points%3D'259.9%2C101.4%20260.1%2C100.9%20260.5%2C100.1%20261.5%2C100.9%20261.4%2C101.5%20260.4%2C101.9'%20fill%3D'%23d8b664'%20fill-opacity%3D'0.89'%2F%3E%3Cpolygon%20points%3D'62.0%2C474.7%2063.4%2C474.9%2064.2%2C475.2%2064.2%2C475.6%2064.1%2C476.9%2063.6%2C477.6%2062.6%2C477.0'%20fill%3D'%23b78f3c'%20fill-opacity%3D'0.99'%2F%3E%3Cpolygon%20points%3D'120.1%2C410.7%20120.3%2C410.2%20121.5%2C409.6%20121.9%2C410.2%20122.2%2C410.4%20121.4%2C411.5%20120.2%2C411.4'%20fill%3D'%23c9a14e'%20fill-opacity%3D'0.67'%2F%3E%3Cpolygon%20points%3D'479.9%2C306.2%20478.4%2C306.3%20477.3%2C304.3%20479.3%2C304.9'%20fill%3D'%23e6cd86'%20fill-opacity%3D'0.86'%2F%3E%3Cpolygon%20points%3D'93.4%2C240.9%2092.2%2C247.7%2086.9%2C247.7%2086.1%2C242.3%2087.9%2C238.3'%20fill%3D'%23c9a14e'%20fill-opacity%3D'0.56'%2F%3E%3Cpolygon%20points%3D'308.0%2C152.1%20306.8%2C147.3%20307.5%2C144.8%20313.1%2C144.8%20314.7%2C147.4%20315.7%2C151.3%20312.2%2C150.2'%20fill%3D'%23d8b664'%20fill-opacity%3D'0.78'%2F%3E%3Cpolygon%20points%3D'399.4%2C331.5%20398.7%2C332.1%20397.8%2C333.2%20396.6%2C332.1%20397.3%2C331.2%20398.4%2C330.4'%20fill%3D'%23d8b664'%20fill-opacity%3D'0.86'%2F%3E%3Cpolygon%20points%3D'96.9%2C31.9%2098.4%2C31.5%2099.0%2C32.3%20100.1%2C32.9%2097.5%2C33.3%2096.2%2C32.9'%20fill%3D'%23e6cd86'%20fill-opacity%3D'0.83'%2F%3E%3Cpolygon%20points%3D'373.4%2C66.5%20374.5%2C66.3%20375.3%2C67.1%20374.8%2C67.3%20373.2%2C67.6%20373.5%2C67.2'%20fill%3D'%23b78f3c'%20fill-opacity%3D'0.94'%2F%3E%3Cpolygon%20points%3D'345.8%2C198.5%20346.2%2C198.2%20346.9%2C198.6%20346.9%2C199.9%20346.0%2C199.8'%20fill%3D'%23e6cd86'%20fill-opacity%3D'0.90'%2F%3E%3Cpolygon%20points%3D'99.1%2C124.3%2099.9%2C122.2%20101.7%2C122.7%20100.9%2C123.7'%20fill%3D'%23a9802f'%20fill-opacity%3D'0.97'%2F%3E%3Cpolygon%20points%3D'7.7%2C441.7%206.9%2C441.7%206.7%2C441.2%206.9%2C441.1%207.9%2C441.0%207.7%2C441.3'%20fill%3D'%23a9802f'%20fill-opacity%3D'0.74'%2F%3E%3Cpolygon%20points%3D'161.4%2C222.3%20161.5%2C221.5%20162.4%2C221.4%20163.4%2C221.7%20163.0%2C222.3%20162.3%2C223.0'%20fill%3D'%23a9802f'%20fill-opacity%3D'0.94'%2F%3E%3Cpolygon%20points%3D'23.6%2C58.3%2025.2%2C56.2%2028.4%2C59.5%2023.1%2C61.6'%20fill%3D'%23e6cd86'%20fill-opacity%3D'0.54'%2F%3E%3Cpolygon%20points%3D'307.0%2C35.9%20306.5%2C37.7%20304.6%2C37.0%20305.5%2C35.5'%20fill%3D'%23c9a14e'%20fill-opacity%3D'0.85'%2F%3E%3Cpolygon%20points%3D'427.8%2C357.5%20427.5%2C358.0%20426.8%2C357.6%20427.5%2C357.1'%20fill%3D'%23e6cd86'%20fill-opacity%3D'0.97'%2F%3E%3Cpolygon%20points%3D'264.2%2C359.8%20264.7%2C359.3%20265.7%2C359.5%20266.2%2C360.0%20265.3%2C360.6%20264.4%2C360.4'%20fill%3D'%23c9a14e'%20fill-opacity%3D'0.73'%2F%3E%3Cpolygon%20points%3D'67.8%2C261.3%2066.9%2C260.8%2067.3%2C259.8%2068.2%2C259.7%2068.6%2C260.2%2068.7%2C260.5%2068.8%2C261.3'%20fill%3D'%23c9a14e'%20fill-opacity%3D'1.00'%2F%3E%3Cpolygon%20points%3D'248.7%2C444.9%20247.9%2C445.6%20247.4%2C445.0%20248.0%2C444.6'%20fill%3D'%23e6cd86'%20fill-opacity%3D'0.75'%2F%3E%3Cpolygon%20points%3D'212.1%2C123.9%20213.3%2C124.0%20213.2%2C125.6%20212.1%2C126.5%20211.4%2C125.7%20210.6%2C124.9'%20fill%3D'%23e6cd86'%20fill-opacity%3D'0.76'%2F%3E%3Cpolygon%20points%3D'370.5%2C290.5%20370.8%2C289.9%20371.2%2C289.7%20371.9%2C290.2%20372.5%2C290.5%20371.1%2C290.9'%20fill%3D'%23c9a14e'%20fill-opacity%3D'0.67'%2F%3E%3Cpolygon%20points%3D'172.2%2C335.7%20172.5%2C336.0%20172.6%2C336.8%20170.9%2C338.2%20169.6%2C336.6%20169.8%2C335.4%20171.8%2C334.5'%20fill%3D'%23e6cd86'%20fill-opacity%3D'0.88'%2F%3E%3Cpolygon%20points%3D'409.3%2C317.7%20410.3%2C317.0%20410.6%2C318.3%20409.7%2C318.2'%20fill%3D'%23d8b664'%20fill-opacity%3D'0.80'%2F%3E%3Cpolygon%20points%3D'5.3%2C22.6%205.7%2C22.3%206.5%2C22.2%206.5%2C22.9%205.8%2C22.9'%20fill%3D'%23d8b664'%20fill-opacity%3D'0.76'%2F%3E%3Cpolygon%20points%3D'54.5%2C76.8%2055.0%2C77.9%2054.4%2C78.0%2053.9%2C77.5'%20fill%3D'%23e6cd86'%20fill-opacity%3D'0.70'%2F%3E%3C%2Fsvg%3E")/*END FLECKS*/,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .30 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.01 .08' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .31 0 0 0 0 .17 0 0 0 .3 -.12'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
/* 月白：衣料、瓷器上帶藍意的白；黛黑字，黛藍版框 */
[data-theme=yuebai] {
  --paper: #e9eff1; --ink: #1d2830; --zhu: #b23a31; --ui: #f0f5f6; --ui-line: rgba(30, 50, 70, .14);
  --inkshadow: rgba(29, 40, 48, .3); --tex: .22; --vig: rgba(40, 70, 90, .1);
  --frame: #2b4a62; --rule: #2b4a62; --tab: #3b5b76; --link: #4a6a80;
}
/* ---- 現代 ---- */
[data-theme=bai] {
  --paper: #fbfaf7; --ink: #000; --zhu: #b8322a; --ui: #fff; --ui-line: rgba(0, 0, 0, .12);
  --inkshadow: transparent; --tex: .16; --vig: rgba(0, 0, 0, .03); --link: #666; --tab: #444;
}
/* 克萊因藍：美術館式白牆、純黑字，朱批、圈點、書籤帶、選字底色都換成克萊因藍；AI 批注改用暖灰 */
[data-theme=klein] {
  --paper: #fbfbf9; --ink: #121212; --zhu: #002fa7; --ui: #ffffff; --ui-line: rgba(0, 0, 0, .1);
  --inkshadow: transparent; --tex: 0; --vig: transparent; --tex-img: none;
  --frame: #121212; --rule: #121212; --rule-op: .3; --tab: #002fa7; --ontab: #ffffff; --link: #3d5a99; --ai: #8a7f74;
}
/* 墨水屏：像 Kindle，淺灰、沒有紙紋、純黑字，批注用低調的深磚紅 */
[data-theme=eink] {
  --paper: #ebeae6; --ink: #141414; --zhu: #8a3b2c; --ui: #f2f1ee; --ui-line: rgba(0, 0, 0, .12);
  --inkshadow: transparent; --tex: 0; --vig: transparent; --tex-img: none;
  --frame: #2e2e2e; --rule: #2e2e2e; --rule-op: .35; --tab: #4a4a4a; --ontab: #f2f1ed; --link: #555555;
}
/* 莫蘭迪：低飽和的「高級灰」，燕麥灰底、暖炭灰字、磚紅批 */
[data-theme=morandi] {
  --paper: #e3dcd2; --ink: #3b3531; --zhu: #a35742; --ui: #ebe5dd; --ui-line: rgba(60, 50, 40, .14);
  --inkshadow: transparent; --tex: .2; --vig: rgba(80, 60, 40, .06);
  --frame: #6e655d; --rule: #7a7068; --rule-op: .55; --tab: #74685d; --link: #7d7068; --foot: .85;
  --hl-y: rgba(214, 190, 120, .45); --hl-r: rgba(196, 130, 120, .35); --hl-g: rgba(150, 170, 130, .4); --hl-b: rgba(130, 150, 175, .4);
  --tex-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .30 0 0 0 0 .26 0 0 0 0 .22 0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
}
/* ---- 夜間 ---- */
[data-theme=ye] {
  --paper: #1f1d1a; --ink: #d3c5a4; --zhu: #d76a52; --ui: #2a2723; --ui-line: rgba(220, 200, 160, .14);
  --inkshadow: transparent; --tex: .16; --vig: rgba(0, 0, 0, .35); --link: #9d8f70; --tab: #7d5a3a;
}
[data-theme=yebai] {
  --paper: #141414; --ink: #d6d6d2; --zhu: #d9705a; --ui: #1f1f1f; --ui-line: rgba(255, 255, 255, .12);
  --inkshadow: transparent; --tex: .1; --vig: rgba(0, 0, 0, .4); --link: #94948f; --tab: #575757;
}
[data-theme=ciqing] {
  --paper: #152340; --ink: #d9b872; --zhu: #e2664f; --ui: #1c2c4d; --ui-line: rgba(217, 184, 114, .18);
  --inkshadow: rgba(230, 190, 110, .35); --tex: .22; --vig: rgba(0, 0, 0, .45);
  --frame: #b8975a; --rule: #b8975a; --note: #f3eee6; --zl: #f3eee6; --link: #b3a27c; --tab: #8a6d3b;
}
/* 碑拓：黑底白字，墨色不勻，帶石紋 */
[data-theme=beita] {
  --paper: #181716; --ink: #e3dfd6; --zhu: #cf5a43; --ui: #232220; --ui-line: rgba(255, 255, 255, .1);
  --inkshadow: rgba(255, 250, 240, .28); --tex: .55; --vig: rgba(0, 0, 0, .5);
  --frame: #8a867e; --rule: #8a867e; --tab: #4b4843; --link: #a9a49a;
  --tex-img:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 50%, var(--vig) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='4' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .98 0 0 0 0 .94 0 0 0 .55 -.2'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 3 -2.1'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
}
/* 黛綠：深墨綠底、淡青灰字，比黑底柔和 */
[data-theme=dailv] {
  --paper: #1c2a25; --ink: #cbd5ca; --zhu: #d77a62; --ui: #23332d; --ui-line: rgba(200, 230, 210, .12);
  --inkshadow: transparent; --tex: .14; --vig: rgba(0, 0, 0, .35);
  --frame: #7f998b; --rule: #7f998b; --rule-op: .4; --tab: #3a5a4c; --link: #9db3a6;
}
/* 純黑：OLED 屏純黑處不發光，最暗也最省電；字不用純白，免得刺眼 */
[data-theme=oled] {
  --paper: #000000; --ink: #c8c8c3; --zhu: #cf6a55; --ui: #121212; --ui-line: rgba(255, 255, 255, .12);
  --inkshadow: transparent; --tex: 0; --vig: transparent; --tex-img: none;
  --frame: #6a6a65; --rule: #6a6a65; --rule-op: .6; --tab: #2e2e2e; --link: #8f8f8a;
}
[data-dark] {
  --ontab: #f6efe1; --foot: .76; --ai: #8fb3d1;
  --hl-y: rgba(220, 180, 50, .32); --hl-r: rgba(226, 94, 110, .34); --hl-g: rgba(90, 180, 110, .3); --hl-b: rgba(80, 150, 230, .32);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--paper); color: var(--ink); font-family: var(--uifont); }
/* 0.5 iPhone：快點兩下（連續翻頁）不放大頁面；橫過來時不自動放大字 */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button { font-family: inherit; color: inherit; cursor: pointer; }
#app { position: fixed; inset: 0; }
#safe-probe {
  position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 紙紋（只用在閱讀頁和設置裡的底色小卡片；0.3 起書架不用紙紋）。0.4：圖層由每種底色的 --tex-img 給出 */
.pg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--tex);
  background-image: var(--tex-img);
}

/* ---------- 閱讀頁 ---------- */
.reader { position: absolute; inset: 0; }
.stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.pg { position: absolute; inset: 0; overflow: hidden; background-color: var(--paper); visibility: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pg.cur { visibility: visible; }
.g {
  position: absolute; display: block; width: 1em; height: 1em; line-height: 1; font-style: normal; font-weight: 400;
  writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; text-align: center;
  color: var(--ink); text-shadow: 0 0 .6px var(--inkshadow); font-family: var(--font);
}
.g.t { text-combine-upright: all; }
.g.zhu { color: var(--note); text-shadow: none; }
.g.ai { color: var(--ai); text-shadow: none; }
.g.red { color: var(--zhu); text-shadow: none; }
.g.lk { color: var(--link); }
.g.ontab { color: var(--ontab); text-shadow: none; }
.ln { position: absolute; background: var(--frame); }
.ln.soft { background: var(--rule); opacity: var(--rule-op); }
.ln.soft.dash { background: repeating-linear-gradient(to bottom, var(--rule) 0 5px, transparent 5px 10px); opacity: .6; }
.ln.soft.dot { background: radial-gradient(circle at 50% 50%, var(--rule) 0 45%, transparent 50%) 0 0 / 100% 6px repeat-y; opacity: .7; }
.ln.zr { background: var(--zhu); opacity: .85; }
.ln.soft.zr { opacity: .5; }
svg.yw { position: absolute; overflow: visible; }
svg.yw polygon { fill: var(--frame); }
svg.yw.zr polygon { fill: var(--zhu); }
.tab { position: absolute; background: var(--tab); border-radius: 0 6px 6px 0; }
.gi, .pic { position: absolute; object-fit: contain; }
body[data-dark] .pic { opacity: .85; }
.ju { position: absolute; border: 1.1px solid var(--zhu); border-radius: 50%; }
.dou { position: absolute; background: var(--zhu); border-radius: 50%; }
.ju.mo { border-color: var(--ink); opacity: .85; }
.dou.mo { background: var(--ink); opacity: .85; }
.zl { position: absolute; background: var(--zl); opacity: .9; border-radius: 1px; }
.zl.ai { background: var(--ai); }
.gtag { position: absolute; border: 1px solid var(--ai); border-radius: 2px; background: color-mix(in srgb, var(--paper) 90%, var(--ai)); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }   /* 0.4 章首導讀浮簽 */
.zc { position: absolute; border: 1px solid var(--zl); border-radius: 50%; background: var(--paper); }   /* 0.4：空心圈，填紙色蓋住界行 */
.hl { position: absolute; border-radius: 3px; }
.hl-y { background: var(--hl-y); } .hl-r { background: var(--hl-r); } .hl-g { background: var(--hl-g); } .hl-b { background: var(--hl-b); }
/* 書籤帶兩邊的深色跟著 --zhu 走（0.4，克萊因藍下是藍色的帶子） */
.ribbon { position: absolute; background: linear-gradient(90deg, color-mix(in srgb, var(--zhu) 62%, #000), var(--zhu) 45%, color-mix(in srgb, var(--zhu) 62%, #000)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%); }
.ribbon.ghost { background: var(--ink); opacity: .13; }
.pct { position: absolute; opacity: var(--foot); white-space: nowrap; }
.foot-r { text-align: right; }
.foot-r i { font-style: normal; }
.pbar { position: absolute; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.pbar i { position: absolute; right: 0; top: 0; bottom: 0; border-radius: 1px; background: var(--tab); opacity: .85; }
body[data-dark] .pbar i { background: var(--ink); opacity: .55; }
.plate { position: absolute; opacity: .86; mix-blend-mode: multiply; pointer-events: none; transform: rotate(-1.5deg); }
.plate svg { display: block; width: 100%; height: 100%; }
body[data-dark] .plate { mix-blend-mode: normal; opacity: .72; }
.sel-layer { position: absolute; inset: 0; pointer-events: none; }
.selbox { position: absolute; background: color-mix(in srgb, var(--zhu) 17%, transparent); border-radius: 2px; }
.emptybook { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; opacity: .7; }

/* 下拉加書籤、亮度提示、首次操作提示 */
.pull { position: absolute; top: 0; z-index: 4; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
.pull .rb { width: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--zhu) 62%, #000), var(--zhu) 45%, color-mix(in srgb, var(--zhu) 62%, #000)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 92%, 0 100%); }
.pull .rb.off { background: var(--ink); opacity: .35; }
.pull-tip { position: absolute; z-index: 4; pointer-events: none; padding: 5px 10px; border-radius: 14px; background: rgba(30, 22, 14, .78); color: #f3e9d2; font-size: 13px; white-space: nowrap; transform: translateX(-50%); }
.hud { position: absolute; z-index: 6; pointer-events: none; width: 44px; height: 168px; border-radius: 22px; background: rgba(30, 22, 14, .72); color: #f3e9d2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 10px 0; font-size: 12px; opacity: 0; transition: opacity .2s; font-family: system-ui, sans-serif; }
.hud.show { opacity: 1; }
/* 0.5 iPhone 沒有返回鍵：跟著書裡的鏈接跳過去以後，底部的「回到剛才那頁」（翻過三頁、打開菜單或目錄就收起） */
.linkback { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 14px); z-index: 4; display: none; transform: translateX(-50%); padding: 8px 18px; border: 1px solid var(--ui-line); border-radius: 18px; background: var(--ui); color: var(--ink); font-size: 15px; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); }
.linkback.show { display: block; }
.hud .bar { position: relative; width: 6px; flex: 1; border-radius: 3px; background: rgba(255, 255, 255, .22); margin-bottom: 8px; overflow: hidden; }
.hud .bar i { position: absolute; left: 0; right: 0; bottom: 0; background: #f3e9d2; border-radius: 3px; }
.guide { position: fixed; inset: 0; z-index: 30; background: rgba(20, 14, 8, .62); color: #fbf3e2; font-size: 15px; }
.guide .z { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; border: 1.5px dashed rgba(251, 243, 226, .55); border-radius: 10px; line-height: 1.6; padding: 6px; }
.guide .z b { display: block; font-size: 18px; font-weight: 400; color: #ffd9a8; }
.guide .z.hot { border-color: #ffb36b; background: rgba(255, 179, 107, .12); }
.guide .ok { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 34px); padding: 10px 26px; border-radius: 22px; border: none; background: var(--zhu); color: #fff8ee; font-size: 16px; }
.guide .gt { position: absolute; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 10px); font-size: 14px; opacity: .8; white-space: nowrap; }

/* ---------- 菜單欄 ---------- */
.chrome-top, .chrome-bottom { position: absolute; left: 0; right: 0; z-index: 5; background: var(--ui); box-shadow: 0 0 14px rgba(0, 0, 0, .18); transition: transform .2s ease-out; }
.chrome-top { top: 0; display: flex; align-items: center; gap: 6px; padding: calc(env(safe-area-inset-top) + 6px) 8px 6px; transform: translateY(-110%); }
.chrome-bottom { bottom: 0; padding: 10px 14px calc(env(safe-area-inset-bottom) + 8px); transform: translateY(110%); }
.reader.chrome-on .chrome-top, .reader.chrome-on .chrome-bottom { transform: none; }
.cbtn { background: none; border: none; font-size: 17px; padding: 10px 10px; white-space: nowrap; }
.cbtn.daynight { border: 1px solid var(--ui-line); border-radius: 16px; padding: 6px 12px; font-size: 15px; }
.ctitle { flex: 1; text-align: center; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow { display: flex; flex-direction: column; gap: 4px; }
.slider { width: 100%; direction: rtl; accent-color: var(--zhu); }
.slabel { font-size: 13px; opacity: .7; text-align: center; min-height: 18px; }
.brow { display: flex; justify-content: space-around; margin-top: 6px; }
.bbtn { background: none; border: none; font-size: 17px; padding: 10px 8px; }

/* ---------- 面板、對話框 ---------- */
.mask { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 14, 8, .35); opacity: 0; transition: opacity .18s; }
.mask.show { opacity: 1; }
.mask.top { align-items: flex-start; padding-top: calc(env(safe-area-inset-top) + 36px); }
.mask.clear { background: transparent; }
.sheet { width: min(760px, 100%); max-height: 70%; display: flex; flex-direction: column; background: var(--ui); border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(30px); transition: transform .18s; }
.sheet.tall { height: 80%; max-height: 80%; }
.mask.show .sheet { transform: none; }
.sheet-head { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--ui-line); }
.sheet-title { flex: 1; font-size: 19px; letter-spacing: 2px; }
.x { background: none; border: none; font-size: 15px; opacity: .7; padding: 6px 4px; }
.sheet-body { overflow: auto; padding: 6px 12px 18px; -webkit-overflow-scrolling: touch; }
.list { display: flex; flex-direction: column; }
.li { text-align: left; background: none; border: none; border-bottom: 1px solid var(--ui-line); padding: 12px 14px; font-size: 16px; line-height: 1.55; }
.li.on { color: var(--zhu); }
.li.row { display: flex; align-items: center; padding: 0; }
.li-main { flex: 1; min-width: 0; text-align: left; background: none; border: none; padding: 12px 14px; font-size: 16px; line-height: 1.55; }
.li-sub { font-size: 12px; opacity: .6; }
.li-note { color: var(--zhu); font-size: 15px; margin-top: 4px; }
.li-del { background: none; border: none; color: var(--zhu); font-size: 14px; padding: 10px 14px; flex: none; }
.li-more { background: none; border: none; color: var(--zhu); font-size: 14px; padding: 2px 0 0; }
.li b { color: var(--zhu); font-weight: 400; }
.li-kind, .ai-tag { display: inline-block; margin-left: 8px; padding: 0 5px; border: 1px solid currentColor; border-radius: 3px; font-size: 11px; line-height: 15px; vertical-align: 1px; }
.ai-tag { color: var(--ai); }
.li-note.ai { color: var(--ai); }
.li-act { background: none; border: none; color: var(--ai); font-size: 14px; padding: 10px 14px; flex: none; }
/* 0.3 問 AI：從 AI App 回來時底部的一條提示 */
.aibar { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 14px); transform: translateX(-50%); z-index: 15; display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 20px); padding: 8px 10px 8px 16px; border-radius: 22px; background: var(--ui); color: var(--ink); box-shadow: 0 6px 24px rgba(0, 0, 0, .28); font-size: 15px; }
.aibar-t { flex: 1; }
/* 0.5 iPhone 網頁 App：網站上有新版本時頂上的一條提示（js/pwa.js） */
.aibar.upbar { top: calc(env(safe-area-inset-top) + 10px); bottom: auto; z-index: 16; }
.aibar .btn { padding: 7px 14px; border-radius: 16px; white-space: nowrap; }
.li-quote .hlmark { display: inline-block; width: .8em; height: .8em; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.hint { padding: 12px 14px; opacity: .65; font-size: 14px; line-height: 1.7; }
.srch { display: flex; gap: 8px; padding: 8px 2px; }
.field { flex: 1; font-family: inherit; font-size: 16px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--ui-line); background: rgba(255, 255, 255, .55); color: var(--ink); }
body[data-dark] .field { background: rgba(0, 0, 0, .25); }
textarea.field { width: 100%; min-height: 110px; resize: vertical; }
.btn { font-size: 15px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--ui-line); background: transparent; }
.btn.primary { background: var(--zhu); border-color: var(--zhu); color: #fff8ee; }
.btn.danger { color: var(--zhu); }
.btn.danger.primary { color: #fff8ee; }
.dialog { width: min(540px, calc(100% - 28px)); display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--ui); border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.dlg-title { font-size: 19px; }
.dlg-text { font-size: 15px; line-height: 1.7; white-space: pre-wrap; max-height: 46vh; overflow: auto; }
.dlg-btns { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.popmenu { position: fixed; display: flex; flex-direction: column; background: var(--ui); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .28); overflow: hidden; max-width: calc(100vw - 16px); }
.popmenu .prow { display: flex; }
.popmenu .prow + .prow { border-top: 1px solid var(--ui-line); }
.popmenu button { flex: 1; background: none; border: none; border-right: 1px solid var(--ui-line); padding: 12px 14px; font-size: 16px; white-space: nowrap; }
.popmenu button:last-child { border-right: none; }
.popmenu button.danger { color: var(--zhu); }
.popmenu button.dot { flex: none; padding: 10px 12px; }
.popmenu button.dot i { display: block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; }
.popmenu button.dot.on i { border-color: var(--ink); }
.dot-y i { background: #f2c94c; } .dot-r i { background: #e8707e; } .dot-g i { background: #78c487; } .dot-b i { background: #6aa8ec; }
.hlmark.dot-y, .hlmark.y { background: #f2c94c; } .hlmark.r { background: #e8707e; } .hlmark.g { background: #78c487; } .hlmark.b { background: #6aa8ec; }
#toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 72px); z-index: 60; max-width: 86%; padding: 9px 16px; border-radius: 18px; background: rgba(30, 22, 14, .88); color: #f3e9d2; font-size: 14px; text-align: center; opacity: 0; transform: translateX(-50%) translateY(16px); transition: all .2s; pointer-events: none; }
#toast.show { opacity: 1; transform: translateX(-50%); }
.loading { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(20, 14, 8, .12); }
.loading-box { padding: 14px 22px; border-radius: 12px; background: var(--ui); font-size: 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, .2); }
.settings .sec-h { margin: 16px 2px 2px; font-size: 13px; letter-spacing: 2px; color: var(--zhu); }
.settings .srow2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 2px; border-bottom: 1px solid var(--ui-line); }
.slab { width: 96px; font-size: 15px; opacity: .8; }
.seg { display: flex; flex-wrap: wrap; border: 1px solid var(--ui-line); border-radius: 8px; overflow: hidden; }
.seg button { background: none; border: none; border-right: 1px solid var(--ui-line); padding: 8px 12px; font-size: 15px; }
.seg button:last-child { border-right: none; }
.seg button.on { background: var(--zhu); color: #fff8ee; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 200px; }
.chips button { border: 1px solid var(--ui-line); border-radius: 16px; background: none; padding: 6px 12px; font-size: 14px; }
.chips button.on { border-color: var(--zhu); color: var(--zhu); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
/* 0.4 底色小卡片（reader.js 的 themeCard）：卡片自帶 data-theme，顏色變量在卡片這一層算（見文件開頭）；
   選中的描邊和名字用當前底色的朱色（--pick 在卡片外面那一層取） */
.tgroup { padding: 10px 2px 14px; border-bottom: 1px solid var(--ui-line); }
.tg-h { font-size: 13px; opacity: .7; margin-bottom: 8px; }
.tcards { --pick: var(--zhu); display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 12px 8px; }
.tcard { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: none; background: none; color: inherit; }
.tc-page { position: relative; width: 72px; height: 96px; border-radius: 4px; overflow: hidden; background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, .22); }
.tc-page::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--tex); background-image: var(--tex-img); }
/* 灑金箋的卡片只露出金箔圖案的一小角：把兩層金箔挪到金箔多的一塊（位置由 tools/make_textures_v04.py 算出，寫在兩個標記之間） */
.tcard[data-theme=sajin] .tc-page::before { background-position: /*FLECKPOS*/0 0, -684px -118px, -684px -118px, 0 0, 0 0/*END FLECKPOS*/; }
.tcard.on .tc-page { outline: 2px solid var(--pick); outline-offset: 2px; }
.tc-f { position: absolute; left: 8px; right: 8px; top: 9px; bottom: 9px; border: 1px solid var(--frame); }
.tc-r { position: absolute; left: 35.5px; width: 1px; top: 10px; bottom: 10px; background: var(--rule); opacity: var(--rule-op); }
.tc-g {
  position: absolute; width: 15px; height: 15px; font-size: 15px; line-height: 1; font-style: normal; text-align: center;
  writing-mode: vertical-rl; color: var(--ink); text-shadow: 0 0 .6px var(--inkshadow); font-family: var(--font);
}
.tc-zc { position: absolute; width: 6px; height: 6px; border: 1px solid var(--zl); border-radius: 50%; background: var(--paper); }
.tc-name { font-size: 12px; white-space: nowrap; }
.tcard.on .tc-name { color: var(--pick); }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button { width: 42px; height: 36px; border-radius: 8px; border: 1px solid var(--ui-line); background: none; font-size: 18px; }
.stepper span { min-width: 52px; text-align: center; font-size: 16px; }
.field.sel { flex: 0 1 auto; }
.fonts { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.fontrow { display: flex; align-items: center; gap: 6px; }
.fontpick { flex: 1; text-align: left; background: none; border: 1px solid var(--ui-line); border-radius: 8px; padding: 9px 12px; font-size: 17px; }
.fontpick small { display: block; font-size: 12px; opacity: .6; font-family: system-ui, sans-serif; margin-top: 2px; }
.fontpick.on { border-color: var(--zhu); color: var(--zhu); }
.fontbtns { display: flex; flex-wrap: wrap; gap: 8px; }
/* 0.3 導入字體：預覽（直排一段字）、缺的字、說明頁 */
.fp-sample { writing-mode: vertical-rl; height: 9.8em; font-size: 24px; line-height: 1.75; letter-spacing: 2px; padding: 14px 12px; margin: 6px 0 4px; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.fp-miss { font-size: 22px; letter-spacing: 4px; padding: 0 14px 8px; word-break: break-all; }
.help p { margin: 4px 2px 10px; font-size: 15px; line-height: 1.75; }
.help .btn { margin: 0 2px 8px; }

/* ---------- 書架（0.3 改成現代界面；顏色變量和書的主頁共用，見文件末尾）---------- */
.shelf { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--paper); padding: calc(env(safe-area-inset-top) + 4px) 0 calc(env(safe-area-inset-bottom) + 16px); }
.shelf > * { max-width: 900px; margin-left: auto; margin-right: auto; }
.sh-head { display: flex; align-items: center; gap: 4px; padding: 10px 14px 4px 16px; }
.sh-logo { width: 34px; height: 34px; flex: none; margin-right: 8px; border-radius: 8px; overflow: hidden; }
.sh-logo svg, .sh-logo img { display: block; width: 100%; height: 100%; }
.sh-title { flex: 1; font-size: 21px; font-weight: 700; letter-spacing: 2px; }
.tbtn { background: none; border: none; padding: 8px 10px; font-size: 15px; color: var(--tx2); }
.tlink { background: none; border: none; padding: 0; font-size: inherit; color: var(--zhu); }
.sh-imp { margin-left: 4px; border-radius: 18px; padding: 7px 16px; }
.sh-cont { display: flex; gap: 14px; margin: 12px 16px 4px; padding: 12px; border-radius: 12px; background: var(--card); box-shadow: 0 2px 12px rgba(0, 0, 0, .07); cursor: pointer; }
.sh-cont .cv { width: 64px; flex: none; }
.sh-ci { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.sh-ci .k { font-size: 12px; color: var(--tx3); letter-spacing: 1px; }
.sh-ci .n { font-family: var(--songti); font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-ci .p { font-size: 13px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-ci .go { align-self: flex-start; font-size: 13px; color: var(--zhu); border: 1px solid var(--zhu); border-radius: 14px; padding: 3px 12px; }
.sh-sec { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 18px 8px; font-size: 13px; color: var(--tx3); letter-spacing: 1px; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 18px 14px; padding: 0 16px; }
.bk { min-width: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.bk-cv { position: relative; }
.bk-st { position: absolute; left: 6%; bottom: 5%; width: 36%; aspect-ratio: 1; opacity: .92; pointer-events: none; }
.bk-st svg { display: block; width: 100%; height: 100%; }
.bk-t { font-family: var(--songti); font-size: 13px; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-p { display: flex; align-items: center; gap: 5px; height: 14px; margin-top: 3px; font-size: 11px; color: var(--tx3); }
.bk-p .prog { flex: 1; }
.bk-p .done { color: var(--zhu); }
.sh-foot { text-align: center; color: var(--tx3); font-size: 12px; padding: 28px 0 12px; }
.empty { margin: 40px 18px; padding: 22px 24px; border-radius: 12px; background: var(--card); font-size: 16px; line-height: 1.85; }
.empty-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; letter-spacing: 1px; }
.empty p { margin: 6px 0; color: var(--tx2); }
/* 0.5 iPhone：在 Safari（或微信）裡打開、還沒添加到主屏幕時的說明頁（main.js 的 showInstall） */
.install .in-head { display: flex; align-items: center; gap: 14px; padding: 24px 20px 8px; }
.install .in-head img { width: 60px; height: 60px; flex: none; border-radius: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.in-title { font-size: 24px; font-weight: 700; letter-spacing: 3px; }
.in-sub { margin-top: 2px; font-size: 14px; color: var(--tx2); }
.in-card { margin: 14px 16px 0; padding: 16px 18px; border-radius: 12px; background: var(--card); box-shadow: 0 2px 12px rgba(0, 0, 0, .07); font-size: 16px; line-height: 1.75; }
.in-h { margin-bottom: 6px; font-size: 17px; font-weight: 700; }
.in-card ol, .in-card ul { margin: 0; padding-left: 1.4em; }
.in-card li { margin: 6px 0; }
.in-card ul li { font-size: 15px; color: var(--tx2); }
.in-warn { margin: 4px 0 8px; font-size: 15px; color: var(--zhu); }
.in-url { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 8px; font-size: 15px; word-break: break-all; }
.in-card .btn { margin-top: 4px; }
/* 選文件的框：不用 display:none（有的 iPhone 系統裡藏起來的框點不開），挪到屏幕外面 */
#file-input { position: fixed; left: -100px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* 封面：書自帶的或生成的圖片；圖片出來之前是同樣比例的米白底，豎寫書名 */
.cv { position: relative; width: 100%; aspect-ratio: .69; overflow: hidden; border-radius: 3px; background: #f5f1e8; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.cv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cv-ph { position: absolute; right: 16%; top: 11%; max-height: 78%; overflow: hidden; writing-mode: vertical-rl; font-family: var(--songti); font-size: 13px; letter-spacing: 1px; color: #1d1915; }

/* ---------- 讀書記錄、金句卡片、藏書印 ---------- */
.stat-cards { display: flex; gap: 10px; padding: 10px 2px; flex-wrap: wrap; }
.stat-cards > div { flex: 1; min-width: 100px; padding: 12px; border-radius: 10px; border: 1px solid var(--ui-line); text-align: center; }
.stat-cards b { display: block; font-size: 22px; font-weight: 400; color: var(--zhu); margin-top: 4px; }
.stat-cards span { font-size: 13px; opacity: .7; }
.week { display: flex; align-items: flex-end; gap: 8px; height: 110px; padding: 8px 6px 0; border-bottom: 1px solid var(--ui-line); }
.week div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 11px; gap: 4px; }
.week i { display: block; width: 60%; min-height: 2px; background: var(--zhu); opacity: .75; border-radius: 3px 3px 0 0; }
.week span { opacity: .6; }
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; padding: 12px 4px; }
.stamps > div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; text-align: center; line-height: 1.4; }
.stamps svg { width: 64px; height: 64px; transform: rotate(-4deg); }
.stamps small { opacity: .55; font-size: 11px; }
.sub-h { margin: 14px 2px 4px; font-size: 15px; letter-spacing: 1px; }
.card-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 4px; }
.card-wrap img { max-width: 100%; max-height: 54vh; box-shadow: 0 4px 18px rgba(0, 0, 0, .25); border-radius: 4px; }
.card-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.plate-prev { display: flex; justify-content: center; padding: 6px 0; }
.plate-prev svg { width: 120px; height: 120px; }

/* ---------- 書架和書的主頁（0.3）：現代界面，系統無襯線字；書名、引文用宋體；跟夜讀主題分深淺 ----------
   寫在主題規則後面，同樣的優先級後寫的生效；對比度由 test/harness.js 的 pageContrast 檢查 */
body[data-view] {
  --paper: #f7f4ee; --ink: #1f1d1a; --ui: #fdfcf9; --ui-line: rgba(0, 0, 0, .1);
  --zhu: #c8342a; --btn: #c8342a; --card: #fff; --tx2: #5f5a52; --tx3: #736d64; --track: #e6e0d6;
  --uifont: system-ui, -apple-system, "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --songti: "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
}
body[data-dark][data-view] {
  --paper: #1b1a18; --ink: #ebe5d9; --ui: #262421; --ui-line: rgba(255, 255, 255, .1);
  --zhu: #e0705a; --btn: #c8463a; --card: #262421; --tx2: #b0a899; --tx3: #969083; --track: #3a3631;
}
body[data-view] .btn.primary { background: var(--btn); border-color: var(--btn); color: #fff; }
.bp { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--paper); }
.bp-head { display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top) + 8px) 14px 6px; }
.bp-head .sp { flex: 1; }
.bp-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bp-wrap { max-width: 760px; margin: 0 auto; padding-bottom: calc(env(safe-area-inset-bottom) + 28px); }
.bp-top { position: relative; display: flex; gap: 18px; padding: 10px 20px 20px; }
.bp-cover { width: 108px; flex: none; }
.bp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bp-title { font-family: var(--songti); font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: 1px; overflow-wrap: anywhere; }
.bp-author { font-size: 14px; color: var(--tx2); }
.bp-prog { font-size: 13px; color: var(--tx2); margin-top: 4px; }
.prog { height: 3px; border-radius: 2px; background: var(--track); overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--zhu); border-radius: 2px; }
.bp-stat { font-size: 12px; color: var(--tx3); }
.bp-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bp-go { border-radius: 20px; padding: 9px 24px; }
.bp-ai { border-radius: 20px; padding: 9px 18px; color: var(--ai); border-color: color-mix(in srgb, var(--ai) 55%, transparent); }
.bp-stamp { position: absolute; left: 84px; top: 118px; width: 56px; height: 56px; transform: rotate(-8deg); opacity: .92; pointer-events: none; }
.bp-stamp svg { display: block; width: 100%; height: 100%; }
.bp-tabs { position: sticky; top: 0; z-index: 2; display: flex; padding: 0 10px; background: var(--paper); border-bottom: 1px solid var(--ui-line); }
.bp-tab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent; padding: 12px 2px 10px; font-size: 15px; color: var(--tx2); }
.bp-tab small { margin-left: 4px; font-size: 12px; color: var(--tx3); }
.bp-tab.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--zhu); }
.bp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 4px; }
.bp-chips button { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--ui-line); border-radius: 15px; background: var(--card); padding: 5px 11px; font-size: 13px; color: var(--tx2); }
.bp-chips button small { font-size: 11px; color: var(--tx3); }
.bp-chips button.on { border-color: var(--zhu); color: var(--zhu); }
.bp-chips button.zero { opacity: .55; }
.bp-chips .hlmark { display: inline-block; width: .8em; height: .8em; border-radius: 2px; }
.bp-list { padding: 0 6px; }
.bp .li-sub { opacity: 1; color: var(--tx3); }
.bp .li-para, .bp .li-quote { font-family: var(--songti); }
.bp .hint { opacity: 1; color: var(--tx2); }
.bp-toc.on .li-main { font-weight: 600; }
.toc-ai { padding: 10px 6px 4px; }
.toc-ai .btn { color: var(--ai); }