: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:grid;grid-template-columns:1.3fr 1fr 1fr;align-items:stretch;gap:5px; }.pixel-time-card,.pixel-currency,.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-time-card,.pixel-currency { display:flex;align-items:center;gap:5px;min-width:0;padding:5px 6px;color:#3e5c31; }.pixel-time-card>div,.pixel-currency>div { min-width:0; }.pixel-time-card b,.pixel-currency b,.pixel-time-card strong,.pixel-currency strong { display:block; }.pixel-time-card b,.pixel-currency b { overflow:hidden;color:#496a38;font-size:8px;font-weight:bold;white-space:nowrap;text-overflow:ellipsis; }.pixel-time-card strong { color:#46351f;font-size:8px;line-height:1.25; }.pixel-currency strong { color:#46351f;font-size:13px;line-height:1.1; }.pixel-hud-icon { display:grid;place-items:center;flex:none;width:23px;height:23px;border:2px solid #826b37;background:#dff0a6;font-size:14px;line-height:1; }.sun-icon { background:#ffda71; }.coin-icon { background:#f3d178; }.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:5px 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 .nav-icon,.pixel-nav b { display:block; }.pixel-nav .nav-icon { display:grid;place-items:center;width:30px;height:30px;margin:0 auto 3px;border:2px solid #725f36;background:#d8ecae;font-size:20px;line-height:1; }.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)); }
}

/* 首頁沿用原始像素插圖：圖縮小，名稱固定在下方。 */
.pixel-hud-icon { display:block;flex:none;width:23px;height:23px;object-fit:cover;border:0;background:transparent;image-rendering:pixelated; }
.pixel-nav .nav-icon { display:block;width:30px;height:28px;margin:0 auto 3px;object-fit:contain;border:0;background:transparent;image-rendering:pixelated; }

