/* Lexica — themes. Loaded after lexica.css; the active theme is <html data-theme="…"> (set by PHP from the
 * lexica_theme cookie, then kept in sync by theme.js). "sakura" is the base palette in lexica.css.
 * "seasons" is not a palette of its own: it resolves to spring / summer / autumn / winter by month. */

/* ================= Palettes ================= */

/* 春 Spring — golden mai blossom, young leaves, jade accents */
:root[data-theme="spring"] {
  --paper: #fbfaf1; --paper-2: #f3f2e2; --card: #fffef8;
  --ink: #262a1f; --ink-2: #555b48; --ink-3: #868b77;
  --line: #e9e9d6; --line-2: #d9dbc2; --bark: #46382c;
  --sakura: #e2b52c; --sakura-deep: #3f8a5a; --sakura-ink: #2f6e47; --sakura-pale: #eef5e3;
  --focus: 0 0 0 3px rgba(63, 138, 90, 0.24);
  --glass: rgba(255, 254, 248, 0.86); --glass-bar: rgba(251, 250, 241, 0.82);
  --accent-line: #cfe2b8; --accent-soft: #dcebc8; --ghost-kanji: #eeeedd;
  --faint: #b0b39b; --muted-bg: #f1f1e6; --muted-line: #c9cbb3;
  --hover-wash: rgba(238, 245, 227, 0.6); --out-wash: rgba(243, 242, 226, 0.6); --stripe: rgba(217, 219, 194, 0.45);
  --wash-1: rgba(242, 200, 60, 0.18); --wash-2: rgba(120, 180, 110, 0.12);
  --shadow-sm: 0 1px 2px rgba(60, 64, 36, 0.06), 0 2px 8px rgba(60, 64, 36, 0.04);
  --shadow-md: 0 2px 6px rgba(60, 64, 36, 0.06), 0 14px 36px rgba(60, 64, 36, 0.09);
}

