:root{font-family:Noto Sans TC,PingFang TC,Microsoft JhengHei,system-ui,sans-serif;color:#173d29;background:#cce8d2;font-synthesis:none;text-rendering:optimizeLegibility;--forest: #173d29;--leaf: #4f7d50;--sun: #ffd15a;--sun-hover: #ffc43d;--coral: #ff8d78;--frost: rgba(255, 255, 255, .88);--frost-border: rgba(255, 255, 255, .68);--deep-shadow: 0 18px 48px rgba(24, 58, 35, .2)}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;height:100%;margin:0;overflow:hidden}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(255,141,120,.88);outline-offset:3px}.app{position:relative;isolation:isolate;width:100%;height:100svh;min-height:560px;overflow:hidden;background:#b9dcbd}.garden-backdrop{position:absolute;z-index:-2;inset:-2%;background-image:var(--garden-image);background-position:center;background-size:cover;animation:garden-arrive .75s cubic-bezier(.2,.8,.2,1) both}@keyframes garden-arrive{0%{opacity:.45;transform:scale(1.018)}to{opacity:1;transform:scale(1)}}.garden-header{position:absolute;z-index:20;top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));min-height:78px;display:grid;grid-template-columns:minmax(300px,1fr) auto minmax(350px,1fr);align-items:center;gap:18px;padding:10px 13px 10px 18px;border:1px solid var(--frost-border);border-radius:29px;background:var(--frost);box-shadow:0 12px 36px #183a232b,inset 0 1px #ffffffd1;backdrop-filter:blur(18px) saturate(1.18);-webkit-backdrop-filter:blur(18px) saturate(1.18)}.brand-lockup,.header-actions,.butterfly-count,.primary-button,.welcome-brand,.drawer-heading,.class-confirmation,.template-link,.drawer-template-link,.garden-status,.garden-hint,.toast{display:flex;align-items:center}.brand-lockup{min-width:0;gap:12px}.brand-lockup img{width:48px;height:52px;object-fit:contain;flex:0 0 auto}.brand-title{color:var(--forest);font-size:clamp(18px,1.6vw,25px);font-weight:850;letter-spacing:.035em;white-space:nowrap}.brand-title--short{display:none}.class-tabs{display:flex;align-items:center;gap:8px}.class-tab{min-width:66px;height:48px;padding:0 18px;border:1px solid rgba(37,80,52,.09);border-radius:17px;background:#ffffff8f;color:#244b32;font-size:20px;font-weight:800;cursor:pointer;box-shadow:0 3px 9px #22472c0f;transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease}.class-tab:hover{transform:translateY(-1px);background:#ffffffeb}.class-tab.is-active{border:2px solid var(--coral);background:#fff;color:#dc6f5c;box-shadow:0 6px 16px #e66f5b21}.header-actions{justify-content:flex-end;gap:10px;min-width:0}.butterfly-count{gap:8px;padding:0 8px;font-size:15px;font-weight:750;white-space:nowrap}.count-short{display:none}.icon-button,.dialog-close,.remove-preview{display:inline-grid;place-items:center;border:1px solid rgba(35,75,48,.08);border-radius:50%;background:#ffffffb3;box-shadow:0 4px 12px #1f442b1a;cursor:pointer}.icon-button{width:46px;height:46px;flex:0 0 auto}.icon-button:hover,.dialog-close:hover{background:#fff;transform:translateY(-1px)}.primary-button{justify-content:center;gap:9px;min-height:50px;padding:0 21px;border:1px solid rgba(145,97,10,.1);border-radius:18px;background:linear-gradient(180deg,#ffdb72,var(--sun));color:#66501d;font-weight:850;letter-spacing:.01em;cursor:pointer;box-shadow:0 9px 20px #9b711633,inset 0 1px #ffffffb3;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}.primary-button:hover:not(:disabled){transform:translateY(-2px);filter:saturate(1.06);box-shadow:0 12px 25px #9b711640}.primary-button:active:not(:disabled){transform:translateY(0)}.primary-button:disabled{cursor:not-allowed;opacity:.52;box-shadow:none}.header-upload{height:52px;white-space:nowrap}.welcome-layer{position:absolute;z-index:60;inset:0;display:grid;place-items:center;padding:28px;overflow:hidden}.welcome-layer:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 38%,#ffffff1f,#1239221a);-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}.welcome-card{position:relative;width:min(680px,calc(100vw - 40px));padding:30px 42px 36px;border:1px solid rgba(255,255,255,.84);border-radius:34px;background:#ffffffe8;box-shadow:0 30px 80px #12392245,inset 0 1px #fff;text-align:center;-webkit-backdrop-filter:blur(22px) saturate(1.1);backdrop-filter:blur(22px) saturate(1.1)}.welcome-brand{justify-content:center;gap:9px;font-size:13px;font-weight:750;color:#486c52}.welcome-brand img{width:31px;height:35px;object-fit:contain}.welcome-leaf{width:28px;margin-top:18px;color:#70a266}.welcome-card h1{margin:5px 0 10px;color:#153d28;font-size:clamp(31px,4vw,48px);line-height:1.2;letter-spacing:.025em}.welcome-card>p{max-width:470px;margin:0 auto 24px;color:#54705b;font-size:16px;line-height:1.7}.welcome-classes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}.welcome-class{min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid #d7e1d9;border-radius:20px;background:#f8fbf7d9;color:#3f6349;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}.welcome-class strong{font-size:25px;line-height:1}.welcome-class span{font-size:12px}.welcome-class:hover{transform:translateY(-2px);background:#fff}.welcome-class.is-active{border:2px solid var(--coral);background:#fff9f7;color:#c76555;box-shadow:0 8px 20px #dc6f5c1f}.welcome-enter{width:min(310px,100%);margin:0 auto}.welcome-student{position:absolute;bottom:-44px;z-index:-1;width:clamp(170px,19vw,295px);height:min(63vh,610px);object-fit:contain;object-position:bottom;filter:drop-shadow(0 18px 22px rgba(17,54,30,.22));pointer-events:none}.welcome-student--boy{left:max(-35px,calc(50vw - 640px))}.welcome-student--girl{right:max(-35px,calc(50vw - 640px))}.upload-drawer{position:absolute;z-index:41;top:114px;right:max(18px,env(safe-area-inset-right));bottom:18px;width:min(450px,calc(100vw - 36px));padding:26px 24px 22px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--frost-border);border-radius:28px;background:#fffffff0;box-shadow:0 26px 70px #13331d45,inset 0 1px #fff;-webkit-backdrop-filter:blur(22px) saturate(1.08);backdrop-filter:blur(22px) saturate(1.08);transform:translate(calc(100% + 40px));opacity:0;pointer-events:none;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .23s ease}.upload-drawer.is-open{transform:translate(0);opacity:1;pointer-events:auto}.upload-drawer .dialog-close{position:absolute;top:18px;right:18px;width:40px;height:40px}.drawer-grabber{display:none}.drawer-heading{gap:12px;padding-right:42px;margin-bottom:20px}.drawer-heading-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#edf6ea;color:#6e9a65;flex:0 0 auto}.drawer-heading h2{margin:0 0 3px;font-size:24px;letter-spacing:.02em}.drawer-heading p{margin:0;color:#68806e;font-size:13px;line-height:1.5}.drop-zone{width:100%;min-height:164px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px dashed rgba(235,128,108,.66);border-radius:20px;background:#fffaf8;color:#6a705f;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}.drop-zone:hover{transform:translateY(-1px);border-color:var(--coral);background:#fff7f4}.drop-zone>svg{width:34px;height:34px;margin-bottom:2px;color:#e8907f}.drop-zone strong{font-size:16px}.drop-zone span{color:#dd7663;font-size:13px;font-weight:700}.drop-zone small{margin-top:4px;color:#98a098;font-size:11px}.drawer-template-link{justify-content:center;gap:7px;margin:12px 0 18px;color:#527458;font-size:13px;font-weight:750;text-decoration:none}.drawer-template-link:hover{color:#31563a;text-decoration:underline}.image-preview-wrap{position:relative;margin-bottom:12px}.camera-upload{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;margin-top:10px;min-height:46px}.photo-guidance{margin:10px 0 14px;color:#52715e;font-size:12px;line-height:1.6}.transparent-grid{height:min(255px,29vh);display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center;overflow:hidden;border:1px solid #dce5dc;border-radius:19px;background-color:#f8faf8;background-image:linear-gradient(45deg,#edf1ed 25%,transparent 25%),linear-gradient(-45deg,#edf1ed 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#edf1ed 75%),linear-gradient(-45deg,transparent 75%,#edf1ed 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.transparent-grid img{width:94%;height:94%;min-width:0;min-height:0;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(19,54,30,.12))}.remove-preview{position:absolute;top:9px;right:9px;width:37px;height:37px;color:#9c5d52}.preview-ready{position:absolute;bottom:9px;left:9px;display:flex;align-items:center;gap:5px;padding:6px 9px;border-radius:10px;background:#f7fff4ed;color:#4c7a4f;font-size:11px;font-weight:750;box-shadow:0 3px 10px #234d2a14}.field-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px;color:#2f5138;font-size:14px;font-weight:800}.field-label span{color:#87978a;font-size:11px;font-weight:600}.text-input{width:100%;height:48px;padding:0 14px;border:1px solid #d8e1d8;border-radius:14px;background:#fffffff0;color:var(--forest);font-size:15px;transition:border-color .16s ease,box-shadow .16s ease}.text-input::placeholder{color:#a0aaa2}.text-input:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px #ff8d7824}.class-confirmation{justify-content:space-between;margin:12px 0;padding:12px 14px;border-radius:14px;background:#edf6eb;color:#56725c;font-size:13px}.class-confirmation strong{color:#2f5f3b;font-size:14px}.form-error{margin:8px 0 11px;padding:10px 12px;border-radius:12px;background:#fff0ed;color:#a8493a;font-size:12px;line-height:1.5}.submit-butterfly{width:100%;min-height:56px;font-size:16px}.upload-success{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}.upload-success>svg{width:68px;height:68px;color:#6fa468}.upload-success strong{font-size:21px}.upload-success span{color:#6f8272;font-size:14px}.drawer-scrim{display:none}.modal-backdrop{position:absolute;z-index:80;inset:0;display:grid;place-items:center;padding:20px;background:#14311d57;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.help-dialog{position:relative;width:min(520px,100%);padding:32px;border:1px solid rgba(255,255,255,.8);border-radius:28px;background:#fffffff5;box-shadow:0 24px 70px #11301b47}.help-dialog .dialog-close{position:absolute;top:16px;right:16px;width:40px;height:40px}.help-dialog h2{margin:0 46px 6px 0;font-size:27px}.help-intro{margin:0 0 22px;color:#6c7e6f;line-height:1.6}.help-steps{list-style:none;display:grid;gap:12px;margin:0 0 20px;padding:0}.help-steps li{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center}.help-steps li>span{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:#edf6ea;color:#6f9a68}.help-steps strong{display:block;margin-bottom:2px;font-size:15px}.help-steps p{margin:0;color:#778579;font-size:13px;line-height:1.5}.template-link{justify-content:center;gap:8px;min-height:48px;border:1px solid #b9cdbb;border-radius:15px;color:#3c6945;font-weight:800;text-decoration:none}.template-link:hover{background:#f1f8ef}.privacy-note{margin:14px 0 0;color:#8c978e;font-size:11px;line-height:1.55;text-align:center}.empty-garden{position:absolute;z-index:16;left:max(24px,env(safe-area-inset-left));bottom:max(26px,env(safe-area-inset-bottom));width:min(420px,calc(100vw - 48px));display:grid;grid-template-columns:50px 1fr auto;gap:12px;align-items:center;padding:13px 14px;border:1px solid var(--frost-border);border-radius:20px;background:#ffffffdb;box-shadow:0 14px 34px #183a232e;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.empty-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:#f7d973;color:#745d21}.empty-garden strong{display:block;font-size:14px}.empty-garden p{margin:2px 0 0;color:#728076;font-size:11px;line-height:1.45}.empty-garden button{border:0;border-radius:11px;background:#487951;color:#fff;padding:9px 11px;font-size:12px;font-weight:750;cursor:pointer}.garden-status{position:absolute;z-index:16;top:116px;left:50%;transform:translate(-50%);gap:8px;padding:9px 15px;border:1px solid rgba(255,255,255,.68);border-radius:14px;background:#ffffffd4;box-shadow:0 7px 20px #193b2321;font-size:13px;font-weight:700;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.garden-status--error{max-width:calc(100vw - 36px);color:#884c40}.garden-status button{border:0;background:transparent;color:#356f43;font-weight:800;text-decoration:underline;cursor:pointer}.garden-hint{position:absolute;z-index:15;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);gap:8px;padding:10px 15px;border:1px solid rgba(255,255,255,.68);border-radius:16px;background:#ffffffc7;box-shadow:0 8px 22px #193b2321;color:#3d6147;font-size:12px;font-weight:750;white-space:nowrap;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.toast{position:absolute;z-index:100;left:50%;bottom:32px;transform:translate(-50%,30px);gap:8px;max-width:calc(100vw - 36px);padding:12px 18px;border-radius:15px;background:#214e31;color:#fff;box-shadow:0 12px 28px #12311c47;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;font-size:13px;font-weight:750}.toast.is-visible{opacity:1;transform:translate(-50%)}.mobile-upload-button{display:none}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(max-width:1180px){.garden-header{grid-template-columns:minmax(230px,1fr) auto minmax(215px,1fr);gap:10px}.brand-title--wide{display:none}.brand-title--short{display:inline}.header-upload{width:52px;padding:0}.header-upload span{display:none}.butterfly-count .count-wide{font-size:13px}}@media(max-width:820px){.garden-header{top:max(9px,env(safe-area-inset-top));left:9px;right:9px;min-height:66px;grid-template-columns:auto 1fr auto;padding:7px 8px;border-radius:23px}.brand-lockup{gap:0}.brand-lockup img{width:41px;height:45px}.brand-title{display:none}.class-tabs{justify-content:center;gap:4px;min-width:0}.class-tab{min-width:48px;height:44px;padding:0 10px;border-radius:14px;font-size:16px}.header-actions{gap:3px}.butterfly-count{min-width:42px;justify-content:center;padding:0 3px}.butterfly-count .count-wide{display:none}.butterfly-count .count-short{display:inline;font-size:13px}.icon-button{width:42px;height:42px;box-shadow:none}.header-upload{display:none}.mobile-upload-button{position:absolute;z-index:18;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));min-width:132px;min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(132,93,18,.15);border-radius:18px;background:linear-gradient(180deg,#ffdd76,#ffd15a);color:#66501d;box-shadow:0 12px 28px #5b481a3d,inset 0 1px #ffffffb8;font-weight:850}.garden-hint{left:max(14px,env(safe-area-inset-left));transform:none;bottom:max(18px,env(safe-area-inset-bottom));max-width:calc(100vw - 170px);overflow:hidden;text-overflow:ellipsis}.empty-garden{bottom:82px;grid-template-columns:46px 1fr}.empty-garden button{grid-column:1 / -1}.upload-drawer{position:absolute;inset:auto 0 0;width:100%;max-height:min(86svh,720px);padding:24px 19px calc(18px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;transform:translateY(calc(100% + 30px))}.upload-drawer.is-open{transform:translateY(0)}.drawer-grabber{display:block;width:54px;height:5px;margin:-13px auto 16px;border-radius:99px;background:#aeb6ad}.drawer-scrim{position:absolute;z-index:40;inset:0;display:block;border:0;background:#112f1b4d;opacity:0;pointer-events:none;transition:opacity .2s ease}.drawer-scrim.is-open{opacity:1;pointer-events:auto}.welcome-student{display:none}}@media(max-width:620px){.app{min-height:480px}.welcome-layer{padding:12px}.welcome-card{padding:25px 17px 24px;border-radius:28px}.welcome-card h1{font-size:clamp(29px,9vw,40px)}.welcome-card>p{margin-bottom:18px;font-size:14px}.welcome-classes{gap:6px}.welcome-class{min-height:76px;border-radius:16px}.welcome-class strong{font-size:21px}.help-dialog{padding:28px 20px 22px}.help-dialog h2{font-size:23px}.help-steps li{grid-template-columns:44px 1fr;gap:9px}.garden-status{top:88px}.transparent-grid{height:min(225px,28vh)}}@media(max-height:680px)and (min-width:821px){.garden-header{top:10px;min-height:68px}.upload-drawer{top:92px;padding-top:20px}.drop-zone{min-height:130px}.drawer-heading{margin-bottom:12px}.transparent-grid{height:180px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}.app{min-height:0}.garden-header{grid-template-columns:minmax(235px,1fr) auto auto;gap:12px;padding:10px 12px 10px 16px}.brand-copy{display:flex;min-width:0;flex-direction:column;gap:3px}.brand-title{font-size:20px;letter-spacing:.01em}.event-label{color:#617563;font-size:11px;font-weight:650;white-space:nowrap}.class-tabs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}.class-tab{display:flex;min-width:57px;height:54px;flex-direction:column;justify-content:center;gap:3px;padding:0 7px;border-radius:14px;font-size:14px;white-space:nowrap}.class-tab small{font-size:10px;font-weight:650;opacity:.78}.header-actions{gap:7px}.header-upload{padding:0 14px;font-size:13px}.header-actions .icon-button{width:40px;height:40px}.connection-badge{display:inline-flex;align-items:center;justify-content:center;gap:5px;color:#59715f;font-size:11px;font-weight:700;white-space:nowrap}.connection-badge>span{width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:#b3924e}.connection-badge--live>span{background:#56824d;box-shadow:0 0 0 3px #56824d15}.connection-badge--offline{color:#996047}.connection-badge--offline>span{background:#b86d53}.welcome-layer{overflow-y:auto}.welcome-card{margin:auto 0}.welcome-leaf{margin-top:15px}.welcome-event{display:block;color:#58804e;font-size:12px;font-weight:800;letter-spacing:.14em;margin:2px 0 8px}.welcome-card h1{font-size:clamp(29px,3.6vw,43px)}.welcome-card>p{font-size:14px;margin-bottom:18px}.welcome-class{position:relative;min-height:75px;gap:7px}.welcome-class strong{font-size:22px}.welcome-class small{position:absolute;top:5px;right:6px;font-size:9px;color:#a36a4f}.welcome-status{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:20px;font-size:11px;color:#708072}.staff-locked>svg{width:38px;height:38px;margin:10px 0;color:#65895d}.staff-locked h1{font-size:28px}.viewer-link{display:inline-block;margin-top:20px;color:#42754d;font-size:14px;font-weight:750;text-underline-offset:4px}.class-confirmation select{max-width:75%;padding:7px 9px;border:1px solid #c4d4c3;border-radius:9px;color:#2f5f3b;font:inherit;font-weight:750;background:#fff}.capacity-note{margin:8px 0 12px;border-radius:12px;padding:11px 12px;background:#fff5d9;color:#8b6930;font-size:12px;line-height:1.6}.drawer-scrim{position:absolute;z-index:40;inset:0;display:block;border:0;background:#112f1b30;opacity:0;pointer-events:none;transition:opacity .2s ease}.drawer-scrim.is-open{opacity:1;pointer-events:auto}.dialog-close:disabled,.remove-preview:disabled{cursor:wait;opacity:.5}.modal-backdrop{overflow-y:auto}.help-dialog{margin:auto 0}.app--viewer .empty-garden{grid-template-columns:46px 1fr}@media(max-width:1420px)and (min-width:1181px){.header-upload{width:45px;padding:0}.header-upload span{display:none}.brand-title{font-size:18px}.header-actions{gap:5px}}@media(max-width:1180px){.garden-header{grid-template-columns:minmax(0,1fr) auto;gap:9px 12px;padding:10px 13px}.brand-lockup{grid-column:1;grid-row:1}.brand-title{display:block;font-size:19px}.header-actions{grid-column:2;grid-row:1;gap:7px}.class-tabs{grid-column:1 / -1;grid-row:2}.class-tab{min-width:0;height:48px}.header-upload{width:auto;padding:0 15px;height:45px;min-height:45px}.header-upload span{display:inline}.garden-status{top:158px}.upload-drawer{top:160px}}@media(max-width:820px){.garden-header{gap:9px;padding:9px}.brand-lockup{gap:9px}.brand-lockup img{width:34px;height:39px}.brand-title{font-size:17px}.event-label{font-size:10px}.header-upload{display:none}.class-tab{height:46px;font-size:13px;border-radius:11px;padding:0 2px}.class-tab small{font-size:10px}.garden-status{top:139px;max-width:calc(100vw - 24px);width:max-content;font-size:12px}.upload-drawer{top:auto}.app--viewer .garden-hint{left:50%;transform:translate(-50%);max-width:calc(100vw - 28px)}.empty-garden{left:14px;width:min(420px,calc(100vw - 28px))}.app--viewer .empty-garden{bottom:78px}}@media(max-width:520px){.garden-header{padding:8px;gap:8px 4px}.brand-lockup{gap:6px}.brand-lockup img{width:29px;height:34px}.brand-title{font-size:14px;letter-spacing:-.03em}.event-label{font-size:9px}.header-actions{gap:2px}.header-actions .icon-button{width:31px;height:34px}.header-actions .connection-badge{position:absolute;top:calc(100% + 9px);right:3px;padding:7px 10px;background:#ffffffe0;border-radius:12px;box-shadow:0 5px 16px #183a231a}.class-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.class-tab{flex-direction:row;align-items:center;height:35px;gap:5px;font-size:13px}.class-tab small{font-size:9px}.garden-status{top:192px}.welcome-card{width:calc(100vw - 24px);padding:21px 16px}.welcome-brand{font-size:11px}.welcome-card h1{font-size:clamp(26px,7.5vw,37px)}.welcome-leaf{margin-top:8px}.welcome-event{font-size:11px;margin-bottom:7px}.welcome-class{min-height:70px;gap:6px}.welcome-class strong{font-size:18px}.welcome-class span{font-size:11px}.welcome-status{gap:12px;margin-top:17px;font-size:10px}.welcome-status .connection-badge{font-size:10px}.field-label{flex-wrap:wrap;gap:2px}}@media(max-height:620px){.welcome-layer{place-items:start center;padding-top:14px;padding-bottom:14px}.welcome-card{margin:0}.welcome-student{display:none}.help-dialog{padding-top:25px;padding-bottom:22px}}.staff-locked{width:min(510px,calc(100vw - 32px))}.staff-login-form{width:min(330px,100%);margin:0 auto;text-align:left}.staff-login-form .text-input{font-size:16px}.staff-login-form .welcome-enter{width:100%;margin-top:16px}.staff-login-form .form-error{margin-bottom:0}.garden-hint-copy{display:grid;gap:3px}.garden-hint-copy>span{font-size:11px;color:#5d755d}.garden-hint button{min-height:38px;padding:7px 10px;margin-left:3px;border:1px solid #c4d6c1;border-radius:11px;background:#f4faf1;color:#335e3c;font-size:12px;font-weight:800;cursor:pointer}.garden-hint button:hover{background:#fff}.delete-dialog{width:min(480px,100%)}.delete-dialog h2{margin-bottom:18px}.delete-preview{height:min(245px,31svh)}.delete-butterfly-name{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 10px}.delete-butterfly-name strong{min-width:0;overflow-wrap:anywhere;font-size:19px}.delete-butterfly-name>span{flex-shrink:0;border-radius:9px;padding:5px 10px;background:#edf6ea;font-size:12px;font-weight:750}.delete-dialog .help-intro{font-size:13px;margin-bottom:17px}.delete-actions{display:grid;grid-template-columns:1fr 1.65fr;gap:10px}.secondary-button,.danger-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 14px;border-radius:14px;font-size:14px;font-weight:800;cursor:pointer}.secondary-button{border:1px solid #d0dccd;background:#f7faf4;color:#4b694a}.danger-button{border:1px solid #a64231;background:#b94735;color:#fff}.secondary-button:hover:not(:disabled){background:#ebf4e7}.danger-button:hover:not(:disabled){background:#a43c2c}.secondary-button:disabled,.danger-button:disabled{opacity:.65;cursor:wait}.butterfly-picker{width:min(590px,100%);max-height:calc(100svh - 40px);display:flex;flex-direction:column}.butterfly-picker h2{font-size:25px}.butterfly-picker .help-intro{font-size:13px;flex-shrink:0;margin-top:8px;margin-bottom:16px}.butterfly-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:0;padding:4px;margin:-4px;overflow-y:auto;overscroll-behavior:contain}.butterfly-picker-item{min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px;border:1px solid #d4dfd1;border-radius:16px;background:#f7fbf4;cursor:pointer}.butterfly-picker-item:hover{border-color:#e58c77;background:#fff8f3}.butterfly-picker-item img{display:block;width:100%;height:93px;object-fit:contain}.butterfly-picker-item strong{width:100%;overflow-wrap:anywhere;font-size:12px;text-align:center}.butterfly-picker-item small{color:#788976;font-size:10px}.picker-empty{padding:32px 0;text-align:center;color:#687f66}@media(max-width:820px){.app--staff .garden-hint{display:grid;grid-template-columns:18px 1fr;gap:6px;padding:10px 11px;white-space:normal;max-width:calc(100vw - 167px)}.app--staff .garden-hint button{grid-column:1 / -1;margin-left:0;min-height:36px}.app--staff .garden-hint-copy{font-size:11px;white-space:nowrap}.app--staff .garden-hint-copy>span{font-size:10px}.app--staff .empty-garden{bottom:132px}}@media(max-width:520px){.app--staff .brand-copy{overflow:hidden}.app--staff .brand-title,.app--staff .event-label{overflow:hidden;text-overflow:ellipsis}.butterfly-picker{padding:25px 17px 20px}.butterfly-picker h2{font-size:21px}.butterfly-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:380px){.app--staff .brand-lockup img{display:none}.app--staff .garden-hint{padding:9px 8px;gap:4px}}