:root {
  --forest: #275943;
  --leaf: #4f8863;
  --sage: #dce8d5;
  --mist: #f4f5ee;
  --cream: #faf9f3;
  --sky: #d9eaf0;
  --sun: #edc778;
  --ink: #1e3026;
  --muted: #6d786e;
  --line: #dfe5dd;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; background: #e7ece6; }
button { font: inherit; color: inherit; cursor: pointer; }

.app-shell {
  min-height: 100vh;
  max-width: 520px;
  margin: auto;
  padding: 22px 20px 104px;
  overflow: hidden;
  background: var(--cream);
}
.topbar, .section-title-row, .progress-heading, .points-card { display: flex; align-items: center; justify-content: space-between; }.taipei-time { margin:4px 0 0;color:#728077;font-size:11px;font-weight:600;letter-spacing:.01em; }
.eyebrow, .section-label { margin: 0; letter-spacing: .14em; font-size: 10px; font-weight: 700; color: var(--leaf); }
.icon-button, .arrow-button { border: 0; background: #edf1e9; border-radius: 50%; width: 38px; height: 38px; font-size: 22px; }
.welcome { margin: 25px 2px 18px; }
.welcome p { margin: 0; color: var(--muted); font-size: 14px; }
.welcome h1 { margin: 3px 0; font-size: 29px; letter-spacing: .04em; }
.employee-id { font-size: 11px; color: #829085; }

.island-card { height: 246px; position: relative; overflow: hidden; border-radius: 28px; background: linear-gradient(155deg, #cfe7ed 0%, #e6f1ef 55%, #c4ddbd 100%); box-shadow: inset 0 0 30px #ffffff80; }
.island-card.scene-evening { background:linear-gradient(155deg,#f1cba0 0%,#f4dfbc 42%,#adc89b 100%); }.island-card.scene-evening .sun-glow { background:radial-gradient(circle,rgba(255,215,145,.9) 0 15%,rgba(255,185,112,.4) 20% 30%,transparent 68%); }.island-card.scene-evening .mountain-back { background:#aac09d; }.island-card.scene-evening .mountain-front { background:#789b77; }.island-card.scene-evening .tea-field { filter:saturate(.82) brightness(.9); }
.island-card.scene-night { background:linear-gradient(155deg,#172d44 0%,#315168 56%,#496d5d 100%); box-shadow:inset 0 0 45px #07152666; }.island-card.scene-night .sun-glow { width:78px;height:78px;right:14%;top:24px;background:radial-gradient(circle,#e9f2df 0 18%,#cad8c2 19% 29%,transparent 58%);animation:none; }.island-card.scene-night .sun-glow::before { width:28px;height:28px;background:linear-gradient(145deg,#fffef0,#d8e5d5);box-shadow:0 0 18px #e4f1db80; }.island-card.scene-night .cloud { display:none; }.island-card.scene-night .night-sky { display:block; }.island-card.scene-night .mountain-back { background:#46675d; }.island-card.scene-night .mountain-front { background:#31594e; }.island-card.scene-night .tea-field { filter:brightness(.53) saturate(.7); }.island-card.scene-night .tree { filter:brightness(.55) saturate(.75); }.island-card.scene-night .island-caption { text-shadow:0 1px 5px #07131c; }
.sun-glow { position:absolute; width:178px; height:178px; border-radius:50%; right:8%; top:-11px; background:radial-gradient(circle,rgba(255,247,190,.89) 0 15%,rgba(255,245,185,.46) 16% 27%,rgba(255,244,191,.15) 43%,transparent 67%); animation:sun-glow 5.2s ease-in-out infinite; }
.sun-glow::before { content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,#fffbd5,#f8d88d);box-shadow:0 0 24px #fff3b8a8;transform:translate(-50%,-50%); }
.cloud { --cloud-scale:1; position:absolute; height:17px; width:82px; border-radius:50%; background:linear-gradient(180deg,#ffffffc4,#f4fbf6a3); filter:blur(.45px); opacity:.72; animation: cloud-float 16s ease-in-out infinite; }
.cloud::before, .cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }
.cloud::before { height:27px; width:39px; left:16px; top:-12px; }.cloud::after { height:20px; width:31px; right:8px; top:-7px; }
.cloud-one { left:4%;top:47px; }.cloud-two { --cloud-scale:.58; left:69%;top:85px;opacity:.52;animation-delay:-13s; }
.night-sky { display:none;position:absolute;inset:0;pointer-events:none; }.night-sky i { position:absolute;width:3px;height:3px;border-radius:50%;background:#fff9d4;box-shadow:0 0 7px #fff9d4;animation:star-twinkle 3.4s ease-in-out infinite; }.night-sky i:nth-child(1) { left:12%;top:20%; }.night-sky i:nth-child(2) { left:31%;top:12%;width:2px;height:2px;animation-delay:-1.3s; }.night-sky i:nth-child(3) { left:52%;top:30%;width:2px;height:2px;animation-delay:-2.4s; }.night-sky i:nth-child(4) { left:70%;top:17%;animation-delay:-.6s; }.night-sky i:nth-child(5) { left:83%;top:39%;width:2px;height:2px;animation-delay:-1.8s; }.night-sky i:nth-child(6) { left:22%;top:44%;width:2px;height:2px;animation-delay:-.3s; }.night-sky i:nth-child(7) { left:61%;top:9%;width:2px;height:2px;animation-delay:-2.8s; }
.mountain { position:absolute; bottom: 67px; border-radius: 60% 60% 0 0; transform: rotate(18deg); }
.mountain-back { width:230px;height:112px;left:-53px;background:#9ec3b3; }.mountain-front { width:260px;height:120px;right:-96px;background:#86b69a; }
.tea-field { position:absolute; overflow:hidden; border-radius:50%; transform:rotate(-5deg); background:linear-gradient(160deg,#9cc378 0%,#5f9c5c 55%,#427e49 100%); box-shadow:inset 0 10px 18px #d1e7a66e,0 -2px 0 #477b45; }.tea-field::after { content:"";position:absolute;inset:0;background:repeating-linear-gradient(172deg,transparent 0 8px,#326d3e99 9px 11px,transparent 12px 18px);opacity:.8; }.field-one { width:348px;height:102px;bottom:21px;left:-49px; }.field-two { width:263px;height:87px;bottom:-16px;right:-37px;transform:rotate(5deg); }.field-three { width:210px;height:52px;bottom:91px;left:133px;transform:rotate(-7deg) scale(.8);opacity:.88; }
.seed-scene { display:none; }.level-1 .tea-field, .level-1 .tree { display:none; }.level-1 .mountain-back { width:250px;height:85px;bottom:45px;background:#b5d0b8;opacity:.68; }.level-1 .mountain-front { width:250px;height:88px;bottom:44px;background:#a3c5a5;opacity:.72; }.level-1 .seed-scene { display:block;position:absolute;inset:0; }.seed-soil { position:absolute;left:-8%;right:-8%;bottom:-35px;height:122px;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#ad8060,#7b5942);box-shadow:inset 0 13px #d2aa7f7d; }.soil-line { position:absolute;bottom:34px;width:110px;height:10px;border-top:2px solid #67473575;border-radius:50%; }.soil-line-one { left:11px;transform:rotate(5deg); }.soil-line-two { right:9px;bottom:51px;transform:rotate(-8deg); }.tea-seed { position:absolute;z-index:1;bottom:49px;left:50%;width:34px;height:43px;border-radius:58% 43% 62% 39%;background:radial-gradient(circle at 34% 27%,#c79a68 0 5%,#82543a 33%,#4e3329 83%);box-shadow:0 7px 10px #3b201a4a, inset 3px 3px 4px #e6bf8c4a;transform:translateX(-50%) rotate(-20deg); }.tea-seed::after { content:"";position:absolute;left:14px;top:5px;width:2px;height:31px;border-radius:3px;background:#422a23a3;transform:rotate(17deg); }.soil-pebble { position:absolute;z-index:1;border-radius:50%;background:#d2ac7d;box-shadow:inset 2px 2px #f2d3a7a1; }.pebble-one { bottom:45px;left:32%;width:8px;height:6px; }.pebble-two { bottom:39px;right:28%;width:11px;height:8px; }
.tree { position:absolute; width:98px;height:136px;bottom:27px;left:42%; }.tree b { position:absolute;bottom:0;left:45px;width:8px;height:75px;background:linear-gradient(90deg,#4e583e,#747354 54%,#4e583e);border-radius:8px; }.tree b::before, .tree b::after { content:"";position:absolute;bottom:41px;width:35px;height:5px;background:#596044;border-radius:8px; }.tree b::before { right:2px;transform:rotate(-31deg);transform-origin:right center; }.tree b::after { left:2px;transform:rotate(31deg);transform-origin:left center; }.tree i { position:absolute;display:block;width:33px;height:52px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#74a85f 0%,#367a4a 63%,#1f603a 100%);box-shadow:inset 5px 5px #9dc57c66,1px 2px 3px #17472e26;transform-origin:14px 48px;animation:leaf-rustle 4.8s ease-in-out infinite; }.tree i::before, .tree i::after { content:"";position:absolute;display:block;width:24px;height:39px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#82b96b,#347949);box-shadow:inset 4px 4px #b5d89a55;transform-origin:10px 36px; }.tree i::before { top:13px;left:-14px;transform:rotate(-40deg); }.tree i::after { top:-10px;right:-14px;transform:rotate(46deg); }.tree i:nth-child(1) { left:33px;top:9px;transform:rotate(5deg);animation-delay:-1.3s; }.tree i:nth-child(2) { left:9px;top:48px;transform:rotate(-36deg);animation-delay:-3.1s; }.tree i:nth-child(3) { right:8px;top:45px;transform:rotate(38deg);animation-delay:-.4s; }
.island-caption { position:absolute;left:18px;bottom:15px;color:white;text-shadow:0 1px 5px #18422f7d; }.island-caption span { display:block;font-size:10px;letter-spacing:.14em; }.island-caption strong { font-size:18px; }

.progress-panel { margin: 17px 2px; padding: 17px 16px; border-radius: 20px; background: #edf3e9; }.progress-heading strong { display:block;margin-top:4px;font-size:22px; }.progress-heading small { font-size:10px;color:var(--leaf);letter-spacing:.08em; }.progress-heading > p { margin:0;font-size:11px;line-height:1.55;text-align:right;color:var(--muted); }.progress-heading b { color:var(--forest); }.progress-track { height:6px;margin-top:15px;border-radius:10px;background:#d2dfd0;overflow:hidden; }.progress-track span { display:block;width:76%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4e8a60,#79ae67); }
.points-card { padding: 16px 17px; border: 1px solid var(--line); border-radius: 20px; background: white; }.points-card p { margin:0;font-size:12px;color:var(--muted); }.points-card strong { display:block;margin-top:4px;color:var(--forest);font-size:23px; }.points-card small { font-size:9px;letter-spacing:.1em; }
.quick-links { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0 29px; }.quick-link { padding:13px 5px 12px;border:0;border-radius:18px;background:#f0f2ed;text-align:center; }.quick-link span:not(.quick-icon), .quick-link small { display:block; }.quick-link span:not(.quick-icon) { margin-top:7px;font-size:12px;font-weight:700; }.quick-link small { margin-top:3px;font-size:9px;color:var(--muted); }.quick-icon { display:grid;place-items:center;margin:auto;width:32px;height:32px;border-radius:12px;background:#d6e6d4;color:var(--forest);font-size:18px; }.gift { background:#f3e4bd; color:#9c7430; }.record { background:#d7e9ee; color:#3d7480; }
.section-title-row h2 { margin:4px 0 12px;font-size:18px; }.section-title-row button { border:0;background:transparent;color:var(--muted);font-size:12px; }.announcement article { display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:17px;background:#fff;border:1px solid var(--line); }.notice-pin { flex:none;padding:4px 6px;border-radius:6px;background:#e4eedc;color:var(--forest);font-size:9px; }.announcement h3 { margin:0 0 4px;font-size:13px; }.announcement p { margin:0;color:var(--muted);font-size:11px;line-height:1.5; }.announcement time { margin-left:auto;color:#9ba49c;font-size:10px;white-space:nowrap; }
.bottom-nav { position:fixed;z-index:2;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,520px);display:flex;justify-content:space-around;padding:10px 14px max(10px, env(safe-area-inset-bottom));background:#fffffff2;border-top:1px solid var(--line);backdrop-filter:blur(10px); }.bottom-nav button { border:0;background:transparent;color:#8b968e;font-size:10px; }.bottom-nav span { display:block;font-size:20px;line-height:19px; }.bottom-nav .active { color:var(--forest);font-weight:700; }
.toast { position:fixed;left:50%;bottom:83px;z-index:3;transform:translate(-50%, 20px);opacity:0;padding:11px 16px;border-radius:24px;background:#264837;color:#fff;font-size:12px;white-space:nowrap;transition:.25s ease;pointer-events:none; }.toast.show { opacity:1;transform:translate(-50%,0); }
@keyframes cloud-float { 0%,100% { transform:translateX(-36px) scale(var(--cloud-scale)); opacity:.48; } 50% { transform:translateX(38px) scale(var(--cloud-scale)); opacity:1; } } @keyframes sun-glow { 0%,100% { transform:scale(.88);opacity:.56; } 50% { transform:scale(1.1);opacity:1; } } @keyframes leaf-rustle { 0%,100% { margin-top:0; } 50% { margin-top:-1px; } }
@keyframes star-twinkle { 0%,100% { opacity:.28;transform:scale(.7); } 50% { opacity:1;transform:scale(1.2); } }
@media (min-width:521px) { body { padding: 18px 0;background:linear-gradient(135deg,#dae8dd,#e7eef2); }.app-shell { border-radius:28px;box-shadow:0 18px 50px #274a3630; }.bottom-nav { bottom:18px;border-radius:18px;border:1px solid var(--line);width:480px; } }

.login-page { min-height:100vh;background:#e3ede3; }.login-shell { width:min(100%,520px);min-height:100vh;margin:auto;background:var(--cream);overflow:hidden; }.login-visual { position:relative;height:300px;overflow:hidden;background:linear-gradient(160deg,#c6e4eb,#eef4e6); }.login-sun { position:absolute;width:150px;height:150px;right:19%;top:33px;border-radius:50%;background:#fff9c9a6;filter:blur(7px); }.login-hill { position:absolute;bottom:-70px;border-radius:50% 50% 0 0;transform:rotate(-6deg); }.hill-a { left:-55px;width:315px;height:180px;background:#9bc687; }.hill-b { right:-110px;width:370px;height:160px;background:#5a9664; }.login-plant { position:absolute;z-index:1;bottom:18px;left:50%;width:118px;height:158px;transform:translateX(-50%); }.login-plant b { position:absolute;bottom:0;left:53px;width:10px;height:87px;border-radius:8px;background:linear-gradient(90deg,#4e583e,#747354 54%,#4e583e); }.login-plant i { position:absolute;display:block;width:38px;height:60px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#75aa5f,#246d43);box-shadow:inset 5px 5px #a7cc875c;transform-origin:15px 56px;animation:leaf-rustle 5.1s ease-in-out infinite; }.login-plant i::before, .login-plant i::after { content:"";position:absolute;width:26px;height:43px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#91bd73,#337c4b); }.login-plant i::before { left:-14px;top:17px;transform:rotate(-42deg); }.login-plant i::after { right:-15px;top:-10px;transform:rotate(45deg); }.login-plant i:nth-child(1) { left:40px;top:9px;transform:rotate(5deg); }.login-plant i:nth-child(2) { left:11px;top:53px;transform:rotate(-37deg);animation-delay:-2.1s; }.login-plant i:nth-child(3) { right:11px;top:52px;transform:rotate(36deg);animation-delay:-.8s; }.login-content { padding:31px 25px 48px; }.login-content h1 { margin:4px 0 7px;font-size:29px;letter-spacing:.06em; }.login-intro { margin:0 0 29px;color:var(--muted);font-size:13px; }.login-content label { display:block;margin:18px 0 8px;color:#526358;font-size:12px;font-weight:700; }.login-content input, .reset-dialog input { width:100%;height:50px;padding:0 14px;border:1px solid #d7e0d6;border-radius:13px;background:#fff;font:inherit;font-size:14px;outline-color:#5b9567; }.password-field { position:relative; }.password-field input { padding-right:58px; }.password-toggle { position:absolute;right:8px;top:8px;padding:8px;border:0;background:transparent;color:var(--leaf);font-size:11px; }.primary-button { width:100%;margin-top:25px;padding:15px;border:0;border-radius:14px;background:var(--forest);color:#fff;font-size:14px;font-weight:700;box-shadow:0 7px 17px #315d4238; }.text-button { display:block;margin:18px auto 0;border:0;background:transparent;color:var(--leaf);font-size:12px;text-decoration:underline;text-underline-offset:3px; }.login-help { margin:26px 0 0;color:#8b968d;font-size:10px;line-height:1.75;text-align:center; }.reset-dialog { width:min(calc(100% - 38px),420px);padding:27px 22px 23px;border:0;border-radius:22px;box-shadow:0 18px 50px #1d392b45; }.reset-dialog::backdrop { background:#1d392b80;backdrop-filter:blur(3px); }.reset-dialog h2 { margin:5px 0 10px;font-size:21px; }.reset-dialog p:not(.eyebrow) { margin:0;color:var(--muted);font-size:12px;line-height:1.7; }.reset-dialog label { display:block;margin:20px 0 8px;color:#526358;font-size:12px;font-weight:700; }.reset-dialog .primary-button { margin-top:18px; }.dialog-close { position:absolute;top:12px;right:14px;border:0;background:transparent;color:var(--muted);font-size:25px;line-height:1; }

.page-header { display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:11px;margin-bottom:22px; }.page-header h1 { margin:3px 0 0;font-size:25px; }.back-button { width:38px;height:38px;border:0;border-radius:50%;background:#edf1e9;font-size:20px; }.task-summary { display:flex;justify-content:space-between;align-items:center;padding:19px 18px;margin-bottom:21px;border-radius:22px;background:linear-gradient(135deg,#e4f0df,#f3f3e7); }.task-summary-copy p { margin:0;color:#617266;font-size:12px;font-weight:700; }.task-summary-copy strong { display:block;margin:2px 0;font-size:30px;color:var(--forest); }.task-summary-copy strong span { color:#91a396;font-size:17px;font-weight:500; }.task-summary-copy small { color:#78857b;font-size:10px; }.task-ring { position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:conic-gradient(#4c855d 0 60%,#cfdfce 60% 100%); }.task-ring::before { content:"";position:absolute;width:56px;height:56px;border-radius:50%;background:#edf3e9; }.task-ring span { position:relative;color:var(--forest);font-size:12px;font-weight:800; }.task-filters { display:flex;gap:8px;overflow:auto;margin-bottom:15px;padding-bottom:2px; }.task-filters button { flex:none;padding:9px 12px;border:1px solid #dce5da;border-radius:20px;background:#fff;color:#718076;font-size:11px; }.task-filters button span { margin-left:3px;color:#a1aaa2; }.task-filters button.active { border-color:var(--forest);background:var(--forest);color:#fff; }.task-filters button.active span { color:#dcebd9; }.task-list { display:grid;gap:10px; }.task-item { display:flex;gap:12px;padding:15px 13px;border:1px solid #e0e7df;border-radius:18px;background:#fff; }.task-item.is-done { background:#fbfcfa; }.task-status { display:grid;place-items:center;flex:none;width:25px;height:25px;margin-top:2px;border-radius:50%;font-size:14px; }.is-done .task-status { background:#dcebd8;color:#39734d; }.is-pending .task-status { border:1.5px solid #adbaae;color:#adbaae; }.task-main { min-width:0;flex:1; }.task-meta { display:flex;align-items:center;justify-content:space-between;gap:8px; }.task-category { padding:4px 7px;border-radius:7px;background:#e1efdc;color:#48774d;font-size:9px;font-weight:700; }.task-category.blue { background:#dcedf2;color:#497582; }.task-category.yellow { background:#f6ebc9;color:#94742d; }.task-category.rose { background:#f6e4df;color:#9d6659; }.task-category.violet { background:#e9e4f1;color:#74628e; }.task-meta time { color:#8b968e;font-size:10px; }.task-meta time.soon { color:#ad7742;font-weight:700; }.task-item h2 { margin:8px 0 4px;font-size:14px; }.task-item p { margin:0;color:#778278;font-size:11px;line-height:1.55; }.task-rewards { display:flex;gap:7px;margin-top:10px; }.task-rewards span { color:#4d855d;font-size:10px;font-weight:800;letter-spacing:.02em; }.task-rewards span+span { color:#7c8764; }.task-note { margin:17px 0 0;text-align:center;color:#9aa39b;font-size:10px; }

.shop-points { display:flex;align-items:center;justify-content:space-between;padding:17px 18px;border-radius:20px;background:#2e6349;color:#fff;box-shadow:0 10px 22px #35604424; }.shop-points p { margin:0;color:#dbead9;font-size:11px; }.shop-points strong { display:block;margin-top:3px;font-size:24px; }.shop-points small { font-size:9px;letter-spacing:.08em; }.shop-points>span { display:grid;place-items:center;width:42px;height:42px;border-radius:15px;background:#ffffff1e;color:#f3d784;font-size:22px; }.shop-intro { margin:28px 0 16px; }.shop-intro h2 { margin:5px 0 6px;font-size:19px; }.shop-intro>p:last-child { margin:0;color:#7d897f;font-size:11px; }.product-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.product-card { display:block;min-width:0;padding:0 0 13px;border:1px solid #e1e8df;border-radius:17px;background:#fff;text-align:left;overflow:hidden; }.product-image { display:grid;place-items:center;height:128px;margin-bottom:11px;background:#e8f0df;color:#477e50;font-size:40px; }.product-name,.product-card small { display:block;padding:0 11px; }.product-name { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700; }.product-card small { margin-top:5px;color:#638e63;font-size:10px;font-weight:800;letter-spacing:.03em; }.product-image.cup { background:linear-gradient(145deg,#e6f1e0,#bfd9bf);color:#47744f; }.product-image.bag { background:linear-gradient(145deg,#f1e8d8,#ddd0b7);color:#927a52;font-size:52px; }.product-image.card { background:linear-gradient(145deg,#eee8f5,#d7c9e4);color:#79619a; }.product-image.cream { background:linear-gradient(145deg,#edf2e6,#d6e6ce);color:#658c52;font-size:35px; }.product-image.plant { background:linear-gradient(145deg,#dceade,#b9d5b7);color:#3d7847;font-size:60px; }.product-image.notebook { background:linear-gradient(145deg,#e7edf0,#d0dce2);color:#68808b;font-size:47px; }.coming-soon { opacity:.62; }.product-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:18px; }.product-header .eyebrow { color:#6c7d70; }.product-hero { display:grid;place-items:center;height:286px;border-radius:25px;background:linear-gradient(150deg,#e4efe0,#c3dfbe); }.product-hero .product-image { width:152px;height:176px;margin:0;border-radius:34px;font-size:71px;box-shadow:0 16px 25px #42634224; }.product-detail { padding:25px 2px 120px; }.product-detail h1 { margin:5px 0 11px;font-size:24px; }.product-cost { display:flex;align-items:center;justify-content:space-between;padding-bottom:17px;border-bottom:1px solid #e2e9e0; }.product-cost strong { color:#477e50;font-size:21px; }.product-cost small { font-size:9px;letter-spacing:.08em; }.product-cost span { color:#77847a;font-size:11px; }.product-description { margin:18px 0;color:#617065;font-size:13px;line-height:1.8; }.product-rules { display:grid;gap:0;margin:0;border-top:1px solid #e2e9e0; }.product-rules div { display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #e2e9e0;font-size:11px; }.product-rules dt { color:#849087; }.product-rules dd { margin:0;color:#46574c;font-weight:700;text-align:right; }.redeem-bar { position:fixed;z-index:2;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;width:min(100%,520px);padding:12px 20px max(12px,env(safe-area-inset-bottom));background:#fffffff5;border-top:1px solid #e0e7df;backdrop-filter:blur(10px); }.redeem-bar div { min-width:91px; }.redeem-bar small,.redeem-bar strong { display:block; }.redeem-bar small { color:#8e998f;font-size:9px; }.redeem-bar strong { margin-top:3px;color:#477e50;font-size:11px; }.redeem-bar .primary-button { flex:1;margin:0;padding:14px; }

.record-balances { display:grid;grid-template-columns:1fr 1fr;gap:10px; }.record-balances>div { padding:15px 13px;border-radius:18px;background:#e9f1e5; }.record-balances>div+div { background:#e7eff0; }.record-balances p { margin:0;color:#647468;font-size:10px; }.record-balances strong { display:block;margin:5px 0 4px;color:#315f45;font-size:20px; }.record-balances small { font-size:8px;letter-spacing:.05em; }.record-balances span { color:#809087;font-size:9px;line-height:1.4; }.record-growth { margin:14px 0 22px;padding:15px;border:1px solid #dfe8dc;border-radius:18px;background:#fff; }.record-growth>div:first-child { display:flex;justify-content:space-between;align-items:center;gap:12px; }.record-growth strong { display:block;margin-top:3px;font-size:12px; }.record-growth>div:first-child>span { color:#638b65;font-size:21px; }.record-tabs { display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #dfe6dd; }.record-tabs button { padding:10px;border:0;border-bottom:2px solid transparent;background:transparent;color:#89958b;font-size:12px; }.record-tabs button.active { border-color:#4e8560;color:#315f45;font-weight:800; }.record-date { margin:19px 0 8px;color:#76857a;font-size:11px;font-weight:800; }.record-item { display:flex;align-items:center;gap:11px;padding:12px 1px;border-bottom:1px solid #e8ede6; }.record-icon { display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:11px;background:#e1efd9;color:#4b7d50;font-size:15px; }.record-icon.test { background:#e2edf1;color:#4d7782; }.record-icon.adjust { background:#f4e7c7;color:#9e7830; }.record-item>div { min-width:0;flex:1; }.record-item h2 { margin:0 0 3px;font-size:12px; }.record-item p { margin:0;color:#8a958c;font-size:10px; }.record-item>strong { font-size:12px; }.is-plus { color:#488052; }.is-growth { color:#74865c; }.record-footnote { margin:17px 0 0;color:#929c94;font-size:10px;text-align:center; }

.notice-featured { display:grid;grid-template-columns:105px 1fr;gap:14px;overflow:hidden;padding:13px;border-radius:21px;background:linear-gradient(135deg,#e4eedc,#f4efe0); }.notice-illustration { position:relative;display:grid;place-items:center;min-height:128px;border-radius:15px;background:linear-gradient(145deg,#aacd9e,#6a9e70);overflow:hidden; }.notice-illustration span { position:relative;z-index:1;color:#fff7c5;font-size:30px; }.notice-illustration i { position:absolute;border-radius:50%;border:2px solid #d7ebaf9e; }.notice-illustration i:nth-of-type(1) { width:120px;height:45px;bottom:-20px;left:-20px;transform:rotate(-20deg); }.notice-illustration i:nth-of-type(2) { width:100px;height:35px;bottom:-2px;right:-30px;transform:rotate(16deg); }.notice-featured h2 { margin:7px 0 5px;font-size:15px;line-height:1.35; }.notice-featured p:not(.notice-badge) { margin:0;color:#677467;font-size:11px;line-height:1.6; }.notice-featured time { display:block;margin-top:8px;color:#859183;font-size:9px; }.notice-badge { display:inline-block;margin:0;padding:4px 6px;border-radius:6px;background:#ffffff91;color:#4e7952;font-size:9px;font-weight:800; }.notice-tabs { display:flex;gap:8px;margin:23px 0 10px; }.notice-tabs button { padding:8px 12px;border:1px solid #dce5da;border-radius:18px;background:#fff;color:#748178;font-size:11px; }.notice-tabs button.active { border-color:var(--forest);background:var(--forest);color:#fff; }.notice-list { display:grid; }.notice-row { display:flex;align-items:flex-start;gap:10px;padding:15px 1px;border-bottom:1px solid #e4eae2; }.notice-row-icon { display:grid;place-items:center;flex:none;width:33px;height:33px;border-radius:11px;font-size:16px; }.task-notice { background:#e0eed9;color:#4b8151; }.general-notice { background:#e2edf0;color:#537c87; }.notice-row>div { min-width:0;flex:1; }.notice-kind { margin:0 0 4px;color:#87938a;font-size:9px;font-weight:700; }.notice-row h2 { margin:0 0 4px;font-size:12px; }.notice-row>div>p:not(.notice-kind) { margin:0;color:#7a867c;font-size:10px;line-height:1.45; }.notice-row time { display:block;margin-top:5px;color:#a0aaa2;font-size:9px; }.notice-arrow { align-self:center;color:#9da89e;font-size:22px; }

/* Pixel island experience */
.pixel-app { margin:0;background:#137db9;color:#253922;font-family:"Courier New","Noto Sans TC",monospace; }.pixel-home { position:relative;width:min(100%,430px);height:100dvh;min-height:720px;margin:auto;overflow:hidden;background:#168cc8;isolation:isolate; }.pixel-map-image { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:-1;image-rendering:pixelated; }.pixel-hud { position:absolute;top:max(13px,env(safe-area-inset-top));left:12px;right:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px; }.pixel-clock,.pixel-currency span,.pixel-growth-panel,.pixel-nav,.pixel-page-header,.pixel-profile-panel,.pixel-equip-grid article,.pixel-link-list { border:3px solid #4c482d;box-shadow:3px 3px 0 #2c5c47;background:#fff5d9; }.pixel-clock { max-width:152px;margin:0;padding:8px 9px;color:#3b3827;font-size:10px;font-weight:bold;line-height:1.35; }.pixel-currency { display:grid;gap:5px; }.pixel-currency span { display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:120px;padding:5px 7px;color:#3e5c31;font-size:9px; }.pixel-currency strong { color:#46351f;font-size:14px; }.pixel-growth-panel { position:absolute;left:15px;bottom:116px;width:205px;padding:9px 10px; }.pixel-growth-panel p { margin:0 0 6px;color:#356239;font-size:13px;font-weight:bold; }.pixel-growth-panel strong { display:block;margin-top:5px;color:#55452d;font-size:10px; }.pixel-progress { height:13px;border:2px solid #51462c;background:#fff9df; }.pixel-progress span { display:block;width:76%;height:100%;background:#78b84c;box-shadow:inset 0 3px #a7d76d; }.pixel-tip { position:absolute;right:16px;bottom:122px;max-width:140px;margin:0;padding:5px 7px;background:#f7e495;color:#4a5227;font-size:9px;font-weight:bold;text-align:center;box-shadow:2px 2px 0 #846d36; }.pixel-nav { position:absolute;right:8px;bottom:max(8px,env(safe-area-inset-bottom));left:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px;background:#8fbb58; }.pixel-nav button { min-width:0;padding:6px 2px;border:2px solid #6a663d;background:#fff1c5;color:#4b532e;font:inherit; }.pixel-nav button.active { background:#ffe89a;box-shadow:inset 0 0 0 2px #f0ae4a; }.pixel-nav span,.pixel-nav b { display:block; }.pixel-nav span { width:25px;height:25px;margin:0 auto 3px;border:2px solid #725f36;background:#cce99b;color:#365a30;font-size:13px;line-height:21px;text-align:center; }.pixel-nav b { overflow:hidden;font-size:8px;line-height:1.2;white-space:nowrap;text-overflow:ellipsis; }.pixel-subpage { min-height:100dvh;background:linear-gradient(#9fd6e4 0 45%,#dce7b7 45%); }.pixel-page-shell { width:min(100%,430px);min-height:100dvh;margin:auto;padding:16px 14px 110px;background:#edf0c9cc; }.pixel-page-header { display:grid;grid-template-columns:33px 1fr 26px;align-items:center;gap:8px;padding:8px;margin-bottom:14px; }.pixel-page-header button { width:27px;height:27px;border:2px solid #5c5839;background:#d6ecae;color:#3c5631;font-size:16px; }.pixel-page-header p { margin:0;color:#658148;font-size:8px;font-weight:bold; }.pixel-page-header h1 { margin:2px 0 0;color:#345a37;font-size:20px; }.pixel-page-header>span { color:#4f7343;text-align:center; }.pixel-profile-panel { display:flex;gap:10px;padding:11px;margin-bottom:16px; }.pixel-portrait { display:grid;place-items:center;flex:none;width:41px;height:41px;border:3px solid #5b673b;background:#b5dd74;color:#3f5f37;font-size:19px;font-weight:bold; }.pixel-profile-panel p { margin:0;color:#355837;font-size:11px;font-weight:bold; }.pixel-profile-panel strong,.pixel-profile-panel small { display:block;margin-top:4px;font-size:9px; }.pixel-profile-panel small { color:#72806a; }.pixel-section { margin-top:19px; }.pixel-section-title { display:flex;align-items:end;justify-content:space-between;margin-bottom:7px; }.pixel-section-title h2 { margin:0;color:#365838;font-size:15px; }.pixel-section-title span { color:#737d65;font-size:8px; }.pixel-equip-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:7px; }.pixel-equip-grid article { padding:8px; }.pixel-equip-grid b,.pixel-equip-grid span { display:block; }.pixel-equip-grid b { color:#738548;font-size:8px; }.pixel-equip-grid span { margin-top:4px;color:#3c5938;font-size:11px;font-weight:bold; }.pixel-equip-grid article:last-child { grid-column:span 2; }.pixel-link-list { display:grid; }.pixel-link-list button { display:flex;justify-content:space-between;padding:12px 8px;border:0;border-bottom:2px solid #c5d1a5;background:transparent;color:#415b3a;font:inherit;font-size:11px;text-align:left; }.pixel-link-list button:last-child { border-bottom:0; }.pixel-link-list span { color:#6c8d4a;font-size:16px;line-height:10px; }.pixel-sub-nav { position:fixed;left:50%;z-index:5;transform:translateX(-50%);width:min(calc(100% - 16px),414px); }
@media (min-width:431px) { .pixel-app { padding:14px 0;background:#82bed0; }.pixel-home,.pixel-page-shell { box-shadow:0 15px 40px #27546d70; }.pixel-home { height:844px;min-height:0; }.pixel-subpage { background:#82bed0; }.pixel-page-shell { min-height:844px; } }
.pixel-quest-summary,.pixel-wallet { border:3px solid #4c482d;box-shadow:3px 3px 0 #2c5c47;background:#fff5d9; }.pixel-quest-summary { padding:11px;margin-bottom:13px; }.pixel-quest-summary p,.pixel-quest-summary strong,.pixel-quest-summary span { display:block; }.pixel-quest-summary p { margin:0;color:#6c8647;font-size:9px; }.pixel-quest-summary strong { margin:3px 0;color:#3e6037;font-size:24px; }.pixel-quest-summary span { color:#6c765f;font-size:9px;line-height:1.45; }.pixel-switch { display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:9px; }.pixel-switch button { padding:8px 3px;border:3px solid #625e3b;background:#fff5d9;color:#53623d;font:inherit;font-size:9px;font-weight:bold; }.pixel-switch button.active { background:#b9da79;color:#2e5230;box-shadow:inset 0 0 0 2px #e6f59d; }.pixel-quest-list { display:grid;gap:8px; }.pixel-quest-list article { display:flex;gap:9px;padding:10px;border:3px solid #5b673b;background:#fff9e6;box-shadow:2px 2px 0 #a6bc7b; }.pixel-quest-list article>b { display:grid;place-items:center;flex:none;width:28px;height:28px;border:2px solid #60713d;background:#e7efbc;color:#466934;font-size:15px; }.pixel-quest-list .done>b { background:#93c85d;color:#fffde4; }.pixel-quest-list h2 { margin:0;color:#3c5736;font-size:12px; }.pixel-quest-list p { margin:4px 0;color:#7d876f;font-size:9px; }.pixel-quest-list span { color:#7b8d46;font-size:9px;font-weight:bold; }.pixel-wallet { display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;margin-bottom:13px; }.pixel-wallet div+div { border-left:2px solid #bdc99e;padding-left:8px; }.pixel-wallet b,.pixel-wallet strong,.pixel-wallet small { display:block; }.pixel-wallet b { color:#718346;font-size:9px; }.pixel-wallet strong { margin:3px 0;color:#3f5f36;font-size:21px; }.pixel-wallet small { color:#76806b;font-size:8px; }.pixel-shop-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:9px; }.pixel-shop-grid button { padding:0 0 9px;border:3px solid #5c673e;background:#fff8dc;color:#455d37;font:inherit;text-align:left;box-shadow:2px 2px 0 #a4b974; }.pixel-shop-grid span { display:grid;place-items:center;height:72px;margin-bottom:7px;border-bottom:3px solid #74824c;background:#d7edaa;color:#4a733b;font-size:29px;font-weight:bold; }.pixel-shop-grid b,.pixel-shop-grid small { display:block;padding:0 8px; }.pixel-shop-grid b { font-size:11px; }.pixel-shop-grid small { margin-top:4px;color:#788b46;font-size:9px;font-weight:bold; }
.pixel-record-tabs { display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:10px; }.pixel-record-tabs button { padding:8px 2px;border:3px solid #625e3b;background:#fff5d9;color:#52623d;font:inherit;font-size:9px;font-weight:bold; }.pixel-record-tabs button.active { background:#b9da79;color:#2e5230;box-shadow:inset 0 0 0 2px #e6f59d; }.pixel-record-list { border:3px solid #5b673b;background:#fff9e6;box-shadow:2px 2px 0 #a6bc7b; }.pixel-record-list>p { margin:0;padding:9px;color:#718346;font-size:9px;font-weight:bold; }.pixel-record-list article { display:flex;align-items:center;gap:9px;padding:10px;border-top:2px solid #d2dcb7; }.pixel-record-list article>span { flex:none;width:46px;color:#5c8943;font-size:12px;font-weight:bold; }.pixel-record-list b,.pixel-record-list small { display:block; }.pixel-record-list b { color:#405a39;font-size:11px; }.pixel-record-list small { margin-top:3px;color:#7e8874;font-size:8px; }

/* 樹幹與場景固定；僅各葉叢依各自節奏輕拂。 */
.tree i:nth-child(1) { --tilt:5deg; transform:rotate(var(--tilt)); }
.tree i:nth-child(2) { --tilt:-36deg; transform:rotate(var(--tilt)); }
.tree i:nth-child(3) { --tilt:38deg; transform:rotate(var(--tilt)); }
.login-plant i:nth-child(1) { --tilt:5deg; transform:rotate(var(--tilt)); }
.login-plant i:nth-child(2) { --tilt:-37deg; transform:rotate(var(--tilt)); }
.login-plant i:nth-child(3) { --tilt:36deg; transform:rotate(var(--tilt)); }
@keyframes leaf-rustle {
  0%, 100% { transform:rotate(var(--tilt)); }
  50% { transform:rotate(calc(var(--tilt) + 1.15deg)); }
}