body{padding-bottom:78px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--ln);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{border:0;background:none;padding:10px 4px 9px;font-weight:700;color:var(--mu);cursor:pointer;display:grid;gap:2px;justify-items:center;font-size:12px}
.tabbar button svg{width:22px;height:22px}
.tabbar button.on{color:var(--forest)}.tabbar button.on svg{color:var(--leaf)}
.tabbar button.on:before{content:"";position:absolute;margin-top:-10px;width:34px;height:4px;border-radius:0 0 4px 4px;background:var(--gold)}
.online{display:flex;align-items:center;gap:12px;background:#fff;border-radius:20px;padding:12px 16px;box-shadow:0 2px 0 var(--ln);margin-bottom:14px}
.sw{position:relative;width:58px;height:32px;border-radius:99px;background:var(--ln);border:0;cursor:pointer;transition:background .25s;flex:none}
.sw:after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .25s var(--pop);box-shadow:0 2px 5px rgba(0,0,0,.25)}
.sw.on{background:var(--leaf)}.sw.on:after{transform:translateX(26px)}
.job{background:#fff;border-radius:22px;padding:16px;display:grid;gap:10px;box-shadow:0 2px 0 var(--ln);animation:rise .4s var(--ease) both;border-left:6px solid var(--gold)}
.job.mine{border-left-color:var(--leaf)}
.job .big{font-size:22px}
.codein{font:800 28px var(--fd);letter-spacing:.3em;text-align:center}
.assist{background:var(--forest);color:#fff;border-radius:22px;padding:16px;display:grid;gap:8px}
.assist h3{color:var(--gold)}.assist p{margin:0;color:#cfe8df}
.assist .chip{background:rgba(255,255,255,.14);color:#fff}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--mu);margin:8px 0}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.h-a{background:#F5A623}.h-b{background:#0B7A63}