/* 夏 Summer — rainy season, hydrangea blue */
:root[data-theme="summer"] {
  --paper: #f3f6f8; --paper-2: #e8eef2; --card: #fbfdfe;
  --ink: #1e2a33; --ink-2: #4a5a66; --ink-3: #7a8a96;
  --line: #dbe4ea; --line-2: #c9d6df; --bark: #2f3a33;
  --sakura: #86a6e0; --sakura-deep: #4466b8; --sakura-ink: #34539c; --sakura-pale: #e7eefb;
  --focus: 0 0 0 3px rgba(68, 102, 184, 0.24);
  --glass: rgba(251, 253, 254, 0.86); --glass-bar: rgba(243, 246, 248, 0.82);
  --accent-line: #c5d4f2; --accent-soft: #d6e1f7; --ghost-kanji: #e4ebf0;
  --faint: #a2b0ba; --muted-bg: #edf1f4; --muted-line: #bcc8d1;
  --hover-wash: rgba(231, 238, 251, 0.6); --out-wash: rgba(232, 238, 242, 0.6); --stripe: rgba(201, 214, 223, 0.45);
  --wash-1: rgba(120, 150, 220, 0.16); --wash-2: rgba(90, 160, 140, 0.1);
  --backdrop: rgba(20, 32, 44, 0.32);
  --shadow-sm: 0 1px 2px rgba(30, 50, 70, 0.07), 0 2px 8px rgba(30, 50, 70, 0.05);
  --shadow-md: 0 2px 6px rgba(30, 50, 70, 0.07), 0 14px 36px rgba(30, 50, 70, 0.1);
  --shadow-lg: 0 30px 80px rgba(30, 50, 70, 0.25);
}
:root[data-theme="summer"] body { background: linear-gradient(180deg, #e3eaf0 0, var(--paper) 520px) var(--paper); }

/* 秋 Autumn — maple red and persimmon on warm paper */
:root[data-theme="autumn"] {
  --paper: #fbf6ee; --paper-2: #f4ebdd; --card: #fffcf6;
  --ink: #2b1f17; --ink-2: #5e4b3d; --ink-3: #8f7a68;
  --line: #eddfcd; --line-2: #e0ccb5; --bark: #3a2920;
  --sakura: #e58a4e; --sakura-deep: #c2461d; --sakura-ink: #9c3413; --sakura-pale: #fbeadb;
  --focus: 0 0 0 3px rgba(194, 70, 29, 0.22);
  --glass: rgba(255, 252, 246, 0.86); --glass-bar: rgba(251, 246, 238, 0.82);
  --accent-line: #f2cbb0; --accent-soft: #f6d9c4; --ghost-kanji: #f2e9dc;
  --faint: #b8a48f; --muted-bg: #f3ece2; --muted-line: #cdbba6;
  --hover-wash: rgba(251, 234, 219, 0.55); --out-wash: rgba(244, 235, 221, 0.6); --stripe: rgba(224, 204, 181, 0.45);
  --wash-1: rgba(240, 140, 70, 0.18); --wash-2: rgba(200, 70, 30, 0.08);
}

/* 冬 Winter — snow light, red plum */
:root[data-theme="winter"] {
  --paper: #f2f5f9; --paper-2: #e7ecf2; --card: #fbfcfe;
  --ink: #1c2532; --ink-2: #4a5668; --ink-3: #7b899c;
  --line: #dde4ec; --line-2: #cbd5e1; --bark: #2a2427;
  --sakura: #d9536b; --sakura-deep: #b3243f; --sakura-ink: #8e1730; --sakura-pale: #f8e6ea;
  --focus: 0 0 0 3px rgba(179, 36, 63, 0.2);
  --glass: rgba(251, 252, 254, 0.86); --glass-bar: rgba(242, 245, 249, 0.82);
  --accent-line: #efc0ca; --accent-soft: #f3d3da; --ghost-kanji: #e6ebf1;
  --faint: #a3aebd; --muted-bg: #edf1f5; --muted-line: #bfc9d5;
  --hover-wash: rgba(248, 230, 234, 0.5); --out-wash: rgba(231, 236, 242, 0.6); --stripe: rgba(203, 213, 225, 0.45);
  --wash-1: rgba(140, 170, 215, 0.24); --wash-2: rgba(179, 36, 63, 0.06);
  --backdrop: rgba(20, 28, 40, 0.32);
  --shadow-sm: 0 1px 2px rgba(28, 37, 50, 0.07), 0 2px 8px rgba(28, 37, 50, 0.05);
  --shadow-md: 0 2px 6px rgba(28, 37, 50, 0.07), 0 14px 36px rgba(28, 37, 50, 0.1);
  --shadow-lg: 0 30px 80px rgba(28, 37, 50, 0.25);
}
:root[data-theme="winter"] body { background: linear-gradient(180deg, #d5e0ec 0, #e9eef5 420px, var(--paper) 760px) var(--paper); }

/* Shared by the two dark themes: status colours that read on a dark ground. */
:root[data-theme="night"], :root[data-theme="christmas"] {
  color-scheme: dark;
  --on-ink: #10141f;
  --error: #ff7a8a; --error-bg: rgba(255, 122, 138, 0.1); --error-ink: #ff9aa6;
  --backdrop: rgba(2, 4, 10, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 36px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);
  --ok: #6fcf8e;    --ok-bg: rgba(111, 207, 142, 0.12);   --ok-line: rgba(111, 207, 142, 0.32);   --ok-ink: #a6e8bb;
  --tight: #f2c14e; --tight-bg: rgba(242, 193, 78, 0.12); --tight-line: rgba(242, 193, 78, 0.32); --tight-ink: #f7d98c;
  --risk: #ff8a5c;  --risk-bg: rgba(255, 138, 92, 0.12);  --risk-line: rgba(255, 138, 92, 0.34);  --risk-ink: #ffb595;
  --alarm: #ff5c76; --alarm-bg: rgba(255, 92, 118, 0.13); --alarm-line: rgba(255, 92, 118, 0.36); --alarm-ink: #ffb0bd;
  --alarm-fill: #c4304a; --alarm-hover: #a8253d; --alarm-glow: rgba(255, 92, 118, 0.22);
}

/* 夜 Starry night — deep indigo sky, moonlit blossom */
:root[data-theme="night"] {
  --paper: #0b1124; --paper-2: #141b35; --card: #151d3a;
  --ink: #eef0fa; --ink-2: #c3c9e2; --ink-3: #959ec0;
  --line: #232c4c; --line-2: #313c62; --bark: #05070f;
  --sakura: #a3adff; --sakura-deep: #8f9bff; --sakura-ink: #b9c1ff; --sakura-pale: #1c2449;
  --on-accent: #0b1124; --accent-hover: #b9c1ff;
  --focus: 0 0 0 3px rgba(143, 155, 255, 0.35);
  --glass: rgba(21, 29, 58, 0.82); --glass-bar: rgba(11, 17, 36, 0.78); --field: #0f1630;
  --accent-line: #3d4888; --accent-soft: #2b3569; --ghost-kanji: #182041;
  --faint: #6c75a0; --muted-bg: #1a2142; --muted-line: #3b4569;
  --hover-wash: rgba(143, 155, 255, 0.08); --out-wash: rgba(0, 0, 0, 0.18); --stripe: rgba(255, 255, 255, 0.035);
  --toast-bg: #e9ecf8; --toast-ink: #0b1124;
  --wash-1: rgba(120, 132, 255, 0.16); --wash-2: rgba(255, 214, 150, 0.06);
}
:root[data-theme="night"] body { background: linear-gradient(180deg, #060a1a 0, #0b1226 480px, #111938 100%) fixed #0b1124; }

/* 聖 Christmas — pine green night, cranberry and gold */
:root[data-theme="christmas"] {
  --paper: #0e2019; --paper-2: #142a21; --card: #163126;
  --ink: #f7f2e6; --ink-2: #d8d0bb; --ink-3: #a7b8aa;
  --line: #234236; --line-2: #305446; --bark: #2a1c14;
  --sakura: #e9c46a; --sakura-deep: #c8383e; --sakura-ink: #f0cc76; --sakura-pale: #1d3a2e;
  --on-accent: #fff; --accent-hover: #a82e34;
  --seal: #c8323c;
  --focus: 0 0 0 3px rgba(233, 196, 106, 0.32);
  --glass: rgba(22, 49, 38, 0.84); --glass-bar: rgba(14, 32, 25, 0.8); --field: #10261d;
  --accent-line: #6a6a3a; --accent-soft: #3a4a2c; --ghost-kanji: #1a3529;
  --faint: #748f80; --muted-bg: #1a3328; --muted-line: #3d5a4c;
  --hover-wash: rgba(233, 196, 106, 0.07); --out-wash: rgba(0, 0, 0, 0.15); --stripe: rgba(255, 255, 255, 0.035);
  --toast-bg: #f5efe1; --toast-ink: #0e2019;
  --wash-1: rgba(233, 196, 106, 0.12); --wash-2: rgba(217, 74, 79, 0.12);
}
:root[data-theme="christmas"] body { background: radial-gradient(1400px 900px at 70% -10%, #1b3b2e, transparent 70%) fixed, #0e2019; }

/* Text that sat on a white surface now sits on a dark one. */
:root[data-theme="night"] .app-card--soon,
:root[data-theme="christmas"] .app-card--soon { background: transparent; }
:root[data-theme="night"] .sakura-svg--moonlit { filter: drop-shadow(0 0 18px rgba(170, 180, 255, 0.12)); }

/* ================= Artwork ================= */
.sakura-svg { animation: lx-art-in .7s ease-out; }
@keyframes lx-art-in { from { opacity: 0; } }

.lx-bulb { animation: lx-bulb 2.4s ease-in-out infinite; }
.lx-bulb-glow { animation: lx-bulb-glow 2.4s ease-in-out infinite; }
@keyframes lx-bulb { 50% { opacity: .6; } }
@keyframes lx-bulb-glow { 50% { opacity: .12; } }

/* ================= Falling effects ================= */
.lx-fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.lx-fx > * { position: absolute; display: block; }
.lx-fx svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Petals & leaves reuse the sakura fall + flutter. */
.lx-fx__petal, .lx-fx__leaf {
  top: -40px;
  animation-name: lx-fall, lx-flutter;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
}
.lx-fx__leaf { animation-name: lx-fall, lx-tumble; }
.lx-fx__leaf svg { filter: drop-shadow(0 1px 1px rgba(90, 30, 10, .18)); }
.lx-fx--mai .lx-fx__petal svg { filter: drop-shadow(0 1px 1px rgba(150, 100, 0, .25)); }
@keyframes lx-tumble {
  0%   { margin-left: -22px; scale: 1 1; }
  50%  { scale: .35 1; }
  100% { margin-left: 22px; scale: 1 .8; }
}

/* Rain: thin slanted streaks, and small splashes near the bottom edge. */
.lx-fx__drop {
  top: -120px; width: 1.5px; border-radius: 1px;
  background: linear-gradient(180deg, rgba(70, 105, 140, 0), rgba(70, 105, 140, .55));
  rotate: 12deg;
  animation: lx-rain linear infinite;
}
@keyframes lx-rain { to { transform: translate3d(0, 128vh, 0); } }   /* along the 12° slant set by `rotate` */
.lx-fx__splash {
  width: 18px; height: 5px; border-radius: 50%;
  border: 1.2px solid rgba(70, 105, 140, .45); border-top-color: transparent;
  opacity: 0; animation: lx-splash ease-out infinite;
}
@keyframes lx-splash {
  0%   { opacity: 0; transform: scale(.2); }
  6%   { opacity: 1; }
  22%  { opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Snow: soft round flakes that sway as they fall; the larger ones are slightly out of focus. */
.lx-fx__flake {
  top: -20px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff 0 45%, rgba(255, 255, 255, .55) 70%, rgba(255, 255, 255, 0) 72%);
  animation-name: lx-snow, lx-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
}
.lx-fx__flake.is-soft { filter: blur(1.2px); }
.lx-fx--snow .lx-fx__flake { box-shadow: 0 0 4px rgba(70, 100, 140, .35); }
@keyframes lx-snow { to { transform: translate3d(var(--drift), 110vh, 0); } }
@keyframes lx-sway { from { margin-left: -18px; } to { margin-left: 18px; } }

/* Night sky: twinkling stars and shooting stars. */
.lx-fx__sky { inset: 0; width: 100%; height: 100%; }
.lx-fx__sky circle.tw { animation: lx-twinkle ease-in-out infinite alternate; }
@keyframes lx-twinkle { from { opacity: 1; } to { opacity: .15; } }
.lx-fx__meteor {
  width: clamp(120px, 18vw, 240px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #fff, rgba(190, 205, 255, .55) 20%, rgba(160, 175, 255, 0));
  transform-origin: 0 50%;
  opacity: 0;
  animation: lx-meteor linear infinite;
}
.lx-fx__meteor::before {
  content: ''; position: absolute; left: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px 3px rgba(200, 215, 255, .8);
}
@keyframes lx-meteor {
  0%   { opacity: 0; transform: rotate(-32deg) translateX(0); }
  1.5% { opacity: 1; }
  9%   { opacity: 0; transform: rotate(-32deg) translateX(-55vmax); }
  100% { opacity: 0; transform: rotate(-32deg) translateX(-55vmax); }
}

/* Christmas: gold sparkles among the snow. */
.lx-fx__spark { color: #f3d27a; font-size: 12px; line-height: 1; animation: lx-twinkle ease-in-out infinite alternate; text-shadow: 0 0 8px rgba(243, 210, 122, .7); }

/* ================= Theme picker ================= */
.theme-btn svg { width: 16px; height: 16px; }
@media (max-width: 480px) {
  .theme-btn { width: 32px; padding: 0; }
  .theme-btn__label { display: none; }
}
.theme-pop {
  position: fixed; z-index: 200;
  width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow: auto;
  padding: 14px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-lg);
  animation: lx-pop-in .18s ease-out;
}
.theme-pop[hidden] { display: none; }
@keyframes lx-pop-in { from { opacity: 0; transform: translateY(-6px); } }
.theme-pop__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 4px 10px; }
.theme-pop__head h2 { margin: 0; font: 600 17px/1.2 var(--font-display); }
.theme-pop__head span { font-size: 12px; color: var(--ink-3); }
.theme-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-opt {
  display: grid; gap: 7px; padding: 6px 6px 9px; text-align: left;
  border: 1px solid var(--line); border-radius: 14px; background: transparent; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.theme-opt:hover { border-color: var(--line-2); }
.theme-opt:active { transform: scale(.98); }
.theme-opt[aria-checked="true"] { border-color: var(--sakura-deep); box-shadow: 0 0 0 1px var(--sakura-deep); }
.theme-opt__text { display: grid; gap: 3px; min-width: 0; }
.theme-opt__name { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-weight: 700; font-size: 13.5px; line-height: 1.2; }
.theme-opt__name svg { width: 14px; height: 14px; margin-left: auto; color: var(--sakura-deep); visibility: hidden; }
.theme-opt[aria-checked="true"] .theme-opt__name svg { visibility: visible; }
.theme-opt__note { padding: 0 4px; font-size: 11.5px; line-height: 1.3; color: var(--ink-3); }
.theme-opt--wide { grid-column: 1 / -1; grid-template-columns: 112px 1fr; align-items: center; }
.theme-opt--wide .theme-swatch { height: 50px; }

.theme-swatch {
  position: relative; overflow: hidden; height: 54px; border-radius: 9px;
  display: grid; place-items: center;
  font: 600 26px/1 var(--font-display);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.theme-swatch::before, .theme-swatch::after { content: ''; position: absolute; border-radius: 50%; }
.theme-swatch span { position: relative; z-index: 1; }
.theme-swatch--sakura { background: linear-gradient(135deg, #fbf8f4 40%, #fcebf0); color: #c2456f; }
.theme-swatch--sakura::before { width: 10px; height: 10px; background: #f4b3c6; top: 10px; right: 14px; }
.theme-swatch--sakura::after { width: 7px; height: 7px; background: #e48aa6; bottom: 12px; left: 16px; }
.theme-swatch--spring { background: linear-gradient(135deg, #fbfaf1 40%, #eef5e3); color: #3f8a5a; }
.theme-swatch--spring::before { width: 10px; height: 10px; background: #f6c836; top: 10px; right: 14px; }
.theme-swatch--spring::after { width: 7px; height: 7px; background: #8dbf45; bottom: 12px; left: 16px; }
.theme-swatch--summer { background: repeating-linear-gradient(102deg, transparent 0 13px, rgba(70, 105, 140, .22) 13px 14px), linear-gradient(180deg, #e3eaf0, #f3f6f8); color: #4466b8; }
.theme-swatch--summer::before { width: 12px; height: 12px; background: #7c9ae0; top: 10px; right: 14px; box-shadow: 6px 4px 0 -2px #9688de; }
.theme-swatch--autumn { background: linear-gradient(135deg, #fbf6ee 40%, #fbeadb); color: #c2461d; }
.theme-swatch--autumn::before { width: 11px; height: 11px; background: #e0541f; top: 10px; right: 14px; border-radius: 2px 50% 2px 50%; }
.theme-swatch--autumn::after { width: 8px; height: 8px; background: #f3c03e; bottom: 12px; left: 16px; border-radius: 2px 50% 2px 50%; }
.theme-swatch--winter { background: radial-gradient(circle at 20% 30%, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 70% 70%, #fff 0 2px, transparent 2.5px), radial-gradient(circle at 85% 25%, #fff 0 1.5px, transparent 2px), linear-gradient(180deg, #d5e0ec, #f2f5f9); color: #b3243f; }
.theme-swatch--night { background: radial-gradient(circle at 18% 28%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 42% 70%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 64% 22%, #cfd6ff 0 1.2px, transparent 1.7px), linear-gradient(180deg, #060a1a, #151d3a); color: #e9ecf8; }
.theme-swatch--night::before { width: 18px; height: 18px; background: #f6efd2; top: 8px; right: 12px; box-shadow: 0 0 14px rgba(255, 246, 214, .6); }
.theme-swatch--christmas { background: radial-gradient(circle at 25% 30%, #fff 0 1.2px, transparent 1.7px), radial-gradient(circle at 60% 78%, #fff 0 1.2px, transparent 1.7px), linear-gradient(180deg, #1b3b2e, #0e2019); color: #f0cc76; }
.theme-swatch--christmas::before { width: 9px; height: 9px; background: #d94a4f; top: 10px; right: 14px; box-shadow: -14px 6px 0 -1px #e9c46a; }
.theme-swatch--seasons { grid-template-columns: repeat(4, 1fr); place-items: stretch; font-size: 15px; }
.theme-swatch--seasons span { display: grid; place-items: center; }
.theme-swatch--seasons span:nth-child(1) { background: #f1f4dc; color: #3f8a5a; }
.theme-swatch--seasons span:nth-child(2) { background: #dfe8f4; color: #4466b8; }
.theme-swatch--seasons span:nth-child(3) { background: #f8e3d0; color: #c2461d; }
.theme-swatch--seasons span:nth-child(4) { background: #eef2f7; color: #b3243f; }
.theme-swatch--seasons span.is-now { box-shadow: inset 0 -3px 0 currentColor; }

.theme-pop__foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 4px 2px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); cursor: pointer; }
.theme-pop__foot input { position: absolute; opacity: 0; pointer-events: none; }
.theme-toggle { flex: none; position: relative; width: 36px; height: 22px; border-radius: 999px; background: var(--line-2); transition: background .15s; }
.theme-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; }
.theme-pop__foot input:checked + .theme-toggle { background: var(--sakura-deep); }
.theme-pop__foot input:checked + .theme-toggle::after { transform: translateX(14px); }
.theme-pop__foot input:focus-visible + .theme-toggle { box-shadow: var(--focus); }
.theme-pop__foot small { margin-left: auto; color: var(--ink-3); font-size: 11.5px; }