/* ===== Aruke 主题变量（默认 = 经典主题，主题 CSS 可覆盖）===== */ :root { --c-primary:#2c3e50; /* 主色（按钮/标题/高亮） */ --c-primary2:#3d5166; /* 次级主色 */ --c-border:#e0d5c5; /* 主边框 */ --c-border2:#e8e0d0; /* 次级边框 */ --c-border3:#e8ddd0; /* 浅边框 */ --c-bg:#f5f0e8; /* 页面背景 */ --c-card-soft:#faf6ee; /* 柔和卡片背景 */ --c-card-soft2:#f8f6f0; /* 柔和卡片背景2 */ --c-text:#333; /* 正文 */ --c-text2:#555; /* 次级正文 */ --c-text3:#888; /* 弱化文字 */ --c-ink:#1a1a2e; /* 深墨文字（单词假名等） */ --c-ink2:#3a4a5a; /* 深墨次级 */ --c-tooltip-bg:#333; /* 提示浮层背景 */ --c-header-grad:linear-gradient(180deg,#1a2a3a 0%,#2c3e50 40%,#3d5166 70%,#5a7a94 100%); --c-title-grad:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 20%, rgba(255,255,255,0) 48%), linear-gradient(168deg, #fffbe6 0%, #fff0b0 9%, #f2cd5e 21%, #c9971f 33%, #8a6a10 44%, #5c4300 52%, #a67c1c 62%, #ecc75c 76%, #fff0b8 89%, #c9971f 100%); --c-title-shadow:0 -1px 0 #fffdf0,0 1px 0 #8a6a10,0 2px 0 #6b4e00,0 3px 0 #4f3a00,0 6px 12px rgba(0,0,0,.55); --c-sub-color:#f2e6c8; --c-sub-shadow:0 1px 3px rgba(0,0,0,.5),0 0 14px rgba(255,220,140,.28); } /* ===== Aruke 品牌：本地手写体字体 ===== */ @font-face { font-family: 'Lobster'; src: url('fonts/Lobster.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } * { margin:0; padding:0; box-sizing:border-box; } body { font-family: "PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif; background:var(--c-bg); background-image: url("data:image/svg+xml,%3Csvg width='56' height='36' viewBox='0 0 56 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c9b896' stroke-width='0.7' opacity='0.2'%3E%3Cpath d='M0 36 Q14 18 28 36 Q42 18 56 36'/%3E%3Cpath d='M0 28 Q14 10 28 28 Q42 10 56 28'/%3E%3Cpath d='M0 20 Q14 2 28 20 Q42 2 56 20'/%3E%3C/g%3E%3C/svg%3E"); background-size:56px 36px; color:var(--c-text); line-height:1.6; } .header { background:var(--c-header-grad); color:#fff; padding:6px 20px 30px 20px; text-align:center; position:relative; overflow:hidden; min-height:140px; } .header::before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20900%20200%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22skyGlow%22%20cx%3D%2272%25%22%20cy%3D%2220%25%22%20r%3D%2270%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%236a8aaa%22%20stop-opacity%3D%220.45%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%231a2a3a%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22fujiBody%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%238da4b8%22%2F%3E%3Cstop%20offset%3D%2235%25%22%20stop-color%3D%22%237a94ac%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%234a6480%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22fujiRight%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%237a94ac%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%235a7a94%22%20stop-opacity%3D%220.2%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%233a5470%22%20stop-opacity%3D%220.55%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22fujiLeft%22%20x1%3D%221%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%220%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%238da4b8%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23b0c4d8%22%20stop-opacity%3D%220.35%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22snowGrad%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23fafcff%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23dce4ee%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22snowShade%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23dce4ee%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23b8c8dc%22%20stop-opacity%3D%220.5%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22lakeGrad%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%233a5068%22%20stop-opacity%3D%220.5%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%232a3a50%22%20stop-opacity%3D%220.2%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22900%22%20height%3D%22200%22%20fill%3D%22url%28%23skyGlow%29%22%2F%3E%3Cg%20opacity%3D%220.08%22%20fill%3D%22%23ffffff%22%3E%3Cellipse%20cx%3D%22680%22%20cy%3D%2295%22%20rx%3D%2280%22%20ry%3D%225%22%2F%3E%3Cellipse%20cx%3D%22760%22%20cy%3D%22108%22%20rx%3D%2250%22%20ry%3D%223.5%22%2F%3E%3Cellipse%20cx%3D%22560%22%20cy%3D%22102%22%20rx%3D%2240%22%20ry%3D%223.5%22%2F%3E%3Cellipse%20cx%3D%22350%22%20cy%3D%2288%22%20rx%3D%2255%22%20ry%3D%224%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M0%2C180%20Q200%2C175%20450%2C178%20Q700%2C181%20900%2C176%20L900%2C200%20L0%2C200%20Z%22%20fill%3D%22url%28%23lakeGrad%29%22%2F%3E%3Cg%20opacity%3D%220.06%22%20transform%3D%22translate%280%2C360%29%20scale%281%2C-1%29%22%3E%3Cpath%20d%3D%22M440%2C180%20L560%2C28%20L680%2C180%20Z%22%20fill%3D%22%238aa4bc%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28440%2C28%29%22%20opacity%3D%220.96%22%3E%3Cpath%20d%3D%22M0%2C152%20Q30%2C100%2060%2C55%20Q90%2C20%20120%2C0%20Q150%2C20%20180%2C55%20Q210%2C100%20240%2C152%20Z%22%20fill%3D%22url%28%23fujiBody%29%22%2F%3E%3Cpath%20d%3D%22M0%2C152%20Q30%2C100%2060%2C55%20Q90%2C20%20120%2C0%20L120%2C152%20Z%22%20fill%3D%22url%28%23fujiLeft%29%22%2F%3E%3Cpath%20d%3D%22M120%2C0%20Q150%2C20%20180%2C55%20Q210%2C100%20240%2C152%20L120%2C152%20Z%22%20fill%3D%22url%28%23fujiRight%29%22%2F%3E%3Cpath%20d%3D%22M120%2C0%20L112%2C18%20L106%2C16%20L98%2C30%20L90%2C26%20L82%2C40%20L74%2C36%20L66%2C48%20L72%2C50%20L80%2C44%20L88%2C52%20L96%2C46%20L104%2C56%20L112%2C50%20L120%2C58%20L128%2C50%20L136%2C56%20L144%2C46%20L152%2C52%20L160%2C44%20L168%2C50%20L174%2C48%20L166%2C36%20L158%2C40%20L150%2C26%20L142%2C30%20L134%2C16%20L128%2C18%20Z%22%20fill%3D%22url%28%23snowGrad%29%22%2F%3E%3Cpath%20d%3D%22M120%2C0%20L128%2C18%20L134%2C16%20L142%2C30%20L150%2C26%20L158%2C40%20L166%2C36%20L174%2C48%20L168%2C50%20L160%2C44%20L152%2C52%20L144%2C46%20L136%2C56%20L128%2C50%20L120%2C58%20Z%22%20fill%3D%22url%28%23snowShade%29%22%20opacity%3D%220.6%22%2F%3E%3Cpath%20d%3D%22M120%2C0%20L116%2C10%20L124%2C10%20Z%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.9%22%2F%3E%3Cg%20stroke%3D%22%235a7a94%22%20stroke-width%3D%220.5%22%20opacity%3D%220.2%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M120%2C0%20Q108%2C40%2096%2C152%22%2F%3E%3Cpath%20d%3D%22M120%2C0%20Q132%2C40%20144%2C152%22%2F%3E%3Cpath%20d%3D%22M120%2C0%20L120%2C152%22%20stroke-width%3D%220.3%22%20opacity%3D%220.15%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23ffffff%22%20stroke-width%3D%220.6%22%20opacity%3D%220.3%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M66%2C48%20Q80%2C42%2096%2C46%20Q108%2C50%20120%2C58%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.3%22%3E%3Cpath%20d%3D%22M380%2C180%20Q440%2C140%20500%2C155%20Q560%2C135%20620%2C155%20Q680%2C140%20740%2C180%20Z%22%20fill%3D%22%233a5470%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%220.18%22%3E%3Cpath%20d%3D%22M600%2C180%20Q640%2C150%20680%2C160%20Q720%2C148%20760%2C180%20Z%22%20fill%3D%22%234a6480%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28-10%2C30%29%22%20opacity%3D%220.88%22%3E%3Cpath%20d%3D%22M50%2C175%20Q52%2C140%2058%2C115%20Q62%2C95%2068%2C80%20Q64%2C70%2070%2C55%20Q76%2C40%2085%2C28%20Q80%2C38%2088%2C42%20Q98%2C30%20108%2C38%20Q100%2C46%20102%2C58%20Q112%2C52%20118%2C64%20Q110%2C68%20106%2C80%20Q116%2C88%20112%2C102%20Q100%2C112%2092%2C128%20Q82%2C145%2072%2C175%20Z%22%20fill%3D%22%231a0e18%22%20opacity%3D%220.75%22%2F%3E%3Cpath%20d%3D%22M70%2C55%20Q90%2C48%20115%2C52%20Q135%2C55%20155%2C65%20Q145%2C58%20125%2C55%20Q100%2C50%2078%2C58%20Z%22%20fill%3D%22%231a0e18%22%20opacity%3D%220.6%22%2F%3E%3Cpath%20d%3D%22M85%2C28%20Q100%2C18%20120%2C15%20Q130%2C14%20138%2C18%20Q128%2C16%20115%2C20%20Q100%2C24%2090%2C32%20Z%22%20fill%3D%22%231a0e18%22%20opacity%3D%220.55%22%2F%3E%3Cpath%20d%3D%22M58%2C115%20Q40%2C108%2025%2C100%20Q15%2C95%2010%2C88%20Q22%2C92%2035%2C98%20Q48%2C104%2056%2C112%20Z%22%20fill%3D%22%231a0e18%22%20opacity%3D%220.5%22%2F%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%2222%22%20r%3D%2226%22%20fill%3D%22%23ff8fab%22%20opacity%3D%220.32%22%2F%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%2230%22%20r%3D%2222%22%20fill%3D%22%23ffa5c0%22%20opacity%3D%220.28%22%2F%3E%3Ccircle%20cx%3D%2268%22%20cy%3D%2248%22%20r%3D%2220%22%20fill%3D%22%23ffb3c8%22%20opacity%3D%220.28%22%2F%3E%3Ccircle%20cx%3D%22125%22%20cy%3D%2242%22%20r%3D%2218%22%20fill%3D%22%23ffc0d2%22%20opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2252%22%20r%3D%2224%22%20fill%3D%22%23ff9dba%22%20opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%2262%22%20r%3D%2216%22%20fill%3D%22%23ffc0d2%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%22118%22%20cy%3D%2262%22%20r%3D%2217%22%20fill%3D%22%23ffb3c8%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2272%22%20r%3D%2218%22%20fill%3D%22%23ff9dba%22%20opacity%3D%220.2%22%2F%3E%3Ccircle%20cx%3D%22140%22%20cy%3D%2258%22%20r%3D%2214%22%20fill%3D%22%23ffc8d8%22%20opacity%3D%220.2%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2292%22%20r%3D%2213%22%20fill%3D%22%23ffc0d2%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%22135%22%20cy%3D%2222%22%20r%3D%2212%22%20fill%3D%22%23ffd0de%22%20opacity%3D%220.2%22%2F%3E%3Cg%20fill%3D%22%23ffd4e0%22%20opacity%3D%220.55%22%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2216%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%2286%22%20cy%3D%2214%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2214%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2220%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffc8d8%22%20opacity%3D%220.5%22%3E%3Ccircle%20cx%3D%22108%22%20cy%3D%2224%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%2222%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%22105%22%20cy%3D%2222%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%2228%22%20r%3D%222.5%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffdce6%22%20opacity%3D%220.45%22%3E%3Ccircle%20cx%3D%2262%22%20cy%3D%2242%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2266%22%20cy%3D%2240%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2238%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffc8d8%22%20opacity%3D%220.45%22%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%2236%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%22134%22%20cy%3D%2234%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%2232%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffb8cc%22%20opacity%3D%220.6%22%3E%3Cellipse%20cx%3D%22170%22%20cy%3D%2250%22%20rx%3D%223.5%22%20ry%3D%222%22%20transform%3D%22rotate%2830%20170%2050%29%22%2F%3E%3Cellipse%20cx%3D%22210%22%20cy%3D%2275%22%20rx%3D%223%22%20ry%3D%221.8%22%20transform%3D%22rotate%28-20%20210%2075%29%22%2F%3E%3Cellipse%20cx%3D%22250%22%20cy%3D%2245%22%20rx%3D%223.5%22%20ry%3D%222%22%20transform%3D%22rotate%2845%20250%2045%29%22%2F%3E%3Cellipse%20cx%3D%22290%22%20cy%3D%2290%22%20rx%3D%223%22%20ry%3D%221.8%22%20transform%3D%22rotate%2810%20290%2090%29%22%2F%3E%3Cellipse%20cx%3D%22330%22%20cy%3D%2255%22%20rx%3D%223.5%22%20ry%3D%222%22%20transform%3D%22rotate%28-35%20330%2055%29%22%2F%3E%3Cellipse%20cx%3D%22370%22%20cy%3D%22100%22%20rx%3D%223%22%20ry%3D%221.8%22%20transform%3D%22rotate%2825%20370%20100%29%22%2F%3E%3Cellipse%20cx%3D%22410%22%20cy%3D%2265%22%20rx%3D%223.5%22%20ry%3D%222%22%20transform%3D%22rotate%28-15%20410%2065%29%22%2F%3E%3Cellipse%20cx%3D%22450%22%20cy%3D%22110%22%20rx%3D%223%22%20ry%3D%221.8%22%20transform%3D%22rotate%2840%20450%20110%29%22%2F%3E%3Cellipse%20cx%3D%22490%22%20cy%3D%2275%22%20rx%3D%223.5%22%20ry%3D%222%22%20transform%3D%22rotate%28-30%20490%2075%29%22%2F%3E%3Cellipse%20cx%3D%22530%22%20cy%3D%22120%22%20rx%3D%223%22%20ry%3D%221.8%22%20transform%3D%22rotate%2820%20530%20120%29%22%2F%3E%3Cellipse%20cx%3D%22570%22%20cy%3D%2285%22%20rx%3D%223.5%22%20ry%3D%222%22%20transform%3D%22rotate%28-40%20570%2085%29%22%2F%3E%3Cellipse%20cx%3D%22610%22%20cy%3D%22130%22%20rx%3D%223%22%20ry%3D%221.8%22%20transform%3D%22rotate%2815%20610%20130%29%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffd0e0%22%20opacity%3D%220.45%22%3E%3Cellipse%20cx%3D%22195%22%20cy%3D%22110%22%20rx%3D%222.5%22%20ry%3D%221.5%22%20transform%3D%22rotate%28-25%20195%20110%29%22%2F%3E%3Cellipse%20cx%3D%22270%22%20cy%3D%2230%22%20rx%3D%222.5%22%20ry%3D%221.5%22%20transform%3D%22rotate%2835%20270%2030%29%22%2F%3E%3Cellipse%20cx%3D%22350%22%20cy%3D%22125%22%20rx%3D%222.5%22%20ry%3D%221.5%22%20transform%3D%22rotate%28-10%20350%20125%29%22%2F%3E%3Cellipse%20cx%3D%22430%22%20cy%3D%2240%22%20rx%3D%222.5%22%20ry%3D%221.5%22%20transform%3D%22rotate%2850%20430%2040%29%22%2F%3E%3Cellipse%20cx%3D%22510%22%20cy%3D%22140%22%20rx%3D%222.5%22%20ry%3D%221.5%22%20transform%3D%22rotate%28-20%20510%20140%29%22%2F%3E%3Cellipse%20cx%3D%22590%22%20cy%3D%2250%22%20rx%3D%222.5%22%20ry%3D%221.5%22%20transform%3D%22rotate%2830%20590%2050%29%22%2F%3E%3Cellipse%20cx%3D%22650%22%20cy%3D%22145%22%20rx%3D%222.5%22%20ry%3D%221.5%22%20transform%3D%22rotate%28-15%20650%20145%29%22%2F%3E%3Cellipse%20cx%3D%22230%22%20cy%3D%22140%22%20rx%3D%222%22%20ry%3D%221.2%22%20transform%3D%22rotate%2820%20230%20140%29%22%2F%3E%3Cellipse%20cx%3D%22390%22%20cy%3D%2225%22%20rx%3D%222%22%20ry%3D%221.2%22%20transform%3D%22rotate%28-30%20390%2025%29%22%2F%3E%3Cellipse%20cx%3D%22550%22%20cy%3D%2235%22%20rx%3D%222%22%20ry%3D%221.2%22%20transform%3D%22rotate%2825%20550%2035%29%22%2F%3E%3Cellipse%20cx%3D%22680%22%20cy%3D%2295%22%20rx%3D%222%22%20ry%3D%221.2%22%20transform%3D%22rotate%28-35%20680%2095%29%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23ffc0d2%22%20opacity%3D%220.35%22%3E%3Cellipse%20cx%3D%22155%22%20cy%3D%22130%22%20rx%3D%222%22%20ry%3D%221.2%22%20transform%3D%22rotate%2815%20155%20130%29%22%2F%3E%3Cellipse%20cx%3D%22310%22%20cy%3D%22150%22%20rx%3D%222%22%20ry%3D%221.2%22%20transform%3D%22rotate%28-25%20310%20150%29%22%2F%3E%3Cellipse%20cx%3D%22470%22%20cy%3D%22155%22%20rx%3D%222%22%20ry%3D%221.2%22%20transform%3D%22rotate%2835%20470%20155%29%22%2F%3E%3Cellipse%20cx%3D%22630%22%20cy%3D%22160%22%20rx%3D%222%22%20ry%3D%221.2%22%20transform%3D%22rotate%28-10%20630%20160%29%22%2F%3E%3Cellipse%20cx%3D%22700%22%20cy%3D%22110%22%20rx%3D%222%22%20ry%3D%221.2%22%20transform%3D%22rotate%2840%20700%20110%29%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M0%2C200%20Q100%2C185%20200%2C190%20Q350%2C195%20500%2C188%20Q650%2C182%20800%2C190%20Q850%2C192%20900%2C188%20L900%2C200%20Z%22%20fill%3D%22%23141e2a%22%20opacity%3D%220.5%22%2F%3E%3C%2Fsvg%3E"); background-size:cover; background-position:center bottom; pointer-events:none; opacity:1; } .header h1, .header p { position:relative; z-index:1; } .header h1 { font-size:28px; margin-bottom:8px; text-shadow:0 2px 8px rgba(0,0,0,0.2); } .header p { font-size:14px; opacity:0.85; } /* ===== Aruke 品牌：手写金属立体字 ===== */ .header h1.aruke-title { font-family:'Lobster','Segoe Script','Brush Script MT',cursive; font-size:88px; font-weight:400; letter-spacing:6px; margin-top:0px; margin-bottom:0px; background-image:var(--c-title-grad); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:var(--c-title-shadow); } .header h1.aruke-title::first-letter { font-size:1.32em; } .header p.aruke-sub { font-size:14px; letter-spacing:1px; color:var(--c-sub-color); opacity:1; margin-top:-32px; text-shadow:var(--c-sub-shadow); } .level-tabs { display:flex; flex-wrap:nowrap; justify-content:center; gap:10px; padding:15px 20px; background:#fff; border-bottom:1px solid var(--c-border); } .level-tabs button { padding:8px 18px; font-size:14px; min-width:48px; border:1.5px solid var(--c-border); background:#fff; border-radius:20px; cursor:pointer; font-size:15px; font-weight:600; color:var(--c-text2); transition:all .25s; white-space:nowrap; flex-shrink:0; } .level-tabs button:hover { background:var(--c-primary); color:#fff; border-color:var(--c-primary); } .level-tabs button.active { background:var(--c-primary); color:#fff; border-color:var(--c-primary); } .stats-bar { background:#fff; padding:10px 20px; display:flex; justify-content:center; gap:30px; border-bottom:1px solid var(--c-border); font-size:14px; } .stats-bar span { color:var(--c-primary); font-weight:600; } .search-box { max-width:600px; margin:15px auto; padding:0 20px; } .search-box input { width:100%; padding:14px 20px; border:2px solid var(--c-border); border-radius:25px; font-size:15px; outline:none; transition:all .3s; box-shadow:0 2px 8px rgba(0,0,0,0.04); } .search-box input:focus { border-color:var(--c-primary); box-shadow:0 4px 14px rgba(44,62,80,0.12); } .nav-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:10px 20px; background:#fff; border-bottom:1px solid var(--c-border); position:sticky; top:0; z-index:100; } .nav-tabs button { padding:7px 16px; border:1px solid var(--c-border); background:#fff; border-radius:16px; cursor:pointer; font-size:13px; color:var(--c-text2); transition:all .25s; } .nav-tabs button:hover { background:var(--c-primary); color:#fff; border-color:var(--c-primary); } .nav-tabs button.active { background:var(--c-primary); color:#fff; border-color:var(--c-primary); font-weight:600; } .container { max-width:900px; margin:0 auto; padding:20px; position:relative; z-index:1; } .row-section { display:none; } .row-section.active { display:block; } .palace-card { background:#fff; border-radius:14px; margin-bottom:16px; box-shadow:0 4px 16px rgba(0,0,0,0.08); overflow:hidden; border:1px solid var(--c-border2); transition:box-shadow .25s,transform .25s; } .palace-header { padding:18px 22px; cursor:pointer; display:flex; align-items:center; gap:14px; background:linear-gradient(90deg,var(--c-card-soft2),#fff); } .palace-kana { font-size:32px; font-weight:700; color:var(--c-primary); min-width:45px; text-align:center; } .palace-info { flex:1; } .palace-title { font-size:16px; font-weight:600; color:var(--c-primary); } .palace-romaji { font-size:12px; color:var(--c-text3); margin-top:2px; } .palace-count { font-size:12px; background:#e8f0f8; color:var(--c-primary); padding:4px 12px; border-radius:10px; font-weight:600; } .palace-toggle { font-size:12px; color:var(--c-text3); transition:transform .3s; } .palace-card:hover { box-shadow:0 6px 24px rgba(44,62,80,0.12); transform:translateY(-2px); } .palace-card.open .palace-toggle { transform:rotate(180deg); } .palace-body { display:none; padding:0 20px 20px; } .palace-card.open .palace-body { display:block; } .palace-desc { font-size:13px; color:var(--c-text2); padding:14px 18px; background:linear-gradient(135deg,var(--c-card-soft2),var(--c-bg)); border-radius:10px; margin-bottom:16px; line-height:1.8; border-left:3px solid var(--c-primary); } .hook-block { margin-bottom:20px; background:#fdfbf7; border-radius:12px; padding:16px; border:1px solid var(--c-border2); transition:box-shadow .2s; } .hook-title { font-size:15px; font-weight:700; color:var(--c-primary); padding:8px 0 10px; border-bottom:2px solid var(--c-border); margin-bottom:12px; display:flex; align-items:center; gap:8px; } .hook-title::before { content:'🧠'; font-size:16px; } .hook-story { font-size:13px; color:var(--c-ink2); margin-bottom:12px; padding:12px 16px; background:linear-gradient(135deg,#eef2f7,#f5f8fc); border-radius:10px; border-left:3px solid var(--c-primary2); line-height:1.8; font-style:normal; } .hook-story::before { content:'💡 记忆场景：'; font-weight:700; color:var(--c-primary); margin-right:4px; } .hook-keywords { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; } .hook-keyword { font-size:11px; padding:4px 12px; background:#e8f0f8; color:var(--c-primary); border-radius:12px; font-weight:600; } .word-chain { display:flex; flex-wrap:wrap; gap:8px; } .word-item { background:var(--c-card-soft); border:1px solid var(--c-border3); border-radius:8px; padding:10px 12px; font-size:13px; min-width:160px; cursor:pointer; transition:all .2s; position:relative; } .word-item:hover { background:#f0f4f8; border-color:var(--c-primary2); transform:translateY(-2px); box-shadow:0 4px 12px rgba(44,62,80,0.12); } .word-item.expanded { background:#eef2f7; border-color:var(--c-primary); box-shadow:0 4px 14px rgba(44,62,80,0.15); } .word-index { position:absolute; top:4px; right:8px; font-size:10px; color:#bbb; font-weight:700; } .word-mnemonic { display:none; font-size:11px; color:var(--c-ink2); margin-top:8px; padding:8px 10px; background:#eef2f7; border-radius:6px; border-left:2px solid var(--c-primary2); line-height:1.6; } .word-mnemonic::before { content:'💡 '; } .word-item.expanded .word-mnemonic { display:block; } .word-kana { font-size:15px; font-weight:700; color:var(--c-ink); display:inline-block; padding:1px 6px; border-radius:3px; margin-bottom:4px; line-height:1.5; } .word-kanji { font-size:14px; color:var(--c-primary); font-weight:600; text-decoration:underline; text-decoration-color:var(--c-primary2); text-decoration-thickness:2px; text-underline-offset:3px; display:inline-block; margin-left:6px; } .word-meaning { font-size:12px; color:var(--c-text2); display:block; margin-top:3px; } .hl-a { background:linear-gradient(180deg,transparent 45%,#fff176 45%,#fff176 92%,transparent 92%); } .hl-ka { background:linear-gradient(180deg,transparent 45%,#ffcc80 45%,#ffcc80 92%,transparent 92%); } .hl-sa { background:linear-gradient(180deg,transparent 45%,#a5d6a7 45%,#a5d6a7 92%,transparent 92%); } .hl-ta { background:linear-gradient(180deg,transparent 45%,#80deea 45%,#80deea 92%,transparent 92%); } .hl-na { background:linear-gradient(180deg,transparent 45%,#f48fb1 45%,#f48fb1 92%,transparent 92%); } .hl-ha { background:linear-gradient(180deg,transparent 45%,#ce93d8 45%,#ce93d8 92%,transparent 92%); } .hl-ma { background:linear-gradient(180deg,transparent 45%,#90caf9 45%,#90caf9 92%,transparent 92%); } .hl-ya { background:linear-gradient(180deg,transparent 45%,#ffab91 45%,#ffab91 92%,transparent 92%); } .hl-ra { background:linear-gradient(180deg,transparent 45%,#bcaaa4 45%,#bcaaa4 92%,transparent 92%); } .hl-wa { background:linear-gradient(180deg,transparent 45%,#dcedc8 45%,#dcedc8 92%,transparent 92%); } .word-pos { display:inline-block; font-size:10px; padding:1px 6px; border-radius:8px; margin-top:4px; } .word-example { display:none; font-size:12px; color:var(--c-text2); margin-top:8px; padding:8px 10px; background:var(--c-bg); border-radius:6px; border-left:3px solid var(--c-primary); line-height:1.6; } .word-item.expanded .word-example { display:block; } .pos-mei { background:#e3f2fd; color:#1565c0; } .pos-kei1 { background:#fce4ec; color:#c62828; } .pos-kei2 { background:#f3e5f5; color:#6a1b9a; } .pos-jidou,.pos-tadou { background:#e8f5e9; color:#2e7d32; } .pos-fukushi { background:#fff3e0; color:#e65100; } .pos-joshi { background:#efebe9; color:#4e342e; } .pos-kandou { background:#fce4ec; color:#ad1457; } .pos-setsuzoku { background:#e0f7fa; color:#006064; } .pos-rentai { background:#f1f8e9; color:#33691e; } .no-result { text-align:center; padding:40px; color:var(--c-text3); font-size:15px; } .footer { text-align:center; padding:30px 20px; color:var(--c-text3); font-size:12px; } .footer-buttons { margin-top:12px; } .footer-btn { display:inline-block; padding:6px 16px; margin:0 6px; font-size:12px; font-family:inherit; font-weight:normal; line-height:1.4; color:var(--c-text3); background:#f5f5f5; border:1px solid #ddd; border-radius:4px; cursor:pointer; text-decoration:none; transition:all .2s; box-sizing:border-box; vertical-align:middle; } .footer-btn:hover { background:#e8e8e8; color:var(--c-text2); border-color:#ccc; } ::-webkit-scrollbar { width:8px; } ::-webkit-scrollbar-track { background:var(--c-bg); } ::-webkit-scrollbar-thumb { background:var(--c-primary2); border-radius:4px; } ::-webkit-scrollbar-thumb:hover { background:var(--c-primary); } .header-petals { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; overflow:hidden; z-index:1; } .petal { position:absolute; width:12px; height:12px; background:radial-gradient(ellipse at 30% 30%,#ffe0e8 0%,#ffb3c6 50%,#ff9eb5 80%,transparent 100%); border-radius:50% 0 50% 50%; opacity:0; box-shadow:0 0 3px rgba(255,180,200,0.3); animation:petalFall linear infinite; } @keyframes petalFall { 0% { opacity:0; transform:translate(0,-10px) rotate(0deg) scale(1); } 8% { opacity:0.8; } 25% { transform:translate(120px,40px) rotate(180deg) scale(0.9); } 50% { transform:translate(250px,80px) rotate(360deg) scale(1); } 75% { transform:translate(380px,120px) rotate(540deg) scale(0.85); } 92% { opacity:0.4; } 100% { opacity:0; transform:translate(520px,170px) rotate(720deg) scale(0.7); } } /* ===== 测试按钮 ===== */ .test-btn { margin-top:12px; padding:8px 28px; background:rgba(255,255,255,0.15); border:2px solid rgba(255,255,255,0.5); color:#fff; border-radius:22px; font-size:15px; font-weight:600; cursor:pointer; transition:all .3s; position:relative; z-index:2; font-family:inherit; } .test-btn:hover { background:rgba(255,255,255,0.28); border-color:#fff; transform:translateY(-1px); } /* ===== 搜索结果级别标签 ===== */ .level-tag { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px; margin-left:8px; vertical-align:middle; } .level-tag.n3 { background:#e3f2fd; color:#1565c0; } .level-tag.n4 { background:#fff3e0; color:#e65100; } .level-tag.n5 { background:#e8f5e9; color:#2e7d32; } /* ===== 12板块导航 ===== */ .module-tabs { margin:16px 0; padding:0 16px; } .module-row { display:flex; gap:8px; margin-bottom:8px; justify-content:center; flex-wrap:wrap; } .module-btn { flex:1 1 140px; max-width:180px; min-width:100px; padding:14px 8px; font-size:14px; font-weight:600; border:1.5px solid var(--c-border); background:#fff; color:var(--c-text2); border-radius:10px; cursor:pointer; transition:all 0.25s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 2px 6px rgba(0,0,0,0.04); } .module-btn:hover { border-color:var(--c-primary); color:var(--c-primary); background:var(--c-card-soft2); transform:translateY(-2px); box-shadow:0 4px 12px rgba(44,62,80,0.12); } .module-btn.active { background:linear-gradient(135deg,var(--c-primary),var(--c-primary2)); color:#fff; border-color:var(--c-primary); box-shadow:0 4px 14px rgba(44,62,80,0.25); } .module-content { padding:0 16px 20px; } /* ===== 二级菜单（查词汇 / 查语法）===== */ .module-submenu { display:none; gap:8px; justify-content:center; flex-wrap:wrap; padding:6px 16px 10px; } .submenu-label { font-size:13px; color:#8a8172; align-self:center; margin-right:4px; white-space:nowrap; } .submenu-btn { padding:8px 20px; font-size:13px; font-weight:600; border:1.5px solid var(--c-border); border-radius:18px; background:#fff; color:var(--c-primary); cursor:pointer; transition:all 0.25s; } .submenu-btn:hover { background:var(--c-primary); color:#fff; border-color:var(--c-primary); transform:translateY(-1px); box-shadow:0 3px 10px rgba(44,62,80,0.2); } @media (max-width: 600px) { .submenu-btn { padding:7px 16px; font-size:13px; flex:1 1 auto; max-width:64px; } } /* 电脑端大屏优化 */ @media (min-width: 1024px) { .module-btn { flex:1 1 180px; max-width:200px; font-size:22px; padding:18px 10px; border-radius:12px; border-width:2px; } .module-tabs { max-width:1300px; margin:20px auto; } .module-row { gap:10px; margin-bottom:10px; } } /* 手机端优化 */ @media (max-width: 768px) { .module-tabs { padding:0 8px; margin:12px 0; } .module-row { gap:6px; margin-bottom:6px; } .module-btn { flex:1 1 calc(33.333% - 6px); max-width:none; min-width:0; font-size:12px; padding:10px 4px; } .module-content { padding:0 8px 16px; } } @media (max-width: 480px) { .module-btn { font-size:11px; padding:8px 2px; } } /* ===== 五十音图 ===== */ .gojuon-container { max-width:800px; margin:0 auto; } .gojuon-title { text-align:center; font-size:24px; color:var(--c-primary); margin:20px 0; } .gojuon-section { margin-bottom:24px; background:#fff; border-radius:14px; padding:20px; box-shadow:0 4px 16px rgba(0,0,0,0.08); overflow-x:auto; -webkit-overflow-scrolling:touch; } .gojuon-section h3 { font-size:16px; color:var(--c-primary); margin-bottom:12px; padding-bottom:8px; border-bottom:2px solid var(--c-border2); } .gojuon-table { width:100%; border-collapse:separate; border-spacing:3px; text-align:center; table-layout:fixed; } .gojuon-table th { background:var(--c-primary); color:#fff; padding:10px 2px; font-size:14px; font-weight:600; border-radius:6px; } .gojuon-table td { padding:14px 4px; font-size:28px; border:2px solid #d4c5a9; border-radius:8px; background:linear-gradient(135deg,#fffef5,#f5f0e0); font-family:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif; font-weight:600; color:var(--c-ink); text-shadow:1px 1px 2px rgba(0,0,0,0.1); cursor:pointer; transition:all 0.2s; } .gojuon-table td:hover { background:linear-gradient(135deg,#e8f0f8,#d4e4f4); transform:scale(1.06); box-shadow:0 4px 14px rgba(44,62,80,0.2); } .gojuon-table td.empty { font-size:16px; color:#bbb; background:#f9f6f0; cursor:default; border:1px solid var(--c-border2); } .gojuon-table td.empty:hover { background:#f9f6f0; transform:none; box-shadow:none; } .gojuon-table td.soundable { cursor:pointer; position:relative; } .gojuon-table td.soundable::after { content:'♪'; position:absolute; right:4px; bottom:1px; font-size:11px; color:#e67e22; opacity:.85; pointer-events:none; } .gojuon-table td.soundable:active { transform:scale(.93); } .gojuon-table .row-label { background:var(--c-primary2); color:#fff; font-weight:600; font-size:13px; padding:8px 2px; font-family:sans-serif; text-shadow:none; border:none; border-radius:6px; width:52px; } .gojuon-table .row-label:hover { background:var(--c-primary2); transform:none; box-shadow:none; } .kana-romaji { display:block; font-size:11px; color:var(--c-text3); font-family:sans-serif; font-weight:400; text-shadow:none; margin-bottom:2px; letter-spacing:0.5px; } @media (max-width: 768px) { .kana-romaji { font-size:9px; margin-bottom:1px; } } @media (max-width: 480px) { .kana-romaji { font-size:8px; } } /* 片假名表格默认隐藏 */ .gojuon-katakana { display:none; } .gojuon-toggle { text-align:center; margin-bottom:16px; } .gojuon-toggle button { padding:8px 20px; border:2px solid var(--c-primary); border-radius:8px; background:#fff; color:var(--c-primary); font-size:14px; cursor:pointer; transition:all 0.2s; } .gojuon-toggle button:hover { background:var(--c-primary); color:#fff; } .gojuon-toggle button.active { background:var(--c-primary); color:#fff; } /* 五十音图手机端响应式 */ @media (max-width: 768px) { .gojuon-container { max-width:100%; } .gojuon-section { padding:10px; margin-bottom:16px; } .gojuon-table { border-spacing:2px; } .gojuon-table th { padding:8px 1px; font-size:12px; } .gojuon-table td { padding:10px 2px; font-size:22px; border-width:1.5px; } .gojuon-table td.empty { font-size:13px; } .gojuon-table .row-label { width:42px; font-size:11px; padding:6px 1px; } .gojuon-title { font-size:20px; margin:14px 0; } } @media (max-width: 480px) { .gojuon-table td { padding:8px 1px; font-size:19px; } .gojuon-table th { font-size:11px; padding:6px 1px; } .gojuon-table .row-label { width:36px; font-size:10px; } .gojuon-section { padding:8px; } } /* ===== 练真题 ===== */ .exam-container { max-width:800px; margin:0 auto; } .module-title { text-align:center; font-size:22px; color:var(--c-primary); margin:20px 0; } .exam-level-btn { width:140px; height:100px; font-size:24px; font-weight:700; background:linear-gradient(135deg,var(--c-primary),var(--c-primary2)); color:#fff; border:none; border-radius:12px; cursor:pointer; transition:transform 0.2s,box-shadow 0.2s; } .exam-level-btn:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(44,62,80,0.3); } .exam-back-btn { padding:6px 14px; background:#f5f5f5; color:#666; border:1px solid #ddd; border-radius:6px; cursor:pointer; font-size:13px; } .exam-back-btn:hover { background:#e8e8e8; } .exam-type-btn { background:#fff; border:1.5px solid var(--c-border2); border-radius:12px; padding:16px; cursor:pointer; text-align:left; transition:all 0.25s; } .exam-type-btn:hover { border-color:var(--c-primary); background:var(--c-card-soft2); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.08); } .exam-start-btn { padding:14px 48px; font-size:16px; font-weight:600; background:linear-gradient(135deg,var(--c-primary),var(--c-primary2)); color:#fff; border:none; border-radius:10px; cursor:pointer; transition:all .25s; box-shadow:0 4px 12px rgba(44,62,80,0.2); } .exam-start-btn:hover { opacity:0.92; transform:translateY(-2px); box-shadow:0 6px 18px rgba(44,62,80,0.3); } .exam-quiz-list { margin-top:16px; } .exam-quiz-item { background:#fff; border:1px solid var(--c-border2); border-radius:12px; padding:18px; margin-bottom:16px; box-shadow:0 2px 8px rgba(0,0,0,0.04); } .exam-quiz-num { font-size:13px; font-weight:600; color:var(--c-text3); margin-bottom:8px; } .exam-quiz-stem { font-size:16px; color:var(--c-ink); margin-bottom:12px; line-height:1.6; } .exam-quiz-options { display:flex; flex-direction:column; gap:8px; } .exam-opt { display:flex; align-items:center; gap:10px; padding:10px 14px; border:2px solid var(--c-border3); border-radius:8px; cursor:pointer; transition:all 0.15s; } .exam-opt:hover { border-color:#c9a96e; background:var(--c-card-soft); } .exam-opt.selected { border-color:var(--c-primary); background:#eef2f7; } .exam-opt-label { width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:#f5f5f5; border-radius:50%; font-size:12px; font-weight:700; color:#666; flex-shrink:0; } .exam-opt.selected .exam-opt-label { background:var(--c-primary); color:#fff; } .exam-opt-text { flex:1; font-size:14px; color:var(--c-text); } .exam-opt-correct { border-color:#2e7d32 !important; background:#e8f5e9 !important; } .exam-opt-correct .exam-opt-label { background:#2e7d32; color:#fff; } .exam-opt-wrong { border-color:#c62828 !important; background:#ffebee !important; } .exam-opt-wrong .exam-opt-label { background:#c62828; color:#fff; } .exam-submit-btn { padding:12px 48px; font-size:16px; font-weight:600; background:linear-gradient(135deg,var(--c-primary),var(--c-primary2)); color:#fff; border:none; border-radius:8px; cursor:pointer; } .exam-submit-btn:hover { opacity:0.9; } .exam-result-header { text-align:center; padding:24px; border-radius:12px; margin-bottom:20px; } .exam-result-pass { background:#e8f5e9; border:2px solid #2e7d32; } .exam-result-fail { background:#ffebee; border:2px solid #c62828; } .exam-score-big { font-size:48px; font-weight:700; line-height:1.2; } .exam-score-pass .exam-score-big { color:#2e7d32; } .exam-score-fail .exam-score-big { color:#c62828; } .exam-result-correct { color:#2e7d32; font-size:13px; } .exam-result-wrong { color:#c62828; font-size:13px; } .exam-result-source { font-size:12px; color:var(--c-text3); margin-top:10px; padding-top:8px; border-top:1px dashed var(--c-border3); } .exam-result-analysis { font-size:13px; color:var(--c-text2); margin-top:8px; line-height:1.7; background:#f9f6ee; padding:10px 12px; border-radius:6px; } /* ===== 语法模块 ===== */ .grammar-container { max-width:900px; margin:0 auto; } .grammar-search-box { margin:16px 0; display:flex; align-items:center; flex-wrap:wrap; } .grammar-search-box input { flex:1; min-width:200px; padding:10px 14px; border:2px solid #d0c8b8; border-radius:8px; font-size:14px; background:#fff; } .grammar-search-box input:focus { outline:none; border-color:var(--c-primary); } .grammar-list { background:#fff; border-radius:12px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,0.08); } .grammar-item { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--c-border2); } .grammar-item:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; } .grammar-title { font-size:18px; font-weight:700; color:var(--c-primary); margin-bottom:12px; display:flex; align-items:center; gap:8px; } .grammar-num { color:var(--c-text3); font-size:14px; min-width:36px; } .grammar-title-text { flex:1; } .grammar-fav-btn { cursor:pointer; font-size:20px; user-select:none; transition:transform 0.2s; } .grammar-fav-btn:hover { transform:scale(1.2); } .grammar-field { margin-bottom:10px; line-height:1.8; } .grammar-field-label { font-weight:600; color:var(--c-primary); margin-right:6px; } .grammar-field-content { color:var(--c-text); } .grammar-connect { font-size:14px; color:var(--c-text2); margin-bottom:8px; } .grammar-field-content .pos-tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:12px; font-weight:600; margin-right:4px; cursor:pointer; } .grammar-field-content .pos-noun { background:#e3f2fd; color:#1565c0; } .grammar-field-content .pos-verb { background:#e8f5e9; color:#2e7d32; } .grammar-field-content .pos-adj { background:#fff3e0; color:#e65100; } .grammar-field-content .pos-naadj { background:#f3e5f5; color:#6a1b9a; } .grammar-field-content .pos-adv { background:#fce4ec; color:#c2185b; } .grammar-meaning { font-size:14px; color:var(--c-text); margin-bottom:8px; } .grammar-example { font-size:13px; color:var(--c-text2); background:var(--c-card-soft); padding:10px; border-radius:6px; margin-bottom:6px; border-left:3px solid var(--c-primary); } .grammar-example .jp { color:var(--c-primary); font-weight:500; } .grammar-example .cn { color:#666; margin-top:4px; } .grammar-note { font-size:12px; color:#c62828; background:#ffebee; padding:8px; border-radius:4px; margin-top:8px; } .grammar-pos-tooltip { display:none; position:absolute; background:var(--c-tooltip-bg); color:#fff; padding:8px 12px; border-radius:6px; font-size:12px; max-width:300px; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,0.3); } .grammar-pos-tooltip.show { display:block; } /* 手机端语法优化 */ @media (max-width: 768px) { .grammar-list { padding:12px; } .grammar-title { font-size:16px; } .grammar-search-box input { font-size:13px; padding:8px 10px; } } /* ===== 测试遮罩 ===== */ .test-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(20,26,38,0.92); z-index:10000; overflow-y:auto; } .test-overlay.active { display:flex; align-items:flex-start; justify-content:center; padding:30px 16px; } .test-panel { background:var(--c-card-soft); border-radius:16px; max-width:560px; width:100%; padding:32px 28px; box-shadow:0 8px 40px rgba(0,0,0,0.4); position:relative; margin:auto; } .test-close { position:absolute; top:12px; right:16px; background:none; border:none; font-size:24px; color:var(--c-text3); cursor:pointer; line-height:1; padding:4px 8px; } .test-close:hover { color:var(--c-text); } .test-title { text-align:center; font-size:22px; font-weight:700; color:var(--c-primary); margin-bottom:6px; } .test-subtitle { text-align:center; font-size:13px; color:var(--c-text3); margin-bottom:24px; } .diff-btn { display:block; width:100%; padding:16px; margin-bottom:14px; border:2px solid #d4c5a9; border-radius:12px; background:#fff; font-size:18px; font-weight:700; cursor:pointer; transition:all .2s; font-family:inherit; position:relative; } .g-bonus-tag { position:absolute; top:-8px; right:-6px; display:none; background:linear-gradient(135deg,#ffd700,#ff9800); color:#5d3a00; font-size:12px; font-weight:800; padding:3px 8px; border-radius:10px; box-shadow:0 2px 8px rgba(255,152,0,.5); border:1.5px solid #fff; z-index:2; letter-spacing:.5px; } .g-bonus-tag.show { display:inline-block; animation:gBonusPulse 1.6s ease-in-out infinite; } @keyframes gBonusPulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } } .diff-btn:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.12); } .diff-btn strong { display:block; font-size:15px; font-weight:400; color:var(--c-text3); margin-top:4px; } .diff-btn.strong { color:#c62828; border-color:#ef9a9a; } .diff-btn.strong:hover { background:#ffebee; } .diff-btn.master { color:#6a1b9a; border-color:#ce93d8; } .diff-btn.master:hover { background:#f3e5f5; } .diff-btn.weak { color:#e65100; border-color:#ffcc80; } .diff-btn.weak:hover { background:#fff3e0; } .diff-btn.noob { color:#2e7d32; border-color:#a5d6a7; } .diff-btn.noob:hover { background:#e8f5e9; } .diff-btn.bankai { color:#b71c1c; border-color:#ef5350; background:linear-gradient(135deg,#1a0000,#2d0000); color:#ff1744; border:2px solid #ff1744; text-shadow:0 0 8px rgba(255,23,68,0.6); box-shadow:0 0 15px rgba(255,23,68,0.3); } .diff-btn.bankai:hover { background:linear-gradient(135deg,#2a0000,#4a0000); box-shadow:0 0 25px rgba(255,23,68,0.5); } .diff-btn.bankai strong { color:#ff8a80; } .ink-text.bankai-pass { background: linear-gradient(180deg,#ff1744 0%,#d50000 50%,#b71c1c 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:1px rgba(183,28,28,0.3); } .ink-text.bankai-fail { background: linear-gradient(180deg,#ff1744 0%,#b71c1c 50%,#7f0000 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:1px rgba(127,0,0,0.3); } .history-item .h-mode.bankai { background:#1a0000; color:#ff1744; border:1px solid #ff1744; } /* 答题界面 */ .q-progress { text-align:center; font-size:14px; color:var(--c-text3); margin-bottom:16px; } .q-progress-bar { height:6px; background:var(--c-border3); border-radius:3px; overflow:hidden; margin-bottom:20px; } .q-progress-fill { height:100%; background:linear-gradient(90deg,#c9a96e,#d4a843); border-radius:3px; transition:width .3s; } .q-type-label { display:inline-block; font-size:12px; padding:3px 12px; border-radius:10px; background:var(--c-primary); color:#fff; margin-bottom:14px; } .q-word { text-align:center; margin:20px 0; } .q-word .q-kana { font-size:28px; font-weight:700; color:var(--c-ink); display:block; margin-bottom:8px; } .q-word .q-kanji { font-size:22px; color:#5a3e1b; font-weight:600; text-decoration:underline; text-decoration-color:#c9a96e; text-decoration-thickness:2px; } .q-prompt { text-align:center; font-size:16px; color:#444; margin-bottom:24px; } .q-answers { display:flex; gap:14px; } .q-answer-btn { flex:1; padding:14px; border:2px solid #d4c5a9; border-radius:12px; background:#fff; font-size:17px; font-weight:700; cursor:pointer; transition:all .2s; font-family:inherit; } .q-answer-btn:hover { transform:translateY(-1px); } .q-answer-btn.correct-btn { color:#2e7d32; border-color:#66bb6a; background:#e8f5e9; } .q-answer-btn.wrong-btn { color:#c62828; border-color:#ef5350; background:#ffebee; } .q-answer-btn:disabled { cursor:default; opacity:0.7; } .q-feedback { text-align:center; margin-top:18px; padding:12px; border-radius:8px; font-size:14px; display:none; } .q-feedback.show { display:block; } .q-feedback.right { background:#e8f5e9; color:#2e7d32; } .q-feedback.wrong { background:#ffebee; color:#c62828; } .q-next-btn { display:block; width:100%; margin-top:16px; padding:12px; background:var(--c-primary); color:#fff; border:none; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; display:none; } .q-next-btn.show { display:block; } .q-next-btn:hover { background:var(--c-primary2); } /* 结果界面 */ .result-score { text-align:center; font-size:16px; color:#666; margin-bottom:10px; } .result-score big { font-size:32px; color:var(--c-primary); font-weight:700; } /* 泼墨风艺术字 */ .ink-result { text-align:center; margin:20px 0 10px; min-height:120px; display:flex; align-items:center; justify-content:center; } .ink-text { font-family: "Ma Shan Zheng","ZCOOL XiaoWei","STKaiti","KaiTi","Yu Mincho","Hiragino Mincho Pro",serif; font-size:64px; font-weight:900; letter-spacing:12px; background: linear-gradient(180deg,#1a1a1a 0%,#2c1810 40%,#0a0a0a 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter: drop-shadow(3px 3px 0 rgba(26,26,26,0.25)) drop-shadow(-1px -1px 0 rgba(26,26,26,0.15)) drop-shadow(6px 6px 12px rgba(0,0,0,0.2)); position:relative; display:inline-block; transform: rotate(-2deg); -webkit-text-stroke: 1px rgba(0,0,0,0.3); } .ink-text::before { content: attr(data-text); position:absolute; top:0; left:0; font-family:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit; color:transparent; -webkit-text-stroke: 3px rgba(26,26,26,0.12); filter: blur(2px); z-index:-1; } .ink-text.fail-red { background: linear-gradient(180deg,#b71c1c 0%,#7f0000 50%,#4a0000 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:1px rgba(127,0,0,0.3); } .ink-text.fail-orange { background: linear-gradient(180deg,#e65100 0%,#bf360c 50%,#8a2b00 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:1px rgba(191,54,12,0.3); } .ink-text.fail-green { background: linear-gradient(180deg,#2e7d32 0%,#1b5e20 50%,#0d3d12 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:1px rgba(27,94,32,0.3); } .ink-splash { position:relative; } .ink-splash::after { content:''; position:absolute; top:-20px; left:-30px; right:-30px; bottom:-20px; background: radial-gradient(ellipse at 30% 40%, rgba(26,26,26,0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(26,26,26,0.06) 0%, transparent 45%); z-index:-1; filter:blur(3px); } .result-btns { display:flex; gap:12px; margin-top:20px; } .result-btn { flex:1; padding:12px; border:2px solid #d4c5a9; border-radius:10px; background:#fff; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; color:var(--c-text2); } .result-btn:hover { background:var(--c-primary); color:#fff; border-color:var(--c-primary); } .result-btn.primary { background:var(--c-primary); color:#fff; border-color:var(--c-primary); } .result-btn.primary:hover { background:var(--c-primary2); } /* ===== 顶部三按钮 ===== */ .header { position:relative; overflow:visible; } .header-top-right { position:absolute; top:10px; right:12px; display:flex; align-items:center; gap:6px; z-index:100; } .header-btn-icon { width:34px; height:34px; padding:0; font-size:15px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,0.15); border:1.5px solid rgba(255,255,255,0.4); color:#fff; cursor:pointer; flex:0 0 34px; line-height:1; } .header-btn-icon:hover { background:rgba(255,255,255,0.3); } #userAreaContainer { display:inline-flex; align-items:center; } #userAreaContainer:empty { display:none; } .mail-unread-dot { position:absolute; top:2px; right:2px; width:8px; height:8px; background:#f44336; border-radius:50%; border:1.5px solid rgba(255,255,255,0.8); } .header-btn-icon { position:relative; } .header-btns { display:grid; grid-template-columns:repeat(8,1fr); gap:8px; margin-top:16px; position:relative; z-index:2; max-width:1120px; margin-left:auto; margin-right:auto; padding:0 10px; } .header-btn { width:100%; box-sizing:border-box; padding:16px 8px; background:rgba(255,255,255,0.12); border:4px solid rgba(255,255,255,0.4); color:#fff; border-radius:32px; font-size:26px; font-weight:600; cursor:pointer; transition:all .3s; font-family:inherit; white-space:nowrap; text-align:center; overflow:hidden; text-overflow:ellipsis; } .header-btn:hover { background:rgba(255,255,255,0.25); border-color:#fff; transform:translateY(-1px); } /* 覆盖 auth.css 的 !important 按钮样式（桌面端放大） */ .header .header-btns .header-btn:not(.header-btn-icon) { font-size:26px !important; padding:16px 8px !important; } @media (max-width:1139px) { .header-btns { grid-template-columns:repeat(4,1fr); gap:6px; max-width:100%; margin-top:-6px; } .header-btn:not(.header-btn-icon) { font-size:11px; padding:6px 2px; border-radius:12px; border:2px solid rgba(255,255,255,0.4); } /* 覆盖 auth.css !important，手机端保持小按钮 */ .header .header-btns .header-btn:not(.header-btn-icon) { font-size:11px !important; padding:6px 2px !important; } .header-btn-icon { width:30px; height:30px; border-radius:50%; flex:0 0 30px; } .header-btn-icon svg { width:20px; height:20px; } /* 防止整体溢出 */ body { overflow-x:hidden; } .header { overflow:visible; padding-top:20px; padding-bottom:2px; } .header-top-right { top:8px; } h1 { font-size:22px !important; margin-bottom:10px; } .header h1.aruke-title { font-size:54px !important; letter-spacing:3px; margin-top:4px !important; margin-bottom:0px !important; } .header p { display:none !important; } } /* ===== 历史记录 ===== */ .history-list { max-height:60vh; overflow-y:auto; } .history-item { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#fff; border:1px solid var(--c-border3); border-radius:10px; margin-bottom:10px; gap:10px; } .history-item .h-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .history-item .h-mode { font-size:13px; font-weight:700; padding:4px 12px; border-radius:12px; white-space:nowrap; } .history-item .h-type { font-size:11px; font-weight:600; padding:2px 8px; border-radius:8px; white-space:nowrap; } .history-item .h-type-daily { background:#e3f2fd; color:#1565c0; } .history-item .h-type-review { background:#f3e5f5; color:#6a1b9a; } .history-item .h-type-regular { background:#f5f5f5; color:#757575; } .history-item .h-mode.strong { background:#ffebee; color:#c62828; } .history-item .h-mode.master { background:#f3e5f5; color:#6a1b9a; } .history-item .h-mode.weak { background:#fff3e0; color:#e65100; } .history-item .h-mode.noob { background:#e8f5e9; color:#2e7d32; } .history-item .h-mode.review { background:#f3e5f5; color:#6a1b9a; } .history-item .h-result { font-size:14px; font-weight:600; white-space:nowrap; } .history-item .h-result.pass { color:#2e7d32; } .history-item .h-result.fail { color:#c62828; } .history-item .h-meta { font-size:12px; color:var(--c-text3); text-align:right; white-space:nowrap; } .history-empty { text-align:center; padding:40px; color:var(--c-text3); font-size:15px; } /* ===== 错题本 ===== */ .wrongbook-container { max-width:900px; margin:0 auto; } .wrongbook-tabs { display:flex; justify-content:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; } .wrongbook-tab { padding:8px 26px; border:2px solid var(--c-primary); border-radius:8px; background:#fff; color:var(--c-primary); font-size:15px; font-weight:600; cursor:pointer; transition:all 0.2s; } .wrongbook-tab:hover { background:var(--c-primary); color:#fff; } .wrongbook-tab.active { background:var(--c-primary); color:#fff; } .wrongbook-pane { min-height:240px; } .wrongbook-filter { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:14px; padding:10px 14px; background:var(--c-card-soft); border:1px solid var(--c-border3); border-radius:10px; } .wrongbook-list { max-height:50vh; overflow-y:auto; margin-bottom:16px; } .wrongbook-word { background:#fff; border:1px solid var(--c-border3); border-radius:10px; margin-bottom:8px; overflow:hidden; } .wrongbook-word-header { padding:12px 16px; cursor:pointer; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .wrongbook-word-header:hover { background:var(--c-card-soft); } .wrongbook-word .w-kana { font-size:16px; font-weight:700; color:var(--c-ink); } .wrongbook-word .w-kanji { font-size:15px; color:#5a3e1b; font-weight:600; text-decoration:underline; text-decoration-color:#c9a96e; text-decoration-thickness:2px; } .wrongbook-word .w-meaning { font-size:13px; color:var(--c-text2); } .wrongbook-word .w-detail { display:none; margin:0 10px 10px; padding:8px 10px; font-size:12px; color:var(--c-text2); background:#f9f5ed; border-radius:6px; border-left:3px solid #d4a843; line-height:1.6; } .wrongbook-word.open .w-detail { display:block; } /* ===== 错题本·真题 ===== */ .we-group { border:1px solid var(--c-border3); border-radius:10px; margin-bottom:10px; background:#fff; overflow:hidden; } .we-group summary { padding:12px 16px; cursor:pointer; font-size:15px; font-weight:700; color:var(--c-ink); background:var(--c-card-soft); list-style:none; display:flex; align-items:center; gap:8px; } .we-group summary::-webkit-details-marker { display:none; } .we-group summary::before { content:'▸'; transition:transform 0.2s; color:var(--c-primary); font-size:12px; } .we-group[open] summary::before { transform:rotate(90deg); } .we-badge { margin-left:auto; font-size:12px; font-weight:600; color:#fff; background:var(--c-primary); border-radius:20px; padding:2px 10px; } .we-group-inner { border-top:1px dashed var(--c-border3); } .we-group-inner summary { padding:9px 16px 9px 24px; font-size:13px; font-weight:600; color:var(--c-text2); background:#fff; } .we-group-inner summary::before { color:#b08d57; } .we-level-hint { padding:8px 24px; font-size:12px; color:#999; border-top:1px dashed var(--c-border3); } .we-item { padding:10px 24px 10px 32px; border-top:1px solid #f0ece3; } .we-item:first-of-type { border-top:none; } .we-stem { font-size:13.5px; color:var(--c-ink); line-height:1.6; margin-bottom:6px; } .we-no { font-weight:700; color:var(--c-primary); } .we-opts { display:flex; flex-direction:column; gap:4px; } .we-opt { position:relative; font-size:13px; color:var(--c-text2); padding:6px 10px; border:1px solid var(--c-border3); border-radius:6px; background:#faf8f4; line-height:1.5; } .we-opt.correct { border-color:#66bb6a; background:#eef7ee; } .we-opt.chosen { border-color:#ef5350; background:#fdecea; } .we-mark { font-size:11px; font-weight:700; margin-right:6px; } .we-opt.correct .we-mark { color:#2e7d32; } .we-opt.chosen .we-mark { color:#c62828; } .review-btn-wrap { text-align:center; } .review-btn { padding:12px 40px; background:linear-gradient(135deg,#6a1b9a,#8e24aa); color:#fff; border:none; border-radius:25px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .3s; } .review-btn:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(106,27,154,0.4); } .review-btn:disabled { background:#bbb; cursor:not-allowed; transform:none; box-shadow:none; } /* ===== 通关泼墨字颜色 ===== */ .ink-text.pass-red { background: linear-gradient(180deg,#c62828 0%,#b71c1c 50%,#7f0000 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:1px rgba(183,28,28,0.3); } .ink-text.pass-orange { background: linear-gradient(180deg,#ef6c00 0%,#e65100 50%,#bf360c 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:1px rgba(230,81,0,0.3); } .ink-text.pass-green { background: linear-gradient(180deg,#43a047 0%,#2e7d32 50%,#1b5e20 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:1px rgba(46,125,50,0.3); } .ink-text.pass-gold { background: linear-gradient(180deg,#f9a825 0%,#f57f17 50%,#e65100 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:1px rgba(245,127,23,0.3); } .ink-text.fail-gray { background: linear-gradient(180deg,#546e7a 0%,#37474f 50%,#263238 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:1px rgba(55,71,79,0.3); } /* 测试计时器 */ .q-timer-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:14px; font-weight:bold; } .q-timer-label { color:var(--c-primary); } .q-timer-label span { font-size:18px; color:#e74c3c; } .q-total-timer { color:#7f8c8d; font-size:13px; } /* 选择题选项 */ .q-choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:15px 0; } .q-choice-btn { padding:12px 16px; border:2px solid #d4c5a9; background:var(--c-card-soft); border-radius:10px; font-size:16px; cursor:pointer; transition:all .2s; text-align:left; } .q-choice-btn:hover:not(:disabled) { background:var(--c-primary); color:#fff; border-color:var(--c-primary); } .q-choice-btn:disabled { opacity:0.7; cursor:default; } /* ============================================================ 界面去圆角（扁平直角风格）—— 仅容器/面板/卡片，保留按钮和头像圆角 ============================================================ */ .auth-box, .test-panel, .auth-overlay .auth-box, .module-card, .content-card, .panel, .section, .achievement-item, .activity-item, .shop-item, .fav-item, .leaderboard-item, .history-item, .wrongbook-item, .test-question, .result-card, .stats-card, #gojuonModule, #vocabModule, #examModule, #grammarModule, .vocab-result, .grammar-result, .exam-result, .kanji-card, .word-card, .grammar-card { border-radius: 0 !important; } /* ============================================================ SPA 全屏视图：8个二级菜单（成就/活动/记录/测试/商店/错题/收藏/排行） 从遮罩弹窗改为占满全屏的页面视图 ============================================================ */ /* 打开任一全屏遮罩时锁定背景滚动，避免双滚动条/背景透出 */ body:has(#achievementOverlay.active, #activityOverlay.active, #shopOverlay.active, #favOverlay.active, #leaderboardOverlay.active, #testOverlay.active, #historyOverlay.active, #wrongbookOverlay.active, #reciteOverlay.active) { overflow: hidden !important; } html:has(#achievementOverlay.active, #activityOverlay.active, #shopOverlay.active, #favOverlay.active, #leaderboardOverlay.active, #testOverlay.active, #historyOverlay.active, #wrongbookOverlay.active, #reciteOverlay.active) { overflow: hidden !important; } #achievementOverlay, #activityOverlay, #shopOverlay, #favOverlay, #leaderboardOverlay, #testOverlay, #historyOverlay, #wrongbookOverlay, #reciteOverlay { background: #f5f5f5 !important; padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; overflow: hidden !important; } /* auth-box 类型（成就/活动/商店/收藏/排行） */ #achievementOverlay .auth-box, #activityOverlay .auth-box, #shopOverlay .auth-box, #favOverlay .auth-box, #leaderboardOverlay .auth-box { width: 100% !important; max-width: 100% !important; max-height: 100% !important; height: 100vh !important; box-shadow: none !important; overflow-y: auto !important; padding-top: 56px !important; /* 给返回按钮留空间 */ } /* test-panel 类型（测试/记录/错题） */ #testOverlay .test-panel, #historyOverlay .test-panel, #wrongbookOverlay .test-panel, #reciteOverlay .test-panel { width: 100% !important; max-width: 100% !important; height: 100vh !important; max-height: 100vh !important; box-shadow: none !important; margin: 0 !important; overflow-y: auto !important; padding-top: 56px !important; } /* 关闭按钮 → 返回按钮（左上角） */ #achievementOverlay .auth-close, #activityOverlay .auth-close, #shopOverlay .auth-close, #favOverlay .auth-close, #leaderboardOverlay .auth-close, #testOverlay .test-close, #historyOverlay .test-close, #wrongbookOverlay .test-close, #reciteOverlay .test-close { position: fixed !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: auto !important; height: 48px !important; padding: 0 18px !important; background: var(--c-primary) !important; color: #fff !important; font-size: 0 !important; z-index: 10001 !important; display: flex !important; align-items: center !important; cursor: pointer !important; } #achievementOverlay .auth-close::before, #activityOverlay .auth-close::before, #shopOverlay .auth-close::before, #favOverlay .auth-close::before, #leaderboardOverlay .auth-close::before, #testOverlay .test-close::before, #historyOverlay .test-close::before, #wrongbookOverlay .test-close::before, #reciteOverlay .test-close::before { content: '← 返回'; font-size: 15px !important; color: #fff !important; font-weight: 500; } /* 返回按钮 hover */ #achievementOverlay .auth-close:hover, #activityOverlay .auth-close:hover, #shopOverlay .auth-close:hover, #favOverlay .auth-close:hover, #leaderboardOverlay .auth-close:hover, #testOverlay .test-close:hover, #historyOverlay .test-close:hover, #wrongbookOverlay .test-close:hover, #reciteOverlay .test-close:hover { background: #1a252f !important; color: #fff !important; } /* 弹窗内二级页面的内嵌返回按钮：移动端已被左上角统一返回替代，隐藏避免重叠 */ #testOverlay .detail-back-btn, #historyOverlay .detail-back-btn, #wrongbookOverlay .detail-back-btn, #reciteOverlay .detail-back-btn { display: none !important; } /* 标题避开返回按钮区域 */ #achievementOverlay h2, #activityOverlay h2, #shopOverlay h2, #favOverlay h2, #leaderboardOverlay h2, #testOverlay .test-title, #historyOverlay .test-title, #wrongbookOverlay .test-title, #reciteOverlay .test-title { padding-left: 100px !important; padding-right: 16px !important; } /* 内部内容区去掉 max-height 限制，改为自适应 */ #achievementOverlay .achievement-list, #activityOverlay .activity-list, #shopOverlay .shop-grid, #favOverlay .fav-list, #leaderboardOverlay .leaderboard-list, #testOverlay .test-content, #historyOverlay .history-list, #wrongbookOverlay .wrongbook-list { max-height: none !important; overflow-y: visible !important; } /* 晾衣架按钮图标加大 */ #clothesSvg { width:26px !important; height:26px !important; } /* ===== v26.9.7 新词库列表（Anki JLPT 一万词 v3.5）===== */ .vword { position:relative; } .vplay { display:inline-block; margin-right:8px; width:26px; height:26px; line-height:24px; text-align:center; border-radius:50%; background:var(--c-primary); color:#fff; font-size:12px; cursor:pointer; user-select:none; vertical-align:middle; } .vplay:hover { background:#e74c3c; } .vplay-small { display:inline-block; margin-right:4px; width:18px; height:18px; line-height:16px; text-align:center; border-radius:50%; background:#7f8c8d; color:#fff; font-size:10px; cursor:pointer; user-select:none; vertical-align:middle; } .vplay-small:hover { background:#e74c3c; } .word-accent { display:inline-block; font-size:11px; color:#c9a96e; background:#fff8e6; border:1px solid #f0dfb8; padding:0 5px; border-radius:6px; margin-left:6px; vertical-align:middle; } .freq-tag { display:inline-block; font-size:10px; padding:1px 6px; border-radius:8px; margin-left:6px; vertical-align:middle; } .freq-tag.高频 { background:#fdecea; color:#c62828; } .freq-tag.中频 { background:#fff3e0; color:#e65100; } .freq-tag.低频 { background:#eceff1; color:#546e7a; } .vword-detail { display:none; margin-top:8px; padding-top:6px; border-top:1px dashed #d9cebc; } .word-item.expanded .vword-detail { display:block; } .vword-ex { padding:4px 0; } .ex-text b { color:#e65100; } .ex-zh { font-size:11px; color:var(--c-text3); margin-top:2px; } .vword-related { margin-top:6px; font-size:12px; color:var(--c-text2); line-height:1.8; } .vword-rel-item { display:inline; } .re-tag { display:inline-block; font-size:10px; padding:0 5px; border-radius:6px; margin-right:2px; vertical-align:middle; } .re-tag.关联 { background:#e0f2f1; color:#00695c; } .re-tag.反义 { background:#e8eaf6; color:#283593; } .vword-note { margin-top:6px; font-size:11px; color:#8a6d3b; background:#fdf6e3; padding:5px 8px; border-radius:6px; } .vmore { display:inline-block; padding:10px 28px; border:1px solid var(--c-primary); border-radius:18px; background:#fff; color:var(--c-primary); font-size:14px; cursor:pointer; } .vmore:hover { background:var(--c-primary); color:#fff; } /* 每日测试听力播放按钮 */ .q-listen-btn { font-size:18px; padding:12px 26px; border-radius:12px; border:none; background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; cursor:pointer; box-shadow:0 4px 12px rgba(102,126,234,.35); transition:transform .15s; } .q-listen-btn:active { transform:scale(.96); } /* 查词汇五十音行分组 */ .vocab-row { margin-bottom:10px; } .vocab-row-head { display:flex; align-items:center; gap:10px; padding:10px 14px; background:linear-gradient(135deg,var(--c-primary),#3d566e); color:#fff; border-radius:10px; cursor:pointer; font-weight:600; font-size:15px; user-select:none; } .vocab-row-head:hover { filter:brightness(1.1); } .vocab-row-count { font-size:12px; opacity:.75; font-weight:400; } .vocab-row-arrow { margin-left:auto; font-size:13px; opacity:.85; } .vocab-row-body { padding-top:8px; } .vocab-row-body.closed { display:none; } /* ===== 练真题 v2（v26.9.11 重构）===== */ .exam2-level-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; max-width:760px; margin:0 auto; } .exam2-level-card { background:#fff; border:1px solid #e3ddd0; border-radius:12px; padding:18px 14px; cursor:pointer; text-align:center; transition:all .15s; } .exam2-level-card:hover { border-color:#c9a96e; box-shadow:0 2px 10px rgba(0,0,0,.06); transform:translateY(-2px); } .exam2-level-name { font-size:26px; font-weight:700; color:var(--c-primary); } .exam2-level-meta { font-size:12px; color:var(--c-text3); margin-top:6px; } .exam2-level-bar { height:5px; background:#f0ece2; border-radius:3px; margin-top:8px; overflow:hidden; } .exam2-level-bar i { display:block; height:100%; background:linear-gradient(90deg,#c9a96e,#e2c88f); border-radius:3px; } .exam2-topbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; padding:10px 12px; background:#fff; border:1px solid #eee7da; border-radius:10px; } .exam2-counter { display:flex; gap:14px; font-size:13px; color:#666; flex:1; flex-wrap:wrap; } .exam2-counter b { color:#c9a96e; font-size:15px; } .exam2-counter .exam2-cur b { color:var(--c-primary); } .exam2-jump { display:flex; gap:6px; } .exam2-jump input { width:64px; padding:6px 8px; border:1px solid #ddd6c8; border-radius:6px; font-size:14px; text-align:center; } .exam2-jump input:focus { outline:none; border-color:#c9a96e; } .exam2-jump button { padding:6px 12px; background:#c9a96e; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px; } .exam2-jump button:hover { background:#b99a5d; } .exam2-resume { background:linear-gradient(135deg,#fff8e8,#fdf3dc); border:1px solid #ecd9ae; color:#8a6d2f; padding:12px 16px; border-radius:10px; margin-bottom:14px; cursor:pointer; font-size:14px; text-align:center; transition:all .15s; } .exam2-resume:hover { background:linear-gradient(135deg,#fdf3dc,#fbecc8); } .exam2-resume-ic { margin-right:6px; } .exam2-section-title { text-align:center; color:var(--c-primary); margin:6px 0 14px; font-size:17px; } .exam2-section-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; } .exam2-section-card { background:#fff; border:1px solid #e3ddd0; border-radius:10px; padding:14px 12px; cursor:pointer; text-align:left; transition:all .15s; } .exam2-section-card:hover { border-color:#c9a96e; box-shadow:0 2px 8px rgba(0,0,0,.05); } .exam2-section-key { font-size:16px; font-weight:700; color:var(--c-primary); } .exam2-section-count { font-size:12px; color:var(--c-text3); margin-top:4px; } .exam2-meta { display:flex; gap:10px; align-items:center; font-size:12px; color:var(--c-text3); margin-bottom:12px; flex-wrap:wrap; } .exam2-type-tag { background:#f4efe4; color:#8a6d2f; padding:2px 8px; border-radius:4px; } .exam2-passage { background:#fbf9f3; border:1px solid #eee7da; border-radius:10px; padding:14px 16px; line-height:1.9; font-size:15px; color:var(--c-text); margin-bottom:14px; white-space:pre-wrap; } .exam2-img { text-align:center; margin:10px 0 14px; } .exam2-img img { max-width:100%; max-height:420px; border-radius:8px; border:1px solid #eee; cursor:zoom-in; } .exam2-img-tip { font-size:11px; color:#aaa; margin-top:4px; } .exam2-children { display:flex; flex-direction:column; gap:14px; } .exam2-child { background:#fff; border:1px solid #e8e2d5; border-radius:12px; padding:14px 16px; } .exam2-child.cur { border-color:#c9a96e; box-shadow:0 0 0 1px #c9a96e; } .exam2-child-head { display:flex; gap:10px; align-items:center; margin-bottom:10px; font-size:13px; flex-wrap:wrap; } .exam2-child-no { font-weight:700; color:var(--c-primary); } .exam2-st-correct { color:#2e7d32; background:#e8f5e9; padding:2px 8px; border-radius:4px; } .exam2-st-wrong { color:#c62828; background:#fdecea; padding:2px 8px; border-radius:4px; } .exam2-st-todo { color:var(--c-text3); background:#f5f5f5; padding:2px 8px; border-radius:4px; } .exam2-ans-tag { font-size:11px; color:#2e7d32; font-weight:700; margin-left:auto; } .exam2-next-wrap { text-align:center; margin:18px 0 8px; } .exam2-next-btn { padding:10px 30px; background:#c9a96e; color:#fff; border:none; border-radius:8px; font-size:15px; cursor:pointer; transition:all .15s; } .exam2-next-btn:hover { background:#b99a5d; } .exam2-done { text-align:center; padding:50px 20px; color:#2e7d32; font-size:18px; } .exam-opt-disabled { cursor:default !important; opacity:.85; } .exam-opt-disabled:hover { border-color:var(--c-border2) !important; background:#fff !important; } .exam-opt-correct { border-color:#2e7d32 !important; background:#e8f5e9 !important; } .exam-opt-wrong { border-color:#c62828 !important; background:#fdecea !important; } @media (max-width: 600px) { .exam2-topbar { gap:8px; padding:8px 10px; } .exam2-counter { gap:10px; font-size:12px; } .exam2-jump input { width:52px; padding:5px 6px; font-size:13px; } .exam2-level-grid { grid-template-columns:repeat(2,1fr); gap:10px; } .exam2-section-grid { grid-template-columns:repeat(2,1fr); gap:8px; } .exam2-passage { font-size:14px; padding:12px 12px; } .exam-quiz-stem { font-size:15px; } } /* ===== 练真题底部导航（不自动跳题） ===== */ .exam2-nav { display:flex; justify-content:center; gap:14px; margin-top:22px; padding-top:16px; border-top:1px dashed #e0d8c8; } .exam2-prev-btn { padding:10px 30px; background:#fff; color:var(--c-primary); border:2px solid #c9a96e; border-radius:8px; font-size:15px; cursor:pointer; transition:all .15s; } .exam2-prev-btn:hover { background:var(--c-card-soft); border-color:#b99a5d; } .exam2-section-name { font-weight:400; color:#8a7a5a; font-size:13px; } .exam2-wrong-n { color:#c62828; } .exam2-section-reset { margin-top:10px; padding:6px 10px; background:#fff7f7; border:1px dashed #e0a0a0; color:#c62828; border-radius:8px; font-size:13px; cursor:pointer; transition:all .15s; } .exam2-section-reset:hover { background:#fdecec; border-color:#c62828; } /* ===== 五十音连连看（あア练习） ===== */ .gojuon-game { text-align:center; padding:6px 0 4px; } .gojuon-game h3 { color:var(--c-primary); margin-bottom:4px; } .gojuon-game-tip { color:var(--c-text3); font-size:13px; margin:6px 0 18px; } .gojuon-game-board { max-width:520px; margin:0 auto; } .gojuon-game-row { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:12px; } .gojuon-game-card { width:auto; aspect-ratio:1; height:auto; min-height:64px; display:flex; align-items:center; justify-content:center; font-size:34px; background:#fff; border:2px solid #c9a96e; border-radius:12px; cursor:pointer; transition:all .15s; box-shadow:0 2px 6px rgba(0,0,0,.06); user-select:none; } .gojuon-game-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); } .gojuon-game-card.sel { border-color:var(--c-primary); background:#eef2f7; transform:scale(1.05); } .gojuon-game-card.done { opacity:.18; pointer-events:none; border-color:#2e7d32; background:#e8f5e9; transform:scale(.92); } .gojuon-game-card.wrong { border-color:#c62828; background:#ffebee; } .gojuon-game-win { margin-top:18px; font-size:17px; color:#2e7d32; } .gojuon-game-actions { margin-top:16px; } .gojuon-game-new { padding:9px 26px; border:2px solid var(--c-primary); border-radius:8px; background:#fff; color:var(--c-primary); font-size:14px; cursor:pointer; transition:all .15s; } .gojuon-game-new:hover { background:var(--c-primary); color:#fff; } @media (max-width:600px){ .gojuon-game-card { font-size:28px; min-height:56px; } .gojuon-game-row { gap:8px; margin-bottom:8px; } .exam2-nav { gap:10px; } .exam2-prev-btn, .exam2-next-btn { padding:9px 20px; font-size:14px; } } /* ===== 自定义试卷 ===== */ .exam2-custom-levels { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:10px 0 6px; } .exam2-custom-lv-btn { min-width:76px; padding:10px 18px; border:2px solid #d5c39b; border-radius:10px; background:#fff; color:var(--c-primary); font-size:16px; font-weight:600; cursor:pointer; transition:all .15s; } .exam2-custom-lv-btn.on { background:var(--c-primary); border-color:var(--c-primary); color:#fff; } .exam2-custom-lvgroup { margin:10px 0 4px; } .exam2-custom-lvtag { display:inline-block; padding:3px 12px; border-radius:8px; background:#f0e6d2; color:#8a6d3b; font-size:13px; font-weight:600; margin-bottom:8px; } .exam2-custom-secgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; } .exam2-custom-sec-btn { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border:2px solid #e6e0d2; border-radius:10px; background:#fff; color:var(--c-primary); font-size:13px; cursor:pointer; text-align:left; transition:all .15s; } .exam2-custom-sec-btn.on { border-color:var(--c-primary); background:#f4f6f9; } .exam2-custom-sec-key { font-weight:600; font-size:14px; } .exam2-custom-sec-count { color:var(--c-text3); font-size:12px; } .exam2-custom-count { display:flex; align-items:center; gap:8px; justify-content:center; flex-wrap:wrap; margin:8px 0 4px; } .exam2-custom-count input { width:76px; padding:8px 10px; border:2px solid #d5c39b; border-radius:8px; font-size:15px; text-align:center; } .exam2-custom-tip { width:100%; text-align:center; color:#666; font-size:13px; margin-top:6px; } .exam2-custom-ov { max-width:640px; margin:0 auto; } .exam2-custom-ovhead { display:flex; gap:12px; margin-bottom:10px; } .exam2-custom-ovstat { flex:1; background:#fff; border:2px solid #e6e0d2; border-radius:12px; padding:14px 8px; text-align:center; } .exam2-custom-ovstat b { display:block; font-size:26px; color:var(--c-primary); } .exam2-custom-ovstat span { font-size:12px; color:var(--c-text3); } .exam2-custom-cfglist { display:flex; flex-direction:column; gap:6px; } .exam2-custom-cfgrow { display:flex; align-items:center; gap:10px; padding:9px 12px; background:#fff; border:1px solid #eee8db; border-radius:10px; font-size:13px; } .exam2-custom-lvtag2 { padding:2px 10px; border-radius:7px; background:#f0e6d2; color:#8a6d3b; font-size:12px; font-weight:600; } .exam2-custom-sec-key2 { flex:1; color:var(--c-primary); } .exam2-custom-sec-count2 { color:var(--c-text3); font-size:12px; } .exam2-custom-ovbtns { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; } .exam2-custom-ovbtn { padding:10px 18px; border:2px solid #d5c39b; border-radius:10px; background:#fff; color:var(--c-primary); font-size:14px; cursor:pointer; transition:all .15s; } .exam2-custom-ovbtn:hover { background:#f6f1e6; } .exam2-custom-ovbtn.danger { border-color:#e0b4b4; color:#c62828; } .exam2-custom-ovbtn.danger:hover { background:#fdf0f0; } .exam2-custom-source { margin:6px 0 2px; padding:8px 12px; background:#f6f1e6; border-radius:8px; font-size:13px; color:#8a6d3b; } .exam2-custom-source b { color:var(--c-primary); } @media (max-width:600px){ .exam2-custom-secgrid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); } .exam2-custom-lv-btn { min-width:64px; padding:9px 14px; font-size:15px; } .exam2-custom-ovstat b { font-size:22px; } }