/* 首頁完整像素卡版型：背景圖保留插圖，HTML 只補上真實資料文字與點擊範圍。 */
.pixel-home .pixel-hud { top:max(26px,env(safe-area-inset-top));left:15px;right:15px;grid-template-columns:1.13fr 1.02fr 1.02fr;gap:5px; }
.pixel-home .pixel-time-card,.pixel-home .pixel-currency { min-height:69px;padding:31px 5px 5px;border:0;background:transparent;box-shadow:none; }
.pixel-home .pixel-time-card>img,.pixel-home .pixel-currency>img { display:none; }
.pixel-home .pixel-time-card>div,.pixel-home .pixel-currency>div { width:100%;text-align:center; }
.pixel-home .pixel-time-card b,.pixel-home .pixel-currency b { color:#5b5433;font-size:8px;letter-spacing:.01em; }
.pixel-home .pixel-time-card strong { color:#423b29;font-size:7px;line-height:1.35;white-space:normal; }
.pixel-home .pixel-currency strong { color:#3e3724;font-size:13px; }
.pixel-home .pixel-growth-panel { left:18px;bottom:132px;width:188px;padding:13px 7px 6px 66px;border:0;background:transparent;box-shadow:none; }
.pixel-home .pixel-growth-panel p { margin:0 0 5px;color:#375e31;font-size:10px;white-space:nowrap; }
.pixel-home .pixel-growth-panel strong { margin-top:4px;color:#55452d;font-size:8px;white-space:nowrap; }
.pixel-home .pixel-progress { display:none; }
.pixel-home .pixel-tip { display:none; }
.pixel-home .pixel-nav { right:10px;bottom:max(9px,env(safe-area-inset-bottom));left:10px;height:104px;gap:10px;padding:12px 16px 8px;border:0;background:transparent;box-shadow:none; }
.pixel-home .pixel-nav button { position:relative;padding:0;border:0;background:transparent;box-shadow:none; }
.pixel-home .pixel-nav button.active { background:transparent;box-shadow:none; }
.pixel-home .pixel-nav .nav-icon { display:none; }
.pixel-home .pixel-nav b { position:absolute;right:0;bottom:5px;left:0;color:#4d5530;font-size:8px;font-weight:bold;text-align:center;white-space:nowrap; }
.pixel-home .pixel-nav button.active b { color:#447534; }

/* 手機上讓四個入口名稱清楚可讀。 */
.pixel-home .pixel-nav b { font-size:9px; }

/* 首頁固定依照「我的濟州島」直式像素主版型：資訊卡、成長卡、島嶼、圖文導覽 */
.pixel-home { background:#27a9df; }
.pixel-home .pixel-map-image { object-position:center center; }
.pixel-home .pixel-hud { top:max(30px, env(safe-area-inset-top)); left:13px; right:13px; grid-template-columns:1.22fr 1fr 1fr; gap:7px; }
.pixel-home .pixel-time-card,.pixel-home .pixel-currency { min-height:54px; padding:5px 6px; border:3px solid #403a28; background:#fff3d2; box-shadow:3px 3px 0 #6b5d3a; clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px); }
.pixel-home .pixel-time-card { display:block; padding-top:7px; text-align:center; }
.pixel-home .pixel-time-card b,.pixel-home .pixel-currency b { color:#66563a; font-size:8px; letter-spacing:.02em; }
.pixel-home .pixel-time-card strong { color:#393225; font-size:9px; line-height:1.25; white-space:normal; }
.pixel-home .pixel-currency { display:flex; justify-content:center; gap:4px; }
.pixel-home .pixel-currency strong { color:#403526; font-size:14px; }
.pixel-home .pixel-symbol { display:grid; place-items:center; flex:none; width:23px; height:23px; margin-top:2px; color:#396f37; font-size:19px; line-height:1; text-shadow:1px 1px 0 #d8f09b; }
.pixel-home .pixel-symbol.leaf { transform:rotate(-18deg); }
.pixel-home .pixel-symbol.coin { color:#d29b32; font-size:25px; text-shadow:1px 1px 0 #835f24,-1px -1px 0 #ffe890; }
.pixel-home .pixel-growth-panel { top:300px; bottom:auto; left:16px; width:142px; padding:8px 9px; border:3px solid #403a28; background:#fff3d2; box-shadow:3px 3px 0 #6b5d3a; }
.pixel-home .pixel-growth-panel p { margin-bottom:5px; color:#376838; font-size:12px; }
.pixel-home .pixel-growth-panel strong { margin-top:4px; color:#5c4b31; font-size:9px; }
.pixel-home .pixel-progress { height:10px; border:2px solid #51462c; background:#fff9df; }
.pixel-home .pixel-progress span { background:#65ae4b; box-shadow:inset 0 2px #b4dc72; }
.pixel-home .pixel-nav { right:8px; bottom:max(8px,env(safe-area-inset-bottom)); left:8px; height:103px; gap:5px; padding:5px; border:3px solid #395d2e; background:#8db558; box-shadow:3px 3px 0 #244c35; }
.pixel-home .pixel-nav button,.pixel-home .pixel-nav button.active { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:3px 1px 4px; border:2px solid #645a36; background:#fff2ca; box-shadow:inset 0 0 0 2px #f8e6b0; }
.pixel-home .pixel-nav button.active { background:#ffe7a3; box-shadow:inset 0 0 0 2px #f5bd58; }
.pixel-home .pixel-nav .nav-icon { position:relative; display:block; width:39px; height:42px; margin:0; border:0; background:transparent; image-rendering:auto; }
.pixel-home .pixel-nav b { position:static; color:#4b5131; font-size:8px; line-height:1.15; text-align:center; white-space:normal; }
.pixel-home .pixel-nav button.active b { color:#3b7236; }
.nav-island:before { content:""; position:absolute; inset:7px 3px 4px; background:linear-gradient(135deg,transparent 0 26%,#507c42 27% 48%,#759d4e 49% 65%,transparent 66%),linear-gradient(#86b761,#4e8744); clip-path:polygon(0 100%,22% 45%,44% 13%,65% 47%,78% 25%,100% 100%); border-radius:45% 45% 10% 10%; }
.nav-island:after { content:""; position:absolute; left:3px; right:3px; bottom:3px; height:8px; background:#5f9d75; border-radius:50%; }
.nav-tasks:before { content:""; position:absolute; left:9px; top:3px; width:22px; height:31px; border:3px solid #5b5a3c; background:#fff9df; box-shadow:inset 0 6px #d8ebc5; }
.nav-tasks:after { content:"✓\A✓\A✓"; white-space:pre; position:absolute; left:14px; top:10px; color:#5e954d; font-size:9px; line-height:8px; font-weight:bold; }
.nav-shop:before { content:""; position:absolute; left:3px; top:10px; width:33px; height:24px; border:3px solid #695b37; background:#e4c58d; }
.nav-shop:after { content:""; position:absolute; left:1px; top:4px; width:37px; height:13px; border:3px solid #695b37; background:repeating-linear-gradient(90deg,#f7f0ca 0 7px,#72a65c 7px 14px); }
.nav-cottage:before { content:""; position:absolute; left:5px; top:15px; width:29px; height:20px; border:3px solid #685937; background:#f4dfae; }
.nav-cottage:after { content:""; position:absolute; left:3px; top:4px; width:33px; height:21px; background:#5d9b57; clip-path:polygon(50% 0,100% 65%,100% 82%,0 82%,0 65%); border-radius:3px; }
@media (max-width:360px) { .pixel-home .pixel-hud { left:8px; right:8px; gap:4px; } .pixel-home .pixel-time-card,.pixel-home .pixel-currency { padding-right:3px; padding-left:3px; } .pixel-home .pixel-currency strong { font-size:12px; } .pixel-home .pixel-symbol { display:none; } .pixel-home .pixel-growth-panel { left:10px; } .pixel-home .pixel-nav b { font-size:7px; } }

/* 參考主視覺的最終首頁卡片：厚邊像素框、留白與底部四格導覽。 */
.pixel-home .pixel-hud { top:max(33px,env(safe-area-inset-top)); left:20px; right:20px; grid-template-columns:1.28fr 1fr 1fr; gap:9px; }
.pixel-home .pixel-time-card,.pixel-home .pixel-currency { min-height:60px; padding:5px 6px; border:3px solid #493b2a; border-radius:5px; background:#fff1ce; box-shadow:3px 3px 0 #513b27, inset 0 0 0 2px #f9e6b5; clip-path:none; }
.pixel-home .pixel-time-card b,.pixel-home .pixel-currency b { color:#5c5037; font-size:8px; letter-spacing:0; }
.pixel-home .pixel-time-card strong { margin-top:1px; color:#2e2b27; font-family:"Courier New",monospace; font-size:20px; font-weight:900; letter-spacing:.02em; line-height:1; }
.pixel-home .pixel-currency { gap:3px; }
.pixel-home .pixel-currency strong { font-size:15px; }
.pixel-home .pixel-symbol { width:25px; height:28px; margin-top:0; }
.pixel-home .pixel-growth-panel { top:304px; left:20px; width:142px; padding:8px 9px; border:3px solid #493b2a; border-radius:4px; background:#fff1ce; box-shadow:3px 3px 0 #513b27, inset 0 0 0 2px #f9e6b5; }
.pixel-home .pixel-nav { right:14px; bottom:max(10px,env(safe-area-inset-bottom)); left:14px; height:112px; gap:7px; padding:7px; border:4px solid #426336; border-radius:10px; background:#92b761; box-shadow:3px 3px 0 #264d38, inset 0 0 0 2px #bed07a; }
.pixel-home .pixel-nav button,.pixel-home .pixel-nav button.active { gap:2px; padding:4px 1px 5px; border:3px solid #67593a; border-radius:8px; background:#fff1cf; box-shadow:inset 0 0 0 2px #f8dfaa; }
.pixel-home .pixel-nav button.active { background:#ffe6a1; box-shadow:inset 0 0 0 2px #f0b14c; }
.pixel-home .pixel-nav .nav-icon { width:43px; height:47px; transform:scale(1.04); transform-origin:center bottom; }
.pixel-home .pixel-nav b { color:#4f5031; font-size:8px; font-weight:900; line-height:1.15; }
.pixel-home .pixel-nav button.active b { color:#40743a; }

/* 具體插圖版底部導覽：四個卡片直接使用同一組原創像素插圖，不再用線條符號。 */
.pixel-home .pixel-nav { height:116px; padding:0; border:0; border-radius:0; background:transparent url("assets/jeju-nav-art.png") center/100% 100% no-repeat; box-shadow:none; }
.pixel-home .pixel-nav button,.pixel-home .pixel-nav button.active { position:relative; display:block; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.pixel-home .pixel-nav .nav-icon { display:none; }
.pixel-home .pixel-nav b { position:absolute; right:4px; bottom:8px; left:4px; padding:3px 0 2px; border-radius:5px; background:#fff2cfdd; color:#4a5131; font-size:8px; line-height:1.1; text-shadow:0 1px #fff9e1; }
.pixel-home .pixel-nav button.active b { background:#ffe5a1e8; color:#3c7339; }

/* 第二款上方資訊區：一整條連續像素緞帶，資料仍是可更新的 HTML 文字。 */
.pixel-home .pixel-hud { top:max(17px,env(safe-area-inset-top)); left:18px; right:18px; height:77px; display:grid; grid-template-columns:1.22fr 1fr 1.11fr; gap:0; background:url("assets/jeju-top-ribbon.png") center/100% 100% no-repeat; }
.pixel-home .pixel-time-card,.pixel-home .pixel-currency { min-height:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; clip-path:none; }
.pixel-home .pixel-time-card { display:block; padding:17px 4px 0 39px; text-align:center; }
.pixel-home .pixel-time-card b { overflow:visible; color:#635740; font-size:7px; line-height:1; white-space:nowrap; }
.pixel-home .pixel-time-card strong { margin-top:4px; color:#342d21; font-size:18px; line-height:1; }
.pixel-home .pixel-currency { display:block; padding:16px 3px 0 37px; text-align:center; }
.pixel-home .pixel-currency b { overflow:visible; color:#64583e; font-size:7px; line-height:1; white-space:nowrap; }
.pixel-home .pixel-currency strong { margin-top:4px; color:#403526; font-size:13px; line-height:1; }
.pixel-home .pixel-symbol { display:none; }

/* 讓可更新的文字中心，對準插圖本身的分隔格線。 */
.pixel-home .pixel-hud { display:block; }
.pixel-home .pixel-time-card,.pixel-home .pixel-currency { position:absolute; top:0; height:77px; padding:0; }
.pixel-home .pixel-time-card { left:10%; width:25%; padding-top:18px; }
.pixel-home .pixel-currency { padding-top:17px; }
.pixel-home .pixel-currency:nth-child(2) { left:43%; width:21%; }
.pixel-home .pixel-currency:nth-child(3) { left:72%; width:20%; }
.pixel-home .pixel-nav { padding-right:12px; padding-left:12px; }
.pixel-home .pixel-nav b { right:1px; left:1px; }

/* 資訊列以單一畫布繪製，圖框與字共用同一組座標，避免手機上的文字位移。 */
.pixel-home .pixel-hud { top:max(17px,env(safe-area-inset-top)); left:18px; right:18px; height:auto; display:block; background:none; }
.pixel-home #jeju-hud { display:block; width:100%; height:auto; image-rendering:pixelated; }

/* 第一階段登入頁：採用與島嶼首頁一致的像素世界觀。 */
.pixel-login-page { margin:0; min-height:100dvh; background:#198fca; font-family:"Courier New","Noto Sans TC",monospace; }
.pixel-login-shell { width:min(100%,430px); min-height:100dvh; margin:auto; background:#e9f4de; overflow:hidden; }
.pixel-login-visual { position:relative; height:245px; overflow:hidden; background:#1c9edb; }
.pixel-login-visual>img { width:100%; height:100%; object-fit:cover; object-position:center 57%; image-rendering:pixelated; }
.pixel-login-visual:after { content:""; position:absolute; right:0; bottom:0; left:0; height:70px; background:linear-gradient(transparent,#e9f4de); }
.pixel-login-sign { position:absolute; z-index:1; top:26px; left:50%; width:196px; padding:9px 11px; border:3px solid #483c2a; background:#fff0c9; box-shadow:4px 4px 0 #60442b, inset 0 0 0 2px #fae3a7; color:#4d6237; text-align:center; transform:translateX(-50%); }
.pixel-login-sign span,.pixel-login-sign strong { display:block; }
.pixel-login-sign span { color:#857547; font-size:8px; letter-spacing:.12em; }
.pixel-login-sign strong { margin-top:3px; font-size:18px; }
.pixel-login-shell .login-content { padding:11px 25px 35px; }
.pixel-login-shell .eyebrow { margin:0; color:#76915a; font-size:9px; font-weight:bold; letter-spacing:.12em; }
.pixel-login-shell .login-content h1 { margin:7px 0 5px; color:#315f42; font-size:25px; letter-spacing:.03em; }
.pixel-login-shell .login-intro { margin:0 0 23px; color:#6f806d; font-size:11px; }
.pixel-login-shell .login-content label { margin:14px 0 7px; color:#526b46; font-size:11px; }
.pixel-login-shell .login-content input,.pixel-login-shell .reset-dialog input { height:46px; border:3px solid #657040; border-radius:2px; background:#fffbe5; box-shadow:inset 0 0 0 2px #e1edc1; color:#344734; font:inherit; font-size:13px; outline-color:#80ad51; }
.pixel-login-shell .password-toggle { top:7px; right:7px; padding:8px; color:#527a45; font:inherit; font-size:10px; font-weight:bold; }
.pixel-login-shell .primary-button { margin-top:20px; border:3px solid #3e5934; border-radius:3px; background:#77ad4d; box-shadow:4px 4px 0 #365835, inset 0 0 0 2px #b9d978; color:#fffbed; font-family:inherit; font-size:13px; }
.pixel-login-shell .text-button { margin-top:19px; color:#527d47; font-family:inherit; font-size:11px; font-weight:bold; text-decoration:none; }
.pixel-login-shell .login-help { color:#7f907c; font-size:9px; line-height:1.7; }
.admin-login-link { display:block; margin:17px auto 0; color:#6e7d5c; font-size:9px; text-align:center; text-decoration:underline; text-underline-offset:3px; }
.pixel-login-page .reset-dialog { border:4px solid #4d5434; border-radius:4px; background:#fff8db; font-family:"Courier New","Noto Sans TC",monospace; }