:root { --forest:#1f6d50; --deep:#174935; --cream:#fffaf0; --ink:#19372d; --yellow:#ffd75d; --coral:#ff846d; --mint:#b9e7c8; --line:#e8e2d4; --paper:#fffdf7; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font-family:"Noto Sans TC", sans-serif; font-size:14px; } body::before { content:""; position:fixed; inset:0; z-index:-2; opacity:.4; background-image:radial-gradient(#d8d0bc 1px, transparent 1px); background-size:14px 14px; } button, input { font:inherit; } button { cursor:pointer; } .sky-shape { position:fixed; z-index:-1; border-radius:50%; filter:blur(1px); opacity:.45; } .shape-one { width:420px; height:420px; right:-220px; top:140px; background:#ffe69b; } .shape-two { width:380px; height:380px; left:-250px; bottom:-50px; background:#bce8d6; }
.sidebar { position:fixed; inset:0 auto 0 0; width:235px; padding:34px 22px 24px; background:var(--forest); color:#fffef7; display:flex; flex-direction:column; z-index:4; } .brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; font-size:18px; font-weight:900; line-height:1.1; letter-spacing:.04em; padding:0 10px 39px; } .brand-mark { width:37px; height:37px; display:grid; place-items:center; background:var(--yellow); color:var(--deep); border-radius:14px 14px 3px 14px; font-size:24px; transform:rotate(-10deg); } nav { display:grid; gap:7px; } .nav-link { text-decoration:none; color:#d7eadc; padding:12px 13px; border-radius:11px; display:flex; gap:14px; align-items:center; font-weight:700; transition:.2s; } .nav-link:hover,.nav-link.active { background:#f8f5e9; color:var(--deep); } .nav-link span { width:16px; font-size:19px; text-align:center; } .side-card { margin-top:auto; background:#2b805e; border:1px solid #54a87b; border-radius:15px; padding:16px; position:relative; overflow:hidden; display:grid; gap:5px; } .side-card strong { font-size:15px; } .side-card span:not(.tiny-label) { color:#cce9d8; font-size:11px; } .tiny-label,.eyebrow { font-family:"DM Mono",monospace; letter-spacing:.08em; font-size:10px; font-weight:500; } .tiny-label { color:#a9d8ba; } .side-card i { position:absolute; font-style:normal; font-size:42px; right:10px; bottom:-9px; transform:rotate(-5deg); } .help-button { color:#d7eadc; background:none; border:0; padding:22px 12px 0; text-align:left; font-weight:600; }
main { margin-left:235px; max-width:1380px; min-height:100vh; padding:0 5.5vw 55px; } .topbar { height:86px; display:flex; justify-content:space-between; align-items:center; } .breadcrumb { display:flex; gap:10px; color:#758d80; font-size:12px; font-weight:600; }.breadcrumb b { color:#c5c5ad; }.account { display:flex; align-items:center; gap:9px; }.account strong { display:block; font-size:13px; }.account span:not(.chevron) { display:block; color:#779181; font-size:11px; }.avatar { width:34px; height:34px; display:grid; place-items:center; background:#f7b9a6; border:2px solid white; border-radius:50%; font-weight:800; }.bell { position:relative; width:31px; height:31px; border:0; background:transparent; font-size:10px; color:var(--coral); }.bell::before { content:"♧"; color:var(--deep); font-size:22px; }.chevron { color:#557265; margin-left:4px; }.mobile-menu { display:none; }
.hero { min-height:268px; padding:37px 46px; background:linear-gradient(118deg,#b9e7c8 0%,#d8f1ce 60%,#f4eeb0 100%); border-radius:25px; position:relative; overflow:hidden; display:flex; align-items:center; } .hero>div:first-child { position:relative; z-index:1; }.eyebrow { color:#6b8e76; margin:0 0 9px; }.hero h1 { font-size:clamp(27px,3vw,42px); line-height:1.25; margin:0; letter-spacing:-.06em; font-weight:900; }.hero h1 em { font-style:normal; color:#28684e; }.hero-copy { margin:13px 0 20px; color:#547464; font-size:13px; }.hero-copy b { color:#d35843; }.primary-button { display:inline-flex; align-items:center; gap:25px; padding:11px 15px 11px 19px; border-radius:10px; background:var(--deep); color:white; text-decoration:none; font-weight:700; box-shadow:0 5px 0 #0e3d2c; transition:transform .2s,box-shadow .2s; }.primary-button:hover { transform:translateY(2px); box-shadow:0 3px 0 #0e3d2c; }.primary-button span { width:23px; height:23px; display:grid; place-items:center; border-radius:7px; background:var(--yellow); color:var(--deep); font-size:18px; }.hero-scene { position:absolute; inset:0 0 0 48%; overflow:hidden; }.sun { position:absolute; width:100px; height:100px; border-radius:50%; background:#ffcf51; top:-28px; right:21%; box-shadow:0 0 0 15px #fadd72aa; }.cloud { position:absolute; width:85px; height:22px; border-radius:30px; background:#fff8db; }.cloud::before,.cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }.cloud::before { width:31px; height:31px; left:15px; top:-16px; }.cloud::after { width:42px; height:42px; right:13px; top:-24px; }.cloud-a { top:57px; right:47px; }.cloud-b { top:112px; left:65px; transform:scale(.55); }.mountain { position:absolute; bottom:-45px; width:270px; height:210px; transform:rotate(45deg); border-radius:20px; }.far { right:185px; background:#84c39a; }.near { right:-3px; background:#4d9970; width:320px; height:235px; }.trail { position:absolute; width:210px; height:80px; background:#f4d29a; bottom:-47px; left:150px; border-radius:50%; transform:rotate(-10deg); }.tent { position:absolute; bottom:28px; right:140px; width:0; height:0; border-left:47px solid transparent; border-right:47px solid transparent; border-bottom:85px solid #ff765f; z-index:2; }.tent::after { content:""; position:absolute; border-left:24px solid transparent; border-right:24px solid transparent; border-bottom:43px solid #ffe89b; left:-24px; top:41px; }.tent span { position:absolute; width:5px; height:84px; background:#f8e7c0; left:-2px; top:0; z-index:3; }.tree { position:absolute; color:#256d4d; font-size:78px; z-index:3; }.tree-a { bottom:-21px; right:52px; }.tree-b { bottom:-31px; right:263px; font-size:58px; }
.status-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin:21px 0 27px; }.status-card { min-height:119px; padding:18px 20px; border-radius:17px; display:grid; grid-template-columns:39px 1fr; column-gap:13px; align-items:center; position:relative; overflow:hidden; }.status-card.coral { background:#ffe1d7; }.status-card.yellow { background:#fff1ba; }.status-card.mint { background:#d8f0dd; }.status-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:#fffaf0; font-size:19px; font-weight:900; }.coral .status-icon { color:#e65d49; }.yellow .status-icon { color:#b48100; }.mint .status-icon { color:#218257; }.status-card div>span { color:#6e8579; font-size:11px; font-weight:600; }.status-card strong { display:block; font-size:29px; letter-spacing:-.07em; line-height:1.2; }.status-card small { font-size:12px; letter-spacing:0; }.status-card a { position:absolute; bottom:15px; right:20px; color:#557265; font-size:11px; text-decoration:none; font-weight:700; }.progress { position:absolute; right:19px; bottom:17px; width:74px; height:7px; border-radius:9px; background:#a8d7b8; }.progress i { display:block; height:100%; width:78%; border-radius:inherit; background:#369e6a; }
.content-grid { display:grid; grid-template-columns:1.13fr .87fr; gap:20px; }.upload-panel,.checklist-panel,.files-panel { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:0 7px 24px #5671520a; }.section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:13px; }.section-heading h2 { margin:0; font-size:20px; letter-spacing:-.05em; }.section-badge { padding:6px 9px; color:#4a8063; background:#ecf6ed; border-radius:7px; font-size:10px; font-weight:600; }.drop-zone { margin:20px 0 14px; min-height:127px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; color:#557265; border:1.5px dashed #b4cdb9; border-radius:13px; background:#fcfdf8; text-align:center; cursor:pointer; transition:.2s; }.drop-zone:hover,.drop-zone.dragging { background:#f0f9ef; border-color:#4e9b6c; }.drop-zone strong { color:#426b58; font-size:13px; }.drop-zone u { color:#257755; text-underline-offset:3px; }.drop-zone small { color:#99a99f; font-size:10px; }.drop-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:#d7f0da; color:#267351; font-size:22px; }.category-row { display:flex; gap:7px; flex-wrap:wrap; }.category { border:1px solid #e8e4d7; background:white; color:#698277; border-radius:8px; padding:7px 9px; font-size:11px; font-weight:600; }.category:hover,.category.selected { color:#215f45; border-color:#a8d5b4; background:#eaf7e9; }.category span { padding-right:4px; }.pending-upload { margin-top:14px; align-items:center; gap:9px; background:#edf8ed; border-radius:10px; padding:10px; }.pending-upload:not([hidden]) { display:flex; }.file-dot { display:grid; width:29px; height:29px; place-items:center; border-radius:8px; background:#9cd7a8; color:#1b6849; }.pending-upload div { display:grid; flex:1; min-width:0; }.pending-upload strong { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.pending-upload span { font-size:10px; color:#70907d; }.pending-upload button:not(.remove-file) { border:0; border-radius:7px; padding:7px 9px; color:white; background:var(--forest); font-size:11px; font-weight:700; }.remove-file { border:0; color:#769485; background:transparent; font-size:20px; }
.text-button { border:0; background:transparent; color:#378260; font-size:11px; font-weight:800; padding:5px 0; }.task-list { margin-top:14px; display:grid; }.event-card { display:grid; grid-template-columns:39px 1fr auto; column-gap:9px; align-items:center; padding:10px 0; border-bottom:1px solid #eee9dc; }.event-card:last-child { border-bottom:0; }.event-card time { width:37px; height:43px; color:#fff; background:#347f5c; border-radius:9px; display:grid; place-items:center; line-height:1; padding:4px 0; }.event-card time b { display:none; }.event-card time span { font-family:"DM Mono",monospace; font-size:8px; }.event-card time i { font-style:normal; font-size:16px; font-weight:800; }.event-card div { display:grid; gap:2px; }.event-card strong { font-size:11px; line-height:1.35; }.event-card small { color:#899e91; font-size:9px; }.event-card>b { align-self:start; color:#558172; background:#e6f4e8; border-radius:5px; padding:3px 5px; font-size:9px; }
.files-panel { margin-top:20px; }.file-list { margin-top:13px; }.file-row { display:grid; grid-template-columns:38px 1fr auto 22px; align-items:center; gap:13px; padding:11px 0; border-bottom:1px solid #eee9dc; }.file-row:last-child { border-bottom:0; }.file-type { display:grid; place-items:center; width:35px; height:38px; border-radius:8px; font-family:"DM Mono",monospace; font-size:9px; font-weight:700; }.pdf { background:#ffe0dc; color:#cc5d4d; }.img { background:#e3f1d4; color:#61833f; }.doc { background:#dbe9fb; color:#487ab8; }.file-row div { display:grid; gap:3px; }.file-row strong { font-size:12px; }.file-row small { color:#99a99f; font-size:10px; }.approved,.review,.needs { border-radius:20px; padding:5px 8px; font-size:10px; font-weight:700; }.approved { color:#39785a; background:#e2f3e5; }.review { color:#af7a19; background:#fff0c4; }.needs { color:#ce5d49; background:#ffe4dc; }.more { border:0; color:#879d91; background:transparent; font-weight:bold; letter-spacing:1px; }.schedule-panel { margin-top:20px; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:0 7px 24px #5671520a; }.edit-button { border:1px solid #b9d6bf; border-radius:8px; color:#2d744f; background:#edf7ed; padding:7px 10px; font-size:11px; font-weight:800; }.schedule-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:18px; border:1px solid #eee9dc; border-radius:12px; overflow:hidden; }.month-column { padding:17px; min-height:226px; border-right:1px solid #eee9dc; }.month-column:last-child { border-right:0; }.month-column h3 { margin:0 0 12px; color:#2e6f51; font-size:15px; }.month-column h3 span { margin-right:5px; color:#a1baa5; font-family:"DM Mono",monospace; font-size:10px; }.schedule-item { display:grid; grid-template-columns:38px 1fr; gap:8px; padding:8px 0; border-top:1px dashed #e5ebdd; }.schedule-item time { color:#2b7554; font-family:"DM Mono",monospace; font-size:10px; font-weight:700; padding-top:2px; }.schedule-item p { margin:0; display:grid; gap:2px; }.schedule-item strong { font-size:11px; line-height:1.35; }.schedule-item span,.schedule-note { color:#82998b; font-size:9px; line-height:1.5; }.schedule-item.holiday time,.schedule-item.holiday strong { color:#c46e45; }.schedule-note { margin-top:11px; padding:8px; background:#fff3d0; border-radius:7px; color:#8d6b26; }.schedule-source { margin:14px 0 0; color:#a3a89e; font-size:10px; }.event-editor { width:min(440px,calc(100vw - 28px)); padding:0; border:0; border-radius:18px; color:var(--ink); box-shadow:0 18px 60px #15392855; }.event-editor::backdrop { background:#183d2c99; backdrop-filter:blur(2px); }.event-editor form { padding:26px; display:grid; grid-template-columns:1fr 1fr; gap:13px; }.editor-heading,.editor-note,.editor-actions { grid-column:1/-1; }.editor-heading { display:flex; justify-content:space-between; align-items:flex-start; }.editor-heading h2 { margin:0; font-size:20px; }.close-editor { border:0; background:transparent; color:#60786b; font-size:25px; line-height:1; }.event-editor label { display:grid; gap:6px; color:#60786b; font-size:11px; font-weight:700; }.event-editor label:first-of-type,.event-editor label:nth-of-type(3),.event-editor label:nth-of-type(5) { grid-column:1/-1; }.event-editor input,.event-editor select { width:100%; border:1px solid #d7e2d7; border-radius:8px; padding:9px; color:var(--ink); background:#fffef9; outline-color:#4f9e6f; }.editor-note { margin:0; color:#91a397; font-size:10px; }.editor-actions { display:flex; justify-content:space-between; align-items:center; margin-top:3px; }.reset-button,.save-button { border-radius:8px; padding:9px 12px; font-size:12px; font-weight:800; }.reset-button { border:0; background:transparent; color:#6f887a; }.save-button { border:0; background:var(--forest); color:white; }.toast { position:fixed; left:50%; bottom:25px; transform:translate(-50%,30px); opacity:0; z-index:10; padding:11px 17px; border-radius:10px; background:#194c37; color:white; font-size:12px; box-shadow:0 8px 24px #173b2b44; transition:.25s; pointer-events:none; }.toast.show { transform:translate(-50%,0); opacity:1; }
@media (max-width:980px) { .sidebar { width:194px; } main { margin-left:194px; padding:0 28px 45px; }.hero { padding:31px; }.hero-scene { left:45%; opacity:.75; }.content-grid { grid-template-columns:1fr; }.checklist-panel { min-height:0; }.schedule-grid { grid-template-columns:1fr; }.month-column { min-height:0; border-right:0; border-bottom:1px solid #eee9dc; }.month-column:last-child { border-bottom:0; } }
@media (max-width:700px) { .sidebar { transform:translateX(-100%); transition:.25s; width:245px; box-shadow:7px 0 25px #19372d44; }.sidebar.open { transform:translateX(0); }.mobile-menu { display:block; color:var(--deep); border:0; background:transparent; font-size:22px; padding:4px 0; } main { margin-left:0; padding:0 16px 35px; }.topbar { height:70px; }.breadcrumb { display:none; }.hero { min-height:298px; padding:28px 25px; align-items:flex-start; }.hero-scene { top:116px; left:0; opacity:.72; }.status-grid { grid-template-columns:1fr; gap:10px; margin:14px 0; }.status-card { min-height:92px; }.content-grid { gap:14px; }.upload-panel,.checklist-panel,.files-panel { padding:20px 17px; border-radius:15px; }.file-row { grid-template-columns:35px 1fr 20px; gap:9px; }.file-row>span:not(.file-type) { display:none; }.category-row { gap:5px; }.category { padding:6px 7px; }.account .chevron { display:none; }.account>div:last-of-type { display:none; } }

/* Improve readability for everyday administrative use. */
body { font-size:16px; }
.nav-link { font-size:16px; }
.side-card strong { font-size:17px; }.side-card span:not(.tiny-label) { font-size:13px; }.tiny-label,.eyebrow { font-size:11px; }
.breadcrumb { font-size:14px; }.account strong { font-size:15px; }.account span:not(.chevron) { font-size:12px; }
.hero-copy { font-size:16px; }.primary-button { font-size:16px; padding:13px 17px 13px 21px; }
.status-card div>span { font-size:13px; }.status-card strong { font-size:34px; }.status-card small { font-size:14px; }.status-card a { font-size:13px; }
.section-heading h2 { font-size:24px; }.section-badge { font-size:12px; }.drop-zone strong { font-size:15px; }.drop-zone small { font-size:12px; }.category { font-size:13px; padding:8px 10px; }.pending-upload strong { font-size:13px; }.pending-upload span { font-size:12px; }.pending-upload button:not(.remove-file) { font-size:13px; }
.text-button,.edit-button { font-size:13px; }.event-card strong,.file-row strong,.schedule-item strong { font-size:14px; }.event-card small,.file-row small,.schedule-item span,.schedule-note { font-size:12px; }.event-card>b,.approved,.review,.needs { font-size:11px; }.event-card time i { font-size:18px; }.event-card time span { font-size:9px; }.file-type { font-size:10px; }.month-column h3 { font-size:18px; }.month-column h3 span,.schedule-item time { font-size:12px; }.schedule-source { font-size:12px; }.event-editor label { font-size:13px; }.editor-note { font-size:12px; }.event-editor input,.event-editor select { font-size:15px; }

/* Small living details in the camp scene. */
.cloud-a { animation:cloudDrift 9s ease-in-out infinite; }.cloud-b { animation:cloudDrift 12s ease-in-out -3s infinite; }.sun { animation:sunGlow 4s ease-in-out infinite; }.tent { animation:tentSway 3.5s ease-in-out infinite; transform-origin:bottom center; }.tree { animation:treeSway 5s ease-in-out infinite; transform-origin:bottom center; }.tree-b { animation-delay:-1.8s; }
.campfire { position:absolute; z-index:4; right:90px; bottom:23px; width:22px; height:22px; border-radius:50% 50% 45% 45%; background:#ff9e45; box-shadow:0 0 13px 4px #ffd160aa; animation:fireFlicker 1.2s ease-in-out infinite; }.campfire::before { content:""; position:absolute; width:12px; height:17px; left:5px; bottom:7px; border-radius:60% 60% 50% 50%; background:#ffdf66; }.campfire i { position:absolute; z-index:-1; width:28px; height:4px; background:#7b4c30; transform:rotate(28deg); top:18px; left:-3px; border-radius:3px; }.campfire i::after { content:""; position:absolute; width:28px; height:4px; background:#7b4c30; transform:rotate(-56deg); border-radius:3px; }
.fireflies span { position:absolute; z-index:4; width:6px; height:6px; border-radius:50%; background:#fff6a3; box-shadow:0 0 10px #fff2a0; animation:firefly 4s ease-in-out infinite; }.fireflies span:nth-child(1) { left:27%; bottom:38%; }.fireflies span:nth-child(2) { left:46%; bottom:22%; animation-delay:-1.1s; }.fireflies span:nth-child(3) { right:17%; bottom:47%; animation-delay:-2.5s; }.fireflies span:nth-child(4) { right:35%; bottom:66%; animation-delay:-3.2s; }
@keyframes cloudDrift { 50% { translate:18px -7px; } } @keyframes sunGlow { 50% { scale:1.07; box-shadow:0 0 0 20px #fadd7277; } } @keyframes tentSway { 50% { rotate:1.5deg; } } @keyframes treeSway { 50% { rotate:2.5deg; } } @keyframes fireFlicker { 50% { scale:.78 1.12; background:#ff6b42; } } @keyframes firefly { 0%,100% { opacity:.15; translate:0 0; } 45% { opacity:1; } 70% { opacity:.35; translate:11px -22px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }
@media (max-width:700px) { body { font-size:16px; }.hero-copy { font-size:15px; }.section-heading h2 { font-size:22px; }.campfire { right:18%; bottom:18px; }.fireflies span:nth-child(1) { left:13%; }.fireflies span:nth-child(4) { right:14%; } }