/* 开机那一帧:midautumn-v60.js 还没跑,body 上还没有 ma-night,但 html 上已经有
   ma-boot 了(index.html 的 head 脚本打的)。这里只铺一层最朴素的深靛蓝,
   把奶油黄那一闪挡掉;真正的夜景(月亮、云、远山)等脚本跑起来再接手。
   ⚠️ html 和 body 都要刷 —— 只刷 html 的话,body 自己的 var(--bg) 还是奶油色。 */
html.ma-boot,html.ma-boot body{background:#101c3b}
/* 登录门槛自己带一层不透明的奶油底(.auth-gate 的 radial-gradient ... var(--bg)),
   不盖掉的话「一进去是黄的」照旧 —— body 那层根本露不出来。
   ⚠️ 只换背景,**不碰文字颜色**:登录卡还是奶油底深字,动了就又看不清了。 */
html.ma-boot .auth-gate{background:#101c3b}
/* Palette and original sprig restored from the approved Mid-Autumn preview. */
body.ma-night{--bg:#17294b;--card:#fffaf0;--ink:#2f2c45;--sub:#756f83;--line:#e8d9b5;--accent:#e6be5f;--accent-dark:#9a7223;--shadow:0 12px 32px #070e4022;background:linear-gradient(180deg,#101c3b,#17294b 38%,#21395c 68%,#2c4667);background-attachment:fixed;
 /* ⚠️ **默认文字是深色**,不是月白。
    2026-09-20 连报了三处「看不清」(登录卡、排行榜的招牌词、设置里的班级名和单词本),
    根子都是同一个:body 上挂了一个全局的月白文字色,于是任何落在浅色卡片上、
    又没被单独改过的字,都变成了白底白字。夜色上的字一律**逐处**提亮(见下面各页的规则),
    别再把整页文字刷成浅色 —— 那样每加一个新组件就要补一条,补漏一条就是一行看不见的字。 */
 color:#2f2c45;color-scheme:light}
body.ma-night::before{display:none}
/* ⚠️ 夜景铺在**除设置外的每一页**(用户 2026-09-20)。设置页排除:那一页全是表单和开关,
   铺夜景只会让「我的皮肤」那块预览卡分不清哪是预览、哪是页面。 */
body.ma-night #screen-add,body.ma-night #screen-write,body.ma-night #screen-dex,body.ma-night #screen-quiz,body.ma-night #screen-rank{position:relative;isolation:isolate;background:none;--qx-sky-ink:#f9f4e7;--qx-sky-sub:#d9deea}
body.ma-night #screen-add::before,body.ma-night #screen-write::before,body.ma-night #screen-dex::before,body.ma-night #screen-quiz::before,body.ma-night #screen-rank::before{content:"";position:absolute;
/* ⚠️ 向左右各延出 18px = #app 的内边距。不延的话装饰层只有 #screen-* 那么宽,
   右边留一条 18px 的空带,月亮光晕和桂枝在那儿被**直着切断**
   (用户 2026-09-21:「感觉桂枝的右边有一条裁边」)。延出之后盒子和 #app 同宽,
   桂枝改成 right 14px、月亮改成 77%,换算下来跟延出前是同一个位置。 */
  inset:0 -18px;z-index:-1;pointer-events:none;background:url('midautumn-sprig-v60.svg') no-repeat right 14px top 96px / 104px 70px,radial-gradient(circle at 77% 138px,#fffdf0 0 26px,#fdf1c4 33px,#f8dc8a 37px,#f8d87840 41px,#f8d87814 66px,transparent 98px)}
/* 月亮的高度按页分:
   · 抓词页压到 138px —— 顶上有单词本 chip + 连胜徽章 + 两行问候,再高就被压住、还会被屏顶切掉。
   · 其余四页顶上只有一个标题,138px 就掉进标题和卡片中间那块空里,看着像悬在半空
     (用户 2026-09-21:「写作页面月亮回到上面去」)。提到 98px —— 正好等于光晕半径,
     贴着屏顶但一点不切。桂枝跟着上去。 */
body.ma-night #screen-write::before,body.ma-night #screen-dex::before,body.ma-night #screen-quiz::before,body.ma-night #screen-rank::before{background:url('midautumn-sprig-v60.svg') no-repeat right 14px top 56px / 104px 70px,radial-gradient(circle at 77% 98px,#fffdf0 0 26px,#fdf1c4 33px,#f8dc8a 37px,#f8d87840 41px,#f8d87814 66px,transparent 98px)}
/* 图鉴顶部控件比其他页多一整排,月亮在 98px 时正好被右侧筛选药丸压住。
   这一页单独提到 54px,同时收窄最外层光晕,让月面完整露在工具栏上方。 */
body.ma-night #screen-dex::before{background:url('midautumn-sprig-v60.svg') no-repeat right 14px top 10px / 104px 70px,radial-gradient(circle at 77% 54px,#fffdf0 0 26px,#fdf1c4 33px,#f8dc8a 37px,#f8d87840 41px,#f8d87814 50px,transparent 68px)}
/* 排行榜:标题下面紧跟着就是连胜卡(整宽奶油卡),正好压在月亮上
   (用户 2026-09-21:「排行榜也是,不要挡住月亮」)。
   月亮圆心 98 + 半径 98 = 光晕到 196 为止,所以第一张卡从 200 往下开始。
   ⚠️ 加在 h1 的下边距上,不是卡的上边距 —— 这一页的卡是 JS 渲染出来的好几种,
      挑一张加等于漏掉其余;标题只有一个。 */
body.ma-night #screen-rank>h1{margin-bottom:162px}
/* ⚠️ 月亮往下挪过(44px → 138px)。原来圆心离屏顶只有 44px,而光晕半径是 98px ——
   上面 54px 直接被切掉,而且单词本 chip 和连胜徽章那一行正好压在月亮上
   (用户 2026-09-21:「连胜挡在月亮上。月亮光晕被上面切掉一部分」)。
   138 是这么来的:chip 那行到 40px 为止,月亮光晕顶边 = 138-98 = 40,正好接上不重叠。
   桂枝跟着一起下来(40px → 96px),不然它会飘在月亮上方半空。 */
/* 远山只有 .ma-hills 这一套(JS 画的 SVG:两层剪影 + 三点暖灯,固定在底栏上面)。
   ⚠️ 这里原来还有一层 #screen-*::after 的渐变「山」,是个 inset:58% 的盒子。
      两个椭圆开得很大(136% × 86%),实心部分盖过了盒子边,于是盒子自己的矩形
      边框露了出来 —— 抓词页表现为山被一块浅蓝压住,测验页干脆凭空多一条横边
      (用户 2026-09-21:「下面的山还是被遮住了…你直接把这层东西去掉吧」)。
      整层已删,别再加回来:要改远山就改 .ma-hills 那个 SVG。 */
body.ma-night .card,body.ma-night .overlay-card,body.ma-night .list-item,body.ma-night .def-box,body.ma-night #write-setup,body.ma-night #write-result{color:var(--ink)}
/* ⚠️ .overlay-card 的底色在基础样式里是 **var(--bg)**,而夜色把 --bg 刷成了深靛蓝 ——
   于是弹窗变成「深底 + 深字」,标题整个看不见(用户 2026-09-21:批量添加那个框)。
   里面的字(标题 #2f2c45、说明 #756f83、输入框、按钮)全是按奶油底配的,一个没动,
   所以修法是把**底色**还回奶油,不是去改那一堆字。
   .ma-dialog 那几个弹窗本来就显式写了 #fffaf0,这条正好和它们对齐。 */
body.ma-night .overlay-card{background:#fffaf0}
body.ma-night .screen>h1,body.ma-night .screen>h2,body.ma-night .screen>.sub,body.ma-night .screen>.field-label{color:#fffaf0}
/* ⚠️ 上面那条只够得着 .screen 的**直接**子元素。有些整块外面还包了一层普通 div
   —— 排行榜的「历代表彰榜」就在 #hof-block 里,于是标题和底下那行小字是深色
   压在深蓝上,直接看不见(用户 2026-09-21)。这里多放一层包装。
   ⚠️ 只放过**不是卡片**的那层:卡片/列表项里是奶油底,字必须留深色。 */
body.ma-night .screen>div:not(.card):not(.list-item):not(.overlay-card)>h1,
body.ma-night .screen>div:not(.card):not(.list-item):not(.overlay-card)>h2{color:#fffaf0}
body.ma-night .screen>div:not(.card):not(.list-item):not(.overlay-card)>.sub,
body.ma-night .screen>div:not(.card):not(.list-item):not(.overlay-card)>.field-label{color:#d9deea}
/* 底栏**保持 App 原来的样子**:通栏、贴在页面最底下(用户 2026-09-21:
   「抓词页的菜单挡住月亮了,你还是变成原来那种在页面最底下的吧」)。
   浮起来的那版药丸确实好看,但它离地 8px、左右各缩 10px,夜景里反而像块补丁,
   而且盖住了底部的远山。这里只改颜色,不动位置和形状。 */
body.ma-night #nav{background:linear-gradient(180deg,rgba(18,33,63,.78),rgba(25,45,76,.88));
  border-top:1px solid rgba(255,255,255,.16);color:#c7cfdf;
  box-shadow:0 -8px 26px rgba(5,13,37,.22);-webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%)}
body.ma-night #nav button{color:#c7cfdf}
body.ma-night #nav button.on{background:linear-gradient(180deg,rgba(242,209,122,.03),rgba(242,209,122,.13));color:#f3d27a}
body.ma-night input,body.ma-night textarea,body.ma-night select{color:var(--ink);background:#fffdf8}
body.ma-night #write-setup{background:#fffaf0;border-radius:24px;padding:18px;margin-top:12px!important;box-shadow:var(--shadow)}
body.ma-night .primary{background:linear-gradient(135deg,#f2d17b,#dba53c);color:#392b12}
body.ma-night .overlay{background:#071229bb}
body.ma-night #topbar{color:#fffaf0}
body.ma-night #streak,body.ma-night .streak{background:#0d1a38d9;color:#ffe9a8;border:1px solid #f3d27a66;border-radius:99px}
/* ⚠️ `.ma-entry` 只是个**容器**,不许自己画卡片。
   2026-09-20:它原来有底色、边框、圆角和投影,而里面的 .home-entry 也是一张卡 ——
   叠出来就是用户说的「背后一个超级大的背景框」。卡片长什么样只由 .home-entry 说了算。
   ⚠️ 上边距是留给月亮和云的:卡片顶着屏幕上沿的话,那两样就全被压住了
   (用户:「整个遮住了后面的月亮和云朵,应该是在云朵下面」)。 */
.ma-entry{position:relative;margin:58px 0 14px;padding:0;border:0;background:none;box-shadow:none}
.ma-entry h3{margin:0 50px 5px 0;font-size:20px}.ma-entry p{margin:5px 0;font-size:12px;color:#756f83;line-height:1.5}
.ma-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.ma-actions button{flex:1;min-width:90px;padding:10px;border-radius:13px;background:#f2dfac;color:#594219;font-weight:800;border:1px solid #d4b36a}
.ma-actions button:disabled{opacity:.55;cursor:default}
.ma-mini{display:flex;justify-content:space-between;gap:5px;padding:8px 0}.ma-mini button{background:transparent;border:0;padding:0;flex:1;min-width:0;color:#8a752e;font-size:10px}.ma-mini img{display:block;width:100%;max-width:48px;height:48px;margin:auto}.ma-dim{filter:brightness(0);opacity:.16}
/* ⚠️ 弹窗的高度上限用 **svh**(地址栏露着时的视口高度),不是 dvh —— dvh 会跟着
   iOS 地址栏的收放一路变,卡片又是垂直居中的,于是高度一变、位置跟着上下挪,
   看上去就是在抖(用户 2026-09-22:「在 rank 里面打开一些窗口,那些窗口会很不稳定地抖动」)。
   断掉滚动传递和锁住底下那页在 index.html 的 .overlay-card 那一段。
   ⚠️ 老浏览器不认 svh 会把这一条 max-height 整条丢掉 —— 那时落回基础样式里的
   `.overlay-card{max-height:86vh}`(分量更轻,平时被这一条压着),不会变成没有上限。 */
.ma-dialog{padding:12px;align-items:center}.ma-dialog>.overlay-card{width:100%;max-width:440px;max-height:calc(100svh - 30px);overflow:auto;text-align:left;background:#fffaf0;color:#2f2c45;padding:20px;border-radius:26px;overscroll-behavior:contain}
.ma-dialog h2{padding-right:26px;margin:0 0 8px}.ma-dialog p{font-size:13px;line-height:1.6}.ma-dialog .close-x{position:absolute;right:12px;top:10px}.ma-dialog .sub{color:#756f83}.ma-dialog img{object-fit:contain}
.ma-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ma-grid button{min-width:0;overflow-wrap:anywhere;border:1px solid #e8d9b5;background:#fffdf6;border-radius:16px;padding:8px;color:#584e42;font-size:11px}.ma-grid img{display:block;width:68px;max-width:100%;height:72px;margin:auto}
.ma-row{display:grid;grid-template-columns:65px repeat(3,minmax(0,1fr));gap:7px;align-items:center;border-bottom:1px solid #e8d9b5;padding:8px 0}.ma-row button{border:1px solid #ead9b7;border-radius:12px;min-height:46px;background:#f8eed7;color:#6e5424}.ma-row.today{background:#f5dda640;border-radius:14px}.ma-row img{width:50px;height:55px}.ma-row small{display:block;font-size:10px}.ma-hero{display:block;width:132px;height:132px;margin:5px auto 12px;filter:drop-shadow(0 9px 12px #17234035)}
.ma-feedback{padding:12px;border:1px solid #dbc897;border-radius:15px;background:#fff7e2;margin-top:10px;overflow-wrap:anywhere}.ma-feedback p{margin:6px 0}.ma-poem{text-align:center}.ma-poem blockquote{margin:24px 0 16px;font:22px/1.8 serif;white-space:pre-line}.ma-poem em{display:block;font:italic 15px/1.7 Georgia,serif;white-space:pre-line}.ma-picker{max-height:40dvh;overflow:auto;display:flex;flex-direction:column;gap:6px;margin:10px 0}.ma-picker button{text-align:left;padding:10px;border:1px solid #dfd1b0;border-radius:10px;background:#fffefb;overflow-wrap:anywhere}.ma-picker button.on{border-color:#b88624;background:#ffefbd}
#ma-write-bar{padding:12px;border:1px solid #e5c775;border-radius:16px;background:#fff3cd;color:#6a5424;margin-bottom:14px}#ma-write-bar p{margin:5px 0;font-size:12px;line-height:1.5}#ma-write-bar button{font-size:12px;border-radius:9px;padding:5px 9px;background:#f0ddb0;border:0}
.ma-bake{animation:maBake 1.2s ease both}@keyframes maBake{0%{opacity:0;transform:scale(.6) rotate(-15deg)}65%{opacity:1;transform:scale(1.08)}100%{transform:none}}
.ma-badge-small{width:20px;height:20px;padding:2px;border:0;background:none;vertical-align:middle}.ma-badge-small img{width:16px;height:16px}.ma-collection-btn{margin-top:8px;border-radius:12px;padding:9px;background:#f2dfac;color:#594219;border:1px solid #d4b36a}
@media(max-width:360px){.ma-dialog>.overlay-card{padding:16px}.ma-row{grid-template-columns:52px repeat(3,minmax(0,1fr));gap:5px}.ma-entry{padding:13px}}
@media(prefers-reduced-motion:reduce){.ma-bake{animation:none}}
/* ⚠️ 保险丝:登录门槛那张卡是浅奶油底(#fffaf0),夜色皮肤的月白正文落上去等于看不见
   (用户 2026-09-20 截图:「Sign in or sign up」几乎是白纸白字)。
   maSkin() 已经不在门槛期换肤了,这条是第二道 —— 以后谁再从别处加 class 也不会出事。 */
body.ma-night.auth-pending,body.ma-night.auth-locked{background:var(--bg,#faf6ee);color:#3d3550}
body.ma-night.auth-pending #auth-card,body.ma-night.auth-locked #auth-card,
body.ma-night.auth-pending .auth-card,body.ma-night.auth-locked .auth-card{color:#3d3550}
body.ma-night.auth-pending::before,body.ma-night.auth-locked::before,
body.ma-night.auth-pending #screen-add::before,body.ma-night.auth-locked #screen-add::before{display:none}

/* ===== 抓词页 / 图鉴页:照搬视觉稿 中秋活动预览-v60.html =====
   用户 2026-09-20:「我想要的就是链接里面的抓词页和图鉴页」。
   下面的色值、圆角、阴影、动画节奏**全部取自那份稿**,不是现调的。改之前先去看稿。 */
/* 夜空:云缓慢横移 + 右上角落桂。两样都 pointer-events:none,永远不吃点击。 */
/* 云:稿里是一条药丸 + 两个鼓包(::before/::after),不是一条长椭圆
   (用户 2026-09-20:「云朵是长这样,现在就是一个长椭圆」)。所以改成真的元素 .ma-cloud。 */
body.ma-night .ma-cloud{position:absolute;z-index:-1;height:16px;width:92px;border-radius:99px;
  background:#e7eef51c;filter:blur(.3px);pointer-events:none;animation:ma-cloud 26s ease-in-out infinite alternate}
body.ma-night .ma-cloud::before,body.ma-night .ma-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
body.ma-night .ma-cloud::before{width:32px;height:25px;left:15px;bottom:0}
body.ma-night .ma-cloud::after{width:42px;height:30px;right:12px;bottom:0}
/* 云要落在「月光落在词页上…」和「今天遇到了什么词?」中间那一段空里
   (用户 2026-09-21)。问候到 104 为止,那行小标题从 170 起 —— 120 正好在当中。
   b 那朵压到 150,从月亮底下飘过去,别和 a 挤在同一条线上。
   ⚠️ v60.24 b 从 right:-30px 挪到 -12px(用户 2026-09-23:「rank 手机上可以左右滑动,其他页面不会」)。
      云会往右飘 18px(@keyframes ma-cloud),原来那个位置飘到头时可见边缘伸出屏幕 17px ——
      页面变成 392px 宽,整页能左右拖。抓词/测验/写作页其实也一样,只是页面短,在排行榜那种长页上
      竖着滑一斜就带出来了;图鉴的云不飘所以没事。
      现在的位置:飘到最右时可见边缘正好落在屏幕边内(scale(.72) 两边各缩掉 13px:#screen 右沿 +12 −13 +18)。
      **别再往右挪**;要改飘的距离就一起算这一条。 */
body.ma-night .ma-cloud.a{top:120px;left:-12px}
body.ma-night .ma-cloud.b{top:150px;right:-12px;transform:scale(.72);opacity:.7;animation-duration:34s}
body.ma-night .ma-petals{position:absolute;z-index:0;right:11px;top:86px;width:76px;height:88px;pointer-events:none}
body.ma-night .ma-petals i{position:absolute;width:7px;height:4px;border-radius:8px 1px;background:#e7bb4c;
  transform:rotate(var(--r));animation:ma-petal 7s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes ma-cloud{to{translate:18px 0}}
@keyframes ma-petal{0%{transform:translateY(-6px) rotate(var(--r));opacity:0}15%{opacity:1}
  100%{transform:translate(-14px,46px) rotate(calc(var(--r) + 140deg));opacity:0}}
@media(prefers-reduced-motion:reduce){body.ma-night .ma-petals i{animation:none}}
/* 顶上那两颗玻璃药丸(单词本 / 连胜)和主标题 */
body.ma-night #subject-chip{border:1px solid #ffffff24;border-radius:999px;background:#ffffff14;color:#f9f4e7;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.ma-night #streak-chip{background:#0d1a38d9!important;color:#ffe9a8!important;border:1px solid #f3d27a66;
  border-radius:999px;box-shadow:0 3px 12px #0712298c;text-shadow:0 1px 2px #0008}
body.ma-night #screen-add h1{color:#fffaf0;font-size:25px;font-weight:850;line-height:1.2;letter-spacing:.3px;
  text-shadow:0 2px 12px #07122988,0 0 22px #f6d57a22}
body.ma-night #screen-add #add-hero>.sub,body.ma-night #screen-add .word-input-wrap+.sub{color:#d9deea}
/* 抓词的输入框做成稿里的 .search-card */
body.ma-night #screen-add .word-input-wrap{padding:13px;border-radius:26px;
  background:linear-gradient(180deg,#fffdf8,#fbf2de);box-shadow:0 14px 30px #050d2544,inset 0 1px 0 #fff}
body.ma-night #screen-add .word-input-wrap input{border:0;border-radius:999px;background:#fff;color:#2f2c45;
  box-shadow:inset 0 0 0 1.5px #ecdcb6,0 2px 6px #9f7a3212;padding:13px 16px;font-size:17px}
body.ma-night #screen-add .word-input-wrap input:focus{box-shadow:inset 0 0 0 2px #d6a847,0 0 0 4px #f3d88044}
/* ---- 入口卡 .home-entry（稿里逐条）---- */
body.ma-night .ma-entry .home-entry,.ma-entry .home-entry{position:relative;overflow:hidden;padding:12px 14px 12px;border-radius:24px;color:#2f2c45;
  background:radial-gradient(circle at 92% 0,#fbe7ad 0,transparent 42%),linear-gradient(165deg,#fffdf7 0 55%,#fbf0d6);
  box-shadow:0 16px 34px #050d2555,inset 0 1px 0 #fff}
.ma-entry .entry-sprig{position:absolute;right:-6px;top:-6px;width:86px;height:54px;pointer-events:none;opacity:.95}
/* 「月饼盒」收成右上角、桂枝正下方的一颗小按钮(用户 2026-09-21)。
   原来它是整宽的 .secondary,单独占掉一行 ——「饼坊太大」一半是它撑的。
   ⚠️ 用 absolute 而不是塞进 .entry-head:塞进去会把标题挤窄,长口味名(五仁月饼灵)要折行。

   v60.19:这儿从一颗文字药丸(「月饼盒 ›」)换成**两枚图标**(用户 2026-09-22:
   「获得诗笺之后,做一个诗笺的图标放在月宫饼坊的『月饼盒』左边…月饼盒也做成一个
   可爱一点的图标」)。诗笺在左、月饼盒在右;诗笺一张都没拿到时那一枚整个不出现。
   ⚠️ 图下面留着那行小字:光一个图标学生猜不出点了会怎样,这张卡上别的入口也都带字。
   ⚠️ top 从 47px 提到 40px —— 图标比文字药丸高一截,不提的话会压到底下的「今日…」那行。 */
.ma-entry .entry-tools{position:absolute;z-index:2;right:9px;top:40px;display:flex;gap:6px}
.ma-entry .entry-tool{display:grid;justify-items:center;gap:1px;border:0;cursor:pointer;
  padding:5px 7px 4px;border-radius:15px;font-family:inherit;color:#7c5a17;
  background:#fff6e0;box-shadow:inset 0 0 0 1px #ecd6a2,0 3px 9px #8a5d1622}
.ma-entry .entry-tool svg{display:block;width:26px;height:26px}
.ma-entry .entry-tool b{font-size:10px;font-weight:900;line-height:1.1;letter-spacing:.2px;white-space:nowrap}
.ma-entry .entry-tool:active{transform:scale(.96)}
@media(max-width:340px){.ma-entry .entry-tool svg{width:22px;height:22px}.ma-entry .entry-tool b{font-size:9px}}
/* 诗笺弹窗底下那排日子(拿到不止一张时才有)。 */
.ma-poem-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px}
.ma-poem-tabs button{padding:6px 12px;border-radius:999px;border:1px solid #e8d5aa;background:#fffaf0;
  color:#7c6a45;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.ma-poem-tabs button.on{background:linear-gradient(180deg,#f8de92,#e1ad4b);border-color:#d9a64a;color:#5a4210}
.ma-entry .entry-head{display:flex;gap:11px;align-items:center;position:relative;z-index:1}
.ma-entry .entry-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fffaf0,#f5e2b2);box-shadow:0 4px 12px #b1822d2e,inset 0 0 0 1px #fff}
.ma-entry .entry-icon img{width:37px;height:37px;object-fit:contain}
/* 饼面压字的那一枚(稿里左边那个图标)。外圈金边 + 内圈细描边 + 中间一个字。 */
.ma-entry .entry-icon i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-style:normal;
  background:radial-gradient(circle at 40% 32%,#ffe9aa,#d49c34 72%);border:2.5px ridge #efc96f;
  box-shadow:inset 0 0 0 3px #f8d87855,0 3px 9px #8a5d1633;color:#7c4f13;font:900 17px/1 Georgia,"Songti SC",serif}
/* 字放大、卡不放大(用户 2026-09-21:「里面字太小了,放大一些,但是不要把饼坊放大」)。
   省下来的高度是从那颗整宽的「月饼盒与礼物」按钮、和日历下面那段留白里挪的。 */
.ma-entry .eyebrow{font-size:11px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;color:#9a7b30}
.ma-entry .title{font-size:20px;line-height:1.2;font-weight:900;color:#2f2c45}
.ma-entry .sub{color:#6b6579;font-size:13.5px;line-height:1.45}
.ma-entry .flavour-pill{position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;margin:9px 0 2px;
  padding:6px 11px;border-radius:999px;background:#fff4d8;box-shadow:inset 0 0 0 1px #f1dfae;color:#735b26;font-size:12.5px;font-weight:850}
.ma-entry .box-mini{position:relative;z-index:1;display:grid;width:100%;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;margin:9px 0 18px;padding:0;border:0;background:none;cursor:pointer}
.ma-entry .box-mini i{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:50%;
  font-style:normal;background:radial-gradient(circle at 50% 35%,#fffdf6,#f3e5c3);box-shadow:inset 0 0 0 1.5px #e9d7a8}
.ma-entry .box-mini img{position:absolute;left:-9%;top:-15%;width:118%;height:118%;object-fit:contain;pointer-events:none}
.ma-entry .box-mini i b{position:absolute;left:0;right:0;bottom:-14px;color:#9b8a68;font-size:10.5px;font-weight:850;text-align:center}
.ma-entry .box-mini i.got{background:radial-gradient(circle at 50% 35%,#fffaf0,#f7e2a9);box-shadow:inset 0 0 0 1.5px #dcb65a,0 3px 8px #a1742318}
.ma-entry .box-mini i.today{background:radial-gradient(circle at 50% 35%,#fffdf8,#f5ead0);
  box-shadow:inset 0 0 0 1.5px #d9a64a,0 0 0 3px #f4d88066;animation:ma-today 2.4s ease-in-out infinite}
.ma-entry .box-mini i.today img{filter:brightness(0);opacity:.15}
.ma-entry .box-mini i.today b{color:#b0523f}
.ma-entry .box-mini i.future{background:none;box-shadow:none;outline:1.5px dashed #d9caa7;outline-offset:-3px}
.ma-entry .box-mini i.future span{color:#b9a986;font-size:14px;font-weight:900}
@keyframes ma-today{0%,100%{box-shadow:inset 0 0 0 1.5px #d9a64a,0 0 0 3px #f4d88066}
  50%{box-shadow:inset 0 0 0 1.5px #d9a64a,0 0 0 6px #f4d88022}}
@media(prefers-reduced-motion:reduce){.ma-entry .box-mini i.today{animation:none}}
.ma-entry .primary{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  border:0;border-radius:999px;padding:11px 16px;font-family:inherit;font-size:16px;font-weight:900;color:#392b12;cursor:pointer;
  background:linear-gradient(180deg,#f8de92,#e1ad4b);box-shadow:inset 0 1px 0 #fff9,0 8px 18px #b07d2a38}
.ma-entry .primary::before{content:"✎";font-size:15px}
.ma-entry .primary:active{transform:translateY(1px) scale(.99)}
.ma-entry .secondary{width:100%;margin-top:7px;border-radius:14px;padding:10px 14px;font-family:inherit;font-size:14px;font-weight:900;
  color:#63552f;background:#f8efd9;border:1px solid #ead5a6;cursor:pointer}
/* ---- 图鉴页:照搬视觉稿的 sprites 那一屏（用户 2026-09-20 发图「图鉴是这样的」）----
   稿里三件事:① 标题是月白大字 + 一行淡灰说明;② 顶上一排深色药丸标签,选中的那颗是金的;
   ③ 词卡是奶油纸 #fffaf1、圆角 18、大投影,名字深色粗体、下面一行淡灰。 */
body.ma-night #screen-dex h1{color:#fffaf0;font-size:25px;font-weight:850;letter-spacing:.3px;
  text-shadow:0 2px 12px #07122988,0 0 22px #f6d57a22}
body.ma-night #screen-dex>.sub,body.ma-night #screen-dex .dex-count{color:#d9deea}
/* 顶上那排标签(单词本 / 视图 / 排序 / 筛选 / 整理)。深底玻璃药丸,选中变金。 */
body.ma-night .dex-toolbar .chip,body.ma-night #dex-subj .chip{border:1px solid #ffffff1f;border-radius:999px;
  background:#ffffff14;color:#e4e6ef;font-weight:900;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.ma-night .dex-toolbar .chip.on,body.ma-night #dex-subj .chip.on{background:linear-gradient(180deg,#f8de92,#e1ad4b);
  color:#3f2f0b;border-color:#e6c57a}
body.ma-night .dex-search>input{background-color:#fff;color:#2f2c45;border:0;border-radius:999px;
  box-shadow:inset 0 0 0 1.5px #ecdcb6,0 2px 6px #9f7a3212}
body.ma-night .dex-search>input::placeholder{color:#9b9384}
body.ma-night .dex-search>button{background:#ffffff18;color:#e4e6ef;border-radius:999px}
/* 词卡:奶油纸 */
body.ma-night .dex-face,body.ma-night .dex-back{background:#fffaf1;color:#2f2c45;border-radius:18px;
  box-shadow:0 12px 26px #050d2544}
body.ma-night .dex-word{color:#2f2c45;font-weight:950}
body.ma-night .dex-face .dex-ipa,body.ma-night .dex-face .dex-meta,
body.ma-night .dex-back .sub,body.ma-night .dex-back-src,body.ma-night .dex-back-more{color:#756f83}
body.ma-night .dex-back-hook{background:#f5ecda;color:#2f2c45}
body.ma-night .dex-back-hook b{color:#9a6a1a}
body.ma-night .dex-back-open{background:#f0e4cc;color:#6b5a30}
body.ma-night .dex-row{background:#fffaf1;color:#2f2c45;border-radius:16px}
body.ma-night .dex-row .sub{color:#756f83}
/* 空状态、提示这类落在夜色上的文字 */
body.ma-night .empty-hint,body.ma-night #screen-dex .sub{color:#c9cfdd}
/* 远山:压在内容后面、底色前面。bottom 给底栏留位置(底栏是 fixed 的)。 */
body.ma-night .ma-hills{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom,0px));
  z-index:-1;width:100%;height:150px;pointer-events:none}
/* 夜景铺开之后,测验 / 排行 / 写作这几页的标题和说明也要提亮 —— 深底上留着原来的深色字就是看不见。 */
body.ma-night #screen-quiz>h1,body.ma-night #screen-rank>h1,body.ma-night #screen-write>h1{color:#fffaf0;text-shadow:0 2px 12px #07122988}
body.ma-night #screen-quiz>.sub,body.ma-night #screen-rank>.sub,body.ma-night #screen-write>.sub,
body.ma-night #screen-rank .rank-hint,body.ma-night #screen-quiz .field-label,body.ma-night #screen-rank .field-label{color:#d9deea}
body.ma-night .rank-person{background:#fffaf1;color:#2f2c45}
body.ma-night .rank-person .sub,body.ma-night .rank-bio{color:#756f83}
/* 历代表彰是夜空里的永久荣誉,不再沿用常规皮肤的浅薰衣草卡。
   深蓝玻璃底保留背景层次,金色只用在称号、名次和「我」的描边。 */
body.ma-night .hof-card{background:linear-gradient(155deg,rgba(31,54,91,.88),rgba(18,35,67,.82));
  border-color:rgba(242,209,122,.24);color:#f7f3e9;box-shadow:0 10px 24px rgba(5,13,37,.24);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
body.ma-night .hof-card:hover{background:linear-gradient(155deg,rgba(39,65,103,.92),rgba(23,43,77,.88))}
body.ma-night .hof-card.mine{border-color:#e7bd5d;box-shadow:0 0 0 1px rgba(242,209,122,.18),0 10px 24px rgba(5,13,37,.28)}
body.ma-night .hof-cap{color:#f3d27a}
body.ma-night .hof-who .sub,body.ma-night .hof-val{color:#c5cedf}
/* ⚠️ .hof-rank / .hof-rank-no / .hof-rank-v **不在这张深蓝卡里** —— 它们只出现在
   点开之后那个「历代前五」弹窗,而弹窗是奶油底的(maDialog 挂在 body 上,不在 #screen-rank 里)。
   上一版按「深底浅字」给它们配了 #eef1f7 和淡金,结果名字整排白字压在奶油纸上,
   基本看不见(用户 2026-09-21 发图)。这里一条都不给:弹窗沿用 App 原本那套深字配色。
   .hof-cap / .hof-who / .hof-val 反过来只长在卡上,所以上面那两条是对的。 */
body.ma-night .screen{padding-bottom:84px}
/* ---- 抓词页顶上的问候(照稿:大字月白 + 一行淡灰)---- */
body.ma-night .ma-greet{margin:2px 0 0}
body.ma-night .ma-greet h2{margin:0;color:#fffaf0;font-size:25px;font-weight:850;line-height:1.2;letter-spacing:.3px;
  text-shadow:0 2px 12px #07122988,0 0 22px #f6d57a22}
body.ma-night .ma-greet p{margin:6px 0 0;color:#d9deea;font-size:13px;line-height:1.5}
/* 饼坊卡在问候和抓词框中间,上边距改小一点(上面已经有问候占位了) */
body.ma-night .ma-entry{margin:14px 0}
/* ---- 抓词框整块做成稿里的 .search-card,原来的大标题降级成卡片里的小标签 ---- */
/* ⚠️ **只有输入框那一块是卡片**。原来整个 #add-hero(标题 + 输入框 + 提示 + 「批量添加一份词表」)
   都套在一张奶油卡里,那张卡在夜色上是一大片(用户 2026-09-20:「批量添加和输入单词框后面
   不要那么大一个背景」)。现在:标题是夜色上的小标签,输入框自己一张小卡,批量添加回到夜色上。 */
body.ma-night #add-hero{padding:0;background:none;box-shadow:none}
body.ma-night #add-hero h1{margin:0 0 7px;color:#cdd3e2;font-size:13px;font-weight:850;text-shadow:none;letter-spacing:0}
body.ma-night #add-hero .word-input-wrap{padding:11px;border-radius:24px;
  background:linear-gradient(180deg,#fffdf8,#fbf2de);box-shadow:0 12px 26px #050d2540,inset 0 1px 0 #fff}
body.ma-night #add-hero .word-input-wrap input{padding:13px 58px 13px 16px}
body.ma-night #add-hero>.sub{color:#b9c1d4;margin-top:8px}
/* 「批量添加一份词表」回到夜色上:玻璃描边,不再是一坨奶油底 */
body.ma-night #bulk-add-btn,body.ma-night #screen-add .ghost{background:#ffffff12;border:1px dashed #ffffff3d;color:#e4e6ef}
/* 输入框右边那颗金色 ＋ */
body.ma-night .ma-catch-plus{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:grid;place-items:center;
  width:40px;height:40px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(180deg,#f8de92,#e1ad4b);color:#5a4210;font-size:22px;font-weight:700;
  box-shadow:inset 0 1px 0 #fff9,0 4px 10px #b07d2a33}
body.ma-night .ma-catch-plus:active{transform:translateY(-50%) scale(.95)}
/* 左边那颗 📋。做得比金＋素一些 —— 主动作是右边那个,这颗只是顺手的入口。
   ⚠️ 输入框要同时给左右两颗让出位置,否则长单词会钻到按钮底下。 */
body.ma-night .ma-catch-bulk{position:absolute;left:7px;top:50%;transform:translateY(-50%);display:grid;place-items:center;
  width:34px;height:34px;padding:0;border:0;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;
  background:#f6ecd6;box-shadow:inset 0 0 0 1px #e8d5aa}
body.ma-night .ma-catch-bulk:active{transform:translateY(-50%) scale(.95)}
body.ma-night #screen-add .word-input-wrap #word-input{padding-left:48px;padding-right:52px}
/* ---- 夜色地面上的文字:逐处提亮(和上面那条「默认深色」配成一对)---- */
body.ma-night #screen-add>h1,body.ma-night #screen-dex>h1,body.ma-night #screen-quiz>h1,
body.ma-night #screen-write>h1,body.ma-night #screen-rank>h1{color:#fffaf0;text-shadow:0 2px 12px #07122988}
body.ma-night #screen-add>.sub,body.ma-night #screen-dex>.sub,body.ma-night #screen-quiz>.sub,
body.ma-night #screen-write>.sub,body.ma-night #screen-rank>.sub,
body.ma-night #screen-quiz>.field-label,body.ma-night #screen-rank>.field-label,
body.ma-night #screen-write>.field-label,body.ma-night #screen-dex>.field-label{color:#d9deea}
body.ma-night #screen-add>.empty-hint,body.ma-night #screen-dex>.empty-hint,
body.ma-night #screen-rank>.empty-hint,body.ma-night #screen-quiz>.empty-hint{color:#c9cfdd}
/* 排行榜的招牌词卡:奶油底,字必须是深的(用户 2026-09-20:「招牌词的单词本身看不清楚」) */
body.ma-night .sig-card,body.ma-night .sig-card .sig-name{color:#2f2c45}
body.ma-night .sig-card .sub{color:#756f83}
/* 设置页不铺夜景,但它继承 body 的变量 —— 班级名、单词本这些卡片里的字统一压回深色
   (用户 2026-09-20:「设置里面的班级名称和单词本也全都看不清楚」) */
body.ma-night #screen-settings,body.ma-night #screen-settings .card,body.ma-night #screen-settings .list-item,
body.ma-night #screen-settings .subject-chip,body.ma-night #screen-settings .chip,
body.ma-night #screen-settings input,body.ma-night #screen-settings select,body.ma-night #screen-settings textarea{color:#2f2c45}
body.ma-night #screen-settings .sub,body.ma-night #screen-settings .field-label{color:#756f83}
/* 设置页也用夜色(用户 2026-09-21:「设置页还是黄的」)。
   之前它整页退回浅奶油,在一片深蓝里显得突兀。现在底色跟着走,只把**卡片和表单**里的字
   压成深色 —— 那些卡片本来就是浅底,字浅了就看不见。 */
body.ma-night #screen-settings .card,body.ma-night #screen-settings .list-item,
body.ma-night #screen-settings input,body.ma-night #screen-settings select,
body.ma-night #screen-settings textarea,body.ma-night #screen-settings .subject-chip{color:#2f2c45}
body.ma-night #screen-settings>h1{color:#fffaf0;text-shadow:0 2px 12px #07122988}
body.ma-night #screen-settings>.field-label,body.ma-night #screen-settings>.sub{color:#d9deea}
body.ma-night #screen-settings .card .sub,body.ma-night #screen-settings .list-item .sub{color:#756f83}
/* 设置页所有「卡片」统一成冷蓝玻璃:账号 / 班级 / 单词本的 .tagline,
   邀请等 .list-item,普通 .card,以及会员卡 .vip-card。输入框和下拉框仍保留浅底,
   让「可编辑」和「已保存的卡片」一眼能分开。 */
body.ma-night #screen-settings .card,body.ma-night #screen-settings .list-item,
body.ma-night #screen-settings .tagline,body.ma-night #screen-settings .vip-card{
  background:linear-gradient(145deg,rgba(31,54,91,.86),rgba(20,39,72,.78));
  border:1px solid rgba(255,255,255,.15);color:#f3f1ea;box-shadow:0 8px 20px rgba(5,13,37,.19);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
body.ma-night #screen-settings .vip-card.on{border-color:#e1b958;background:linear-gradient(145deg,rgba(43,67,101,.92),rgba(27,46,78,.86))}
body.ma-night #screen-settings .card .sub,body.ma-night #screen-settings .list-item .sub,
body.ma-night #screen-settings .tagline .sub,body.ma-night #screen-settings .vip-card .sub{color:#c2cbdb}
body.ma-night #screen-settings .vip-badge{color:#f3d27a}
/* 这些说明文字是直接落在夜空上的,不在蓝卡里;换卡片后必须一起提亮。 */
body.ma-night #screen-settings .settings-block>.field-label,
body.ma-night #screen-settings .settings-block>.sub,
body.ma-night #screen-settings #acct-ui>.sub,body.ma-night #screen-settings #class-ui>.sub,
body.ma-night #screen-settings #vip-ui>.sub{color:#d9deea}
body.ma-night #screen-settings #set-subjects input[type="checkbox"]{accent-color:#dcb456}
/* 设置页最底下词典署名里那两个链接(Wiktionary / FreeDictionary)没设颜色,
   吃的是浏览器默认的 #0000ee —— 压在 #101c3b 的夜空上对比度只有 1.79,基本看不见。
   老毛病,不是这次改出来的。Privacy / Terms 那几个写了 inline color:inherit,
   行内样式赢过这条,所以不受影响。 */
body.ma-night #screen-settings a{color:#a8c0e8}
/* 写作页的三块面板统一成奶油纸,字压深 —— 夜色底上留浅字就是看不见 */
body.ma-night #write-setup,body.ma-night #write-result,body.ma-night #apply-setup,body.ma-night #apply-run{
  background:#fffaf1;color:#2f2c45;border-radius:24px;padding:16px;box-shadow:0 12px 26px #050d2544}
body.ma-night #write-setup .sub,body.ma-night #write-result .sub,body.ma-night #apply-setup .sub,
body.ma-night #write-setup .field-label,body.ma-night #apply-setup .field-label{color:#756f83}
body.ma-night #write-setup h2,body.ma-night #write-result h2,body.ma-night #apply-setup h2{color:#2f2c45}
/* 写作页:饼坊卡也要落在云下面(用户 2026-09-20)。标题占一行,再留出云带的高度。 */
body.ma-night #ma-entry-write{margin-top:78px}
@media(prefers-reduced-motion:reduce){body.ma-night .ma-cloud{animation:none}}

/* ---- 抓词页:一屏装下,不用上下滑(用户 2026-09-21「主页面不要上下滑动」)---- */
/* ① 那行「词组也可以 —— 整个打进来」和整宽的「批量添加一份词表」都收掉:
      批量添加已经并进输入框右边那枚金＋(见 maCatchPlus)。 */
body.ma-night #screen-add #add-hero .sub,
body.ma-night #screen-add #bulk-catch-btn{display:none}
/* ② 问候留在最上面陪月亮,「抓词框 + 饼坊卡」当成**一整组**落在下半屏的正中。
      手机上装得下不等于要全堆在顶上:上一版把间距全收成 0,结果整组顶到月亮脸上,
      底下空出一大片(用户 2026-09-21:「太局促了,分散一点,不要遮住月亮」)。
      做法是 flex 列里给这一组的头尾各留一个 auto —— 剩多少空间就均分多少,
      小屏(SE)挤不下时 auto 自然塌成 0,不会把内容顶出屏幕。 */
/* 问候和上面那行 chip 拉开(用户 2026-09-21:「问候和 English 凑得太近」)。
   ⚠️ 别写成 .ma-greet h2 的 margin-top —— 那会把问候和它自己底下那行说明也撑开。 */
body.ma-night .ma-greet{margin-top:20px}
body.ma-night #screen-add #add-hero{margin:0}
body.ma-night #screen-add #add-hero h1{margin:0 0 8px}
/* ⚠️ 这里原来用 margin:auto **分剩余空间**,结果是排版跟着视口高度走 ——
   iPhone 启动那一下,状态栏切成 black-translucent(安全区 0 → 59px)、dvh 也在变,
   于是先排一次再排一次,肉眼看到的就是「先把月亮挡住,再调整大小恢复正常」
   (用户 2026-09-21)。改成**固定像素**的间距:视口再怎么变,这一块都不动,
   第一帧画的就是最终样子。矮屏靠下面的媒体查询收窄。 */
/* ⚠️ 「让开月亮」的那段间距必须挂在**这一组里最上面那个**元素上。
   饼坊卡换到输入框上面之后,它才是第一个 —— 还留在 #add-hero 上的话,
   卡会顶上去重新压住月亮,就是最早那版「月宫饼盒整个遮住后面的月亮和云朵」。
   月亮光晕到 138+98=236 为止,问候到 106,所以给 110:卡从 216 起,和换位前输入框的位置一样。 */
body.ma-night #screen-add.active #add-hero{margin-top:0;margin-bottom:0;padding-bottom:0}
/* 让开月亮的那段空**挂在问候块上,用 min-height,不用外边距**。
   ⚠️ 外边距的做法试过:问候语长短一变(中文两行、英文三行)卡就跟着上下移,
      英文那版直接溢出 6px。min-height 则把这一块的**底边钉死**:
      问候从 51 开始,185 高 → 卡恒定落在 236,正好是月亮光晕的底边,
      中英文、长短问候都一样,整页高度也不再随语言变。 */
body.ma-night #screen-add .ma-greet{min-height:185px;box-sizing:border-box}
body.ma-night #screen-add.active .ma-entry{margin-top:0;margin-bottom:12px}
/* 矮屏(iPhone SE 一类,667)上那两个 auto 已经塌成 0,还差几像素才装得下 ——
   把卡和标题的间距再收一点点。大屏不受影响,它们靠 auto 分空间。 */
@media(max-height:780px){body.ma-night #screen-add .ma-greet{min-height:131px}}
@media(max-height:700px){
  body.ma-night #screen-add #add-hero h1{margin:0 0 8px}
  /* 矮屏(SE 一类,667)装不下「问候 + 整个月亮 + 饼坊卡 + 输入框」,总得让一样。
     让的是**装饰**,不是功能:月亮整体缩小上移,提示条收起,云跟着上去。
     ⚠️ 不能只把 min-height 归零了事 —— 那样卡会顶到 116,既盖住月亮,
        左上角还正好压着那朵云(用户 2026-09-21:「左边的云朵直接压在月宫饼坊的左上角」)。 */
  body.ma-night #screen-add::before{background:url('midautumn-sprig-v60.svg') no-repeat right 14px top 48px / 86px 58px,radial-gradient(circle at 77% 78px,#fffdf0 0 20px,#fdf1c4 26px,#f8dc8a 29px,#f8d87840 33px,#f8d87814 48px,transparent 64px)}
  body.ma-night #screen-add .ma-greet{min-height:91px}
  body.ma-night #screen-add .ma-cloud.a{top:64px}
  body.ma-night #screen-add .ma-cloud.b{top:92px}
  body.ma-night #screen-add .ma-entry .flavour-pill{display:none}
  body.ma-night #screen-add.active .ma-entry{margin-bottom:10px}
  body.ma-night .ma-greet{margin-top:10px}
}
/* ---- 选词框(写作页「自己选词」)---- */
/* ⚠️ 这一块原来**一条样式都没有**:搜索框是浏览器默认的 <input>(方角、1px 灰边),
   列表是裸 <button>。在这套奶油金的皮肤里格格不入,学生的原话是
   「感觉像是那种上世纪低端网站的搜索」(2026-09-21)。这里照饼坊卡那套语言重做。 */
body.ma-night .ma-search{position:relative;margin:2px 0 10px}
body.ma-night .ma-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;fill:none;stroke:#b39a63;stroke-width:1.9;stroke-linecap:round;pointer-events:none}
body.ma-night .ma-search input{width:100%;box-sizing:border-box;padding:11px 14px 11px 38px;
  border:1px solid #ecd9ad;border-radius:999px;background:#fffdf8;color:#2f2c45;
  font-family:inherit;font-size:15px;box-shadow:inset 0 1px 3px #b8973f14;-webkit-appearance:none;appearance:none}
body.ma-night .ma-search input::placeholder{color:#a79c8a}
body.ma-night .ma-search input:focus{outline:none;border-color:#dcb65a;box-shadow:0 0 0 3px #f4d88055}
body.ma-night .ma-pick-count{margin:0 0 8px 2px;color:#9a7b30;font-size:11px;font-weight:900;letter-spacing:.6px;text-transform:uppercase}
/* 列表自己滚,不让整张弹窗被撑长 —— 词多的学生有两三百个。 */
body.ma-night .ma-picker{display:grid;gap:7px;max-height:46vh;overflow-y:auto;padding:2px;margin:0 -2px;overscroll-behavior:contain}
body.ma-night .ma-picker button{display:block;width:100%;text-align:left;cursor:pointer;
  padding:9px 12px;border:1px solid #efe4cb;border-radius:14px;background:#fffdf8;color:#2f2c45;
  font-family:inherit;font-size:15px;line-height:1.35;box-shadow:0 1px 2px #8a5d1610}
body.ma-night .ma-picker button b{font-weight:800}
body.ma-night .ma-picker button small{display:block;margin-top:2px;color:#7d7489;font-size:12px;line-height:1.4}
body.ma-night .ma-picker button:active{transform:scale(.995)}
/* 选中:金边 + 暖底 + 右上角一枚对勾。只靠底色区分,深色弱视的学生分不出来。 */
body.ma-night .ma-picker button.on{position:relative;padding-right:34px;border-color:#dcb65a;
  background:linear-gradient(180deg,#fff7e2,#f8e8bd);box-shadow:inset 0 0 0 1px #fff8,0 3px 10px #a1742322}
body.ma-night .ma-picker button.on::after{content:"✓";position:absolute;right:11px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(180deg,#f8de92,#e1ad4b);color:#5e4210;font-size:12px;font-weight:900}
body.ma-night .ma-picker button.on small{color:#6b5a33}
body.ma-night .ma-pick-empty{margin:14px 2px;color:#8d8599;font-size:13px;text-align:center}
/* 「今天送给了谁」那一行。⚠️ .ma-row 是网格(日期 + 三个格子),不跨列的话
   这行字会被当成第四个格子塞进去,把当天的格子挤变形。 */
body.ma-night .ma-gave{grid-column:1/-1;margin:2px 0 0;color:#8a7f6a;font-size:11.5px;line-height:1.4}
body.ma-night .ma-row.today .ma-gave{color:#7c5a17}
/* ---- 排行榜的连胜卡和「我的成就」也收进夜蓝玻璃(用户 2026-09-21:「也全都变成蓝底的吧」)----
   和设置页、历代表彰那两处同一套材质,整页就不会再是「深蓝底上飘两块奶油砖」。
   ⚠️ 只点名这两个 id,不写 #screen-rank .card —— 排行榜上还有 .rank-person,
      它有自己的奶油底配深字(那是学生头像行),一起刷成深色就又看不清了。 */
body.ma-night #streak-card,body.ma-night #ach-card{
  background:linear-gradient(145deg,rgba(31,54,91,.86),rgba(20,39,72,.78));
  border:1px solid rgba(255,255,255,.15);color:#f3f1ea;box-shadow:0 8px 20px rgba(5,13,37,.19);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
body.ma-night #streak-card .sub,body.ma-night #ach-card .sub{color:#c2cbdb}
/* ================= v60.09 看不清的字(用户 2026-09-21 截图:测验里的单词「prop up」深字压在夜空上) ==========
   这一段是**逐页跑对比度检查**找出来的,不是看截图猜的:
   在 390px 手机上把抓词 / 图鉴 / 写作 / 测验(选择、拼写、默写各题型,答前答后)/ 排行 / 设置 / 单词详情 / 诗笺 / 徽章
   每一处看得见的字,拿字色和它**真正落在上面**的底色算对比度,中英文各跑一遍。
   下面每一条都对应一处实测不合格的字;改完重跑,这些全部过线,别的地方一个没多出来。 */

/* ① 测验页题头:单词本身(#2f2c45 压在深靛蓝上,1.25:1 —— 就是截图那个)、「哪个意思对?」、HP 和题号(3.5:1)。
      这几个直接落在夜空上,不在卡片里。
      单词加一圈夜色的光晕:长一点的词(double bluff)会伸到月亮边上,白字压在月亮上一样看不见。 */
body.ma-night #quiz-run>.detail-word,body.ma-night #apply-run>.detail-word{color:#fffaf0;text-shadow:0 0 6px #101c3b,0 1px 3px #101c3b}
body.ma-night #quiz-run>.q-label,body.ma-night #apply-run>.q-label,body.ma-night #quiz-monster .sub{color:#d9deea}

/* ② 抓词页的问候:英文标题两行,底下那行「…Bakery is open.」正好横穿月亮,白字压在月亮上看不见
      (光晕托不住 —— 月心是 #fffdf0,试过)。让这行在月亮左边就折行:月亮亮的那圈从屏宽 70% 左右开始,
      给它 66%。中文那句本来就短,不受影响。标题留一圈光晕,万一长问候碰到月亮边也托得住。 */
body.ma-night .ma-greet h2{text-shadow:0 0 5px #101c3b,0 0 12px #101c3b}
body.ma-night .ma-greet p{max-width:66%}

/* ③ 抓词页「在哪儿看到的」那张白卡里的「📷 拍照 — 敬请期待」:
      夜色给 #screen-add .ghost 配的是夜空用的浅字(#e4e6ef),可这一颗在白卡里 —— 白底白字,1.25:1。还回白卡上的样子。 */
body.ma-night #screen-add .ctx-inner .ghost{background:#fff;border:2px dashed var(--line);color:var(--sub)}

/* ④ 设置页「📖 打开使用指南」:夜色把设置页所有链接刷成浅蓝(#a8c0e8),这一个是浅色按钮 —— 浅底浅字,1.57:1。 */
body.ma-night #screen-settings a.small-btn{color:var(--ink)}

/* ⑤ 月宫饼坊卡片(奶油底):还没到的日子「22 23 24 25」(2.75:1)、顶上那行「MID-AUTUMN · 第 1 / 5 天」(3.3:1)
      加深一点;今天那个红字也稍微加深。「?」是装饰,只加深到看得见。 */
.ma-entry .box-mini i b{color:#6c5b3d}
.ma-entry .box-mini i.today b{color:#a0452f}
.ma-entry .box-mini i.future span{color:#a08a5c}
.ma-entry .eyebrow{color:#80631f}

/* ⑥ 图鉴页 iPhone 闪退(用户 2026-09-21:从测验切到图鉴,Safari 报「A problem repeatedly occurred」——
      这是网页内存超了被系统杀掉)。
      原因:夜景的几样装饰都在单词**后面**,而且要么会动、要么 fixed —— 飘的云(animation)、落的桂花(animation)、
      钉在屏底的远山(position:fixed)。浏览器要把「压在会动的东西上面」的内容单独做成一层,
      于是整个图鉴列表被**再画了一遍**:#screen-dex 一层(和列表一样高)+ 从搜索框往下又一层。
      实测(Chromium 3x 屏,300 个词,列表 36000px 高):图形层内存 1.2 GB,不穿皮肤只有 0.52 GB。
      只在图鉴这一页:云不飘、桂花不落(都还在,只是静止 —— 和「减少动态效果」时的样子一样)、不放远山。
      (试过把远山改成跟着列表放在最底下:会露出一块带直角边的矩形,不好看;图鉴满屏都是卡片,远山本来也只露一条。)
      改完同样条件量出来 0.53 GB,和不穿皮肤一样。其他页都很短(几十 MB),不用动。
      ⚠️ 以后往图鉴加夜景装饰:**只要在单词后面,就不能会动、不能 fixed**,否则列表越长越容易闪退。 */
body.ma-night #screen-dex .ma-cloud,body.ma-night #screen-dex .ma-petals i{animation:none}
body.ma-night #screen-dex .ma-hills{display:none}
/* ⑦ v60.10 图鉴列表视图(用户 2026-09-21 截图):词性「n.」和那行释义是浅灰字压在奶油色的行上,1.5:1。
      原因是上面那条 `body.ma-night #screen-dex .sub{color:#c9cfdd}` —— 本意是给**落在夜空上**的提示字提亮,
      可它带着 #screen-dex 这个 id,比 `body.ma-night .dex-row .sub` 分量重,于是把卡片里的 .sub 也一起刷浅了。
      这里同样带上 #screen-dex,把**卡片里面**的 .sub 还回深灰(#756f83,奶油底上 4.6:1)。
      网格卡片、翻到背面的卡片也在这一条里,以防同样的事。只在中秋皮肤下生效,平时的配色和七夕皮肤不受影响。 */
body.ma-night #screen-dex .dex-row .sub,body.ma-night #screen-dex .dex-card .sub,body.ma-night #screen-dex .dex-back .sub,
body.ma-night #screen-dex .card .sub,body.ma-night #screen-dex .list-item .sub{color:#756f83}

/* ================= v60.13(用户 2026-09-22)================= */

/* ⑧ 排行榜上打开的弹窗在手机上抖(用户:「手机版本如果在 rank 里面打开一些窗口,
      那些窗口会很不稳定地抖动」)。index.html 那边修的是**弹窗自己**
      (高度改用 svh、断掉滚动传递、锁住底下那页,见 .overlay-card 上方那段);
      这里修的是**弹窗底下那一层**。

      为什么偏偏是排行榜:夜景的云和桂花是一直在跑的动画,而排行榜比别的页多了三块
      **backdrop-filter** 的玻璃卡(连胜、我的成就、历代表彰)。弹窗的罩子是半透明的,
      于是 Safari 每一帧都要重新算一遍「罩子后面那片模糊」—— 而它后面正好有东西在动,
      整摞图层就跟着一帧一帧重画。这和 v60.10 图鉴闪退是同一个毛病的轻症版
      (见上面第 ⑥ 条:「只要在内容后面,就不能会动」)。
      弹窗开着的时候底下那页本来也看不清,动画和模糊都停掉,一点也不亏。 */
body.ma-night:has(>.overlay) .ma-cloud,
body.ma-night:has(>.overlay) .ma-petals i{animation:none}
body.ma-night:has(>.overlay) #streak-card,
body.ma-night:has(>.overlay) #ach-card,
body.ma-night:has(>.overlay) .hof-card{-webkit-backdrop-filter:none;backdrop-filter:none}

/* ⑨ 测验结算页看不清(用户 2026-09-22 截图:「满分!」和「6 / 6」)。
      v60.09 那轮逐页量对比度,量的是**答题中**的几种题型,漏了答完之后这一屏 ——
      它和题目一样直接坐在夜空上,字却还吃着浅色页那套:
        「满分!」「6 / 6」= body 默认的深字 #2f2c45,压在 #17294b 上 1.2:1(就是截图那个);
        「正确率 / 获得 XP / 最高连对」「怪兽被打倒了!」= --sub #756f83,2.4:1;
        三个大数字 = --accent-dark #9a7223,2.9:1。
      分法照七夕皮肤那一版(index.html 里 body.qx-night[data-screen="quiz"] 那几条):
      整块提到月白,次要文字和大数字各给一档。
      ⚠️ 光晕**只给最外面那两行**,不写在 #quiz-run 上 —— 写在父元素上会被里面每一个字继承,
         连奶油卡片里的深字都拖着一圈夜色,糊成一团。
      ⚠️ 落在**奶油底上**的字要单独还回深色:选项(.q-opt 是白底)、释义框、输入框、
         复习清单那排 chip、怪兽头上那颗「🎁 +102 XP」药丸(.xppack,底色 #fff4d6)。
         漏一个就是白底白字 —— 这正是 v60.09 那一段反复强调的「逐处提亮,别整页刷」。
      ⚠️ 「应用题」的结算页长得一模一样,但 #apply-run 在**写作页**里,
         所以它要配 [data-screen="write"],不能跟着测验那条。 */
body.ma-night[data-screen="quiz"] #quiz-run,
body.ma-night[data-screen="write"] #apply-run{color:var(--qx-sky-ink)}
body.ma-night[data-screen="quiz"] #quiz-run>.stars,
body.ma-night[data-screen="quiz"] #quiz-run>.done-praise,
body.ma-night[data-screen="write"] #apply-run>.stars,
body.ma-night[data-screen="write"] #apply-run>.done-praise{text-shadow:0 2px 12px #07122988}
body.ma-night[data-screen="quiz"] #quiz-run .sub,
body.ma-night[data-screen="write"] #apply-run .sub{color:var(--qx-sky-sub)}
body.ma-night[data-screen="quiz"] #quiz-run .q-stat-n,
body.ma-night[data-screen="write"] #apply-run .q-stat-n{color:#f3d27a}
body.ma-night[data-screen="quiz"] #quiz-run .q-opt,
body.ma-night[data-screen="quiz"] #quiz-run .def-box,
body.ma-night[data-screen="quiz"] #quiz-run input,
body.ma-night[data-screen="quiz"] #quiz-run .chip,
body.ma-night[data-screen="quiz"] #quiz-run .xppack,
body.ma-night[data-screen="quiz"] #quiz-run .card,
body.ma-night[data-screen="quiz"] #quiz-run .list-item,
body.ma-night[data-screen="write"] #apply-run .q-opt,
body.ma-night[data-screen="write"] #apply-run .def-box,
body.ma-night[data-screen="write"] #apply-run input,
body.ma-night[data-screen="write"] #apply-run .chip,
body.ma-night[data-screen="write"] #apply-run .card,
body.ma-night[data-screen="write"] #apply-run .list-item{color:var(--ink)}
body.ma-night[data-screen="quiz"] #quiz-run .def-box .sub,
body.ma-night[data-screen="quiz"] #quiz-run .card .sub,
body.ma-night[data-screen="quiz"] #quiz-run .list-item .sub,
body.ma-night[data-screen="write"] #apply-run .def-box .sub,
body.ma-night[data-screen="write"] #apply-run .card .sub,
body.ma-night[data-screen="write"] #apply-run .list-item .sub{color:var(--sub)}

/* ===== 🥮 v60.17 赠送窗口:同学名字的下拉列表 + 今天已送出那一行 =====
   (用户 2026-09-22:「赠送的窗口需要填写用户全名,能不能做一个下拉选择菜单」)
   ⚠️ 做成一列按钮而不是 <select> / <datalist>:搜出来的名字是**边打边变**的,
      <select> 在手机上是系统选择器,选项一变就得重开一次;<datalist> 在 iOS Safari 上
      干脆不显示。一列按钮在两端都一样,手指也好点(每行 40px 往上)。
   ⚠️ 最多 12 个(RPC 那头就限了 12),再多给它自己滚,不要把窗口撑长。 */
.ma-people{display:flex;flex-direction:column;gap:6px;max-height:212px;overflow-y:auto;overscroll-behavior:contain;margin:-4px 0 8px}
.ma-people:empty{display:none}
.ma-people button{text-align:left;padding:10px 14px;border-radius:14px;border:1px solid #e8d5aa;
  background:#fffaf0;color:#2f2c45;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.ma-people button:active{transform:scale(.99)}
.ma-people button.ma-people-exact{font-weight:600;font-size:13.5px;color:#7c6a45;background:#f6efdf;border-style:dashed}
/* 口味:一排看得见的选项,不是下拉(用户 2026-09-22:「这个不要做下拉菜单,直接做成选项放在上面,
   这样看的清楚」)。五种并排在 375px 上每格约 62px,饼面 44px 还看得出压的是哪个字;
   烤到第五天满五格也不换行。选中的那个描金加底,今天送过的在名字下面写一笔。 */
.ma-flavours{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:0 0 12px}
.ma-flavours button{min-width:0;padding:6px 2px 7px;border-radius:14px;border:1.5px solid #e8d9b5;
  background:#fffdf6;color:#6b5b3d;font:inherit;font-size:11px;font-weight:700;line-height:1.25;cursor:pointer}
.ma-flavours img{display:block;width:44px;max-width:100%;height:44px;margin:0 auto 3px;object-fit:contain}
.ma-flavours button.on{border-color:#d9a64a;border-width:2px;padding:5.5px 1.5px 6.5px;
  background:linear-gradient(180deg,#fff6de,#f8e9c4);color:#5a4210;box-shadow:0 2px 8px #b07d2a2e}
.ma-flavours button small{display:block;margin-top:2px;font-size:9.5px;font-weight:600;color:#a0845a}
.ma-flavours button.on small{color:#8a6a22}
@media(max-width:340px){.ma-flavours img{width:36px;height:36px}.ma-flavours button{font-size:10px}}
/* 今天已经送给了谁 —— 窗口里原来一个字都没写,于是「送完红豆再打开还是桂花」。 */
.ma-sent-today{margin:-2px 0 10px;padding:8px 12px;border-radius:12px;background:#f6efdf;
  color:#7c6a45;font-size:12.5px;line-height:1.5}

/* ===== v60.30 中秋贺卡制作(maCard)。窗口是 .ma-dialog 那一套奶油底;这里只排四步的版面。 ===== */
.ma-card-step{margin:12px 0 4px}
.ma-card-step>b{display:block;font-size:14px;color:#6a5424;margin-bottom:6px}
.ma-card-hint{display:block;color:#8a7c62;font-size:11.5px;margin:-2px 0 8px;line-height:1.45}
.ma-card-sents{max-height:30vh}
.ma-dialog .ma-card-sents button{border:1px solid #e8d9b5;border-radius:12px;background:#fffdf6;padding:9px 11px;text-align:left;width:100%}
.ma-dialog .ma-card-sents button b{display:block;font-weight:700;color:#2f2c45;line-height:1.4}
.ma-dialog .ma-card-sents button small{display:block;color:#8a7c62;font-size:11px;margin-top:3px}
.ma-dialog .ma-card-sents button.on{border-color:#dcb65a;background:#fff3cd;box-shadow:inset 0 0 0 1.5px #dcb65a}
.ma-card-chips{display:flex;flex-wrap:wrap;gap:6px}
.ma-card-chips button{border:1px solid #e3cf9f;background:#fffdf6;color:#6a5424;border-radius:99px;padding:6px 11px;font-size:12.5px;font-weight:700}
.ma-card-chips button.on{background:#f2d17b;border-color:#c99a3e;color:#3d2e10}
/* 盒子:圆形花瓣木盒(和贺卡上画的同一个花形),五个圆格绕一圈(位置在 JS 里按 maCardLayout(5) 算好写进 style)。
   口味名不写在格子里 —— 贺卡上是拉到盒子外面的;窗口里下面那排口味按钮就写着名字。 */
.ma-card-box{position:relative;width:min(100%,290px);aspect-ratio:1;margin:4px auto 0;filter:drop-shadow(0 6px 10px #5c341640)}
.ma-card-flower{position:absolute;inset:0;width:100%;height:100%}
.ma-card-box button{position:absolute;aspect-ratio:1;min-width:0;padding:0;border-radius:50%;border:2px solid #5c3416;cursor:pointer;
  background:radial-gradient(circle at 50% 38%,#f6e8c6,#e2c68e 70%,#a8723f 72%);box-shadow:inset 0 6px 8px -3px rgba(92,52,22,.4)}
.ma-card-box button:not(:has(img)){border-style:dashed;background:radial-gradient(circle,#a8723f,#83512a)}
.ma-card-box img{position:absolute;left:-2%;top:-10%;width:104%;height:104%;pointer-events:none}
.ma-card-flavours{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.ma-card-flavours button{flex:1 1 60px;min-width:56px;max-width:84px;border:1px solid #e8d9b5;background:#fffdf6;border-radius:14px;padding:4px 2px 5px}
.ma-card-flavours img{display:block;width:48px;height:48px;margin:auto}
.ma-card-flavours small{display:block;font-size:10.5px;color:#6a5424;font-weight:700;line-height:1.2}
.ma-card-flavours em{display:block;font-style:normal;font-size:10px;color:#9a7223;font-weight:800;margin-top:2px}
.ma-card-flavours button:disabled{opacity:.45;cursor:default}
.ma-card-flavours button:active,.ma-card-box button:active{transform:scale(.95)}
.ma-card-names{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.ma-card-names label{font-size:12px;color:#6a5424;font-weight:800;display:grid;gap:3px}
.ma-card-names input{width:100%;min-width:0;border:1px solid #e3cf9f;border-radius:10px;padding:8px 9px;font-size:15px}
.ma-card-poster{display:block;width:100%;border-radius:16px;box-shadow:0 8px 22px #17234033}

/* v60.30 饼坊卡底部:「去造句」+「做贺卡」并排;只有一个时占满 */
.ma-entry .entry-acts{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:8px}
.ma-entry .entry-acts.two{grid-template-columns:1.6fr 1fr}
.ma-entry .entry-acts .primary{margin:0}
.ma-entry .entry-card-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;border:0;cursor:pointer;
  border-radius:999px;padding:0 10px;min-height:44px;font-size:15px;font-weight:900;line-height:1.1;font-family:inherit;color:#7c5a17;
  background:#fff6e0;box-shadow:inset 0 0 0 1.5px #e3c77e,0 3px 9px #8a5d1622;white-space:nowrap}
.ma-entry .entry-card-btn svg{width:24px;height:24px;flex:none}
.ma-entry .entry-card-btn:active{transform:translateY(1px) scale(.99)}

/* v60.31 贺卡邀请弹窗 */
.ma-invite{text-align:center}
.ma-invite-pics{display:flex;justify-content:center;gap:2px;margin:4px 0 8px}
.ma-invite-pics img{width:62px;height:62px;margin:0 -6px}
.ma-invite-icon svg{width:64px;height:64px;margin:4px auto 6px;display:block}
.ma-invite p{margin:6px 0}
.ma-invite .ma-actions button[data-go]{background:linear-gradient(180deg,#f8de92,#e1ad4b);color:#392b12;border-color:#c99a3e}